@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Zen+Maru+Gothic:wght@500;700&display=swap");

.newyear2026 {
  --black: #1e1e1e;
  --red: #e71919;
  --beige: #f0d492;
  --white: #fff;
  --gold: #c1962c;
  --light_blue: #e4f2fd;
  --blue: #5495d7;
  --pink: #fc7171;

  --zenkaku: "Zen Kaku Gothic New", sans-serif;
  --zenmaru: "Zen Maru Gothic", sans-serif;

  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
  color: var(--black);
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  .newyear2026 {
    gap: 32px;
    font-size: 1.4rem;
  }
}
.newyear2026 img {
  width: 100%;
}

.newyear2026 .mv p {
  padding: 0 50px;
  font-family: var(--zenkaku);
  font-weight: 700;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .newyear2026 .mv p {
    padding: 0 12px;
  }
}

.newyear2026 .mv p .red {
  color: var(--red);
}

.newyear2026 .main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-radius: 16px;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .newyear2026 .main {
    gap: 32px;
    border-radius: 8px;
    padding: 40px 0;
  }
}

.newyear2026 .main.main-gold {
  background: var(--beige);
}

.newyear2026 .main.main-pink {
  background: #ffe5e5;
}

/* ボタン */
.button-area {
  display: flex;
  justify-content: center;
  gap: 32px;
  width: 100%;
  padding: 0 30px;
  font-family: var(--zenkaku);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .button-area {
    flex-direction: column;
    align-items: center;
    padding: 0 19px;
  }
}

.button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.button-title {
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .button-title {
    font-size: 1.6rem;
  }
}

.button {
  display: grid;
  place-content: center;
  width: 100%;
  max-width: 306px;
  height: 60px;
  border-radius: 100vh;
  color: var(--white) !important;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none !important;
}

.button-shinki {
  background: #e71919;
  box-shadow: 0 6px 0 0 #b31313;
}

.button-login {
  background: #18347d;
  box-shadow: 0 6px 0 0 #0f2152;
}

.button-anno {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
}

.button-anno .red {
  color: var(--red);
  font-weight: 700;
}

/* 商品 */
.present {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--zenkaku);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .present {
    gap: 16px;
  }
}

.present-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: max(25px, 50% - 580px/2);
  border-radius: 16px;
  background: var(--white);
  position: relative;
}
@media screen and (max-width: 768px) {
  .present-item {
    border-radius: 8px;
  }
}

.present-item::before,
.present-item::after {
  content: "";
  width: 100%;
  height: 80px;
}

.present-item::before {
  background: url("https://www.haseko.co.jp/branchera/assets/newyear-present-2026/newyear-present-bg-top-pc.png")
    no-repeat center / cover;
}
@media screen and (max-width: 768px) {
  .present-item::before {
    background: url("https://www.haseko.co.jp/branchera/assets/newyear-present-2026/newyear-present-bg-top-sp.png")
      no-repeat center / cover;
    aspect-ratio: 592 / 90;
  }
}

.present-item::after {
  background: url("https://www.haseko.co.jp/branchera/assets/newyear-present-2026/newyear-present-bg-bottom-pc.png")
    no-repeat center / cover;
}
@media screen and (max-width: 768px) {
  .present-item::after {
    background: url("https://www.haseko.co.jp/branchera/assets/newyear-present-2026/newyear-present-bg-bottom-sp.png")
      no-repeat center / cover;
    aspect-ratio: 592 / 140;
  }
}

.present-item_title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--gold);
  text-align: center;
}

.present-item_title-lg {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .present-item_title-lg {
    font-size: 2.2rem;
  }
}

.present-item_title-sm {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .present-item_title-sm {
    font-size: 1.6rem;
  }
}

.present-item_img {
  width: 410px;
}
@media screen and (max-width: 768px) {
  .present-item_img {
    width: 253px;
  }
}

.present-item_title-text {
  text-align: center;
  position: relative;
  z-index: 1;
}

.present-win {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (max-width: 768px) {
  .present-win {
    gap: 0;
  }
}

.present-win p {
  text-align: center;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .present-win p {
    font-size: 1.6rem;
  }
}

.present-win_box {
  margin-inline: max(25px, 50% - 560px/2);
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .present-win_box {
    padding: 16px 12px;
    border-radius: 8px;
  }
}

.flow {
  position: relative;
  z-index: 1;
}

.flow_inner {
  margin-inline: max(25px, 50% - 480px/2);
  border-radius: 16px;
  background: var(--white);
}
@media screen and (max-width: 768px) {
  .flow_inner {
    border-radius: 8px;
  }
}

.flow_title {
  padding: 12px 0;
  border-radius: 16px 16px 0 0;
  background: var(--gold);
  color: var(--white);
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .flow_title {
    border-radius: 8px 8px 0 0;
    font-size: 2rem;
  }
}

.flow-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 50px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .flow-list {
    gap: 20px;
    padding: 20px 26px;
  }
}

.flow-list li {
  display: flex;
  justify-content: center;
  gap: 54px;
}
@media screen and (max-width: 768px) {
  .flow-list li {
    gap: 10px;
  }
}

.flow-list li:not(:last-child) {
  padding-bottom: 20px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .flow-list li:not(:last-child) {
    padding-bottom: 16px;
  }
}

.flow-list li:not(:last-child)::after {
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='381' height='9' viewBox='0 0 381 9' fill='none'%3E%3Cpath d='M0.5 0.5L187.483 0.5L195.642 8.5L203.8 0.5C203.8 0.5 311.494 0.5 380.5 0.5' stroke='%235495D7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.flow-list_text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 132px;
}
@media screen and (max-width: 768px) {
  .flow-list_text {
    gap: 6px;
  }
}

.flow-list_step {
  display: block;
  padding: 6px 18px;
  border-radius: 100vh;
  background: var(--light_blue);
  color: var(--blue);
  text-align: center;
  font-weight: 700;
  line-height: 1;
}

.flow-list_text p {
  font-size: 1.2rem;
  font-weight: 700;
}

.flow-list_img {
  width: 100px;
}

.smile {
  max-width: 344px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.about {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-inline: max(22px, 50% - 560px/2);
}

@media screen and (max-width: 768px) {
  h3.about_title {
    margin-inline: -22px;
  }
}

.about_title {
  display: inline-block;
  color: var(--gold);
  text-align: center;
  font-family: var(--zenmaru);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.about_title-sm {
  font-size: 1.9rem;
}

.about_title-q {
  font-size: 2.8rem;
}

.about_title-sub {
  display: flex;
  gap: 8px;
  width: fit-content;
  margin-inline: auto;
  font-size: 1.8rem;
  font-weight: 500;
}

.about_title-sub::before,
.about_title-sub::after {
  content: "";
  border-left: 2px dotted var(--gold);
}

.about_title-sub::before {
  transform: rotate(-30deg);
}

.about_title-sub::after {
  transform: rotate(30deg);
}

.about_desc {
  text-align: justify;
  font-size: 1.4rem;
}

.about-what {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-list li {
  border-radius: 8px;
  background: var(--white);
}

.about-list_title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 15px;
  border-radius: 8px 8px 0 0;
  background: var(--pink);
  color: var(--white);
  text-align: center;
  font-family: var(--zenmaru);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .about-list_title {
    padding: 12px 0;
    font-size: 2rem;
  }
}

.about-list_title-sm {
  font-size: 1.6rem;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .about-list_title-sm {
    font-size: 1.4rem;
  }
}

.about-list_cont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px 30px;
}
@media screen and (max-width: 768px) {
  .about-list_cont {
    grid-template-columns: 1fr;
    padding: 20px 15px;
  }
}

.about-list_item {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media screen and (max-width: 768px) {
  .about-list_item {
    gap: 16px;
  }
}

.about-list_item.about-list_item-sm {
  gap: 12px;
}

.about-list_text {
  text-align: justify;
  font-size: 1.4rem;
  font-weight: 400;
}

.about-list_anno {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .about-list_anno {
    line-height: 1.4;
  }
}

.about-list_cluboff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.about-list_cluboff_text {
  color: var(--gold);
  text-align: center;
  font-family: var(--zenmaru);
  font-weight: 500;
  line-height: 1;
}

.about-list_cluboff_text-lg {
  font-size: 2.2rem;
}

.about-list_cluboff_text-md {
  font-size: 1.7rem;
}

.about-list_cluboff_text-sm {
  font-size: 1.6rem;
}

.about-list_bgimg {
  padding: 23px 20px 24px;
  border-radius: 8px;
  background: #f3f3f3;
}
@media screen and (max-width: 768px) {
  .about-list_bgimg {
    padding: 23px 35px 24px;
  }
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.75;
}

.detail dl:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--beige);
}

.detail dt {
  font-weight: 700;
}

.detail_text-sm {
  flex: 1.2rem;
}

.detail_text-red {
  color: var(--red);
  font-weight: 700;
}

.detail_text-link {
  color: var(--blue) !important;
  text-decoration: underline;
}

/* 飾り */
.deco-present01 {
  width: 128px;
  position: absolute;
  bottom: 150px;
  right: -40px;
}
@media screen and (max-width: 768px) {
  .deco-present01 {
    bottom: 30%;
  }
}

.deco-present02 {
  width: 70px;
  position: absolute;
  bottom: 150px;
  left: -12px;
}
@media screen and (max-width: 768px) {
  .deco-present02 {
    bottom: 24%;
  }
}

.deco-present03 {
  width: 60px;
  position: absolute;
}

.deco-present03-1 {
  top: 56px;
  right: -20px;
}
@media screen and (max-width: 768px) {
  .deco-present03-1 {
    top: 26%;
    right: -28px;
  }
}

.deco-present03-2 {
  bottom: 34px;
  left: -40px;
}
@media screen and (max-width: 768px) {
  .deco-present03-2 {
    bottom: 10%;
    left: -28px;
  }
}

.deco-cloud {
  width: 126px;
  position: absolute;
}

.deco-cloud-1 {
  top: 9px;
  left: -18px;
}

.deco-cloud-2 {
  top: 159px;
  right: -18px;
}
@media screen and (max-width: 768px) {
  .deco-cloud-2 {
    top: 5.7%;
    right: -29px;
  }
}

.deco-cloud-3 {
  top: 188px;
  right: 53px;
}
@media screen and (max-width: 768px) {
  .deco-cloud-3 {
    top: 6.3%;
    right: 46px;
  }
}

.deco-cloud-4 {
  top: 91px;
  left: -6px;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .deco-cloud-4 {
    top: 91px;
    left: -18px;
  }
}

.deco-cloud-5 {
  top: 186px;
  right: -18px;
}

.deco-cloud-6 {
  bottom: 65px;
  left: -28px;
}

.deco-cloud-7 {
  bottom: -58px;
  right: -9px;
}

.deco-cloud-8 {
  top: 284px;
  right: -40px;
}

.deco-cloud-9 {
  bottom: 127px;
  left: -36px;
}

.deco-cloud-10 {
  bottom: 76px;
  right: -30px;
}

.deco-cloud-11 {
  bottom: -64px;
  right: -10px;
}

.deco-cloud-12 {
  top: 190px;
  left: -20px;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .deco-cloud-12 {
    top: 64%;
  }
}

.deco-cloud-13 {
  top: 280px;
  right: -20px;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .deco-cloud-13 {
    top: 98%;
  }
}

.deco-cloud-14 {
  bottom: 221px;
  right: -10px;
  z-index: -1;
}

.deco-cloud-15 {
  bottom: -40px;
  left: 56px;
  z-index: -1;
}

.deco-cloud-16 {
  bottom: -70px;
  left: -14px;
  z-index: -1;
}

.deco-cloud-17 {
  top: 30%;
  right: -50px;
  z-index: -1;
}