@charset "utf-8";

/** ***************************************************************************
 * 共用
 * ************************************************************************* */

#main {
  padding-bottom: 0;
}

/** ***************************************************************************
 * ページタイトル
 * ************************************************************************* */

#page-header {
  padding-bottom: 280px;
  color: #7e5f00;
  background-image:
    url("../_image/_common/icon-sakura-2.png"),
    url("../_image/_common/image-character-1.png");
  background-position:
    left 5% bottom 10%,
    right 0% bottom 0;
  background-size:
    129px 152px,
    160px 268px;
  background-repeat:
    no-repeat;
}

@media screen and (min-width:768px) {

  #page-header {
    padding-bottom: 50px;
    background-position:
      left 8% bottom 20%,
      right 5% bottom 0;
    background-size:
      129px 152px,
      192px 320px;
  }

}

/**
 * タイトル
 */

#page-header .title {
  margin-bottom: 1.25em;
  padding-top: 90px;
  line-height: 1.4;
  font-size: 2.125em;
  font-weight: 900;
  background: url("../_image/_common/logo-2.png") top center / 80px 89px no-repeat;
}

#page-header .title small {
  font-size: 0.593em;
  display: block;
}

@media screen and (min-width:768px) {

  #page-header .title {
    letter-spacing: 1px;
    font-size: 3.176em;
  }

}

/**
 * 紹介文
 */

#page-header div.lead {
  line-height: 2;
  font-weight: 500;
}

/** ***************************************************************************
 * サロン 
 * ************************************************************************* */

/**
 * サロン内容
 */

#salon {
  background: url("../_image/_common/icon-decoration-1.png") top right / 67px 96px no-repeat;
  position: relative;
  z-index: 0;
}

#salon .salon-contents {
  margin-top: 6em;
  position: relative;
  z-index: 0;
}

#salon .salon-contents::before {
  content: '';
  position: absolute;
  z-index: -1;
}

#salon .salon-contents::after {
  content: '';
  width: var(--innerWidth);
  max-width: none;
  height: 100%;
  background-color: rgb(var(--accentcolor-1));
  position: absolute;
  z-index: -2;
  top: 0.875em;
}

@media screen and (min-width:768px) {

  #salon {
    background-position: 60% 3em;
    background-size: 67px 96px;
  }

  #salon .salon-contents {
    margin-top: 3em;
  }

  #salon .salon-contents::after {
    width: calc(var(--innerWidth) / 2);
  }

}

/* 奇数要素 */

#salon .salon-contents:nth-of-type(odd) {
  padding-right: 20%;
  padding: 0 20% 2em 0;
}

#salon .salon-contents:nth-of-type(odd)::before {
  width: 115px;
  height: 91px;
  background: url("../_image/_common/icon-decoration-2.png") 0 0 / 100% 100% no-repeat;
  top: calc(100% - 5px);
  left: 15px;
}

#salon .salon-contents:nth-of-type(odd)::after {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  right: 0;
}

@media screen and (min-width:768px) {

  #salon .salon-contents:nth-of-type(odd) {
    padding-right: 60%;
    padding: 0 60% 2em 0;
  }

  #salon .salon-contents:nth-of-type(odd)::after {
    right: 50%;
  }

}

/* 偶数要素 */

#salon .salon-contents:nth-of-type(even) {
  padding: 0 0 2em 20%;
}

#salon .salon-contents:nth-of-type(even)::before {
  width: 121px;
  height: 152px;
  background: url("../_image/_common/icon-decoration-3.png") 0 0 / 100% 100% no-repeat;
  top: calc(100% - 60px);
  right: 5px;
}

#salon .salon-contents:nth-of-type(even)::after {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  left: 0;
}

@media screen and (min-width:768px) {

  #salon .salon-contents:nth-of-type(even) {
    margin-top: -6em;
    padding: 0 0 2em 60%;
  }

  #salon .salon-contents:nth-of-type(even)::after {
    left: 50%;
  }

}

/* タイトル */

#salon .salon-contents .contents-title {
  width: fit-content;
  margin-bottom: 20px;
  padding: 0.125em 3em 0.25em;
  color: #fff;
  font-weight: 500;
  border-radius: 9999px;
  background-color: rgb(var(--accentcolor-3));
  position: relative;
  z-index: 0;
}

#salon .salon-contents:nth-of-type(even) .contents-title {
  margin-left: auto;
}

#salon .salon-contents .contents-title::before {
  content: '＼ ' attr(data-en) ' ／';
  width: 100%;
  color: rgb(var(--accentcolor-3));
  font-size: 1.5em;
  font-weight: 500;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: -2em;
  left: 0;
  break-before: 0;
}

@media screen and (min-width:768px) {

  #salon .salon-contents .contents-title {
    margin-bottom: 30px;
  }

}

/* 紹介文 */

#salon .salon-contents div.lead {
  color: rgb(var(--accentcolor-3));
  font-weight: 500;
}

/* サロン内容 */

#salon .salon-contents div.program {
  margin-top: 1.5em;
}

/**
 * キャッチコピー
 */

#salon div.catchcopy {
  margin-top: 6em;
  color: rgb(var(--accentcolor-3));
  line-height: 2;
  font-size: 1.389em;
  font-weight: 500;
}

#salon div.catchcopy span {
  padding-right: 1.5em;
  padding-bottom: 0.25em;
  border-bottom: 2px dashed rgb(var(--accentcolor-3));
}

@media screen and (min-width:768px) {

  #salon div.catchcopy {
    margin: unset;
    position: absolute;
    z-index: 2;
    left: 2em;
    bottom: 0;
  }

}

/** ***************************************************************************
 * 詳細情報
 * ************************************************************************* */

#detail::after {
  clip-path: shape(
    from 0 18px,
    curve to 100% 8px with 35% 40px / 65% -17px,
    vline to 100%,
    hline to 0%,
    close
  );
}

@media screen and (min-width:768px) {

  #detail::after {
    clip-path: shape(
      from 0 30px,
      curve to 100% 30px with 30% 150px / 65% -70px,
      vline to 100%,
      hline to 0%,
      close
    );
  }

}

/**
 * 参加対象
 */

@media screen and (min-width:768px) {

  #detail-target {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

}

/* タイトル */

#detail-target .column-title {
  width: 5em;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width:768px) {

  #detail-target .column-title {
    width: unset;
    margin: unset;
  }

}

/* 参加対象 */

#detail-target div.target {
  margin-top: 1.5em;
}

#detail-target div.target ul[class*="list"] {
  font-size: 1.125em;
  font-weight: 500;
}

@media screen and (min-width:768px) {

  #detail-target div.target {
    margin: 4em 0 0 1em;
  }

  #detail-target div.target ul[class*="list"] {
    font-size: 1.22em;
  }

}