@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

/*ビューポートをスクロールバーを含まない値に*/
:root {
	--vw: 1vw;
	--vh: 1vh;
}

p,span,a,dt,dd,h1,h2,h3 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  color: #8B6A43;
  letter-spacing: -0.03em;
}
@media (hover: hover) {
  a {
    transition: 0.3s; 
  }
  a:hover {
    opacity: 0.8;
  }
}

html {
  /*scroll-behavior: smooth*/
}
body {
  box-sizing: border-box;
  background-color: #fff;
  opacity: 0;
  transition: 0.5s;
}
body.show {
  opacity: 1;
}
img {
  width: 100%;
  max-width: 100%;
}


.switch {
  display: none;
}



p,span,a,dt,dd,h1,h2,h3 {
    font-size: 17px;
}
.pc {
  display: initial !important;
}
.sp {
  display: none !important;
}
main {
  width: 1280px;
  margin: 0 auto;
}

main {
  width: 1280px;
  margin: 0 auto;
}
/* メインビジュアル */
.main_visual {
  position: relative;
}
.main_visual__img {
  width: 100%;
}
.lineBnr {
  position: absolute;
  display: inline-block;
  width: 277px;
  top: 20px;
  right: 20px;
}


/* コンテンツ */

.sec--aboutWrap {
  padding: 80px 0 70px 0;
}
.sec_title {
  display: block;
  margin: 0  auto;
  height: 40px;
  width: auto;
}
.sec_lead {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  margin-top: 50px;
}
.sec_text {
  font-size: 24px;
  margin-top: 50px;
  text-align: center;
}

.sec--dayWrap {
  position: relative;
}
.day__content {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25%);
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.day__text {
  position: absolute;
  font-size: 22px;
  line-height: 1.5;
}
.day__text01 {
  left: 100px;
  top: -75px;
}
.day__text02 {
  right: 75px;
  top: -85px;
}
.day__text03 {
  left: 260px;
  top: 220px;
}
.day__text04 {
  right: 240px;
  top: 220px;
}
.day__content p {
  font-size: 24px;
}
.day__content img {
  margin-top: 90px;
  height: 60px;
  width: auto;
}
.sec--nightWrap {
  position: relative;
  margin: 40px 0;
}
.night__content {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-70%);
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.night__content p {
  font-size: 24px;
  color: #fff;
}
.night__content img {
  margin-top: 40px;
  height: 60px;
  width: auto;
}

.sec--productWrap {
  position: relative;
}
.product__content {
  position: absolute;
  width: 100%;
  top: 14%;
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.product__content p {
  font-size: 24px;
}
.product__content img {
  margin-top: 520px;
  height: 88px;
  width: auto;
}

.sec--lineWrap {
  position: relative;
}
.line__content {
  position: absolute;
  width: 100%;
  top: 14%;
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.line__content p {
  font-size: 24px;
  color: #fff;
}
.line__content img {
  margin-top: 330px;
  height: 88px;
  width: auto;
}
.line__content .line__notice {
  font-size: 15px;
  color: #fff;
  text-align: left;
  margin-top: 30px;
}

/*** フッター ***/
footer {
  margin-top: 0;
  background-color: #A07A5E;
  padding: 30px 0;
  text-align: center;
  width: 1280px;
  margin: 0 auto;
}
footer img {
  width: 266px;
}


@media screen and ( max-width : 799px ) {
  .pc {
    display: none !important;
  }
  .sp {
    display: initial !important;
  }

  p,span,a,dt,dd,h1,h2,h3 {
    font-size: calc(var(--vw) * 3.38);
  }

  main {
    width: 100%;
    margin: 0 auto;
  }

  .lineBnr {
    width: calc(var(--vw) * 29.375);
    top: calc(var(--vw) * 3.125);
    right: calc(var(--vw) * 1.875);
  }
  /* コンテンツ */

  .sec--aboutWrap {
    padding: calc(var(--vw) * 7.5) 0;
  }
  .sec_title {
    height: calc(var(--vw) * 5);
  }
  .sec_lead {
    font-size: calc(var(--vw) * 4);
    margin-top: calc(var(--vw) * 5);
  }
  .sec_text {
    font-size: calc(var(--vw) * 3);
    margin-top: calc(var(--vw) * 4.375);
  }


  .day__content {
    transform: translateY(0);
    top: 6.5%;
  }
  .day__content img {
    margin-top: calc(var(--vw) * 2);
    height: calc(var(--vw) * 8.25);
  }
  .day__text01 {
    left: calc(var(--vw) * 18);
    top: calc(var(--vw) * 42);
  }
  .day__text02 {
    right: calc(var(--vw) * 14);
    top: calc(var(--vw) * 83);
  }
  .day__text03 {
    left: calc(var(--vw) * 39);
    top: calc(var(--vw) * 124);
  }
  .day__text04 {
    right: calc(var(--vw) * 37);
    top: calc(var(--vw) * 162);
  }
  .day__content p {
    font-size: calc(var(--vw) * 3.125);
  }

  .sec--nightWrap {
    margin: calc(var(--vw) * 5) 0;
  }
  .night__content {
    transform: translateY(-60%);
  }
  .night__content p {
    font-size: calc(var(--vw) * 3.25);
  }
  .night__content img {
    margin-top: calc(var(--vw) * 3.5);
    height: calc(var(--vw) * 8.25);
  }

  .product__content p {
    font-size: calc(var(--vw) * 3.25);
  }
  .product__content img {
    margin-top: calc(var(--vw) * 56);
    height: calc(var(--vw) * 10.625);
  }

  .line__content {
    top: calc(var(--vw) * 15);
  }
  .line__content p {
    font-size: calc(var(--vw) * 3.25);
  }
  .line__content img {
    height: calc(var(--vw) * 10.25);
    margin-top: calc(var(--vw) * 36);
  }
  .line__content .line__notice {
    font-size: calc(var(--vw) * 1.875);
    margin-top: calc(var(--vw) * 3.15);
  }

  /*** フッター ***/
  footer {
    width: 100%;
    padding: calc(var(--vw) * 2.75) 0;
  }
  footer img {
    width: calc(var(--vw) * 42.25);
  }

}








@keyframes fadein {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

/*--- pc ---*/
@media screen and ( min-width : 800px ) {
  
}