/* ===============================================### 
可変設定
###=============================================== */
.lp_variable {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 490;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_variable {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


/* ===============================================### 
初期設定
###=============================================== */
.JK250523macoto{
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en01: "orpheuspro", serif;
  --font-en02: "effra", sans-serif;
  --font-common: "effra", "Noto Sans JP", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --color-white: #ffffff;
  --color-beige: #f8f3ec;
  /* --color-beige02: #f0ece3; */
  --color-brown: #977547;
  --color-light-brown: #877c6f;
  --color-black: #333333;
  --color-pink: #e9dcd1;

  --bg-color: rgba(192, 166, 148, 0.07);
  color: #333333;
}

html{
  overflow: visible!important;
}

#Contents {
  position: relative;
}

.JK250523macoto img,
.JK250523macoto svg{
  width: 100%;
  height: auto;
}


/* ===========### PC用設定 ###=========== */
@media screen and (min-width: 768px) {
  html{
    overflow-x: visible!important;
  }

  body.sticky-height{
    overflow: hidden;
  }
  
  .c-breadcrumb {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }

  .JK250523macoto .hidden-desktop {
    display: none;
  }

  .JK250523macoto .hidden-phone {
    display: block;
  }

  .JK250523macoto .image-bg{
    background-color: #fff;
  }

  .JK250523macoto .image-bg a:hover{
    opacity: 0.7;
  }
}


/* ===========### SP用設定 ###=========== */
@media screen and (max-width: 767px) {
  html{
    scroll-behavior: smooth;
  }
  
  .c-breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: var(--color-white);
  }

  .c-breadcrumb .c-breadcrumb__text,
  .c-breadcrumb > ol > li:last-child > * {
    color: var(--color-white);
  }

  .JK250523macoto{
    overflow: hidden;
    padding-top: 9.6rem;
  }

  .JK250523macoto .hidden-desktop {
    display: block;
  }

  .JK250523macoto .hidden-phone {
    display: none;
  }
}


/* ===============================================### 
アニメーション設定
###=============================================== */
.JK250523macoto .js-fade-in,
.JK250523macoto .fade-trigger .js-fade-in.content__image {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.JK250523macoto .js-fade-in.show,
.JK250523macoto .fade-trigger .js-fade-in.show.content__image {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: opacity 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: opacity 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -moz-transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: opacity 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -o-transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: opacity 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -ms-transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.JK250523macoto .js-fade-in.show.content__image.js-delay01 {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  /* -webkit-transition-delay: 160ms;
  -moz-transition-delay: 160ms;
  -o-transition-delay: 160ms;
  -ms-transition-delay: 160ms;
  transition-delay: 160ms */
  -webkit-transition-delay: 320ms;
  -moz-transition-delay: 320ms;
  -o-transition-delay: 320ms;
  -ms-transition-delay: 320ms;
  transition-delay: 320ms
}

.JK250523macoto .js-fade-in.show.content__image.js-delay02 {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  /* -webkit-transition-delay: 360ms;
  -moz-transition-delay: 360ms;
  -o-transition-delay: 360ms;
  -ms-transition-delay: 360ms;
  transition-delay: 360ms */
  -webkit-transition-delay: 720ms;
  -moz-transition-delay: 720ms;
  -o-transition-delay: 720ms;
  -ms-transition-delay: 720ms;
  transition-delay: 720ms
}

.JK250523macoto .js-fade-in.show.content__image.js-delay03 {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  /* -webkit-transition-delay: 560ms;
  -moz-transition-delay: 560ms;
  -o-transition-delay: 560ms;
  -ms-transition-delay: 560ms;
  transition-delay: 560ms */
  -webkit-transition-delay: 1120ms;
  -moz-transition-delay: 1120ms;
  -o-transition-delay: 1120ms;
  -ms-transition-delay: 1120ms;
  transition-delay: 1120ms
}

/*** fade up ***/
.JK250523macoto .fadeup {
  opacity: 0;
  -webkit-transform: translateY(3rem);
  transform: translateY(3rem);
}

.JK250523macoto .fadeup.show {
  -webkit-animation: fadeup 1s forwards;
  animation: fadeup 1s forwards;
}

.JK250523macoto .fadeup[data-animation-delay="1"] {
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
}

.JK250523macoto .fadeup[data-animation-delay="2"] {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.JK250523macoto .fadeup[data-animation-delay="3"] {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.JK250523macoto .fadeup[data-animation-delay="4"] {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
    transform: translateY(3rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
    transform: translateY(3rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .js-fade-in.show .js-delay01 {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -ms-transition-delay: 400ms;
    transition-delay: 400ms
  }

  .JK250523macoto .js-fade-in.show .js-delay02 {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transition-delay: 900ms;
    -moz-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    -ms-transition-delay: 900ms;
    transition-delay: 900ms
  }

  /* .JK250523macoto .js-fade-in.show .js-delay03 {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transition-delay: 1400ms;
    -moz-transition-delay: 1400ms;
    -o-transition-delay: 1400ms;
    -ms-transition-delay: 1400ms;
    transition-delay: 1400ms
  }

  .JK250523macoto .content06 .js-fade-in.show .content__item03 .content__image{
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transition-delay: 480ms;
    -moz-transition-delay: 480ms;
    -o-transition-delay: 480ms;
    -ms-transition-delay: 480ms;
    transition-delay: 480ms
  } */
}

/************** ellipse **************/
.JK250523macoto .ellipseBox svg {
  fill: none;
  filter: none;
}

.JK250523macoto .ellipseBox {
  width: calc(150 * var(--formula));
  position: absolute;
  top: calc(9 * var(--formula));
  left: calc(-5 * var(--formula));
  z-index: 1;
  pointer-events: none;
  /* width: 147px;
  position: absolute;
  top: -19px;
  left: -56px;
  z-index: 1;
  pointer-events: none; */
}

.JK250523macoto .ellipseBox.active .ellipse_txt {
  width: calc(150 * var(--formula));
  fill: none;
  filter: none;
  /* width: 147px;
  fill: none;
  filter: none; */
}

.JK250523macoto .ellipseBox.active .ellipse_txt {
  fill: none;
  filter: none;
  stroke: #000;
  stroke-width: 1px;
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: ellipse 0.5s linear forwards;
  animation-delay: 0.2s;
  /* fill: none;
  filter: none;
  stroke: #000;
  stroke-width: 1px;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  animation: ellipse 0.5s linear forwards; */
}

@keyframes ellipse {
  to {
    stroke-dashoffset: 0;
  }
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.JK250523macoto .content-common .content-inner{
  width: calc(630 * var(--formula));
  margin-inline: auto;
}

.JK250523macoto .grid-wrapper{
  display: grid;
}

.JK250523macoto .flex-wrapper{
  display: flex;
}

/************** view-more-button **************/
.JK250523macoto .link__button{

}

.JK250523macoto .view-more {
  position: relative;
  display: flex;
  align-items: center;
  /* width: 14.2rem; */
  width: 12.7rem;
  height: 3.4rem;
  /* margin: 1.9rem auto 0; */
  margin-inline: auto;
  padding-left: calc(40 * var(--formula));
  font-family: var(--font-en02);
  font-weight: var(--fw-bold);
  color: var(--color-brown);
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.06em;
  line-height: 1;
  clip-path: inset(0 round 1.7rem);
  border-radius: calc(20 * var(--formula));
  overflow: hidden;
  background-color: transparent;
  transition: background-color 0.3s ease-in;
}

.JK250523macoto .view-more .arrow {
  position: absolute;
  top: calc(8 * var(--formula));
  right: calc(14 * var(--formula));
  width: calc(34 * var(--formula));
  height: calc(34 * var(--formula));
  border-radius: 50%;
  background-color: var(--color-brown);
  transition: background-color 0.3s ease-in;
}

.JK250523macoto .view-more .arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(11 * var(--formula));
  width: calc(10 * var(--formula));
  height: calc(10 * var(--formula));
  border-top: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  -webkit-transform: translateX(-61%) rotate(45deg);
  transform: translateX(-71%) rotate(45deg);
  transition: border 0.3s ease-in;
  will-change: transform;
}

/* 
.JK250523macoto .view-more:hover{
  color: var(--color-white);
}

.JK250523macoto .view-more:hover {
  background-color: var(--color-brown);
  opacity: 1;
}

.JK250523macoto .view-more:hover .arrow {
  background-color: var(--color-white);
}

.JK250523macoto .view-more:hover .arrow::before {
  border-top: 1px solid var(--color-brown);
  border-right: 1px solid var(--color-brown);
} */

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .view-more {
    left: calc(45 * var(--formula));
    padding-left: 0;
  }

  .JK250523macoto .view-more .arrow {
    top: calc(14 * var(--formula));
    right: calc(73 * var(--formula));
  }
}



/* ===============================================### 
left-area, right-area, center-area 設定
###=============================================== */
@media screen and (min-width: 768px) {
  .JK250523macoto .main-wrap.grid-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 49rem 1fr;
  }

  .JK250523macoto .left-area {
    position: sticky;
    grid-column: 1;
    top: 0;
    height: 100vh;
    display: grid;
    place-content: center;
    background-color: #f7f7f7;
  }

  .JK250523macoto .center-area {
    grid-column: 2;
  }

  .JK250523macoto .right-area {
    position: sticky;
    grid-column: 3;
    top: 0;
    height: 100vh;
    display: grid;
    place-content: center;
    background-color: #f7f7f7;
  }

  /************** text **************/
  .JK250523macoto .fixed_link {
    width: fit-content;
  }

  .JK250523macoto .link-list{
    line-height: 4;
  }

  .JK250523macoto .link-list li{
    position: relative;
    font-family: var(--font-ja);
    font-size: calc(15 * (100vw / 1400));
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    color: var(--color-brown);
  }

  .JK250523macoto .link-list li.select{
    opacity: 0.5;
  }

  .JK250523macoto .link-list li.flex-wrapper{
    justify-content: center;
    align-items: center;
    gap: calc(30 * (100vw / 1400));
  }

  /************** image **************/
  .JK250523macoto .fixed_title {
    grid-column: 1;
    width: calc(265 * (100vw / 1400));
  }

  .JK250523macoto .fixed_title.content-position,
  .JK250523macoto .fixed_link.content-position{
    position: relative;
    top: calc(-57 * (100vw / 1400));
  }

  .JK250523macoto .link-arrow{
    width: calc(13 * (100vw / 1400));
  }

  .JK250523macoto .link-arrow img{
    vertical-align: middle;
  }
}



/* ===============================================### 
MV
###=============================================== */
.JK250523macoto .mv{
}

.JK250523macoto .mv .content-inner{
}

/************** text **************/
.JK250523macoto .mv__text{
  margin-top: calc(132 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

/************** image **************/
.JK250523macoto .mv .mv__image{
  width: calc(750 * var(--formula));
  margin-inline: auto;
}



/* ===============================================### 
profile
###=============================================== */
.JK250523macoto .profile-area{
  margin-top: calc(130 * var(--formula));
  background-color: var(--bg-color);
}

.JK250523macoto .profile-area .content-inner{
  width: calc(509 * var(--formula));
  padding-top: calc(140 * var(--formula));
  padding-bottom: calc(130 * var(--formula));
}

/************** text **************/
.JK250523macoto .profile-area .profile__name{
  margin-top: calc(31 * var(--formula));
  font-family: var(--font-en01);
  font-size: calc(42 * var(--formula));
  font-weight: var(--fw-regular);
  font-feature-settings: "pwid";
  letter-spacing: 0.03em;
  text-align: center;
}

.JK250523macoto .profile-area .sns-link{
  margin-top: calc(15 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.JK250523macoto .profile-area .profile__detail{
  margin-top: calc(58 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: justify;
}

/************** image **************/
.JK250523macoto .profile-area .profile__image{
  width: calc(350 * var(--formula));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .profile-area{
    margin-top: calc(132 * var(--formula));
  }

  .JK250523macoto .profile-area .sns-link{
    margin-top: calc(14 * var(--formula));
  }
}



/* ===============================================### 
Rule
###=============================================== */
.JK250523macoto .content.rule{
  margin-bottom: calc(130 * var(--formula));
  padding-top: calc(138 * var(--formula));
}

.JK250523macoto .content.rule .content-inner{
  width: calc(750 * var(--formula));
}

.JK250523macoto .content.rule .content__item01{
}

.JK250523macoto .content.rule .content__item02{
  margin-top: calc(130 * var(--formula));
}

.JK250523macoto .content.rule .content__item03{
  margin-top: calc(134 * var(--formula));
}

.JK250523macoto .content.rule .content__item04{
  margin-top: calc(130 * var(--formula));
}

.JK250523macoto .content.rule .content__item05{
  margin-top: calc(127 * var(--formula));
}

.JK250523macoto .content.rule .content__title{
}

.JK250523macoto .content.rule .content__title .image-wrapper{
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.JK250523macoto .content.rule .text-wrapper{
  width: calc(630 * var(--formula));
  margin-top: calc(70 * var(--formula));
  margin-inline: auto;
}

.JK250523macoto .content.rule .content__item01 .text-wrapper.wrap02{
  margin-top: calc(93 * var(--formula));
}

.JK250523macoto .content.rule .content__item02 .text-wrapper{
  margin-top: calc(67 * var(--formula));
}

.JK250523macoto .content.rule .content__item05 .text-wrapper{
  margin-top: calc(68 * var(--formula));
}

.JK250523macoto .content.rule .content__item05 .text-wrapper.wrap02{
  margin-top: calc(93 * var(--formula));
}

/************** grid **************/
.JK250523macoto .content.rule .grid-wrapper{
  grid-template-columns: calc(220 * var(--formula)) calc(40 * var(--formula)) calc(120 * var(--formula)) calc(60 * var(--formula)) calc(310 * var(--formula));
  grid-template-rows: calc(192 * var(--formula)) calc(180 * var(--formula)) calc(122 * var(--formula)) calc(43 * var(--formula)) calc(129 * var(--formula));
  margin-top: calc(132 * var(--formula));
}

.JK250523macoto .content.rule .grid__item01{
  position: relative;
  grid-column: 1/3;
  grid-row: 2/5;
  z-index: 2;
}

.JK250523macoto .content.rule .grid__item02{
  position: relative;
  grid-column: 2/5;
  grid-row: 3/6;
  z-index: 1;
}

.JK250523macoto .content.rule .grid__item03{
  grid-column: 4/6;
  grid-row: 1/4;
}

/************** text **************/
.JK250523macoto .content.rule .title__main{
  margin-top: calc(52 * var(--formula));
  font-family: var(--font-en01);
  font-size: calc(68 * var(--formula));
  font-weight: var(--fw-regular);
  font-feature-settings: "pwid";
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-brown);
}

.JK250523macoto .content.rule .title__sub{
  margin-top: calc(32 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-bold);
  font-feature-settings: "pwid";
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--color-brown);
}

.JK250523macoto .content.rule .text__about{
  /* margin-top: calc(40 * var(--formula)); */
  position: relative;
  font-family: var(--font-ja);
  font-size: calc(34 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.JK250523macoto .content.rule .text__about::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: calc(628 * var(--formula));
  height: calc(202 * var(--formula));
  background-image: url('../img/about_bg02.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.JK250523macoto .content.rule .content__item01 .text__about::after,
.JK250523macoto .content.rule .content__item05 .text__about::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: calc(628 * var(--formula));
  height: calc(146 * var(--formula));
  background-image: url('../img/about_bg.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.JK250523macoto .content.rule .content__item02 .text__about{
  letter-spacing: 0.075em;
}

.JK250523macoto .content.rule .text__detail{
  margin-top: calc(80 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: justify;
}

.JK250523macoto .content.rule .text__detail.text01{
  margin-top: calc(81 * var(--formula));
}

.JK250523macoto .content.rule .text__detail.text02{
  margin-top: calc(40 * var(--formula));
}

.JK250523macoto .content.rule .text__detail.text03{
  margin-top: calc(38 * var(--formula));
}

.JK250523macoto .content.rule .content__item03 .text__detail.text02{
  margin-top: calc(39 * var(--formula));
}

.JK250523macoto .content.rule .content__item01 .text__detail.text02{
  letter-spacing: 0.055em;
}

.JK250523macoto .content.rule .content__item03 .text__detail.text01{
  letter-spacing: 0.077em;
}

.JK250523macoto .content.rule .content__item03 .text__detail.text03{
  letter-spacing: 0.058em;
}

.JK250523macoto .content.rule .content__item05 .text__detail.text02{
  letter-spacing: 0.052em;
}

/************** image **************/
.JK250523macoto .content.rule .title__image{
  width: calc(152 * var(--formula));
  margin-left: calc(-12 * var(--formula));
}

.JK250523macoto .content.rule .content__item01 .content__image{
  width: calc(510 * var(--formula));
  margin-top: calc(92 * var(--formula));
  margin-inline: auto;
}

.JK250523macoto .content.rule .content__item02 .grid__item01.content__image{
  width: calc(260 * var(--formula));
}

.JK250523macoto .content.rule .content__item02 .grid__item02.content__image{
  width: calc(220 * var(--formula));
}

.JK250523macoto .content.rule .content__item02 .grid__item03.content__image{
  width: calc(370 * var(--formula));
}

.JK250523macoto .content.rule .content__item05 .content__image{
  width: calc(510 * var(--formula));
  margin-top: calc(92 * var(--formula));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .content.rule{
    padding-top: calc(139 * var(--formula));
  }

  .JK250523macoto .content.rule .content__item02{
    margin-top: calc(129 * var(--formula));
  }

  .JK250523macoto .content.rule .content__item01 .text__about::after,
  .JK250523macoto .content.rule .content__item05 .text__about::after{
    height: calc(147 * var(--formula));
  }

  .JK250523macoto .content.rule .content__item02 .text__detail.text01{
    margin-top: calc(82 * var(--formula));
    letter-spacing: 0.055em;
  }

  .JK250523macoto .content.rule .content__item01 .text__detail.text02{
    letter-spacing: 0.06em;
  }
}



/* ===============================================### 
Select
###=============================================== */
.JK250523macoto .content.select{
  /* margin-top: calc(100 * var(--formula)); */
  padding-top: calc(140 * var(--formula));
  padding-bottom: calc(140 * var(--formula));
  background-color: var(--bg-color);
}

.JK250523macoto .content.select .content-inner{
  width: fit-content;
  margin-inline: auto;
}

.JK250523macoto .content.select .content__item01,
.JK250523macoto .content.select .content__item02,
.JK250523macoto .content.select .content__item03,
.JK250523macoto .content.select .content__item04{
  position: relative;
  width: fit-content;
}

.JK250523macoto .content.select .content__item01::after,
.JK250523macoto .content.select .content__item02::after,
.JK250523macoto .content.select .content__item03::after,
.JK250523macoto .content.select .content__item04::after{
  position: absolute;
  content: '';
  display: block;
  width: calc(2 * var(--formula));
  height: calc(120 * var(--formula));
  background: var(--color-brown);
  animation: scrollGuide 2s ease-in-out 0s infinite normal;
  top: calc(-190 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

@keyframes scrollGuide {
	0% {
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
	20% {
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
	50% {
		transform: scale(1, 0);
		transform-origin: center bottom;
	}
	50.1% {
		transform: scale(1, 0);
		transform-origin: center top;
	}
	80% {
		transform: scale(1, 1);
		transform-origin: center top;
	}
	100% {
		transform: scale(1, 1);
		transform-origin: center top;
	}
}

.JK250523macoto .content.select .content__item01{
  margin-top: calc(320 * var(--formula));
}

.JK250523macoto .content.select .content__item02{
  margin-top: calc(330 * var(--formula));
}

.JK250523macoto .content.select .content__item03{
  margin-top: calc(330 * var(--formula));
}

.JK250523macoto .content.select .content__item04{
  margin-top: calc(330 * var(--formula));
}

.JK250523macoto .content.select .comment-area{
  position: relative;
}

.JK250523macoto .content.select .product-area{
  width: calc(630 * var(--formula));
  margin-top: calc(252 * var(--formula));
  margin-inline: auto;
}

.JK250523macoto .content.select .product__item{
  margin-top: calc(48 * var(--formula));
  padding-top: calc(5 * var(--formula));
  /* padding: calc(5 * var(--formula)) 0; */
  background-color: var(--color-white);
  /* border-radius: calc(20 * var(--formula)); */
}

.JK250523macoto .content.select .content__item03 .product__item{
  padding-top: calc(4 * var(--formula));
}

.JK250523macoto .content.select .flex-wrapper{
  /* justify-content: center; */
  /* align-items: center; */
  gap: calc(30 * var(--formula));
}

.JK250523macoto .content.select .content__item02 .flex-wrapper{
  gap: calc(42 * var(--formula));
}

.JK250523macoto .content.select .content__item03 .flex-wrapper{
  gap: calc(50 * var(--formula));
}

.JK250523macoto .content.select .content__item04 .flex-wrapper{
  gap: calc(74 * var(--formula));
}

.JK250523macoto .content.select .product__item .text-wrapper{
  margin-top: calc(60 * var(--formula));
}

/************** text **************/
.JK250523macoto .content.select .title__lead{
  margin-top: calc(60 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
}

.JK250523macoto .content.select .item__title{
  margin-top: calc(39 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(34 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.JK250523macoto .content.select .content__item02 .item__title{
  margin-top: calc(38 * var(--formula));
}

.JK250523macoto .content.select .comment__text{
  width: calc(487 * var(--formula));
  margin-top: calc(62 * var(--formula));
  margin-left: calc(103 * var(--formula));
  position: relative;
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: justify;
  z-index: 1;
}

.JK250523macoto .content.select .content__item02 .comment__text,
.JK250523macoto .content.select .content__item04 .comment__text{
  margin-left: calc(43 * var(--formula));
}

.JK250523macoto .content.select .content__item04 .comment__text{
  letter-spacing: 0.075em;
}

.JK250523macoto .content.select .select__title{
  position: relative;
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-align: center;
  color: var(--color-brown);
}

.JK250523macoto .content.select .select__title::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: calc(570 * var(--formula));
  height: calc(45 * var(--formula));
  margin-top: calc(14 * var(--formula));
  background-image: url('../img/slash.svg');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.JK250523macoto .content.select .product__name{
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
}

.JK250523macoto .content.select .product__price{
  margin-top: calc(10 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-align: center;
}

/************** image **************/
.JK250523macoto .content.select .title__image{
  width: calc(635 * var(--formula));
  margin-inline: auto;
}

.JK250523macoto .content.select .comment__image{
  position: absolute;
  top: calc(-133 * var(--formula));
  left: calc(32 * var(--formula));
  width: calc(628 * var(--formula));
}

.JK250523macoto .content.select .content__item02 .comment__image,
.JK250523macoto .content.select .content__item04 .comment__image{
  top: calc(-132 * var(--formula));
  left: calc(-27 * var(--formula));
}

.JK250523macoto .content.select .content__image{
  position: relative;
  width: calc(630 * var(--formula));
  margin-top: calc(59 * var(--formula));
  margin-inline: auto;
  z-index: 1;
}

.JK250523macoto .content.select .product__image{
  width: calc(280 * var(--formula));
}

.JK250523macoto .content.select .title-icon{
  width: calc(283 * var(--formula));
  margin-inline: auto;
}

.JK250523macoto .content.select .content__item01 .title-icon{
  width: calc(275 * var(--formula));
}

/************** button **************/
.JK250523macoto .content.select .link__button{
  margin-top: calc(45 * var(--formula));
}

/*** 微調整 ***/
.JK250523macoto .content.select .content__item02 .view-more{
  padding-left: calc(34 * var(--formula));
}

.JK250523macoto .content.select .content__item04 .view-more{
  padding-left: calc(34 * var(--formula));
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .content.select .content__item04{
    margin-top: calc(330 * var(--formula));
  }

  .JK250523macoto .content.select .select__title::after{
    width: calc(573 * var(--formula));
  }

  .JK250523macoto .content.select .flex-wrapper{
    gap: calc(28 * var(--formula));
  }

  .JK250523macoto .content.select .content__item02 .flex-wrapper{
    gap: calc(33 * var(--formula));
  }

  .JK250523macoto .content.select .content__item03 .flex-wrapper{
    gap: calc(30 * var(--formula));
  }

  .JK250523macoto .content.select .content__item04 .flex-wrapper{
    gap: calc(26 * var(--formula));
  }

  .JK250523macoto .content.select .comment__image{
    top: calc(-134 * var(--formula));
    left: calc(33 * var(--formula));
  }

  .JK250523macoto .content.select .content__item02 .comment__image,
  .JK250523macoto .content.select .content__item04 .comment__image{
    top: calc(-133 * var(--formula));
    left: calc(-26 * var(--formula));
  }

  .JK250523macoto .content.select .link__button{
    margin-top: calc(38 * var(--formula));
  }

  /*** 微調整 ***/
  .JK250523macoto .content.select .content__item02 .view-more{
    padding-left: 0;
  }

  .JK250523macoto .content.select .content__item04 .view-more{
    padding-left: 0;
    left: calc(50 * var(--formula));
  }
}



/* ===============================================### 
Novelty
###=============================================== */
.JK250523macoto .content.novelty{
  position: relative;
  padding-top: calc(185 * var(--formula));
  padding-bottom: calc(234 * var(--formula));
}

.JK250523macoto .content.novelty::after{
  content: '';
  position: absolute;
  top: calc(138 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  width: calc(686 * var(--formula));
  height: calc(1457 * var(--formula));
  background-image: url('../img/novelty_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.JK250523macoto .content.novelty .content-inner{
  position: relative;
  z-index: 1;  
}

.JK250523macoto .content.novelty .title-wrapper{
}

.JK250523macoto .content.novelty .content__item01{
}

/************** text **************/
.JK250523macoto .content.novelty .title__main{
  font-family: var(--font-en01);
  font-size: calc(68 * var(--formula));
  font-weight: var(--fw-regular);
  line-height: 1.6;
  font-feature-settings: "pwid";
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-brown);
}

.JK250523macoto .content.novelty .title__sub{
  margin-top: calc(5 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  font-feature-settings: "pwid";
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-brown);
}

.JK250523macoto .content.novelty .text__about{
  margin-top: calc(106 * var(--formula));
  position: relative;
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.JK250523macoto .content.novelty .text__detail{
  margin-top: calc(62 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.JK250523macoto .content.novelty .attention__text{
  margin-top: calc(37 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(20 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  color: #999999;
}

/************** image **************/
.JK250523macoto .content.novelty .content__image{
  width: calc(510 * var(--formula));
  margin-top: calc(60 * var(--formula));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .content.novelty .text__detail{
    letter-spacing: 0.09em;
  }
}



/* ===============================================### 
Information
###=============================================== */
.JK250523macoto .content.information{
  padding-top: calc(116 * var(--formula));
  padding-bottom: calc(140 * var(--formula));
  /* margin-bottom: calc(100 * var(--formula)); */
  background-color: var(--bg-color);
}

.JK250523macoto .content.information .content-inner{
  /* padding-top: calc(80 * var(--formula)); */
}

.JK250523macoto .content.information .title-wrapper{
}

.JK250523macoto .content.information .content__item01{
}

/************** text **************/
.JK250523macoto .content.information .title__main{
  font-family: var(--font-en01);
  font-size: calc(68 * var(--formula));
  font-weight: var(--fw-regular);
  line-height: 1.6;
  font-feature-settings: "pwid";
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-brown);
}

.JK250523macoto .content.information .title__sub{
  margin-top: calc(8 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  font-feature-settings: "pwid";
  letter-spacing: 0.075em;
  text-align: center;
}

.JK250523macoto .content.information .text__about{
  margin-top: calc(40 * var(--formula));
  position: relative;
  font-family: var(--font-ja);
  font-size: calc(34 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.JK250523macoto .content.information .text__detail{
  margin-top: calc(64 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
}

/************** image **************/
.JK250523macoto .content.information .content__image{
  width: calc(630 * var(--formula));
  margin-top: calc(62 * var(--formula));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .content.information .text__detail{
    letter-spacing: 0.06em;
  }
}




/* ===============================================### 
all-items
###=============================================== */
.JK250523macoto .link-area{
  margin-top: calc(137 * var(--formula));
  margin-bottom: calc(140 * var(--formula));
}

.JK250523macoto .link-area .link__button{
  width: calc(686 * var(--formula));
  height: calc(140 * var(--formula));
  margin-inline: auto;
  background-color: var(--color-brown);
}

.JK250523macoto .link-area .link__button .view-more{
  width: 100%;
  height: 100%;
  /* padding-left: calc(19 * var(--formula)); */
  padding-left: calc(65 * var(--formula));
  font-size: calc(28 * var(--formula));
  letter-spacing: 0.08em;
  color: var(--color-white);
  /* background-color: var(--color-brown); */
  border-radius: 0;
  clip-path: unset;
}

.JK250523macoto .link-area .link__button .view-more .arrow{
  top: calc(50 * var(--formula));
  right: calc(97 * var(--formula));
  width: calc(40 * var(--formula));
  height: calc(40 * var(--formula));
  background-color: var(--color-white);
}

.JK250523macoto .link-area .link__button .view-more .arrow::before{
  top: calc(14 * var(--formula));
  border-top: 1px solid var(--color-brown);
  border-right: 1px solid var(--color-brown);
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .JK250523macoto .link-area{
    margin-top: calc(140 * var(--formula));
  }

  .JK250523macoto .link-area .link__button .view-more{
    padding-left: calc(19 * var(--formula));
  }
}


/* ===============================================### 
追従ナビ
###=============================================== */
@media screen and (max-width: 767px) {
  .JK250523macoto .nav_flex{
    /* display: flex;
    justify-content: center; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    bottom: 0;
    position: absolute;
    width: 100%;
  }

  .JK250523macoto .nav_button.button01{
    grid-column: 1/2;
    grid-row: 1/3;
  }

  .JK250523macoto .nav_button.button02{
    grid-column: 2/3;
    grid-row: 1/3;
  }

  .JK250523macoto .nav_button.button03{
    grid-column: 3/4;
    grid-row: 1/2;
    padding: calc(26 * var(--formula)) 0;
  }

  .JK250523macoto .nav_button.button04{
    grid-column: 3/4;
    grid-row: 2/3;
    padding: calc(26 * var(--formula)) 0;
  }

  .JK250523macoto .nav_button.button01.flex-wrapper,
  .JK250523macoto .nav_button.button02.flex-wrapper{
    flex-direction: column;
    gap: calc(33 * var(--formula));
  }

  .JK250523macoto .nav_follow{
    position: fixed;
    z-index: 10;
    width: 100%;
    bottom: 0;
    height: calc(180 * var(--formula));
    transform: translateY(100%);
    transition: transform .3s;
  }

  .JK250523macoto .nav_follow.visible {
    transform: translateY(0);
  }

  /************** text **************/
  .JK250523macoto .nav_button{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    padding: calc(37 * var(--formula)) 0 calc(20 * var(--formula));
    font-family: var(--font-ja);
    font-size: calc(24 * var(--formula));
    line-height: 1.56;
    font-feature-settings: "palt";
    letter-spacing: 0.075em;
    text-align: center;
    background-color: var(--color-brown);
  }

  .JK250523macoto .nav_button.button01,
  .JK250523macoto .nav_button.button02{
    border-right: 1px solid var(--color-white);
  }

  .JK250523macoto .nav_button.button03{
    justify-content: center;
    gap: calc(71 * var(--formula));
    border-bottom: 1px solid var(--color-white);
  }

  .JK250523macoto .nav_button.button04{
    justify-content: center;
    gap: calc(27 * var(--formula));
  }

  .JK250523macoto .nav_button a{
    color: var(--color-white);
  }

  .JK250523macoto .nav_button.button03 a,
  .JK250523macoto .nav_button.button04 a{
    margin-top: calc(-6 * var(--formula));
  } 

  .JK250523macoto .nav_button.current{
    background-color: #fbf9f7;
  }

  .JK250523macoto .nav_button.current a{
    color: var(--color-brown);
  }


  /************** image **************/
  .JK250523macoto .nav_follow .link-arrow{
    width: calc(26 * var(--formula));
  }

  .JK250523macoto .nav_follow .link-arrow.un-select{
    display: block;
  }

  .JK250523macoto .nav_follow .link-arrow.select{
    display: none;
  }

  .JK250523macoto .nav_follow .nav_button.current .link-arrow.un-select{
    display: none;
  }

  .JK250523macoto .nav_follow .nav_button.current .link-arrow.select{
    display: block;
  }


  /************** animation **************/
  /* .JK250523macoto .nav_follow.hidden {
    transition: all 0.6s 0.3s;
    transform: translateY(100%);
  }

  .JK250523macoto .nav_follow.visible {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateY(0);
    z-index: 100;
  } */
}