@charset "UTF-8";
footer {
  overflow: hidden;
}

.loc-bg {
  background: #fff;
  padding-bottom: 100px;
}
@media screen and (max-width: 820px) {
  .loc-bg {
    padding-bottom: 50px;
  }
}

.p-jojuen {
  --color-jojuen-brw1: #9d8264;
  --color-jojuen-bk1: #595757;
  --color-white: #fff;
  --color-black: #333;
  --font-goc: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
  --font-min: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  --font-gara: "EB Garamond", serif;
  color: var(--color-jojuen-bk1);
}
.p-jojuen .page-ttl02 {
  background-image: url(../img/mv.webp);
}
.p-jojuen-intro {
  text-align: center;
  padding-block: clamp(30px, 20px + 3.125vw, 80px);
}
.p-jojuen-intro h3 {
  font-family: var(--font-gara);
  font-weight: 400;
  color: var(--color-jojuen-brw1);
  font-size: clamp(32px, 24.6px + 2.3125vw, 69px);
  letter-spacing: 0.025em;
  line-height: 1.1;
  margin-block-end: clamp(20px, 14px + 1.875vw, 50px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-intro h3 {
    font-size: 22px;
  }
}
.p-jojuen-intro h4 {
  font-size: clamp(15px, 11.6px + 1.0625vw, 32px);
  letter-spacing: 0.05em;
  margin-block-end: clamp(15px, 11px + 1.25vw, 35px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-intro h4 {
    font-size: 24px;
  }
}
.p-jojuen-intro p {
  font-size: clamp(10px, 8.8px + 0.375vw, 16px);
  line-height: 2;
  letter-spacing: 0.05em;
  margin-block-end: clamp(15px, 7px + 2.5vw, 55px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-intro p {
    font-size: 14px;
  }
}
.p-jojuen-intro ul {
  display: grid;
  grid-template-columns: 1fr 1.706fr 1fr;
  gap: 4px;
}
@media screen and (max-width: 820px) {
  .p-jojuen-intro ul {
    grid-template-columns: 1fr 1fr;
    width: 90%;
    margin-inline: auto;
  }
}
.p-jojuen-intro ul li:nth-of-type(3) {
  grid-column: 2;
  grid-row: 1/3;
}
@media screen and (max-width: 820px) {
  .p-jojuen-intro ul li:nth-of-type(3) {
    grid-column: 1/-1;
    grid-row: 2/3;
  }
}
.p-jojuen-area1__box {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content 1fr;
  -moz-column-gap: clamp(15px, 6px + 2.8125vw, 60px);
       column-gap: clamp(15px, 6px + 2.8125vw, 60px);
  margin-block-end: clamp(30px, 18px + 3.75vw, 90px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-area1__box {
    display: flex;
    flex-direction: column;
  }
}
.p-jojuen-area1__box:nth-of-type(1) {
  grid-template-columns: 1.7fr 1fr;
  max-width: 1200px;
  margin-inline-start: -100px;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area1__box:nth-of-type(1) {
    margin-inline: 0;
  }
}
.p-jojuen-area1__box:nth-of-type(2) h3, .p-jojuen-area1__box:nth-of-type(4) h3 {
  grid-column: 1;
  grid-row: 1;
}
.p-jojuen-area1__box:nth-of-type(2) p, .p-jojuen-area1__box:nth-of-type(4) p {
  grid-column: 1;
  grid-row: 2;
}
.p-jojuen-area1__box:nth-of-type(2) .-pic, .p-jojuen-area1__box:nth-of-type(4) .-pic {
  grid-row: 1/-1;
  grid-column: 2;
}
.p-jojuen-area1__box:nth-of-type(2), .p-jojuen-area1__box:nth-of-type(4) {
  margin-inline: auto 0;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area1__box:nth-of-type(3) .-pic figure .caption {
    color: var(--color-white);
  }
}
.p-jojuen-area1__box:nth-of-type(3) p.caption {
  margin-block-end: 0;
}
.p-jojuen-area1__box h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(14px, 11.6px + 0.75vw, 26px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-block-end: clamp(15px, 12px + 0.9375vw, 30px);
}
@supports (-webkit-hyphens: none) {
  .p-jojuen-area1__box h3 rt {
    /* ルビを下に移動させてベースの文字に近づける */
    transform: translateY(0.35em);
  }
}
@media screen and (max-width: 820px) {
  .p-jojuen-area1__box h3 {
    font-size: 20px;
  }
}
.p-jojuen-area1__box p {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(10px, 9px + 0.3125vw, 15px);
  font-feature-settings: "palt";
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area1__box p {
    margin-block-end: 15px;
    font-size: 14px;
  }
}
.p-jojuen-area1__box p span {
  display: block;
  line-height: 1.5;
  margin-inline-start: 1em;
  text-indent: -1em;
  font-size: clamp(8px, 7.2px + 0.25vw, 12px);
  margin-block-start: 1em;
}
.p-jojuen-area1__box .-pic {
  grid-row: 1/-1;
  grid-column: 1;
}
.p-jojuen-area1__box .-pic ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2px, 1.4px + 0.1875vw, 5px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2 {
    overflow: hidden;
  }
}
.p-jojuen-area2__inner {
  position: relative;
}
.p-jojuen-area2__inner h3 {
  position: absolute;
  left: 0;
  top: clamp(0px, -16px + 5vw, 80px);
  font-size: clamp(14px, 11.6px + 0.75vw, 26px);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.p-jojuen-area2__inner ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2px, 1.6px + 0.125vw, 4px);
  margin-block-end: clamp(20px, 10px + 3.125vw, 70px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2__inner ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-jojuen-area2__box1 {
  max-width: 1030px;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2__box1 figure {
    width: 106%;
    margin-block-end: 20px;
  }
}
.p-jojuen-area2__box2 {
  border: 1px solid #4c4948;
  display: grid;
  gap: 0 clamp(20px, 14px + 1.875vw, 50px);
  grid-template-columns: 1fr 1.1fr 1.1fr;
  grid-template-rows: 1fr max-content max-content;
  padding: clamp(20px, 16px + 1.25vw, 40px);
  background-image: url(../img/jojuen20.webp);
  background-repeat: no-repeat;
  background-size: 27%;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2__box2 {
    padding-block-start: 10px;
    background-size: 45%;
    display: flex;
    flex-direction: column;
  }
}
.p-jojuen-area2__box2 h4 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(20px, 16.8px + 1vw, 36px);
  font-family: var(--font-gara);
  color: var(--color-jojuen-brw1);
  font-weight: 400;
  margin-block-end: clamp(5px, 4px + 0.3125vw, 10px);
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2__box2 h4 {
    padding-inline-start: 47%;
  }
}
.p-jojuen-area2__box2 p {
  grid-column: 1;
  grid-row: 3;
  font-size: clamp(13px, 10.6px + 0.75vw, 25px);
  line-height: 1.5;
  letter-spacing: 0;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2__box2 p {
    margin-block-end: 12%;
    padding-inline-start: 47%;
    white-space: nowrap;
  }
}
.p-jojuen-area2__box2 .-pic1 {
  grid-column: 1;
  grid-row: 1;
}
.p-jojuen-area2__box2 dl:nth-of-type(1) {
  grid-row: 1/-1;
  grid-column: 2;
}
.p-jojuen-area2__box2 dl:nth-of-type(2) {
  grid-row: 1/-1;
  grid-column: 3;
}
.p-jojuen-area2__box2 dl {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 820px) {
  .p-jojuen-area2__box2 dl {
    margin-block-start: 15px;
  }
}
.p-jojuen-area2__box2 dl dt {
  order: 2;
  font-size: clamp(14px, 12.6px + 0.4375vw, 21px);
  margin-block: clamp(10px, 9px + 0.3125vw, 15px) clamp(5px, 4px + 0.3125vw, 10px);
}
.p-jojuen-area2__box2 dl dd {
  order: 3;
  font-size: clamp(10px, 9px + 0.3125vw, 15px);
  line-height: 1.7;
  letter-spacing: 0;
}
.p-jojuen-area2__box2 dl dd:nth-of-type(2) {
  order: 1;
}
.p-jojuen [class*=__inner] {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}
.p-jojuen [class*=__inner].-md {
  max-width: 780px;
}
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(20px);
    transform: translate3d(0, 10px, 0) scaleX(1.2);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
.p-jojuen .blurIn {
  animation-name: blurIn;
}
@keyframes blurZoomIn {
  from {
    opacity: 0;
    filter: brightness(1.8) blur(20px);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  50% {
    filter: brightness(1) blur(0);
    opacity: 1;
  }
}
.p-jojuen .blurZoomIn {
  animation-name: blurZoomIn;
}
.p-jojuen .cliping-mask {
  overflow: hidden;
}/*# sourceMappingURL=style.css.map */