@charset "UTF-8";

:root {
  --baseColor: #faf8f5;
  --mainColor: #5e6e64;
  --subColor: #9dba8b;
  --accentColor: #d6b56e;
  /* --accentColor: #9d8041; */
  --fontColor: #333;
  --fontText1: "Noto Sans JP", sans-serif; /* ゴシック */
  --fontText2: "Shippori Mincho", serif; /* 明朝体 */
  --fontNum: "GFS Didot", serif;
  --err: #b94a48;
  --transitionTime: opacity 0.3s ease;
}
html {
  width: 100%;
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  overflow-x: hidden;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url("../image/bk.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fontColor);
  font-family: var(--fontText1);
  font-weight: 300;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.5;
  overflow-x: hidden;
  letter-spacing: 0.05rem;
}
main {
  flex: 1;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
address {
  font-style: normal;
}
.link {
  color: var(--mainColor);
  text-decoration: none;
  border-bottom: solid 1px var(--mainColor);
  padding-bottom: 1px;
}
.link:hover {
  opacity: 0.5;
  transition: var(--transitionTime);
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
/* ローディング */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  background-color: var(--mainColor);
  transition: opacity 1s ease;
  z-index: 9999;
}
#loading.hide {
  opacity: 0;
  pointer-events: none;
}
.loading-img {
  width: 140px;
  height: auto;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.loading-img.visible {
  opacity: 1;
}
.loading-text {
  font-family: var(--fontText2);
  font-size: 1.5rem;
  color: var(--baseColor);
  letter-spacing: 0.3em;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(8px);
  opacity: 0;
}
.loading-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* セクションのタイトルと英語文字 */
.section {
  margin-bottom: 80px;
  padding: 0 24px;
}
.section:first-child {
  padding: 0;
}
.sectionTitle {
  display: block;
  position: relative;
  margin: 0 auto 60px;
  font-family: var(--fontText2);
  overflow: visible;
}
.titleJp {
  margin: 0 auto;
  writing-mode: vertical-rl;
  text-align: center;
  line-height: 5;
  font-size: 2rem;
}
.flower {
  margin: 0 auto 5px;
  display: block;
  width: 25px;
  height: 25px;
  pointer-events: none;
}
.flower img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fadeIn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fadeIn.show {
  opacity: 1;
  transform: translateY(0);
}
.fadeCard {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.8s ease, transform 1.8s ease;
}
.fadeCard.show {
  opacity: 1;
  transform: translateY(0);
}
.fadeCard:nth-child(2) {
  transition-delay: 0.2s;
}
.formLabel {
  cursor: pointer;
}
/* photo */
.photosText {
  margin-bottom: 20px;
}
.photosLink {
  border-bottom: solid 1px var(--mainColor);
  font-family: var(--fontText2);
  color: var(--mainColor);
  padding: 18px 0 3px;
  width: 100%;
  text-decoration: none;
}
.photosLink:hover {
  border-bottom: 1px solid var(--mainColor);
}

/* footer */
footer {
  padding: 20px 24px;
  background: var(--mainColor);
  text-align: center;
  position: relative;
}
.copyright {
  font-size: 1.3rem;
  font-family: var(--fontText2);
  color: var(--baseColor);
}
.copyright::after {
  content: "";
  background: var(--accentColor);
  height: 1px;
  width: 100%;
  position: absolute;
  top: 5px;
  left: 0;
}

/* PC レスポンシブ */
@media screen and (min-width: 768px) {
  body {
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .section {
    margin: 0 auto 150px;
    max-width: 600px;
  }
  .sectionTitle {
    margin-bottom: 80px;
  }
  .titleJp {
    font-size: 2.2rem;
  }
  .flower {
    width: 28px;
    height: 28px;
  }
  .spOnlyBr {
    display: none;
  }
  /* photo */
  .photosLink:hover {
    transition: var(--transitionTime);
    opacity: 0.5;
  }
}