@charset "UTF-8";

/* 初期設定 -------------------------------------------------------------*/
.area {
  overflow: hidden;
}
.wrap {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  top: 0;
  left: -300%;
}

.item {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}

/* 共通 -------------------------------------------------------------*/
* {
  color: #232423;
  font-family: "BIZ UDGothic", sans-serif;
  line-height: 1.5rem;
  letter-spacing: 0.2rem;
  scroll-behavior: smooth;
}

img {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}
ul {
  list-style: none;
}

/* マウスストーカー ----------------------------------------------------*/
.star {
  position: fixed;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  background: url("../img/shiso.png") 50% 50% no-repeat;
  background-size: contain;
  z-index: 2;
  animation: star 2s ease-in-out infinite;
  transform-origin: top left;
}

@keyframes star {
  0% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translateY(300px) rotate(-720deg);
    opacity: 0;
  }
}

/*＝＝＝【向井プラス】 ローディングページ＝＝＝ */
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fefefe;
}

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

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 150px;
}
#splash_logo p {
  text-align: center;
  font-size: 0.9rem;
}

/* 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);
  }
}
/* 【向井プラス】item01 -------------------------------------------------------------*/
.item01 {
  display: flex;
  position: relative;
}

.item01-center-back {
  width: 30%;
  height: 100%;
  background: #fefefe;
  margin: 0 auto;
  position: relative;
}

.item01-center-back h1 {
  writing-mode: vertical-rl;
  font-size: 2.2rem;
  letter-spacing: 15px;
  font-family: "Kaisei Opti", serif;
  margin: 0 auto;
  padding-top: 50px;
  color: #558c6d;
}

.item01-logo-face {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.item01-logo-face img {
  width: 20%;
  height: auto;
  margin: 0 auto;
}
.jp_slide_img_wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../img/top-background.jpg");
  background-repeat: repeat-x;
  background-size: contain;
  background-position: 0 0;
  animation-name: slide_img;
  animation-duration: 200s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@media (max-width: 842px) {
  .jp_slide_img_wrapper {
    background-size: cover;
  }
}

@keyframes slide_img {
  100% {
    background-position: -10000px 0;
  }
}
.pagemenu {
  padding-top: 10%;
  width: 95px;
  margin: 0 auto;
  height: 130px;
}
.pagemenu ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 130px;
}

.pagemenu li {
  font-size: 0.7rem;
  writing-mode: vertical-rl;
  letter-spacing: normal;
  height: 130px;
  text-align: start;
  transition: 0.2;
}
.rorate li span {
  display: inline-block;
  transform: rotate(-90deg);
  font-family: "Noto Serif JP", serif;
  color: #626562;
}
.sns {
  width: 80px;
  margin: 30px auto 0;
}
.sns ul {
  display: flex;
  justify-content: space-between;
}

.sns img {
  width: 30px;
  height: 30px;
}

#page-link li:hover {
  opacity: 0.5;
}

/* ページトップボタンCSS */
#page-top a {
  width: 80px;
  height: 80px;
  background: url(../img/page-top.gif) no-repeat center/60%;
  background-color: #fdfdfd;
  border-radius: 50%;
  position: fixed;
  right: -100px;
  bottom: 10px;
  transition: transform 1s linear;
}

#page-top a:hover {
  opacity: 0.5;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateX(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

/* item02 -------------------------------------------------------------*/

.item02 {
  background: #bce1df;
  position: relative;
}

.item02 h2 {
  font-size: 2.5rem;
  position: absolute;
  top: 65px;
  right: 6%;
  color: white;
  /*  font-family: "Noto Serif JP", serif; */
  z-index: -1;
}

@media screen and (max-width: 1200px) {
  .item02 h2 {
    font-size: 1.5rem;
    right: 2%;
  }
}

.item02-text-box {
  width: 740px;
  font-size: 0.8rem;
  writing-mode: vertical-rl;
  margin: -25px auto 10px;
}

.item02-border {
  width: 1px;
  height: 100%;
  background: #c7bfbf;
}

.item02-text-box p {
  margin: 0 25px;
  font-family: "Noto Serif JP", serif;
  color: #474947;
}

.item02-text-box::before {
  content: "";
  display: block;
  position: absolute;
  width: 40%;
  height: 60%;
  background-color: #ffffff;
  border-radius: 50%;
  bottom: -30%;
  left: 30%;
}

.item02-text-box::after {
  content: "";
  display: block;
  position: absolute;
  left: 1%;
  background-image: url(../img/story-anime.gif);
  background-position: center;
  background-size: contain;
  width: 98%;
  height: 27%;
  bottom: 0px;
}

.item02 span {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: 1.4rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  top: -400px;
}

@media screen and (max-width: 1200px) {
  .item02 span {
    font-size: 1.2rem;
  }
}

.item02 span:nth-of-type(1) {
  left: 7%;
  animation: ame 9s infinite linear;
}

.item02 span:nth-of-type(2) {
  left: 14%;
  animation: ame 9s 3s infinite linear;
}

.item02 span:nth-of-type(3) {
  right: 14%;
  animation: ame 9s 1.5s infinite linear;
}

.item02 span:nth-of-type(4) {
  right: 7%;
  animation: ame 9s 4.5s infinite linear;
}

.item02 span:nth-of-type(5) {
  left: 11%;
  animation: ame 9s 6s infinite linear;
}

.item02 span:nth-of-type(6) {
  right: 11%;
  animation: ame 9s 7.5s infinite linear;
}

@keyframes ame {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(1200px);
  }
}

.item02 .amatsubu img {
  width: 100%;
  height: auto;
}

.item02 .amatsubu {
  position: absolute;
  top: -100px;
}

.item02 .amatsubu.ama1 {
  left: 4%;
  width: 20px;
  animation: amatsubu 7s infinite linear;
}

.item02 .amatsubu.ama2 {
  left: 10%;
  width: 30px;
  animation: amatsubu 7s 3s infinite linear;
}

.item02 .amatsubu.ama3 {
  left: 17%;
  width: 40px;
  animation: amatsubu 7s 6s infinite linear;
}

.item02 .amatsubu.ama4 {
  right: 4%;
  width: 20px;
  animation: amatsubu 7s 1.5s infinite linear;
}

.item02 .amatsubu.ama5 {
  right: 10%;
  width: 30px;
  animation: amatsubu 7s 4.5s infinite linear;
}

.item02 .amatsubu.ama6 {
  right: 17%;
  width: 40px;
  animation: amatsubu 7s 7.5s infinite linear;
}

@keyframes amatsubu {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(1200px);
  }
}
.sp-br {
  display: none;
}
.pc-br {
  display: block;
}
@media screen and (max-width: 1024px) {
  .sp-br {
    display: block;
  }
  .pc-br {
    display: none;
  }
  .item02 {
    z-index: -3;
  }

  .item02 h2 {
    right: initial;
    font-size: 4.5rem;
    z-index: 0;
    width: 100%;
    text-align: center;
    margin-top: 33px;
  }

  .item02-text-box {
    width: 95%;
    font-size: 0.8rem;
    writing-mode: initial;
    margin: 0px auto;
    padding: 200px 0px;
  }

  .item02-border {
    display: none;
  }

  .item02-text-box p {
    margin: 50px 25px 0px;
    position: relative;
    z-index: 2;
    line-height: 2.5rem;
  }

  .item02-text-box::before {
    content: "";
    display: block;
    position: absolute;
    width: 600px;
    height: 600px;
    top: 528px;
    right: -300px;
    bottom: initial;
    left: initial;
    opacity: 0.9;
  }

  .item02-text-box::after {
    width: 300px;
    top: 731px;
    right: -25px;
    bottom: initial;
    left: initial;
    opacity: 0.7;
    height: 200px;
  }

  .item02 span {
    opacity: 0.3;
    z-index: -2;
  }

  .item02 .amatsubu img {
    opacity: 0.8;
    z-index: -2;
  }

  @keyframes ame {
    0% {
      transform: translateY(0px);
      opacity: 1;
    }

    100% {
      transform: translateY(1500px);
      opacity: 0;
    }
  }

  @keyframes amatsubu {
    0% {
      transform: translateY(0px);
      opacity: 1;
    }

    100% {
      transform: translateY(1500px);
      opacity: 0;
    }
  }
}

/* item03 -------------------------------------------------------------*/

.item03 {
  position: relative;
  overflow: hidden;
  font-size: 2rem;
  background: #b4deb4;
}

/* circle1 */

.circle1 {
  position: absolute;
  width: 610px;
  height: 610px;
  border-radius: 50%;
  background: #fff;
  top: -140px;
  left: -300px;
}

.circle1 h2 {
  font-size: 50px;
  color: #bbe8bb;
  margin-top: 35%;
  margin-left: 54%;
}

.circle1 ul {
  list-style-type: none;
  margin-top: 7%;
  margin-left: 53%;
}

.circle1 li {
  border-radius: 10px;
  float: left;
  width: calc(50% - 5px);
  margin-bottom: 3%;
  padding-left: 2%;
  font-size: 10px;
}

.circle1 .title {
  background: #597859;
  color: white;
  width: 42%;
}

.circle1 .siso {
  position: absolute;
  width: 25%;
  height: 25%;
  top: 30%;
  left: 20%;
  transition: 1s;
  z-index: -1;
}

.circle1:hover .siso {
  left: 95%;
  transform: rotate(15deg);
}

/* circle2 */

.circle2 {
  position: absolute;
  width: 630px;
  height: 630px;
  border-radius: 50%;
  background: #fff;
  bottom: -252px;
}

/* .circle2 .yotei-main {
  display: flex;
  margin: 72px auto 7px;
  width: 60%;
  font-size: 10px;
  justify-content: space-between;
} */

/* 並べるとき用
.yotei-main {
  display: flex;
  justify-content: space-between;
  margin: 72px auto 7px;
  width: 60%;
  font-size: 10px;
  gap: 20px;
}

.yotei-news-text1 {
  width: 48%;
} ここまで*/

.yotei-main {
  margin: 72px auto 7px;
  width: 60%;
  text-align: center;
  font-size: 10px;
}

.yotei-news-text1 {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
/* ↑1個用 */

.circle2 .main-text {
  font-size: 10px;
  border: 1px solid #232423;
  padding: 5px 5px 5px 13px;
  border-radius: 10px;
  width: 70%;
}
.circle2 .main-img {
  width: 150px;
  height: auto;
  margin: 0 auto;
}

.circle2-flex {
  display: flex;
  width: 65%;
  margin: 0 auto;
}

.text-yotei {
  position: absolute;
  color: #fff;
  writing-mode: vertical-rl;
  font-size: 2rem;
  top: -34%;
  right: 50%;
}

.text-yotei::before {
  content: "";
  display: block;
  width: 1px;
  height: 90%;
  background: white;
  position: absolute;
  transform: rotate(-19deg);
  top: 18px;
  left: -47px;
}

.text-yotei::after {
  content: "";
  display: block;
  width: 1px;
  height: 90%;
  background: white;
  position: absolute;
  transform: rotate(19deg);
  top: 18px;
  right: -47px;
}

.yotei-news-title {
  border-radius: 10px;
  background: #783760;
  width: 50%;
  text-align: center;
  font-size: 12px;
  color: white;
}

.yotei-news-title a {
  color: white;
}

.yotei-news-title p {
  transition: 0.2s;
  color: white;
}

.yotei-news-title p:hover {
  opacity: 0.5;
}

.yotei-news-title p {
  color: #fff;
}

.rotate {
  position: absolute;
  width: 734px;
  top: -51px;
  left: -49px;
  z-index: -1;
}

.rotate img {
  animation: rotate-anime 15s linear infinite;
}

@keyframes rotate-anime {
  100% {
    transform: rotate(-360deg);
  }
  0% {
    transform: rotate(0deg);
  }
}

/* circle3 */

.circle3 {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #fff;
  top: 20px;
  right: -180px;
}

.circle3 .text2 {
  position: absolute;
  color: #fff;
  font-size: 4.5rem;
  top: 35px;
  left: -94px;
}

.circle3 .text2::after {
  content: "";
  display: block;
  width: 150%;
  height: 3px;
  background: white;
  position: absolute;
  top: 170%;
  left: -23%;
}

.circle3 .news {
  font-size: 0.8rem;
  border-bottom: 1px solid #707070;
  margin-top: 18%;
  margin-left: 20%;
}

.circle3 .news-img {
  width: 30%;
  font-size: 0.8rem;
  margin: 5% 0 5px 20%;
}

.circle3 .news-text {
  width: 36%;
  margin-left: 15%;
  font-size: 10px;
}

.news-title {
  border-radius: 10px;
  background: #597859;
  text-align: center;
  width: 80%;
}

.news-title p a {
  color: #fff;
  font-size: 12px;
}

@media (max-width: 1024px) {
  .item03 {
    display: block;
    width: 100%;
    height: 2000px;
    z-index: 2;
  }

  /* circle3 */
  .circle3 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: #fff;

    top: 50px;
    right: -280px;
  }
  .circle3 .text2 {
    font-size: 4rem;
    top: 35px;
    left: -50px;
  }

  /* circle2 */
  .circle2 {
    position: absolute;
    width: 550px;
    height: 550px;
    left: 50%;
    transform: translateX(-60%);
    top: 820px;
  }
  .text-yotei {
    top: -40%;
    left: 50%;
  }
  .text-yotei::before {
    left: -60px;
    transform: rotate(-19deg);
  }

  .text-yotei::after {
    right: -40px;
  }

  .yotei-main {
    margin-top: 100px;
  }
  .yotei-news-title {
    width: 70%;

    margin-left: 30px;
  }

  .rotate {
    position: absolute;
    width: 670px;
    top: -50px;
    left: -60px;
    z-index: -1;
  }

  /* circle1 */
  .circle1 {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: #fff;
    right: -230px;
    left: auto;
    top: 1420px;
  }
  .circle1 h2 {
    margin-left: 40px;
  }

  .circle1 ul {
    margin-left: 40px;
  }
  .circle1 .title {
    background: #597859;
    color: white;
    width: 30%;
  }
  .circle1 h2 {
    margin-top: 25%;
    margin-left: 70px;
  }

  .circle1 ul {
    margin-top: 5%;
    margin-left: 70px;
  }
  .circle1 .siso {
    position: absolute;
    width: 120px;
    height: auto;
    top: auto;
    bottom: 150px;
    left: 50px;
    z-index: -1;
    animation: sisonyan-hello 1.5s ease-in-out infinite alternate;
  }
  @keyframes sisonyan-hello {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(-100px, 150px);
    }
  }
}

/* item04 -------------------------------------------------------------*/

.item04 {
  position: relative;
}

.line {
  background-color: #98ccb6;
  width: 100%;
  height: 45px;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line h2 {
  color: #fff;
  font-size: 2.5rem;
}

.under-line {
  background-color: #98ccb6;
  width: 100%;
  height: 45px;
  position: absolute;
  bottom: 0;
}

.price a {
  background-color: brown;
  color: #fff;
  border-radius: 10px;
  padding: 0px 12px;
  font-size: 0.7rem;
}

.goods-box-a p,
.goods-box-b p,
.goods-box-c p,
.goods-box-d p,
.goods-box-e p {
  font-size: 10px;
  font-weight: 300;
}
.goods-a,
.goods-b,
.goods-c,
.goods-d,
.goods-e {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  gap: 7px;
}
.goods-a h3,
.goods-b h3,
.goods-c h3,
.goods-d h3,
.goods-e h3 {
  font-size: 1.2rem;
  line-height: 2rem;
}

.price {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.price p {
  margin-right: 15px;
  font-size: 1rem;
  font-weight: 600;
}

/* 場所指定 */
.goods-box-a,
.goods-box-b,
.goods-box-c,
.goods-box-d,
.goods-box-e {
  position: absolute;
}

.goods-box-a {
  top: 9%;
  left: 4%;
  width: 42%;
  height: 33%;
  display: flex;
  align-items: center;
  gap: 25px;
}

.goods-img-a {
  width: 75%;
}

.goods-a {
  width: 90%;
}

.goods-box-b {
  top: 13%;
  right: 7%;
  width: 43%;
  height: 25%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.goods-img-b {
  width: 68%;
}

.goods-b {
  width: 111%;
}

.goods-box-c {
  bottom: 14%;
  left: 1%;
  width: 36%;
  height: 34%;
  display: flex;
  align-items: center;
}

.goods-img-c {
  width: 75%;
}

.goods-c {
  width: 130%;
}

.goods-box-d {
  bottom: 10%;
  left: 38%;
  width: 31%;
  height: 50%;
  display: flex;
  align-items: center;
  gap: 17px;
}

.goods-img-d {
  width: 26%;
}

.goods-d {
  width: 84%;
}

.goods-box-e {
  bottom: 27%;
  right: 2%;
  width: 25%;
  height: 35%;
}

.goods-img-e {
  width: 64%;
  margin: 0 auto;
}

.goods-e {
  width: 106%;
  margin: 0 auto;
}

/* 画像影 */
.goods-img-a img,
.goods-img-b img,
.goods-img-c img,
.goods-img-d img,
.goods-img-e img {
  transform: translateZ(0);
  filter: drop-shadow(16px 16px 10px #eeeeee);
  transition: all 0.3s;
}

.goods-img-a img:hover,
.goods-img-b img:hover,
.goods-img-c img:hover,
.goods-img-d img:hover,
.goods-img-e img:hover {
  cursor: pointer;
  transform: scale(1.4) translateZ(0);
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .line {
    width: 100%;
    position: static;
    margin-top: 50px;
  }

  .under-line {
    width: 100%;
    position: static;
    margin-top: 90px;
  }

  .goods-box-a,
  .goods-box-b,
  .goods-box-c,
  .goods-box-d,
  .goods-box-e {
    position: static;
    width: 100%;
    height: 500px;
    margin: 150px auto 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }

  .goods-box-a {
    margin: 50px auto 0px;
  }

  .goods-img-a,
  .goods-img-b {
    position: static;
    width: 55%;
  }

  .goods-img-c {
    position: static;
    width: 50%;
  }

  .goods-img-e {
    position: static;
    width: 50%;
  }

  .goods-img-d {
    position: static;
    width: 20%;
  }

  .goods-a,
  .goods-b,
  .goods-c,
  .goods-d,
  .goods-e {
    position: static;
    width: 80%;
    gap: 10px;
  }

  /* .goods-img-a img,
  .goods-img-b img,
  .goods-img-c img,
  .goods-img-d img,
  .goods-img-e img {
    pointer-events: none;
  } */

  .goods-box-b,
  .goods-box-c,
  .goods-box-d,
  .goods-box-e {
    display: none;
  }
}

/* 全体をレスポンシブ対応させるための記述 -------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
  .wrap {
    display: block;
    position: initial;
  }
  .item01,
  .item02,
  .item04 {
    display: block;
    height: auto;
  }

  #page-top {
    right: 122px;
  }
}

/* 改行制御 ----------------------------- */
.only-pc {
  display: inline;
}

.only-sp {
  display: none;
}

@media screen and (max-width: 1024px) {
  .only-pc {
    display: none;
  }

  .only-sp {
    display: inline;
  }
}
.goods-box-b,
.goods-box-c,
.goods-box-d,
.goods-box-e {
  display: none !important;
  background: red;
}