@charset "UTF-8";
/* CSS Document */

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#dfd9d1;
  text-align:center;
  color:#fff;
  top: 0;
  left: 0;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
main {
  margin-top: 120px;
}
 body {
   background-image: url("../image/top/pc/AdobeStock_206528445.jpeg");
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.section-top {
  background-image: url("../image/top/pc/TOP＿Image.png");
  background-position: center;
  background-size: cover;
  height: 450px;
  width: 100%;
  position: relative;
}
.top-wrapper {
  position: absolute;
  bottom: -100px;
  left: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 210px;
  height: 210px;
}
.button__animation {
  width: 100%;
  height: 100%;
}
.section-top__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  animation: rotation 6s linear infinite;
  z-index: 5;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.section-top a {
  font-family: "Montserrat";
  font-size: 2.4rem;
  color: #ffffff;
  margin: 0 auto;
  font-weight: 500;
  position: absolute;
  z-index: 10;
  text-decoration: none;
}
@media (max-width:1100px) {
  main {
    margin-top: 80px;
  }
}
@media (max-width:480px) {
  .section-top {
    background-image: url("../image/top/mobile/TOP＿Image_mobile.png");
    background-position: center;
    background-size: cover;
    height: 620px;
    width: 100%;
    position: relative;
  }
  .top-wrapper {
    position: absolute;
    bottom: -70px;
    right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 145px;
    height: 145px;
  }
  .button__animation {
    width: 100%;
    height: 100%;
  }
  .section-top__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    animation: rotation 6s linear infinite;
    z-index: 5;
  }
  .section-top a {
  font-family: "Montserrat";
  font-size: 1.8rem;
  color: #ffffff;
  margin: 0 auto;
  font-weight: 500;
  position: absolute;
  z-index: 10;
  text-decoration: none;
}
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.section-concept {
  padding-top: 270px;
}
.section-concept__area {
     position: relative;
    width: 100%;
    max-width: 1010px;
    height: 500px;
    margin: 0 auto;
}
/*
.wrapper {
  overflow: hidden;
}
*/
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.fadeUpTrigger{
opacity: 0;
}
.section-concept__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 575px;
  height: 425px;
  background-color: #f2efec;
  z-index: 3;
  box-shadow: 1px 1px 25px -15px #534e4b;
}
.section-concept__p1 {
  font-size: 2.0rem;
  padding-top: 125px;
}
.section-concept__p1 span {
  font-size: 3.0rem;
}
.section-concept__p2 {
 font-size: 1.6rem;
    padding-top: 50px;
    width: 68%;
    margin: 0 auto;
}
.section-concept h2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #b8aea7;
  font-size: 6.0rem;
  font-weight: 100;
  z-index: 4;
}
.section-top__asirai {
width: 180px;
    height: 180px;
    position: absolute;
    top: -46px;
    right: -14px;
    z-index: 4;
}
.section-concept__image {
  z-index: 3;
    position: absolute;
    bottom: 0;
    left: 0;
}
.section-concept__button {
    display: block;
    color: #727077;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: solid 1px #727077;
    text-decoration: none;
    width: 160px;
    bottom: -70px;
    font-size: 1.2rem;
}
.section-concept__button::after {
      position: absolute;
    bottom: 0px;
    left: 149px;
    display: block;
    content: "";
    height: 15px;
    border-bottom: solid 1px #727077;
    border-right: solid 1px #727077;
    transform: skew(50deg);
}
@media (max-width:960px) {
  .section-concept {
        padding: 90px 0 55px 0;
    background-image: url(../image/top/mobile/dryflower_mobile.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 165px;
    position: relative;
    width: 100%;
    height: 275px;
  }
  .section-concept__area {
    position: relative;
  }
  .section-concept__bg {
    position: absolute;
    width: 85%;
    height: 270px;
    background-color: #f2efec;
    right: 0;
    z-index: 3;
  }
  .section-concept__p1 {
    font-size: 1.4rem;
    padding-top: 50px;
  }
  .section-concept__p1 span {
    font-size: 2.0rem;
  }
  .section-concept__p2 {
  font-size: 1.2rem;
    padding-top: 20px;
    width: 85%;
    line-height: 2.5rem;
    margin: 0 auto;
  }
  .section-concept h2 {
     position: absolute;
    top: -45px;
    right: 100px;
    color: #fffefe;
    opacity: 80%;
    font-size: 3.8rem;
    font-weight: 100;
    z-index: 4;
    /* margin: -50px 142px; */
    letter-spacing: 0.5rem;
  }
  .section-top__asirai {
   display: none;
  }
  .section-concept__image {
    display: none;
  }
  .section-concept__button {
       display: block;
    color: #727077;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: solid 1px #727077;
    text-decoration: none;
    width: 135px;
    bottom: -50px;
  font-size: 1.2rem;
  }
  .section-concept__button::after {
   position: absolute;
    bottom: 0px;
    left: 127px;
    display: block;
    content: "";
    height: 10px;
    border-bottom: solid 1px #727077;
    border-right: solid 1px #727077;
    transform: skew(50deg);
  }
}
.section-menu {
  padding-top: 200px;
}
.section-menu__area {
  position: relative;
    width: 100%;
    max-width: 1010px;
    height: 500px;
    margin: 0 auto;
}
.section-menu__bg {
  position: absolute;
    top: 0;
    left: 0;
    width: 575px;
    height: 425px;
    background-color: #e5dbd2;
    z-index: 3;
    box-shadow: 1px 1px 25px -15px #534e4b;
}
.section-menu__p1 {
  font-size: 2.0rem;
  padding-top: 80px;
}
.section-menu__p1 span {
  font-size: 3.0rem;
}
.section-menu__p2 {
 font-size: 1.6rem;
    padding-top: 50px;
    width: 71%;
    margin: 0 auto
}
.section-menu h2 {
position: absolute;
    left: 355px;
    top: -14px;
    /* margin: -8px 0 0 600px; */
    color: #b8aea7;
    font-size: 6.0rem;
    font-weight: 100;
    z-index: 4;
    letter-spacing: 2rem;
}
.section-menu__asirai {
 width: 180px;
    height: 180px;
    position: absolute;
    top: -41px;
    left: -14px;
    /* margin: -470px 0 0 -125px; */
    z-index: 4;
}
.section-menu__image {
      z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
}
.section-menu__button {
  display: block;
  color: #727077;
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: solid 1px #727077;
  text-decoration: none;
  width: 160px;
  bottom: -70px;
  font-size: 1.2rem;
}
.section-menu__button::after {
 position: absolute;
    bottom: 0px;
    left: 149px;
    display: block;
    content: "";
    height: 15px;
    border-bottom: solid 1px #727077;
    border-right: solid 1px #727077;
    transform: skew(50deg);
}
@media (max-width:960px) {
  .section-menu {
   padding: 90px 0 55px 0;
    background-image: url(../image/top/mobile/dryflower_mobile.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 100px;
     width: 100%;
    height: 275px;
}
.section-menu__area {
  position: relative;
  width: 100%;
}
.section-menu__bg {
  position: relative;
  width: 85%;
  height: 270px;
  background-color: #e5dbd2;
  left: 0;
  z-index: 3;
  margin: 0 0 0 0;
}
.section-menu__p1 {
  font-size: 1.4rem;
  padding-top: 30px;
}
.section-menu__p1 span {
  font-size: 2.0rem;
}
.section-menu__p2 {
font-size: 1.2rem;
    padding-top: 20px;
    line-height: 2.5rem;
    width: 75%;
    text-align: center;
    margin: 0 0 0 24px;
}
.section-menu h2 {
 position: absolute;
    top: -60px;
    left: 0px;
    color: #fffefe;
    opacity: 80%;
    font-size: 3.8rem;
    font-weight: 100;
    z-index: 4;
    letter-spacing: 2rem;
}
.section-menu__asirai {
 display: none;
}
.section-menu__image {
 display: none;
}
.section-menu__button {
       display: block;
    color: #727077;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: solid 1px #727077;
    text-decoration: none;
    width: 135px;
    bottom: -30px;
  font-size: 1.2rem;
  }
  .section-menu__button::after {
   position: absolute;
    bottom: 0px;
    left: 127px;
    display: block;
    content: "";
    height: 10px;
    border-bottom: solid 1px #727077;
    border-right: solid 1px #727077;
    transform: skew(50deg);
  }
}
.section-instagram {
  padding-top: 100px;
}
.section-instagram h2 {
  font-size: 6.0rem;
  color: #b8aea7;
  font-weight: 100;
  padding-bottom: 14px;
  border-bottom: solid 1px #b8aea7;
  width: 525px;
  text-align: left;
  margin: 0 0 60px 11%;
  letter-spacing: 1.5rem;
}
.section-instagram__image-1, .section-instagram__image-2, .section-instagram__image-3 {
  width: 250px;
  height: 250px;
}
.section-instagram__image-4 {
  display: none;
}
.instaimage-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 5% 0 5%;
}
.section-insta__button {
display: block;
    color: #727077;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: solid 1px #727077;
    text-decoration: none;
    width: 200px;
    padding-top: 50px;
    font-size: 1.4rem;
}
.section-insta__button::after {

    position: absolute;
    bottom: 0px;
    left: 190px;
    display: block;
    content: "";
    height: 15px;
    border-bottom: solid 1px #727077;
    border-right: solid 1px #727077;
    transform: skew(50deg);
}
@media (max-width:960px) {
  .instaimage-wrapper {
  display: flex;
  flex-wrap: wrap;
}
  .section-instagram__image-1, .section-instagram__image-2, .section-instagram__image-3 {
    padding-top: 20px;
  }
  .section-instagram__image-4 {
    display: none;
  }
  .section-instagram h2 {
  font-size: 4.0rem;
  color: #b8aea7;
  font-weight: 100;
  padding-bottom: 14px;
  border-bottom: solid 1px #b8aea7;
  width: 400px;
  text-align: left;
  margin: 0 auto;
  letter-spacing: 1.5rem;
}
}
@media (max-width:480px) {
  .section-instagram {
    margin-top: 70px;
}
.section-instagram h2 {
  display: none;
}
.section-instagram__image-1, .section-instagram__image-2, .section-instagram__image-3 {
  display: none;
}
  .section-instagram__image-4 {
   margin-right: 20px;
    display: block;
  } 
.section-insta__button a {
  display: block;
  color: #727077;
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: solid 1px #727077;
  text-decoration: none;
  width: 120px;
  padding-top: 100px;
}
.section-insta__button::after {
 position: absolute;
    bottom: 0px;
    left: 190px;
    display: block;
    content: "";
    height: 14px;
    border-bottom: solid 1px #727077;
    border-right: solid 1px #727077;
    transform: skew(50deg);
}
}
.section-banner {
  padding-top: 300px;
}
.box {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.text {
  width: 100%;
  text-align: center;
}
.school {
  font-size: 3.2rem;
  letter-spacing: 1rem;
  margin-bottom: 20px;
  font-weight: 100;
  color: #b8aea7;
}
.pict {
  position: relative;
}
.pict img {
  max-width: 490px;
  height: auto;
}
.school-p1 {
  position: absolute;
  top: 30%;
  left: 15%;
  font-size: 1.6rem;
  color: #727077;
}
.school-p2 {
  position: absolute;
  top: 50%;
  left: 4%;
  font-size: 1.2rem;
  color: #727077;
}
.box {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.text {
  width: 100%;
  text-align: center;
}
.rental {
  font-size: 3.2rem;
  letter-spacing: 1rem;
  margin-bottom: 20px;
  font-weight: 100;
  color: #b8aea7;
}
.pict2 {
  position: relative;
}
.pict2 img {
  max-width: 490px;
  height: auto;
}
.rental-p {
  position: absolute;
  top: 38%;
  left: 11%;
  font-size: 1.4rem;
  color: #727077;
}
.banner-wrapper {
  display: flex;
  justify-content: space-evenly;
}
@media (max-width:960px) {
  .section-banner {
  padding-top: 100px;
}
.box {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.text {
  width: 100%;
  text-align: center;
}
.school {
  font-size: 2.8rem;
  letter-spacing: 1rem;
  margin-bottom: 20px;
  font-weight: 100;
  color: #b8aea7;
}
.pict {
  position: relative;
}
.pict img {
  max-width: 300px;
  height: auto;
}
.school-p1 {
      position: absolute;
    top: 23%;
    left: 11%;
    font-size: 1.2rem;
    color: #727077;
}
.school-p2 {
 position: absolute;
    top: 50%;
    left: 4%;
    font-size: 1.0rem;
    color: #727077;
    width: 133px;
    line-height: 1.5;
}
.rental {
  font-size: 2.8rem;
  letter-spacing: 1rem;
  margin-bottom: 20px;
  font-weight: 100;
  color: #b8aea7;
}
.pict2 {
  position: relative;
}
.pict2 img {
  max-width: 300px;
  height: auto;
}
.rental-p {
      position: absolute;
    top: 38%;
    left: 11%;
    font-size: 1.2rem;
    color: #727077;
    line-height: 1.5;
}
.banner-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
}
.section-access {
  padding-top: 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.access-wrapper {
  position: relative;
}
.section-access img {
  position: absolute;
  top: 0;
  right: 0;
}
.section-access h2 {
    font-size: 4.0rem;
    color: #b8aea7;
    letter-spacing: 1rem;
    font-weight: 100;
    margin: 30px 0 0 10%;
    width: 510px;
    position: absolute;
}
#jump {
   padding-top: 130px; /* 調整したい高さ（固定ヘッダーの高さ） */
    margin-top: -130px; /* heightと同じ分のネガティブマージン */
}
.dl-wrapper {
 margin: 143px auto;
  width: 100%;
  padding-top: 130px;
}
.section-access dl { 
 padding-top: 30px;
    text-align: left;
    display: flex;
    border-bottom: solid #b8aea7 1px;
    width: 380px;
    margin-left: 15%;
}
.section-access dt {
  font-size: 1.4rem;
  padding-bottom: 30px;
  width: 105px;
}
.section-access dd {
  margin-left: 50px;
  font-size: 1.4rem;
  width: 327px;
}
.kakko {
  font-size: 1.4rem;
}
@media (max-width:1200px) {
 .section-access {
  padding-top: 70px;
   width: 100%;
}
  .dl-wrapper {
   position: static;
    margin-top: 20px;
    max-width: 90%;
  }
/*
  .access-container {
    display: contents;
  }
*/
.section-access h2 {
     font-size: 3.0rem;
    color: #b8aea7;
    letter-spacing: 1rem;
    font-weight: 100;
    margin: 0 auto 40px;
    text-align: center;
    width: auto;
    position: static;
}
  .section-access__image {
    position: static;
  }
.section-access dl {
      text-align: left;
    font-size: 1.2rem;
   margin: 0 auto;
    padding: 10px 0 10px 0;
  border-bottom: solid #b8aea7 1px;
  width: 60%;
}
.section-access dt {
    padding-bottom: 30px;
}
.section-access dd {
  margin-left: 0px;
}
.kakko {
  font-size: 1.0rem;
} 
  .section-access img {
    max-width: 600px;
    max-height: 600px;
    margin: 0 auto;
    position: static;
  } 
}
@media screen and (max-width:960px) {
 .section-access {
  padding-top: 70px;
   width: 100%;
}
  .dl-wrapper {
   position: static;
    margin-top: 20px;
    max-width: 90%;
    padding-top: 15px;
  }
/*
  .access-container {
    display: contents;
  }
*/
.section-access h2 {
     font-size: 3.0rem;
    color: #b8aea7;
    letter-spacing: 1rem;
    font-weight: 100;
    margin: 0 auto 40px;
    text-align: center;
    width: auto;
    position: static;
}
  .section-access__image {
    position: static;
  }
.section-access dl {
      text-align: left;
    font-size: 1.2rem;
   margin: 0 auto;
    padding: 10px 0 10px 0;
  border-bottom: solid #b8aea7 1px;
 width: 90%;
}
.section-access dt {
    padding-bottom: 30px;
}
.section-access dd {
  margin-left: 0px;
}
.kakko {
  font-size: 1.0rem;
} 
  .section-access img {
    max-width: 300px;
    max-height: 300px;
    margin: 0 auto;
    position: static;
  }
}
.section-map {
width: 90%;
    height: 400px;
    margin: 0 auto;
    padding: 180px 0 160px 0;
}
.section-map iframe {
  width: 100%;
  height: 100%;
}
@media (max-width:1200px) {
  .section-map {
  width: 90%;
    height: 400px;
    margin: 0 auto;
    padding: 0px 10px 100px;
    }
}