@charset "utf-8";
/*1.共通設定
======================================*/
:root {
  --primary-color: #474747;
  --primary-font-family: "Shippori Mincho", "YuMincho", "Yu Mincho", serif;
  --font-family-en: "Cinzel", serif;
  --font-family-jp: "Shippori Mincho", serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --color01: #b29e66;
  --color02: #92a1b1;
  --color03: #20303f;
  --font-letter01: 0.15em;
  --lead-line-height: 2.4;
  --catch-line-height: 1.8;
  --normal-line-height: 1.6;
  --ttl-line-height: 1.4;
  --cont_inline-m: 50px;
  --cont_inline-ml: 100px;
  --cont_inline-l: 150px;
  --cont_inline-ll: 200px;
  --cont_block-m: 50px;
  --cont_block-ml: 100px;
  --cont_block-l: 150px;
  --cont_block-ll: 200px;
}
@media screen and (max-width: 1200px) {
  :root {
    --cont_inline-m: 30px;
    --cont_inline-ml: 60px;
    --cont_inline-l: 90px;
    --cont_inline-ll: 120px;
    --cont_block-m: 30px;
    --cont_block-ml: 60px;
    --cont_block-l: 90px;
    --cont_block-ll: 120px;
  }
}
@media screen and (max-width: 960px) {
  :root {
    --cont_inline-m: 30px;
    --cont_inline-ml: 30px;
    --cont_inline-l: 30px;
    --cont_inline-ll: 30px;
  }
}
@media screen and (max-width: 769px) {
  :root {
    --cont_inline-m: 20px;
    --cont_inline-ml: 20px;
    --cont_inline-l: 20px;
    --cont_inline-ll: 20px;
    --cont_block-m: 25px;
    --cont_block-ml: 40px;
    --cont_block-l: 55px;
    --cont_block-ll: 70px;
  }
}


html {
  font-size: 62.5%;
}
body {
  position: relative;
  background: url(../images/ajisai_pc_bg.jpg) no-repeat center 0;
  background-attachment: fixed;
  background-size: cover;
}
@media screen and (max-width: 780px) {
  body {
    background: url(../images/ajisai_sp_bg.jpg) no-repeat center 0;
    background-attachment: fixed;
    background-size: cover;
  }
}
img {
  border: 0;
  vertical-align: bottom;
}
a {
  color: var( --color03 );
}
@media screen and (max-width: 780px) {
  img {
    max-width: 100%;
    height: auto;
  }
  a:hover > img {
    opacity: 1;
  }
}
b, strong {
  font-weight: var( --font-weight-bold );
}

/*2.レイアウト
======================================*/
/* ====================================
Layout
====================================== */
/* CSS animation */
.-fadein {
  opacity: 0;  
}
.-translete {
  opacity: 0;  
  transform : translate(0, -20px);
}
.-blur {
  opacity: 0;  
}
.fv-fadein {  
  opacity: 0;
  animation: fadeIn 0.8s ease-in-out 1.5s forwards;
}
.fv-translete {  
  opacity: 0;
  animation: translete 0.8s ease-in-out 1.5s forwards;
}
.fv-blur {  
  opacity: 0;
  animation: blur 0.8s ease-in-out 1.5s forwards;
}
.js-effect__fade {
  animation: fadeIn 1s ease-in-out 0.5s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes translete {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform : translate(0, 0);
  }
}
@keyframes blur {
  0% {
    opacity: 0;
    -ms-filter: blur(6px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    -ms-filter: blur(0);
    filter: blur(0);
  }
}

/*Layout*/
#l-wrapper {
  width: 100%;
  height: 100dvh;
  position: relative;
}


/* ====================================
Component
====================================== */
.l-cont {
  position: absolute;
  top: 10vw;
  left: 10vw;
}
@media screen and (max-width: 780px) {
  .l-cont {
    width: 75%;
    max-width: 350px;
    top: 30vw;
    left: 5vw;
  }
}

.spimg {
  display: none;
}
@media screen and (max-width: 780px) {
  .spimg {
    display: block;
  }
  .pcimg {
    display: none;
  }
}