@charset "UTF-8";
/**** lity **********************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
body .lity {
  background: rgba(255, 255, 255, 0.8);
}

.lity-content {
  padding: 4% 3%;
  background-color: #ffffff;
}

.lity-image img {
  height: 85vh;
  -o-object-fit: contain;
  object-fit: contain;
}
@media (max-width: 769px) {
  .lity-image img {
    height: auto;
  }
}

.lity {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ///////////////////////////// */
/* ///// variable ///////////////////////////////// */
:root {
  --f-font-base: "본고딕", sans-serif;
  --f-font-02: "Oswald", sans-serif;
  --c-txt-base: #000000;
  /* bg */
  --c-bg: #3e3a39;
  --c-bg-main: #2d71b6;
  --c-bg-cont: #ffffff;
  /* color */
  --c-01: #3e3a39;
  --c-01-con: #ffffff;
  --c-02: #fff100;
  --c-02-con: #ffffff;
  --c-03: #e60012;
  --c-03-con: #ffffff;
  --c-04: #3e3a39;
  --c-04-con: #ffffff;
  /* gradation */
  --grad-01-color-a: #d12d4a;
  --grad-01-color-b: #2d71b6;
  --grad-01: linear-gradient(
    90deg,
    var(--grad-01-color-a) 0%,
    var(--grad-01-color-b) 100%
  );
  --grad-02-color-a: #0085c7;
  --grad-02-color-b: #29509b;
  --grad-02: linear-gradient(
    90deg,
    var(--grad-02-color-a) 0%,
    var(--grad-02-color-b) 100%
  );
  --grad-03-color-a: #d32c25;
  --grad-03-color-b: #9b5858;
  --grad-03: linear-gradient(
    90deg,
    var(--grad-03-color-a) 80%,
    var(--grad-03-color-b) 100%
  );
}

/* ///// founfation /////////////////////////////////  ****/
main * {
  box-sizing: border-box;
  color: var(--c-txt-base);
  word-break: keep-all;
  /*letter-spacing: 0.1rem;*/
  font-weight: 600;
  font-size: clamp(14px, 1.9vw, 25px);
  font-family: var(--f-font-base);
  line-height: 1.4;
  overflow-wrap: break-word;
  font-feature-settings: "palt";
}

/* ///// layout /////////////////////////////////  ****/
.l_body {
  margin: 0 auto;
  width: 100%;
  background-color: var(--c-bg);
}

.l_main {
  padding-top: 1.34em;
  background: var(--grad-01);
  background-color: var(--c-bg-main);
}

.l_main,
.l_width_main {
  position: relative;
  margin: 0 auto;
  width: min(100%, 1300px);
}

.l_width_full {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.l_cont,
.l_cont-a {
  position: relative;
  z-index: 1;
  padding: 3.8em 0 3em;
  background: var(--c-bg-cont);
}

.l_cont-a {
  padding-top: 1.9em;
}

.l_continner {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  width: 89.2%;
  text-align: center;
}
.l_continner > div {
  width: 100%;
}

@media (max-width: 769px) {
  .l_continner {
    width: 95%;
  }
}
/* ///// component ///////////////////////////////// */
/**** text **********************/
/* text-weight */
.c_txtw-bold {
  font-weight: 900;
  font-size: inherit;
}

/* text-align */
.c_txta-c {
  text-align: center;
}

/* text-color */
.c_color-a {
  color: var(--c-03);
}

/* text-size */
.c_txts-xs {
  font-size: clamp(10px, 1.4vw, 18px);
}

.c_txts-s {
  font-size: clamp(12px, 1.7vw, 22px);
}

.c_txts-l {
  font-size: clamp(18px, 2.4vw, 35px);
}

.c_txts-xl {
  font-size: clamp(22px, 3vw, 43px);
}

.c_txts-xxl {
  font-size: clamp(24px, 4vw, 58px);
}

/**** ttl **********************/
[class*="c_ttl-cate"] {
  display: flex;
  position: relative;
  z-index: 2;
  align-items: baseline;
  width: 57.9%;
  background-color: var(--c-01);
  color: var(--c-02);
  letter-spacing: 0;
  font-weight: 900;
  font-family: var(--f-font-02);
  line-height: 1;
}
[class*="c_ttl-cate"] span {
  color: var(--c-01-con);
  font-weight: 500;
}
@media (max-width: 769px) {
  [class*="c_ttl-cate"] {
    width: 80%;
  }
}

.c_ttl-cate-l {
  gap: 0.8em;
  margin-top: 1.34em;
  margin-bottom: -1.14em;
  padding: 0.8em 1.88em 0.57em;
  padding-left: 8.8%;
}

/**** btn **********************/
.c_btn-a {
  width: 100%;
}

.c_btn-a a {
  display: inline-flex;
  position: relative;
  align-items: center;
  background: var(--grad-01);
  background-color: var(--c-bg);
  color: var(--c-02-con);
  text-align: center;
  line-height: 1;
}
.c_btn-a a::after {
  position: absolute;
  top: 50%;
  right: 1.5em;
  content: "▶";
  font-size: 0.8em;
  transform: translatey(-50%);
}

/**** chip **********************/
[class*="c_chip-"] {
  display: inline-block;
}

.c_chip-a {
  background: var(--grad-01);
  color: var(--c-02);
  font-weight: 900;
  line-height: 1;
}

.c_chip-b {
  background: var(--grad-02);
  color: var(--c-02);
  font-weight: 900;
  line-height: 1;
}

.c_chip-c {
  background-color: var(--c-03);
  color: var(--c-03-con);
  font-weight: 900;
}

.c_chip-c::after {
  padding-bottom: -1%;
}

/**** attention **********************/
.c_attention {
  margin-top: 1.59em;
}
.c_attention p {
  margin-left: 1em;
  text-indent: -1em;
  font-size: inherit;
}
.c_attention p::before {
  content: "※";
}

/**** margin **********************/
.c_headarea {
  margin-top: 1em;
}
.c_headarea [class*="c_color-a"] {
  font-weight: inherit;
  font-size: inherit;
}

.c_txtarea {
  margin-top: 1.8em;
}

/**** グッズ箱 **********************/
.c_borderBox {
  display: flex;
  width: 100%;
}
.c_borderBox li {
  display: flex;
  flex-direction: column;
}
.c_borderBox li h4 {
  font-weight: 900;
}
.c_borderBox li h4 span {
  margin-left: 0.1em;
  color: inherit;
  letter-spacing: 0.1em;
  font-weight: inherit;
  font-size: 0.7em;
}
@media (max-width: 769px){
  .c_borderBox li h4 span {
    margin-left: 0.1em;
    color: inherit;
    font-weight: inherit;
    font-size: 0.7em;
    letter-spacing: 0;
  }
}
.c_borderBox .c_borderBox-innner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: solid 2px var(--c-04);
  border-top: none;
  border-radius: 0 0 2vw 0;
}
@media (max-width: 769px) {
  .c_borderBox .c_borderBox-innner {
    border: solid 1px var(--c-04);
    border-top: none;
  }
}

/**** 準備中 **********************/
.c_comingsoon {
  position: relative;
}
.c_comingsoon::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5764705882);
  content: "";
}
.c_comingsoon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #ffffff;
  content: "準備中";
  letter-spacing: 0.2em;
  font-size: 0.8em;
  transform: translate(-50%, -50%);
}
@media (max-width: 769px) {
  .c_comingsoon::after {
    letter-spacing: 0;
  }
}

/* ///// project ///////////////////////////////// */
/**** shop info **********************/
.p_shopinfo_pic {
  position: absolute;
  top: -6%;
  right: 7.2%;
  z-index: 2;
  width: 37.4%;
}
@media (max-width: 769px) {
  .p_shopinfo_pic {
    top: -4.5%;
    right: 3.2%;
    width: 43.4%;
  }
}

.p_shopinfo {
  display: grid;
  grid-template-areas: "detail map" "link map" "floor floor";
  grid-template-columns: auto 43.1%;
  grid-template-rows: repeat(3, auto);
  gap: 0 0.8em;
  color: var(--c-01);
  text-align: left;
  font-weight: 700;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}
@media (max-width: 769px) {
  .p_shopinfo {
    grid-template-columns: auto 34.5%;
  }
}

.p_shopinfo_detail {
  grid-area: detail;
  display: grid;
  grid-template-areas: "01 01txt" "02 02txt" "03 03txt" "04 04txt" "05 05txt";
  grid-template-columns: 35.3% 1fr;
  grid-template-rows: repeat(5, auto);
  gap: 1.13em 0;
  color: var(--c-01);
  font-weight: 600;
}
@media (max-width: 769px) {
  .p_shopinfo_detail {
    grid-template-columns: 42.3% 1fr;
  }
}
.p_shopinfo_detail dt,
.p_shopinfo_detail dd {
  padding-bottom: 1.13em;
  border-bottom: solid 1px;
  color: inherit;
  font-size: inherit;
}
.p_shopinfo_detail dt::before {
  content: "■";
}

.p_shopinfo_link {
  grid-area: link;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-top: 10em;
}
@media (max-width: 769px) {
  .p_shopinfo_link {
    grid-template-columns: 1fr 1fr;
  }
}
.p_shopinfo_link li {
  width: 100%;
}

.p_shopinfo_map {
  grid-area: map;
  margin-top: auto;
}

.p_shopinfo_floorInfo {
  grid-area: floor;
  margin-top: 1.4em;
  padding-top: 0.96em;
  border-top: solid 2px var(--c-01);
  color: inherit;
}
.p_shopinfo_floorInfo p {
  margin-bottom: 1.59em;
  color: inherit;
}
.p_shopinfo_floorInfo p::before {
  content: "■";
}

/**** open fair **********************/
.p_openFair-chip {
  padding: 0.72em 1.68em;
  line-height: 1;
}

/* open fair-goods */
.p_openFiar_goods {
  gap: 1.8em;
  flex-wrap: wrap;
  margin-top: 2.6em;
}
@media (max-width: 769px) {
  .p_openFiar_goods {
    gap: 1rem 0.3rem;
  }
}

[class*="p_openFiar_goodsCard"] h4 {
  padding: 0.46em 0;
  background: var(--grad-01);
  color: var(--c-01-con);
}

.p_openFiar_goodsCard-harf {
  width: calc(100% / 2 - 0.9em);
}
@media (max-width: 769px) {
  .p_openFiar_goodsCard-harf {
    width: calc(100% / 2 - 0.15rem);
  }
}

[class*="p_openFiar_goodsCard"] .c_borderBox-innner {
  padding: 1em 0 2em;
}
[class*="p_openFiar_goodsCard"] .c_borderBox-innner h5 {
  margin: 0.71em 0;
  color: var(--c-03);
  font-weight: 900;
}
[class*="p_openFiar_goodsCard"] .c_borderBox-innner h5 span {
  display: block;
  color: inherit;
  font-weight: inherit;
  font-size: 0.8em;
}

/* open fair-goods-個別 */
.p_openFiar_goodsCard-pic {
  display: flex;
  margin: auto auto;
}

.p_of-tosIllustCard {
  width: 89%;
}
.p_of-tosIllustCard span {
  display: inline-block;
  width: calc(100% / 5 - 0);
}

.p_of-toscClearFile {
  width: 50.4%;
}

.p_of-tosCanBadge {
  width: 55.6%;
}

.p_of-tosIllustBook {
  justify-content: space-between;
  width: 89%;
}
.p_of-tosIllustBook span:nth-of-type(1) {
  display: inline-block;
  width: 20.5%;
}
.p_of-tosIllustBook span:nth-of-type(n + 2) {
  display: inline-block;
  width: 37.3%;
}

/* open fair-renewalCampaign */
.p_renewal_goods-wrap {
  margin-top: 4.2em;
}

.p_renewal_goods {
  gap: 1.4em;
  margin-top: 2.2em;
}
@media (max-width: 769px) {
  .p_renewal_goods {
    gap: 0.2rem;
  }
}

.p_renewal_goodsCard {
  width: calc(100% / 3 - 0.4666666667em);
}
.p_renewal_goodsCard h4 {
  padding: 0.46em 0;
  background: var(--grad-02);
  color: var(--c-01-con);
}
@media (max-width: 769px) {
  .p_renewal_goodsCard h4 {
    line-height: 1.3;
  }
}
@media (max-width: 769px) {
  .p_renewal_goodsCard {
    width: calc(100% / 3 - 0.0666666667rem);
  }
}

.p_renewal_goodsCard .c_borderBox-innner {
  padding: 0.44em 0 1.2em;
}
.p_renewal_goodsCard .c_borderBox-innner h5 {
  margin: 0 0 1.2em;
  color: var(--c-03);
  font-weight: 900;
  line-height: 1.2;
}
@media (max-width: 769px) {
  .p_renewal_goodsCard .c_borderBox-innner h5 {
    letter-spacing: 0;
  }
}
.p_renewal_goodsCard .c_borderBox-innner h5 span {
  display: block;
  color: inherit;
  font-weight: inherit;
  font-size: 0.8em;
}
@media (max-width: 769px) {
  .p_renewal_goodsCard .c_borderBox-innner p {
    letter-spacing: 0.05rem;
  }
}

/* open fair-renewalCampaign-個別 */
.p_renewal_goodsCard-pic {
  display: flex;
  margin: auto auto;
}

.p_rg-originalGacha {
  width: 82.2%;
}

.p_rg-renewalClearFile {
  width: 56.2%;
}

.p_rg-renewalSignBoard {
  width: 61.6%;
}

/**** limited goods **********************/
.p_limitedGoods_pic {
  position: relative;
  top: -1.9em;
}

.p_limitedGoods {
  display: flex;
  gap: 4em;
  flex-direction: column;
  margin-top: 4.4em;
  width: 86.5%;
}
.p_limitedGoods li h4 {
  margin-top: 1.28em;
  margin-bottom: 0.42em;
  padding-bottom: 0.71em;
  border-bottom: solid 2px var(--c-txt-base);
  color: var(--c-03);
  font-weight: 900;
  line-height: 1;
}
.p_limitedGoods li p {
  font-weight: 900;
  line-height: 1;
}
.p_limitedGoods li p span {
  font-weight: inherit;
  font-size: 0.6em;
}
.p_limitedGoods .p_limitedGoods_text {
  padding-top: 1rem;
  font-weight: 600;
  line-height: 1.5;
  line-break: normal;
}
.p_limitedGoods .deleteBorder {
  border: 0;
}
/* recommendation */
.recommendation {
  background-color: rgba(3, 110, 184, 1);
  padding: 2rem;
  @media (max-width: 769px) {
    padding: 1rem;
  }
}
.recommendation_item_title {
  font-size: clamp(2rem, 1.2504rem + 1.5597vw, 3.2rem);
  color: rgb(255 239 32);
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: 0.3rem;
  padding-block-start: 1.5rem;
  padding-block-end: 2rem;
  @media (max-width: 769px) {
    font-size: 1rem;
    letter-spacing: 2px;
    padding-block-start: 1rem;
    padding-block-end: 1rem;
  }
}
.recommendation_item_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-width: 0;
  @media (max-width: 769px) {
    grid-template-columns: 100%;
  }
}
.recommendation_item_list_name {
  font-size: clamp(1.2rem, 0.3879rem + 1.6897vw, 2.5rem);
  color: #fff;
  padding-block: 1rem;
  @media (max-width: 769px) {
    font-size: 1rem;
    padding-block: 0.5rem;
  }
}
.recommendation_item_image {
  width: 67%;
  display: inline-block;
  margin: 0 auto;
  @media (max-width: 769px) {
    width: 75%;
  }
}
.recommendation_item_border {
  border: none;
  border-bottom: solid 2px #fff;
  width: 100%;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  @media (max-width: 769px) {
    border-bottom: solid 1px #fff;
  }
}
.recommendation_item_price {
  font-size: clamp(2rem, 0.7506rem + 2.5995vw, 4rem);
  color: #fff;
  @media (max-width: 769px) {
    font-size: 1.5rem;
  }
}
.recommendation_item_price_unit {
  font-size: clamp(2rem, 0.7506rem + 2.5995vw, 4rem);
  color: #fff;
  margin-inline-start: 0.5rem;
  @media (max-width: 769px) {
    font-size: 1.5rem;
  }
}
.recommendation .recommendation_item_text {
  font-size: clamp(1rem, -0.1461rem + 2.3845vw, 1.8rem);
  font-weight: normal;
  color: #fff;
  line-height: 1.8;
  padding-block: 1rem 2rem;
  @media (max-width: 769px) {
    font-size: 0.8rem;
    word-break: auto-phrase;
    line-height: 1.6;
  }
  &.padding-block-end-0 {
    padding-block-end: 0;
  }
}
.good-points {
  background-color: #fff;
}
.good-points_title {
  width: 40%;
  margin: 0 auto;
  padding-block-start: clamp(1.5rem, 0.927rem + 1.1923vw, 2rem);
  padding-block-end: clamp(1rem, -0.1461rem + 2.3845vw, 2rem);
  @media (max-width: 769px) {
    width: 70%;
  }
}
.good-points_item_wrapper {
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
  @media (max-width: 769px) {
    padding: 1rem 1rem 2rem 1rem;
    gap: 2rem;
  }
}
.good-points_item_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  &.row-reverse {
    flex-direction: row-reverse;
    @media (max-width: 769px) {
      flex-direction: column;
    }
  }
  & .good-points_item_list_headline {
    line-height: 1.3;
  }
  & .good-points_item_list_text {
    line-height: 1.5;
    font-weight: 600;
  }
  @media (max-width: 769px) {
    flex-direction: column;
  }
}
.good-points_item_list_image-wrapper {
  width: 34%;
  @media (max-width: 769px) {
    width: 100%;
  }
}
.good-points_item_list_text-wrapper {
  width: 66%;
  text-align: left;
  @media (max-width: 769px) {
    width: 100%;
  }
}
.good-points_item_list_headline {
  font-size: clamp(1rem, -0.1461rem + 2.3845vw, 1.5rem);

  padding-block-end: 1rem;
  @media (max-width: 769px) {
    font-size: 1rem;
    text-align: center;
  }
}
.good-points_item_list_text {
  font-size: clamp(1rem, -0.1461rem + 2.2vw, 1.7rem);
  padding-block-start: 1rem;
  position: relative;
  &::before {
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #000000;
    position: absolute;
    top: 0;
  }
  @media (max-width: 769px) {
    text-align: center;
  }
}

.moreover {
  margin-block-start: 4px;
  background-color: #fff;
  border-radius: 0 0 5rem 0;
  @media (max-width: 769px) {
    border-radius: 0 0 2rem 0;
  }
}
.moreover_title {
  width: 40%;
  margin: 0 auto;
  padding-block: 2rem;
  @media (max-width: 769px) {
    width: 70%;
  }
}
.moreover_item_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  padding-inline: 1.5rem;
  padding-block-start: 0.5rem;
  padding-block-end: 2rem;
  & .moreover_item_list_headline {
    line-height: 1.3;
  }
  & .moreover_item_list_text {
    line-height: 1.5;
    font-weight: 600;
  }
  @media (max-width: 769px) {
    flex-direction: column;
  }
}
.moreover_item_list_image-wrapper {
  width: 35%;
  @media (max-width: 769px) {
    width: 100%;
  }
}
.moreover_item_list_text-wrapper {
  width: 65%;
  text-align: left;
  @media (max-width: 769px) {
    width: 100%;
  }
}
.moreover_item_list_headline {
  font-size: clamp(1rem, -0.1461rem + 2.3845vw, 2rem);
  padding-block-end: 1rem;
  @media (max-width: 769px) {
    font-size: 0.8rem;
  }
  & .extra-large {
    font-size: clamp(2rem, -0.0629rem + 4.2921vw, 2.8rem);
    @media (max-width: 769px) {
      font-size: 1.2rem;
    }
  }
  & .quotation-mark {
    font-size: clamp(2rem, -0.0629rem + 4.2921vw, 3.8rem);
    font-weight: normal;
    @media (max-width: 769px) {
      font-size: 1.2rem;
    }
  }
  & .large {
    font-size: clamp(1.5rem, -0.2191rem + 3.5768vw, 3rem);
    @media (max-width: 769px) {
      font-size: 1rem;
    }
  }
  @media (max-width: 769px) {
    text-align: center;
  }
}

.moreover_item_list_text {
  font-size: clamp(1rem, -0.1461rem + 2.3845vw, 2rem);
  padding-block-start: 1rem;
  position: relative;
  word-break: normal;
  @media (max-width: 769px) {
    text-align: center;
  }
}

/* limited goods-個別 */
.p_limitedGoodsCard-pic {
  display: flex;
  justify-content: space-between;
}
.p_limitedGoodsCard-pic span {
  display: inline-block;
}

.p_lg-premiumCanvas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

.p_lg-gosyuincho {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.p_lg-wallScroll span {
  width: 20.7%;
}

.p_lg-acrylicStand span {
  width: 23.4%;
}

.p_lg-ema {
  margin: 0 auto;
  width: 92.3%;
}
.p_lg-ema span {
  width: 47.3%;
}

.p_lg-tenugui span {
  width: 22.3%;
}

.p_lg-masu {
  margin: 0 auto;
  width: 95.2%;
}
.p_lg-masu span {
  width: 30.3%;
}

.p_lg-canBadge span {
  width: 23.1%;
}

/* limited goods-other goods */
.p_ohterGoods-wrap {
  margin-top: 3.8em;
}

.p_ohterGoods {
  display: flex;
  gap: 0.8em;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.4em;
}
.p_ohterGoods li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45em;
  width: 49.2%;
  background: var(--grad-03);
  color: var(--c-01-con);
  font-size: inherit;
}
@media (max-width: 769px) {
  .p_ohterGoods li {
    flex-direction: column;
    width: 42.2%;
  }
}
.p_ohterGoods li h4,
.p_ohterGoods li p {
  color: inherit;
  text-align: left;
  font-weight: 900;
}
.p_ohterGoods li h4 {
  width: 45%;
  border-right: solid 2px;
  font-size: inherit;
}
@media (max-width: 769px) {
  .p_ohterGoods li h4 {
    margin-top: auto;
    width: 100%;
    border-right: 0;
    border-bottom: solid 2px;
  }
}
.p_ohterGoods li h4 span {
  color: inherit;
  font-weight: inherit;
  font-size: 0.8em;
}
.p_ohterGoods li p {
  margin-left: 0.42em;
}
@media (max-width: 769px) {
  .p_ohterGoods li p {
    margin-left: auto;
  }
}
.p_ohterGoods li p span {
  color: inherit;
  font-weight: inherit;
  font-size: 0.6em;
}

/**** novelty **********************/
.p_novelty-chip {
  padding: 0.31em 0.72em;
  line-height: 1;
}

.p_novelty_borerTop {
  margin-top: 1.4em;
  padding-top: 1.96em;
  width: 100%;
  border-top: solid 3px var(--c-txt-base);
}

/**** other **********************/
.p_btn_contact {
  margin-top: 1em;
}
.p_btn_contact a {
  padding: 1.85em;
  width: 100%;
  text-align: left;
}
@media (max-width: 769px) {
  .p_btn_contact a {
    justify-content: left;
  }
}

/* ///// nav ///////////////////////////////// */
/* color */
:root {
  --nav_bg: #3e3a39;
  --nav_clausearea: #25205667;
  --nav_color: #ffffff;
  --nav_shikiri: #ffffff;
}

[id^="n-"]:target {
  scroll-margin: min(5vw, 60px);
}
@media (max-width: 769px) {
  [id^="n-"]:target {
    scroll-margin: 40px;
  }
}

/* menu */
.l_gnav_wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  border: 2px solid var(--nav_color);
  border-right: none;
  border-left: none;
  background-color: var(--nav_bg);
}

@media (max-width: 769px) {
  .l_gnav_wrap {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    height: 100%;
    border: none;
    background-color: initial;
    pointer-events: none;
  }
  main:has(#p_gnav_sp_trigger:checked) {
    z-index: 3;
  }
}
.l_gnav_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 769px) {
  .l_gnav_inner {
    display: block;
    position: sticky;
    top: 0;
    right: 0;
    width: 100vw;
    transition: 0.5s;
    pointer-events: auto;
  }
}
.l_gnav {
  display: flex;
  gap: 9%;
  align-items: center;
  justify-content: center;
  padding: 1.5% 0;
  width: 100%;
}

@media (max-width: 769px) {
  .l_gnav {
    display: flex;
    gap: 2rem;
    position: fixed;
    top: 0;
    left: 100%;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 30%;
    padding-top: 25%;
    width: 70%;
    height: 100%;
    background-color: var(--nav_bg);
    transition: 0.5s;
    pointer-events: auto;
  }
}
.l_gnav span {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

@media (max-width: 769px) {
  .l_gnav span:not(:first-child) {
    margin-left: 0;
  }
}
.l_gnav span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -2.5em;
  height: 0.8em;
  border-left: solid 2px;
  color: var(--nav_shikiri);
  content: "";
  transform: translatey(-50%);
}

@media (max-width: 769px) {
  .l_gnav span:not(:last-child)::after {
    display: none;
  }
}
.l_gnav a {
  margin-left: 1%;
  padding-left: 1%;
  color: var(--nav_color);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.1vw;
  font-weight: 900;
  font-size: clamp(20px, 2.9vw, 15px);
  font-family: var(--f-font-02);
  line-height: 1;
}

@media (max-width: 769px) {
  .l_gnav a {
    text-align: center;
    font-size: 1.7rem;
    line-height: 1;
  }
}
.l_gnav a:hover {
  opacity: 0.5;
  transition: 0.3s;
}

@media (max-width: 769px) {
  .l_gnav img {
    width: auto;
    height: 30px;
  }
}
/* sp */
@media (max-width: 769px) {
  header {
    padding-top: 50px;
  }
  /* 閉じ状態 */
  .l_gnav_sp_headarea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    width: 100%;
    background-color: var(--nav_bg);
    transition: 0.5s;
  }
  /* ハンバーガーマーク */
  .p_gnav_sp_btn {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    height: 40px;
  }
  .p_gnav_sp_btn span,
  .p_gnav_sp_btn span::before,
  .p_gnav_sp_btn span::after {
    display: block;
    margin-right: 10px;
    width: 25px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--nav_color);
    transition: 0.3s;
  }
  .p_gnav_sp_btn span::before,
  .p_gnav_sp_btn span::after {
    position: absolute;
    content: "";
  }
  .p_gnav_sp_btn span::before {
    top: 10px;
  }
  .p_gnav_sp_btn span::after {
    top: 28px;
  }
  /* 閉じるマーク */
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .l_gnav_sp_head {
    opacity: 0;
  }
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked)
    :is(.l_gnav_sp_headarea, .p_gnav_sp_btn span) {
    background-color: initial;
  }
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::before,
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::after {
    top: 25px;
    right: 0;
  }
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::before {
    transform: rotate(45deg);
  }
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::after {
    transform: rotate(-45deg);
  }
  /* 閉じるマーク位置 */
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn {
    position: fixed;
    top: 0;
    right: 0;
    background-color: inherit;
  }
  /* 閉じるエリア */
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .l_gnav_spclausearea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nav_clausearea);
    opacity: 1;
    transition: 0.5s;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  /* メニュー開閉アニメーション用 */
  .l_gnav_inner:has(#p_gnav_sp_trigger:checked) .l_gnav {
    left: 0;
  }
}
/* チェックボックス非表示 */
#p_gnav_sp_trigger {
  display: none;
}

/* ///// responsive ///////////////////////////////// */
.sp {
  display: none;
}

.pc {
  display: block;
}

.br_pc {
  display: block;
}

@media (max-width: 769px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  .br {
    display: block;
  }
  .br_pc {
    display: none;
  }
}

/* //////////////////////言語切り替え///////////////////////////// */

ul {
  list-style: none;
}
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}


.lang-btn {
  height: 60px;
  width: 60px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #DD0E4C;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
}

@media (max-width: 769px){
  .lang-btn {
    height: 60px;
    width: 60px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #DD0E4C;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
  }
}
.lang-btn-up {
  right: 10px;
  bottom: 100px;
  transition: all 1s;
}
.lang-content {
  background-color: #0470BB;
  border-radius: 99999px;
  display: none;
  width: 60px;
  padding-bottom: 70px;
  position: fixed;
  z-index: 9999999;
  right: 10px;
  bottom: 12px;
}
@media (max-width: 769px){

}
@media (max-width: 769px){
  .lang-content {
    background-color: #0470BB;
    border-radius: 99999px;
    display: none;
    width: 60px;
    padding-bottom: 70px;
    position: fixed;
    z-index: 9999999;
    right: 10px;
    bottom: 12px;
  }
}
.lang-content-up {
  bottom: 100px;
  transition: all 1s;
}
.lang-content li a {
  background-color: #fff;
  border-radius: 50%;
  color: #0470bb;
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
  height: 50px;
  padding-top: 16px;
  margin: 5px auto;
  text-align: center;
  width: 50px;
}
.lang:hover .lang-content {
  display: block;
  transition: all .5s;
}
#lang:checked ~ .lang-content {
  display: block;
  transition: all .5s;
}
.lang-check {
  display: none;
}
.lang img{
  width: 80%;
  filter: brightness(0) invert(1);
}


.js-fadein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.pagetop {
  height: 60px;
  width: 60px;
  position: fixed;
  right: 10px;
  bottom: 30px;
  background: #0470bb;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999;
}
.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: translateY(20%) rotate(-45deg);
}
.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}