@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@media screen and (max-width: 900px) {
  .pc_disp {
    display: none;
  }
  .sp_disp {
    display: block;
  }
  .pc_view {
    display: none;
  }
  .sp_view {
    display: block;
  }
}
@media screen and (min-width: 901px) {
  .pc_view {
    display: block;
  }
  .sp_view {
    display: none;
  }
}

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

footer {
  position: relative;
  z-index: 1;
}

#PageTop {
  background: #fff;
}

@media screen and (min-width: 768px) {
  nav.ContentNavi01 {
    position: relative;
    z-index: 2;
  }
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  overflow-x: clip;
}
body .Wrap {
  overflow: clip !important;
}

strong {
  font-weight: bold;
}

a:hover{
  opacity: 0.6;
}

@media screen and (min-width: 900px) {

  body {
    background-image: url(../img/bg_pc.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }

  .MainColumn {
    position: relative;
    width: 375px;
    z-index: 1;
  }

  /*.pc_bg_wrap {
    position: fixed;
    inset: 0;
    z-index: 1;
    top: 6.29vw;
  }

  .set {
    position: absolute;
    width: 25.77306vw;
    right: 18.298682vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .set01, .set02 {
    opacity: 0;
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    transform-origin: center center;
    transform: translateY(-50%);
  }

  .set01{
    filter: blur(12px);
    -webkit-filter: blur(12px);
    animation: blurIn 0.8s ease-out forwards;
  }

  .set02{
    transform: translateY(-50%) scale(0.94);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    animation: scaleBlurIn 0.9s cubic-bezier(.22,.61,.36,1) 0.4s forwards;
  }

  .set03{
    opacity: 1;
    filter: none;
    transform: translateY(-50%);
  } */

  :root {
    --set-lift: 0px; /* JSから更新する移動量（スクロール対応） */
  }

  .pc_bg_wrap {
    position: fixed;
    inset: 0;
    z-index: 1;
    top: 6.29vw;
  }

  .set {
    position: absolute;
    width: 25.77306vw;
    right: 18.298682vw;
    top: 50%;
    transform: translateY(calc(-50% - var(--set-lift)));
    z-index: 1;
    will-change: transform;
    backface-visibility: hidden;
  }

  .set01 {
    opacity: 0;
    filter: blur(12px);
    -webkit-filter: blur(12px);
    animation: blurIn 0.8s ease-out forwards;
  }

  .set02 {
    opacity: 0;
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transform: translateY(calc(-50% - var(--set-lift))) scale(0.94);
    animation: scaleBlurIn 0.9s cubic-bezier(.22,.61,.36,1) 0.4s forwards;
  }

  .set03 {
    opacity: 1;
    filter: none;
    transform: translateY(calc(-50% - var(--set-lift)));
  }

  @media (prefers-reduced-motion: reduce) {
    .set01, .set02, .set03 {
      animation: none !important;
      opacity: 1 !important;
      filter: none !important;
      -webkit-filter: none !important;
      transform: translateY(calc(-50% - var(--set-lift))) !important;
    }
  }

  @keyframes blurIn {
    0%   { opacity:0; filter:blur(12px); -webkit-filter:blur(12px); }
    100% { opacity:1; filter:blur(0);    -webkit-filter:blur(0); }
  }
  @keyframes scaleBlurIn {
    0%   { opacity:0; transform:translateY(-50%) scale(0.94); filter:blur(10px); -webkit-filter:blur(10px); }
    60%  { opacity:1; transform:translateY(-50%) scale(1.02); filter:blur(2px);  -webkit-filter:blur(2px); }
    100% { opacity:1; transform:translateY(-50%) scale(1.0);  filter:blur(0);    -webkit-filter:blur(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .set01, .set02 {
      animation: none !important;
      opacity: 1 !important;
      filter: none !important;
      -webkit-filter: none !important;
      transform: translateY(-50%) !important;
    }
  }

  .fixed_frame__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 6.29vw);
  }

  .fixed-frame_img_top,
  .fixed-frame_img_middle,
  .fixed-frame_img_bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 6.29vw);
    background-repeat: no-repeat;
  }
  .fixed-frame_img_top{
    background-image: url(../img/frame_pc_top.png);
    background-position: top;
    background-size: 100% 4.65vw;
  }
  .fixed-frame_img_middle{
    background-image: url(../img/frame_pc_middle.png);
    background-position: center 4.65vw;
    background-size: 100% calc(100% - 4.65vw - 4.65vw);
  }
  .fixed-frame_img_bottom{
    background-image: url(../img/frame_pc_bottom.png);
    background-position: bottom;
    background-size: 100% 4.65vw;
  }

  .fixed_arrow {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 10.300586vw;
    bottom: 7.750366vw;
  }
  .fixed_arrow svg{
    width: 1.251684vw;
    height: 1.483748vw;
    transform: rotate(90deg);
  }
  /* ベース色 */
  .fixed_arrow svg path {
    fill: #F19301;
    animation: arrowPulse 2.5s linear infinite;
  }

  /* ずらし（上→下の順に0.5sおき） */
  .fixed_arrow svg:nth-child(1) path { animation-delay: 0s;   }
  .fixed_arrow svg:nth-child(2) path { animation-delay: .5s;  }
  .fixed_arrow svg:nth-child(3) path { animation-delay: 1s;   }
  .fixed_arrow svg:nth-child(4) path { animation-delay: 1.5s; }
  .fixed_arrow svg:nth-child(5) path { animation-delay: 2s;   }

  /* 0?20%だけハイライト、それ以外は元色 */
  @keyframes arrowPulse {
    0%, 20%   { fill: #B36F3A; } /* 0.5s 間ハイライト */
    20.001%, 100% { fill: #f19301; }
  }
}

@media screen and (min-width: 900px) and (max-width: 1099px) {

  .MainColumn { margin-left: 8.7vw; }

  .logo_uamamusume{
    display: block;
    position: fixed;
    top: 11.78623718887262vw;
    right: 8.0vw;
    width: 107px;
  }
  .logo_pc{
    display: block;
    position: fixed;
    top: 18.225476vw;
    right: 6.9vw;
    width: 42.1vw;
  }
  .uamamusume{
    display: block;
    position: fixed;
    bottom: 7.69vw;
    right: 6.2vw;
    width: 42.8vw;
  }

  .fixed-frame_img_middle{
    background-size: 100% calc(100% - 4.65vw - 4.65vw - 1.76vw);
  }
  .fixed-frame_img_bottom{
    top: -1.76vw;
  }
}

@media screen and (min-width: 1100px) {

  .MainColumn { margin-left: 15.7vw; }
}

.MainColumn {
  background-color: #fff;
}

.kv {
  position: relative;
}
.kv .course{
  position: absolute;
  width: 100%;
  height: 33px;
  line-height: 33px;
  font-size: 13px;
  color: #fff;
  background-color: #F19301;
}
.kv .course:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 11px;
  background: #F19301;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: block;
  bottom: -11px;
}
.kv .course span{
  font-size: 10px;
}
.head-text{
  color: #fff;
  font-size: 13px;
  padding: 7.9px 0 8.8px;
  line-height: 1.5;
  background: linear-gradient(to right, #b26c37 0%, #f29301 100%);
}
.head-text span{
  font-weight: bold;
}
.main{
  padding: 34px 0;
  background-color: #FAF3EC;
}

.mainhead{
  margin-bottom: 31px;
}

.summary {
  padding: 0 9px 30px;
}
.summary .title {
  color: #B36F3A;
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 10px;
  text-align: center;
}
.summary dl {
  margin: 0;
}
.summary dl dt {
  display: block;
  height: 24px;
  line-height: 24px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  background-color: #DBA76C;
  padding: 0 20px;
  margin: 0;
}
.summary dl dt + dd {
  padding: 10px 20px 0px;
  margin: 0;
  color: #6E5B43;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}
.summary dl dd + dd {
  padding-top: 13px;
  padding-bottom: 12px;
  color: #6E5B43; 
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}
.summary dl dd {
    background-color: #FDF8F4;
}
.summary dl dd.place{
    padding: 19px 10px 18px;
}
.summary dl dd + dt {
  margin-top: 9px;
}
.summary dl dd p {
  margin: 0;
}
.summary dl dd em {
  font-size: 18px;
  font-weight: bold;
}
.summary dl dd .day-count {
  margin: 0 0 5.7px;
  text-decoration: underline;
}
.summary dl dd .day {
  margin: 0 0 4px;
}
.summary dl dd .time {
  font-size: 12px;
}

.period {
  padding: 20px 0 24px;
  background-color: #fff;
  margin-bottom: 40px;
}
.period .title {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 12px;
  color: #B36F3A;
  font-size: 15px;
  font-weight: bold;
  background-color: #fff;
}
.period .date {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #6E5B43;
  line-height: 1.2;
}
.period .date span {
  font-size: 25px;
  font-weight: bold;
}

.apply{
  margin-bottom: 19px;
}
.apply-button{
  width: 309px;
  display: block;
  margin: auto;
}
.apply .balloon{
  position: relative;
  width: fit-content;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 0 auto 6px;
  height: 22px;
  padding: 0 12px;
  line-height: 22px;
  border-radius: 22px;
  background-color: #F19301;
}
.apply .balloon:after{
  position: absolute;
  content:'';
  width: 18px;
  height: 11px;
  background: #F19301;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: inline-block;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
}

.campaign-notice {
  text-align: left;
  padding: 0px 9px;
  color: #6E5B43;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 49px;
}
.campaign-notice .title{
  color: #6E5B43;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}
.campaign-notice a{
  color: #6E5B43;
}
.campaign-notice span{
  font-weight: bold;
  color: #B36F3A;
}

.link{
  position: relative;
  display: block;
  color: #fff;
  width: 310px;
  height: 78px;
  font-size: 14px;
  margin: auto;
  padding: 10px 32px 11px 18px;
  line-height: 1.4285714285714286;
  background-color: #DBA76C;
  box-sizing: border-box;
}
.link:hover{
  text-decoration: none;
}
.link:after {
  position: absolute;
  content:'';
  width: 0;
  height: 0;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #fff;
}

.related-articles-wrap{
  padding: 34px 0 32px;
}
.related-articles {
  position: relative;
  padding: 17px 0 16px;
  background-color: #F8EBDF;
}
.related-articles.coming-soon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width:102px;
  height: 24px;
  background-image: url(../img/comingsoon.png);
  background-size: contain;
  transform: translateX(-50%);
  display: block;
}
.related-articles.coming-soon a {
  pointer-events: none;
}
.related-articles a {
  position: relative;
  display: block;
  width: 290px;
  height: 32px;
  margin: auto;
  color: #F19301;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  background-color: #fff;
  border-radius: 32px;
  transition: all 0.3 s ease;
}
.related-articles a svg {
  position: absolute;
  fill: #F19301;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.related-articles a:hover{
  opacity: 1;
  background-color: #F19301;
  color: #fff;
  text-decoration: none;
}
.related-articles a:hover svg{
  fill: #fff;
}

.mainhead {
  opacity: 0;
  transform: perspective(800px) rotateY(-90deg);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.mainhead.is-inview {
  animation: spinInY 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes spinInY {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateY(-540deg) scale(.98);
    filter: blur(1px);
  }
  60% {
    opacity: 1;
    transform: perspective(800px) rotateY(10deg) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mainhead,
  .mainhead.is-inview {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media screen and (max-width: 899px) {

  .MainColumn { 
    text-align: center;
    background-color: #fff; 
  }

  .kv .course{
    height: 8.80vw;
    line-height: 8.80vw;
    font-size: 3.47vw;
  }
  .kv .course:after{
    height: 2.93vw;
    bottom: -2.93vw;
  }
  .kv .course span{ font-size: 2.67vw; }

  .head-text{
    font-size: 3.47vw;
    padding: 2.13vw 0 2.35vw;
  }

  .mainhead{ margin-bottom: 8.27vw; }

  .summary{ padding: 0 2.40vw 8.00vw; }
  .summary .title{
    font-size: 4.53vw;
    margin: 0 0 2.67vw;
  }
  .summary dl dt{
    height: 6.40vw;
    line-height: 6.40vw;
    font-size: 2.93vw;
    padding: 0 5.33vw;
  }
  .summary dl dt + dd{
    padding: 2.67vw 5.33vw 0;
    font-size: 3.73vw;
  }
  .summary dl dd + dd{
    padding-top: 3.47vw;
    padding-bottom: 3.20vw;
    font-size: 3.73vw;
  }
  .summary dl dd.place{
    padding: 5.07vw 2.67vw 4.80vw;
  }
  .summary dl dd + dt{ margin-top: 2.40vw; }
  .summary dl dd em{ font-size: 4.80vw; }
  .summary dl dd .day-count{ margin: 0 0 1.52vw; }
  .summary dl dd .day{ margin: 0 0 1.07vw; }
  .summary dl dd .time{ font-size: 3.20vw; }

  .period{
    padding: 5.33vw 0 6.40vw;
    margin-bottom: 10.67vw;
  }
  .period .title{
    margin: 0 0 2.13vw;
    padding: 0.53vw 3.20vw;
    font-size: 4.00vw;
  }
  .period .date{
    font-size: 4.27vw;
  }
  .period .date span{
    font-size: 6.67vw;
  }

  .apply{ margin-bottom: 5.07vw; }
  .apply-button{ width: 82.40vw; }
  .apply .balloon{
    font-size: 3.20vw;
    height: 5.87vw;
    padding: 0 3.20vw;
    margin: 0 auto 1.60vw;
    line-height: 5.87vw;
    border-radius: 5.87vw;
  }
  .apply .balloon:after{
    width: 4.80vw;
    height: 2.93vw;
    bottom: -1.33vw;
  }

  .campaign-notice{
    padding: 0 2.40vw;
    font-size: 3.20vw;
    margin-bottom: 13.07vw;
  }
  .campaign-notice .title{
    font-size: 4.00vw;
    margin-bottom: 1.33vw;
  }

  .link{
    width: 82.67vw;
    height: 21.27vw;          
    font-size: 3.73vw;
    padding: 2.67vw 8.53vw 2.93vw 4.80vw;
    line-height: 1.4286;
  }
  .link:after{
    right: 3.47vw;
    border-top: 1.07vw solid transparent;
    border-bottom: 1.07vw solid transparent;
    border-left: 1.87vw solid #fff;
  }

  .related-articles-wrap{ padding: 9.07vw 0 8.53vw; }
  .related-articles{ padding: 4.53vw 0 4.27vw; }
  .related-articles.coming-soon::before{
    top: -2.67vw;
    width: 27.20vw;
    height: 6.40vw;
  }
  .related-articles a{
    width: 77.33vw;
    height: 8.53vw;
    font-size: 3.73vw;
    line-height: 8.53vw;
    border-radius: 8.53vw;
  }
  .related-articles a svg{ right: 1.60vw; }
}

.main > :where(:not(.period):not(.related-articles-wrap)) {
  padding-inline: 5.3333vw;
}

@media (min-width: 900px) {
  .main > :where(:not(.period):not(.related-articles-wrap)) {
    padding-inline: 20px;
  }
}