@charset "UTF-8";
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

a {
  background-color: transparent;
}

img {
  border-style: none;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  color: #000;
  font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-optical-sizing: auto;
  font-size: 2.6vw;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3571428571;
}
@media screen and (min-width: 375px) {
  html, body {
    font-size: 2.6vw;
  }
}
@media screen and (min-width: 576px) {
  html, body {
    font-size: 2.6vw;
  }
}
@media screen and (min-width: 768px) {
  html, body {
    font-size: 20px;
  }
}
@media screen and (min-width: 992px) {
  html, body {
    font-size: 24px;
  }
}
@media screen and (min-width: 1200px) {
  html, body {
    font-size: 28px;
  }
}

body {
  background-color: #ffffea;
  position: relative;
  width: 100%;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

a {
  color: #000;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a {
    -webkit-transition: color 0.15s linear 0s;
    -moz-transition: color 0.15s linear 0s;
    -ms-transition: color 0.15s linear 0s;
    -o-transition: color 0.15s linear 0s;
    transition: color 0.15s linear 0s;
  }
  a:hover {
    color: #cb2072;
  }
}

* {
  letter-spacing: calc(var(--ls) * 0.01em);
}

picture,
picture > img {
  display: block;
}

.page__content {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cmn__contwidth {
  margin: 0 auto;
  width: 78.75vw;
}
@media screen and (min-width: 576px) {
  .cmn__contwidth {
    width: 78.75vw;
  }
}
@media screen and (min-width: 768px) {
  .cmn__contwidth {
    width: 710px;
  }
}
@media screen and (min-width: 992px) {
  .cmn__contwidth {
    width: 850px;
  }
}
@media screen and (min-width: 1200px) {
  .cmn__contwidth {
    width: 960px;
  }
}

@media screen and (max-width: 575px) {
  .sm-only {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sm-only {
    display: none;
  }
}

@media screen and (min-width: 576px) {
  .xs-ssm {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .not-sm {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .sm-over {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

header {
  display: flex;
  height: 36px;
  justify-content: center;
  left: 0;
  padding: 5px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 576px) {
  header {
    height: 50px;
  }
}
@media screen and (min-width: 768px) {
  header {
    height: 70px;
    justify-content: space-between;
    padding: 10px 20px 10px 34px;
  }
}
header a {
  display: block;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  header a {
    transition: filter 0.15s linear;
  }
  header a:hover {
    filter: drop-shadow(0 0 5px rgb(255, 255, 255));
  }
}
header a.psp {
  background: url(../img/logo-psp@2x.png) 50% 50%/180px auto no-repeat;
  width: 200px;
}
@media screen and (min-width: 576px) {
  header a.psp {
    background-size: 280px auto;
    width: 300px;
  }
}
header a.sgr {
  display: none;
}
@media screen and (min-width: 768px) {
  header a.sgr {
    background: url(../img/logo-sgr@2x.png) 50% 50%/114px auto no-repeat;
    display: block;
    width: 134px;
  }
}

footer {
  background-color: #A47C28;
  color: #fff;
  padding-bottom: 58px;
  padding-top: 47px;
  text-align: center;
}
footer .notes {
  font-size: 11px;
  line-height: 1.75;
  font-weight: normal;
}
@media screen and (min-width: 576px) {
  footer .notes {
    font-size: 13px;
  }
}
@media screen and (min-width: 768px) {
  footer .notes {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) {
  footer .notes {
    font-size: 16px;
  }
}
footer .sns-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  list-style: none;
  margin: 22px 0;
  padding: 0;
}
footer .sns-links li {
  height: 38px;
  width: 38px;
}
footer .sns-links li > a {
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 100%;
  width: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  footer .sns-links li > a {
    transition: filter 0.15s linear;
  }
  footer .sns-links li > a:hover, footer .sns-links li > a:active {
    filter: drop-shadow(0 0 4px #fff);
  }
}
footer .sns-links li > a.xt {
  background-image: url(../img/sns-xt-w.svg);
}
footer .sns-links li > a.fa {
  background-image: url(../img/sns-fa-w.svg);
}
footer .sns-links li > a.in {
  background-image: url(../img/sns-in-w.svg);
}
footer .copyright {
  font-size: 9px;
  font-weight: normal;
  letter-spacing: 0.01em;
  line-height: 1;
}
@media screen and (min-width: 576px) {
  footer .copyright {
    font-size: 11px;
  }
}
@media screen and (min-width: 992px) {
  footer .copyright {
    font-size: 12px;
  }
}

.title__sect {
  align-items: center;
  background: url(../img/title-tile-sp@1x.jpg) 50% 50%/cover no-repeat;
  display: flex;
  height: 58.7vw;
  justify-content: center;
  width: 100vw;
}
@media screen and (min-width: 768px) {
  .title__sect {
    background-image: url(../img/title-tile-pc@1x.jpg);
    height: 451px;
  }
}
@media screen and (min-width: 992px) {
  .title__sect {
    background-image: url(../img/title-tile-pc@2x.jpg);
    height: 583px;
  }
}
@media screen and (min-width: 1200px) {
  .title__sect {
    height: 705px;
  }
}
@media screen and (min-width: 1360px) {
  .title__sect {
    height: 798px;
  }
}
.title__sect .content {
  background: url(../img/title-jp-sp@2x.png) 50% 50%/cover no-repeat;
  height: 50.4vw;
  width: 118.4vw;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .title__sect .content {
    height: 388px;
    width: 910px;
  }
}
@media screen and (min-width: 992px) {
  .title__sect .content {
    background-image: url(../img/title-jp-pc@2x.png);
    height: 501px;
    width: 1175px;
  }
}
@media screen and (min-width: 1200px) {
  .title__sect .content {
    height: 606px;
    width: 1421px;
  }
}
@media screen and (min-width: 1360px) {
  .title__sect .content {
    height: 686px;
    width: 1610px;
  }
}

.event__sect {
  background: url(../img/event-bgtile@1x.png) 50% -0.7vw/6.6vw auto repeat;
  border-top: 3px solid #5f3813;
  position: relative;
}
@media screen and (min-width: 768px) {
  .event__sect {
    border-top-width: 6px;
  }
}

.event__sidetiles {
  background-image: url(../img/event-sidetile-lt-sp@1x.png), url(../img/event-sidetile-rt-sp@1x.png);
  background-position: left 0.7vw top 4.4vw, right 0.7vw top 4.4vw;
  background-repeat: repeat-y;
  background-size: 17.4vw, 14.7vw;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .event__sidetiles {
    background-image: url(../img/event-sidetile-lt-pc@1x.png), url(../img/event-sidetile-rt-pc@1x.png);
    background-size: 11.25rem, 9.5357142857rem;
    background-position: left 1.1785714286rem top 0, right 1.4642857143rem top 0;
    width: 992px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 992px) {
  .event__sidetiles {
    width: 1200px;
  }
}
@media screen and (min-width: 1200px) {
  .event__sidetiles {
    width: 1360px;
  }
}

.event__contents {
  position: relative;
  padding-top: 3.0714285714rem;
  padding-bottom: 1.0714285714rem;
}
.event__contents h2 {
  background: url(../img/event-sect-title@1x.png) 50% 0/contain no-repeat;
  height: 4.5rem;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .event__contents h2 {
    background-image: url(../img/event-sect-title@2x.png);
  }
}
.event__contents article {
  padding-bottom: 3.0714285714rem;
  padding-top: 3.5714285714rem;
  position: relative;
}
.event__contents article .date {
  background-color: #cb2072;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 4.0357142857rem;
  border-radius: 50%;
  height: 6.9642857143rem;
  left: -1.7142857143rem;
  position: absolute;
  top: 0.7142857143rem;
  width: 6.9642857143rem;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.event__contents article picture {
  position: relative;
}
.event__contents article picture > img {
  height: auto;
  width: 100%;
}
.event__contents article h3 {
  color: #cb2072;
  text-align: center;
  font-size: 1.7857142857rem;
  font-weight: 500;
  margin: 0.68em 0;
}
.event__contents article p.desc {
  font-size: 1.2rem;
  text-align: center;
}
@media screen and (min-width: 576px) {
  .event__contents article p.desc {
    font-size: 1rem;
  }
}
.event__contents article .datalist-wrapper {
  color: #cb2072;
  display: flex;
  justify-content: center;
}
.event__contents article dl {
  display: grid;
  font-size: 1.25rem;
  grid-template-columns: 3em 1fr;
  grid-template-rows: auto;
  margin: 1.0285714286em auto 0;
}
.event__contents article dl dd {
  margin-left: 0;
}
.event__contents article ul {
  font-size: 1rem;
  line-height: 1.6;
  list-style: none;
  margin: 0.7333333333em auto 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .event__contents article ul {
    font-size: 1.0714285714rem;
  }
}
.event__contents article + article {
  border-top: 2px solid #cb2072;
}
@media screen and (min-width: 768px) {
  .event__contents article + article {
    border-top-width: 3px;
  }
}
.event__contents article.post-1 {
  padding-top: 2.8571428571rem;
}
.event__contents article.post-1 .date {
  background-image: url(../img/event-1-label@2x.png);
  top: 0;
}
.event__contents article.post-2 .date {
  background-image: url(../img/event-2-label@2x.png);
}
