:root {
  --primary: #0F1ED2;
  --black: #282D3C;
  --gray: #535A6E;
}

.fv {
  position: relative;
  height: calc(60vw/(1920/100/10));
}
.fv .fv__bg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fv .fv__bg img {
  width: 100%;
  height: 100%;
}
.fv .fv__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fv .fv__content_head {
  display: flex;
  align-items: center;
  margin-top: calc(8vw/(1920/100));
  margin-bottom: calc(32vw/(1920/100));
  border-bottom: 1px solid #C5CCD9;
}
.fv .fv__content_head_img {
  width: calc(36vw/(1920/100/10));
}
.fv .fv__content_head_img img {
  width: 100%;
  height: auto;
}
.fv .fv__content_head_text {
  width: calc(42vw/(1920/100/10));
  margin-left: calc(24vw/(1920/100));
}
.fv .fv__content_head_text img {
  width: 100%;
  height: auto;
}
.fv .fv__content_text {
  width: calc(84vw/(1920/100/10));
}
.fv .fv__content_text img {
  width: 100%;
  height: auto;
}
.fv .fv__content_text img {

}
.fv .fv__content_btn {
  display: flex;
  width: calc(72vw/(1920/100/10));
  background-color: #0F1ED2;
  height: calc(66vw/(1920/100));
  padding: 0 calc(52vw/(1920/100));
  border-radius: calc(90vw/(1920/100));
  margin-top: calc(50vw/(1920/100));
  transition: opacity 0.2s ease;
}
.fv .fv__content_btn img {
  width: 100%;
  height: auto;
}
.fv .fv__content_btn:hover {
  opacity: 0.8;
}
.fv .fv__content_btn:hover img {
  opacity: 1;
}
.fv .fv__date {
  position: absolute;
  z-index: 2;
  width: calc(18.5vw/(1920/100/10));
  right: calc(40vw/(1920/100));
  bottom: calc(38vw/(1920/100));
}
.fv .fv__date img {
  width: 100%;
  height: auto;
}
.fv .fv__character {
  position: absolute;
  z-index: 2;
  left: calc(66vw/(1920/100));
  bottom: calc(38vw/(1920/100));
}
.fv .fv__character_img {
  position: relative;
  width: calc(24.4vw/(1920/100/10));
}
.fv .fv__character_img img {
  width: 100%;
  height: auto;
}
.fv .fv__character_text {
  position: absolute;
  font-size: calc(14vw/(1920/100));
  right: -20px;
  bottom: 0;
}
.fv .fv__copy {
  position: absolute;
  z-index: 2;
  font-size: calc(14vw/(1920/100));
  left: calc(16vw/(1920/100));
  bottom: calc(13vw/(1920/100));
}

@media screen and (max-width: 1024px) {
  .fv {
    height: calc(60vw/(1700/100/10));
  }
  .fv .fv__bg {
    left: 50%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
  }
  .fv .fv__bg img {
    width: auto;
    height: 100%;
  }
  .fv .fv__inner {
  }
  .fv .fv__content_head {
    margin-top: calc(8vw/(1600/100));
    margin-bottom: calc(32vw/(1600/100));
  }
  .fv .fv__content_head_img {
    width: calc(36vw/(1600/100/10));
  }
  .fv .fv__content_head_img img {

  }
  .fv .fv__content_head_text {
    width: calc(42vw/(1600/100/10));
    margin-left: calc(24vw/(1600/100));
  }
  .fv .fv__content_head_text img {
  }
  .fv .fv__content_text {
    width: calc(84vw/(1800/100/10));
  }
  .fv .fv__content_text img {
  }
  .fv .fv__content_text img {

  }
  .fv .fv__content_btn {
    width: calc(72vw/(1600/100/10));
    height: calc(66vw/(1600/100));
    padding: 0 calc(52vw/(1600/100));
    border-radius: calc(90vw/(1600/100));
    margin-top: calc(50vw/(1600/100));
  }
  .fv .fv__content_btn img {
  }
  .fv .fv__date {
    width: calc(18.5vw/(1900/100/10));
    right: calc(40vw/(1600/100));
    bottom: calc(38vw/(1600/100));
  }
  .fv .fv__date img {
  }
  .fv .fv__character {
    left: calc(40vw/(1600/100));
    bottom: calc(38vw/(1600/100));
  }
  .fv .fv__character_img {
    width: calc(24.4vw/(1600/100/10));
  }
  .fv .fv__character_img img {
  }
  .fv .fv__character_text {
    font-size: calc(14vw/(1600/100));
  }
  .fv .fv__copy {
    font-size: calc(14vw/(1600/100));
    left: calc(16vw/(1600/100));
    bottom: calc(13vw/(1600/100));
  }
}

@media screen and (max-width: 800px) {
  .fv {
    height: calc(62vw/(376/100/10));
  }
  .fv .fv__bg {
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
  }
  .fv .fv__bg img {
    width: 100%;
    height: 100%;
  }
  .fv .fv__inner {
  }
  .fv .fv__content_head {
    margin-top: calc(27vw/(376/100));
    margin-bottom: calc(24vw/(376/100));
    flex-direction: column;
    align-items: center;
  }
  .fv .fv__content_head_img {
    width: calc(23.5vw/(376/100/10));
  }
  .fv .fv__content_head_img img {

  }
  .fv .fv__content_head_text {
    width: calc(20.5vw/(376/100/10));
    margin-left: 0 !important;
    margin-bottom: calc(8vw/(376/100));
  }
  .fv .fv__content_head_text img {
  }
  .fv .fv__content_text {
    width: calc(27.7vw/(376/100/10));
  }
  .fv .fv__content_text img {
  }
  .fv .fv__content_text img {

  }
  .fv .fv__content_btn {
    width: calc(29.8vw/(376/100/10));
    height: calc(66vw/(376/100));
    padding-left: calc(32vw/(376/100));
    padding-right: calc(20vw/(376/100));
    border-radius: calc(90vw/(376/100));
    margin-top: calc(24vw/(376/100));
  }
  .fv .fv__content_btn img {
  }
  .fv .fv__date {
    width: calc(10.3vw/(376/100/10));
    right: calc(13vw/(376/100));
    bottom: calc(31vw/(376/100));
  }
  .fv .fv__date img {
  }
  .fv .fv__character {
    left: calc(21vw/(376/100));
    bottom: calc(11vw/(376/100));
  }
  .fv .fv__character_img {
    width: calc(89vw/(376/100));
  }
  .fv .fv__character_img img {
  }
  .fv .fv__character_text {
    font-size: calc(12vw/(376/100));
    right: calc((10.5vw/(376/100/10))*-1);
    line-height: 1.5;
  }
  .fv .fv__copy {
    font-size: calc(12vw/(376/100));
    left: auto;
    bottom: calc(5vw/(376/100));
    right: calc(6vw/(376/100));
  }
}



.fv .d-pc-show{
  display: block;
}
.fv .d-sp-show {
  display: none;
}
@media screen and (max-width: 800px) {
.fv .d-pc-show{
  display: none;
}
.fv .d-sp-show {
  display: block;
}
}

/* グロナビ */
.inner-nav {
  height: 32px;
  margin-top: 24px;
  margin-bottom: 72px;
}
.inner-nav ul {
  display: flex;
  justify-content: center;
}
.inner-nav li {
  position: relative;
  min-height: 32px;
}
.inner-nav li::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: -24px;
  background: #2c69ff;
  opacity: 0;
  transition: opacity 300ms ease-out;
}
@media screen and (min-width:1024px) {
  .inner-nav li + li {
    margin-left: 64px;
  }
}
@media screen and (min-width:640px) {
  .inner-nav li + li {
    margin-left: 32px;
  }
}
.inner-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-right: 34px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2c69ff;
  text-decoration: none;
}
.inner-nav a:hover {
  text-decoration: underline;
}
.inner-nav a span + span {
  box-sizing: border-box;
  position: absolute;
  display: block;
  width: 28px;
  height: 28px;
  right: 0;
  top: calc(50% - 14px);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  transition: all 300ms ease-out;
}
.inner-nav a span img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
@media screen and (max-width:1023px) {
  .inner-nav {
    height: auto;
    box-sizing: border-box;
    position: relative;
    margin: 16px 0 32px !important;
    padding: 0 12px 16px 20px;
    border-bottom: 1px solid #dcdcdc;
  }
  .inner-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .inner-nav li {
    box-sizing: border-box;
    display: inline-block;
    height: 40px;
    margin: 0 8px 0 0;
  }
  .inner-nav a {
    display: inline-flex;
    min-height: 40px;
    padding-right: 28px;
  }
  .inner-nav a span:first-child {
    line-height: 1;
  }
  .inner-nav a span + span {
    width: 24px;
    height: 24px;
    top: calc(50% - 9px);
    background-size: 18px 18px;
  }
  .inner-nav a span img {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0;
    top: 0;
  }
}
.inner-nav {
  margin-top: 36px;
}
@media screen and (max-width:639px) {
  .inner-nav ul {
    justify-content: flex-start;
  }
  .inner-nav a {
    font-size: 1.2rem;
  }
}