@media print, screen and (min-width: 768px) {
  .hirayaBg {
    width: clamp(2800px / 1440 * 1140, 2800 / 1440 * 100vw, 2800px);
    background-image: url('/lineup/hiraya/assets_202408/images/comfattic/bg_comfattic01.svg');
    aspect-ratio: 2800 / 4000;
    filter: blur(200px);
  }
}

@media screen and (max-width: 767px) {
  .hirayaBg {
    width: 100%;
    background-image: url('/lineup/hiraya/assets_202408/images/comfattic/bg_comfattic01_sp.svg');
    aspect-ratio: 375 / 3212;
    filter: blur(100px);
  }
}

#hirayaConfattic {
  padding: clamp(88px / 1440 * 1140, 88 / 1440 * 100vw, 88px) 0 0;
}

@media screen and (max-width: 767px) {
  #hirayaConfattic {
    padding: clamp(86px / 375 * 320, 86 / 375 * 100vw, 86px) 0 0;
  }
}

@media print, screen and (min-width: 768px) {
  .cmnRecomWrap[data-id^='hiraya/'] {
    padding-top: 160px !important;
  }
}

#hirayaConfattic .ld {
  position: relative;
  margin: 0 0 clamp(267px / 1440 * 1140, 267 / 1440 * 100vw, 267px);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .ld {
    margin: 0 0 clamp(80px / 375 * 320, 80 / 375 * 100vw, 80px);
  }
}

#hirayaConfattic .ld__in {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  #hirayaConfattic .ld__in {
    width: clamp(1240px / 1440 * 1140, 1240 / 1440 * 100vw, 1240px);
    margin: 0 auto;
    padding: clamp(80px / 1440 * 1140, 80 / 1440 * 100vw, 80px) 0 clamp(100px / 1440 * 1140, 100 / 1440 * 100vw, 100px);
    background: #fff;
  }
  #hirayaConfattic .ld__in::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: calc(100% - 1px);
    width: 100vw;
    height: 100%;
    background: #fff;
  }
}

#hirayaConfattic .ld__tt {
  margin: 0 0 clamp(26px / 1440 * 1140, 26 / 1440 * 100vw, 26px);
  color: #222;
  font-size: clamp(36px / 1440 * 1140, 36 / 1440 * 100vw, 36px);
  font-weight: 500;
  line-height: calc(52 / 36);
  letter-spacing: calc(3 / 36 * 1em);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .ld__tt {
    margin: 0 0 clamp(15px / 375 * 320, 15 / 375 * 100vw, 15px);
    font-size: clamp(24px / 375 * 320, 24 / 375 * 100vw, 24px);
    line-height: calc(34 / 24);
    letter-spacing: calc(1 / 24 * 1em);
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .ld__in2 {
    position: relative;
  }
}

#hirayaConfattic .ld__asd {
  position: absolute;
  top: clamp(32px / 1440 * 1140, 32 / 1440 * 100vw, 32px);
  right: clamp(26px / 1440 * 1140, 26 / 1440 * 100vw, 26px);
  font-size: clamp(12px / 1440 * 1140, 12 / 1440 * 100vw, 12px);
  line-height: calc(20 / 12);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .ld__asd {
    top: 0;
    right: clamp(13px / 375 * 320, 13 / 375 * 100vw, 13px);
    font-size: clamp(12px / 375 * 320, 12 / 375 * 100vw, 12px);
    line-height: calc(19 / 12);
  }
}

#hirayaConfattic .ld__p {
  position: relative;
  mix-blend-mode: darken;
}

@media print, screen and (min-width: 768px) {
  #hirayaConfattic .ld__p {
    position: absolute;
    top: clamp(-91px, -91 / 1440 * 100vw, -91px / 1440 * 1140);
    left: clamp(208px / 1440 * 1140, 208 / 1440 * 100vw, 208px);
    width: clamp(1352px / 1440 * 1140, 1352 / 1440 * 100vw, 1352px);
    pointer-events: none;
  }
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .ld__p {
    margin: 0 0 clamp(16px / 375 * 320, 16 / 375 * 100vw, 16px);
  }
}

#hirayaConfattic .ld__p img {
  display: block;
  width: 100%;
  height: auto;
}

#hirayaConfattic .ld__t {
  font-size: clamp(16px / 1440 * 1140, 16 / 1440 * 100vw, 16px);
  line-height: calc(36 / 16);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .ld__t {
    margin-top: -75px;
    padding: 75px 25px clamp(40px / 375 * 320, 40 / 375 * 100vw, 40px);
    background: #fff;
    font-size: clamp(16px / 375 * 320, 16 / 375 * 100vw, 16px);
  }
}

#hirayaConfattic .pt {
  display: flex;
  flex-direction: column;
  row-gap: clamp(240px / 1440 * 1140, 240 / 1440 * 100vw, 240px);
  position: relative;
  margin: 0 0 clamp(200px / 1440 * 1140, 200 / 1440 * 100vw, 200px);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .pt {
    row-gap: clamp(80px / 375 * 320, 80 / 375 * 100vw, 80px);
    margin: 0 0 clamp(80px / 375 * 320, 80 / 375 * 100vw, 80px);
  }
}

#hirayaConfattic .pt__bx {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  #hirayaConfattic .pt__bx {
    display: flex;
    width: clamp(1240px / 1440 * 1140, 1240 / 1440 * 100vw, 1240px);
    margin: 0 auto;
  }
}

#hirayaConfattic .pt__bx__p img,
#hirayaConfattic .pt__bx__ap img {
  display: block;
  width: 100%;
  height: auto;
}

@media print, screen and (min-width: 768px) {
  #hirayaConfattic .pt__bx__p {
    flex: 0 0 auto;
    width: clamp(735px / 1440 * 1140, 735 / 1440 * 100vw, 735px);
  }
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .pt__bx__p {
    margin: 0 0 clamp(40px / 375 * 320, 40 / 375 * 100vw, 40px);
  }
}

#hirayaConfattic .pt__bx__ap {
  position: absolute;
  width: clamp(310px / 1440 * 1140, 310 / 1440 * 100vw, 310px);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .pt__bx__ap {
    display: none;
  }
}

@media print, screen and (min-width: 768px) {
  #hirayaConfattic .pt__bx__i {
    flex: 1 1 auto;
  }
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .pt__bx__i {
    padding: 0 25px;
  }
}

#hirayaConfattic .pt__bx__i__tt {
  margin: 0 0 clamp(20px / 1440 * 1140, 20 / 1440 * 100vw, 20px);
  color: #222;
  font-size: clamp(24px / 1440 * 1140, 24 / 1440 * 100vw, 24px);
  font-weight: 500;
  line-height: calc(36 / 24);
  letter-spacing: calc(2 / 24 * 1em);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .pt__bx__i__tt {
    margin: 0 0 clamp(16px / 375 * 320, 16 / 375 * 100vw, 16px);
    font-size: clamp(20px / 375 * 320, 20 / 375 * 100vw, 20px);
    line-height: calc(30 / 20);
    letter-spacing: calc(1 / 20 * 1em);
  }
}

#hirayaConfattic .pt__bx__i__t {
  font-size: clamp(16px / 1440 * 1140, 16 / 1440 * 100vw, 16px);
  line-height: calc(36 / 16);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .pt__bx__i__t {
    font-size: clamp(16px / 375 * 320, 16 / 375 * 100vw, 16px);
  }
}

@media print, screen and (min-width: 768px) {
  #hirayaConfattic .pt__bx.is-01 {
    flex-direction: row;
  }
  #hirayaConfattic .pt__bx.is-01 .pt__bx__ap {
    bottom: clamp(-120px, -120 / 1440 * 100vw, -120px / 1440 * 1140);
    right: clamp(-200px, -100 / 1440 * 100vw, -100px / 1440 * 1140);
  }
  #hirayaConfattic .pt__bx.is-01 .pt__bx__i {
    padding: clamp(80px / 1440 * 1140, 80 / 1440 * 100vw, 80px) 0 0 clamp(110px / 1440 * 1140, 110 / 1440 * 100vw, 110px);
  }
  #hirayaConfattic .pt__bx.is-02 {
    flex-direction: row-reverse;
    align-items: flex-end;
  }
  #hirayaConfattic .pt__bx.is-02 .pt__bx__ap {
    top: clamp(-90px, -90 / 1440 * 100vw, -90px / 1440 * 1140);
    left: clamp(-200px, -100 / 1440 * 100vw, -100px / 1440 * 1140);
  }
  #hirayaConfattic .pt__bx.is-02 .pt__bx__i {
    padding: 0 0 clamp(40px / 1440 * 1140, 40 / 1440 * 100vw, 40px);
  }
}

#hirayaConfattic .cl {
  position: relative;
}

#hirayaConfattic .cl__p {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

#hirayaConfattic .cl__p img {
  display: block;
  width: 100%;
  height: auto;
}

#hirayaConfattic .cl__in {
  width: clamp(1240px / 1440 * 1140, 1240 / 1440 * 100vw, 1240px);
  margin: 0 auto;
  padding: clamp(20px / 1440 * 1140, 20 / 1440 * 100vw, 20px) 0 0;
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .cl__in {
    width: auto;
    padding: clamp(12px / 375 * 320, 12 / 375 * 100vw, 12px) 25px 0;
  }
}

#hirayaConfattic .cl__tt {
  margin: 0 0 clamp(60px / 1440 * 1140, 60 / 1440 * 100vw, 60px);
  color: #222;
  font-size: clamp(24px / 1440 * 1140, 24 / 1440 * 100vw, 24px);
  font-weight: 500;
  line-height: calc(36 / 24);
  letter-spacing: calc(2 / 24 * 1em);
  text-align: center;
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .cl__tt {
    margin: 0 0 clamp(30px / 375 * 320, 30 / 375 * 100vw, 30px);
    font-size: clamp(20px / 375 * 320, 20 / 375 * 100vw, 20px);
    line-height: calc(30 / 20);
    letter-spacing: calc(8 / 200 * 1em);
    text-align: left;
  }
  #hirayaConfattic .cl__tt > span {
    display: inline-block;
    white-space: nowrap;
  }
}

#hirayaConfattic .cl__nt > li {
  display: flex;
  font-size: clamp(12px / 1440 * 1140, 12 / 1440 * 100vw, 12px);
  line-height: calc(20 / 12);
}

@media screen and (max-width: 767px) {
  #hirayaConfattic .cl__nt > li {
    font-size: clamp(12px / 375 * 320, 12 / 375 * 100vw, 12px);
    line-height: calc(24 / 12);
  }
}

#hirayaConfattic .cl__nt > li > span {
  display: block;
}

#hirayaConfattic .cl__nt > li > span:nth-child(1) {
  flex: 0 0 auto;
}

#hirayaConfattic .cl__nt > li > span:nth-child(2) {
  flex: 1 1 auto;
}