/*
Theme Name: 復活！ボンフェス
Theme URI:
Author:
Description:
Version: 1.0
*/

/* 変数 */
:root {
  --theme-orange: #eb6100;
  --theme-red: #ba0000;
  --theme-yellow: #ffeaa1;
  font-size: min(2vw, 14px);
}

/* ==================================================
  Base
================================================== */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;

  .is-layout-flex {
    gap: 1rem;
  }
}

@media(min-width:1400px) {
  :root {
    font-size: 16px;
  }

  body {
    font-size: 16px;
  }
}

html {
  background-image: url(../../images/pat.png);
  background-repeat: repeat;
  background-attachment: fixed;
}

main {
  max-width: 750px;
  margin-inline: auto;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.65);
  padding-bottom: 9.5rem;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}


/* utility */
.text-lead {
  font-weight: 900;
  font-size: max(1.625rem, 14px);
  padding-inline: 1.5rem;
}

.font-weight-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.heading-target {
  color: #fff;
  background-image: url(../../images/background-target--white@2x.png), -moz-linear-gradient(135deg, rgb(34, 34, 34) 0%, rgb(68, 68, 68) 100%);
  background-image: url(../../images/background-target--white@2x.png), -webkit-linear-gradient(135deg, rgb(34, 34, 34) 0%, rgb(68, 68, 68) 100%);
  background-image: url(../../images/background-target--white@2x.png), -ms-linear-gradient(135deg, rgb(34, 34, 34) 0%, rgb(68, 68, 68) 100%);
  border-radius: 2.1875rem;
  background-size: 7.5rem, auto;
  background-repeat: no-repeat;
  background-position: -1rem center, center;
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  width: 100%;
  font-size: max(2rem, 20px);
}

.heading-stroke {
  font-size: max(1.4rem, 16px);
  font-weight: bold;
  color: rgb(0, 0, 0);
  line-height: 1.2;
  -webkit-text-stroke: 0.5rem #fff;
  letter-spacing: 0.1em;
  paint-order: stroke;
  stroke-linejoin: round;
  filter: drop-shadow(0.1875rem 0.1875rem 0 #000);
}

.heading-first-letter::first-letter {
  color: var(--theme-orange);
}

.heading-wrapper {
  width: 100%;
  padding: 0.5rem 1.5rem 1rem 1.5rem;
  border-radius: 1.5rem;
}

.heading-simple {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: max(1.5rem, 17px);
  line-height: 1.4;
}

.lead {
  background-image: url(../../images/background-target--green@2x.png);
  background-repeat: no-repeat;
  background-position: right 1.5rem;
  background-size: 10.625rem;
}

.background-stripe {
  background-size: auto auto;
  background-color: rgba(250, 224, 224, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(255, 255, 255, 0.25) 10px, rgba(255, 255, 255, 0.25) 20px);
  padding: 1.5rem;
  font-weight: bold;
}

.heading__stripe-inner {
  font-size: max(2rem, 22px);
  font-weight: bold;
}


/* news */
.news {
  border-radius: 1.625rem;
  background-color: rgb(238, 238, 238);
  padding: 1rem 1.5rem;
  margin-block: 2rem 3rem;
  margin-inline: 1.5rem;
}

.news-list {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    font-weight: bold;
  }
}

.news-list a {
  transition: .3s opacity;
}

.news-list a:hover {
  opacity: .7;
}

/* editor content */
.editor-content {
  padding-inline: 1.5rem;

  p {
    line-height: 160%;
  }

  p+p,
  p+figure,
  figure+p,
  figure+figure {
    margin-top: 0.75em;
  }
}

.editor-content__section {
  margin-block: 2rem;
  padding: 1.5rem;
}

.is-round {
  border-radius: 1.5rem;
}

.editor-content__section--fluid {
  margin-inline: -1.5rem;
}

[class*="area-okunai"],
[class*="area-okugai"] {
  position: relative;
}

[class*="area-okunai"]::before {
  content: "";
  position: absolute;
  width: 6.9375rem;
  height: 6.9375rem;
  background-image: url(../../images/area-okunai@2x.png);
  background-size: cover;
  z-index: 2;
  top: 0;
  left: 0;
  transform: translateY(-25%);
}

[class*="area-okugai"]::before {
  content: "";
  position: absolute;
  width: 6.9375rem;
  height: 6.9375rem;
  background-image: url(../../images/area-okugai@2x.png);
  background-size: cover;
  z-index: 2;
  top: 0;
  left: 0;
  transform: translateY(-25%);
}

.area-okunai--right::before,
.area-okugai--right::before {
  left: unset;
  right: 0;
}

.party-section {
  font-weight: bold;
  padding: 4rem 1.5rem 1.5rem 1.5rem;
  margin-top: 1.2rem;
  margin-bottom: 2rem;
  background-size: 100%, auto auto;
  background-color: rgba(255, 250, 215, 1);
  background-image: url(../../images/party-title_bottom@2x.png), repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 255, 255, 0.25) 10px, rgba(255, 255, 255, 0.25) 20px);
  background-repeat: no-repeat;
  background-position: top center;
}

.party-section .is-round {
  padding: 1.5rem;
  font-weight: normal;
  margin-top: 2rem;
}

.button--red {
  width: fit-content;
  border-style: solid;
  border-width: 0.25rem;
  border-color: var(--theme-red);
  background-color: rgb(255, 255, 255);
  border-radius: 3rem;
  color: var(--theme-red);
  text-align: center;
  font-weight: bold;
  font-size: max(1.625rem, 18px);
  padding: 0.5rem 4rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  position: relative;
}

.button--red::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  background-color: var(--theme-red);
  width: 0.75rem;
  height: 1.0625rem;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transform: translateY(-50%);
}

.button--red a {
  display: block;
  transition: .3s opacity;
}

.button--red a:hover {
  opacity: .7;
}

.button--orange {
  width: 100%;
  border-style: solid;
  background-color: var(--theme-orange);
  border-radius: 0.25rem;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: max(1.625rem, 18px);
  padding: 0.5rem 2.5rem;
  margin-inline: auto;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  position: relative;
}

.button--orange::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  background-color: var(--theme-yellow);
  width: 0.9rem;
  height: 0.7rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateY(-50%);
}

.button--orange a {
  display: block;
  transition: .3s opacity;
}

.button--yellow a:hover {
  opacity: .7;
}

@media(min-width:992px) {
  .button--orange {
    width: fit-content;
  }

  /* .button--red {
    max-width: 72.5%;
  } */
}

/* footer */
.footer {
  text-align: center;
  background-color: #000;
  color: #fff;
  padding-bottom: 2rem;
  position: relative;
  z-index: 2;

  img {
    width: 14.625rem;
    margin-inline: auto;
    margin-top: -7.3125rem;
  }
}

.copyright {
  text-align: center;
  margin-top: 0.5rem;
}


/* responsive setting */

/* pc style */
.pc-header {
  display: none;
}

@media(min-width:1200px) {
  .main {
    width: 40%;
    margin-right: 10%;
    max-width: 750px;
    position: relative;
    z-index: 1;
  }

  .pc-header {
    display: block;
    text-align: center;
    width: 50%;
    padding: 4rem 1.5rem;
    background-image: url(../../images/chara@2x.png);
    background-size: calc(100% + 6%);
    background-repeat: no-repeat;
    background-position: left calc(100% + 3%);
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100dvh;
    z-index: 0;

    img {
      max-width: 100%;
      margin: auto;
    }
  }

  .footer__inner {
    width: 40%;
    margin-right: 10%;
    max-width: 750px;
    margin-left: auto;
  }
}

@media(min-width : 1920px) {
  .main {
    /* width : 750px; */
  }

  .pc-header {

    width: calc(100% - 750px - 10%);
    padding:5%;
    /* background-size: calc(100vw - 750px - 200px + 54px); */
    /* background-position: left calc(100% + 24px); */
    /* img {
      max-width: 750px;
    } */
  }
}


/* effects */
.fade-in {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
}


/* 投稿ページ */
.single-page__content {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.single-page__title {
  font-size: max(2.2rem, 18px);
  font-weight: bold;
  margin-bottom: 1em;
  margin-inline: auto;
  width: fit-content;
}

.single-page__meta {
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
}