@charset "UTF-8";
body {
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 16px;
  background-color: #FCFCFC;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  color: #161821;
  width: 100%;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.2em;
}

html {
  scroll-behavior: smooth;
  overflow: auto;
  -webkit-backface-visibility: hidden;
}
html a:hover {
  opacity: 0.8;
  transition: all 0.22s 0s ease;
}

@media screen and (max-width: 543px) {
  #header {
    height: 62px !important; /* !importantを使って上書きされる可能性を排除 */
  }
  .mt {
    margin-top: -5%;
  }
}
header {
  text-align: center;
  position: fixed;
  width: 100%;
  z-index: 100;
  height: 117px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
header .header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header .header__inner .nrr-logo {
  width: 250px;
  height: auto;
  margin-top: 62px;
  padding-bottom: 27px;
}
@media screen and (max-width: 543px) {
  header .header__inner .nrr-logo {
    height: 38px;
    width: auto;
    margin-top: 23px;
    padding-bottom: 0;
  }
}
header .header__inner .header-line {
  height: 2px;
  max-width: 994px;
}
@media screen and (max-width: 543px) {
  header .header__inner .header-line {
    display: none;
  }
}
header .header__inner .header-line-sp {
  margin-top: 20px;
  max-width: 330px;
}
@media screen and (min-width: 544px) {
  header .header__inner .header-line-sp {
    display: none;
  }
}

#header-logo {
  transition: all 0.3s ease; /* アニメーションをスムーズにするためのトランジション */
}

.container {
  width: 100%;
  margin: 0 auto;
}

.mv {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (min-width: 544px) {
  .mv {
    background-image: url(../images/mv-bg.jpg);
  }
}
@media screen and (max-width: 543px) {
  .mv {
    background-position: bottom;
    background-size: 100%;
    width: 100%;
    background-image: url(../images/mv_sp.jpg);
    position: relative;
    top: 0px;
    z-index: 0;
    height: 850px;
  }
}
@media screen and (max-width: 543px) and (max-width: 426px) {
  .mv {
    height: 770px;
  }
}
@media screen and (max-width: 543px) and (max-width: 376px) {
  .mv {
    height: 757px;
  }
}
.mv .mv__area {
  margin: 0 auto;
  width: 100%;
  height: 821px;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 543px) {
  .mv .mv__area {
    padding: 0px 16px 250px 22px !important;
    height: auto;
    position: relative;
    top: 106px;
    z-index: 1;
  }
}
@media screen and (max-width: 1023px) {
  .mv .mv__area {
    height: auto;
    padding: 140px 16px 0px 22px;
  }
}
@media screen and (min-width: 544px) {
  .mv .mv__area .main__view {
    display: flex;
    justify-content: space-around;
    width: 805px;
    margin: 85px auto 0;
  }
}
.mv .mv__area .main__view .mv__ttl {
  min-width: 403px;
  width: 100%;
  padding-top: 47px;
  font-size: 38px;
  font-weight: bold;
  line-height: 61px;
}
@media screen and (max-width: 543px) {
  .mv .mv__area .main__view .mv__ttl {
    padding-top: 0;
    font-size: clamp(2rem, 1.163rem + 3.57vw, 2.375rem);
    height: 256px;
    min-width: 300px;
    line-height: 51px;
  }
}
.mv .mv__area .main__view .mv-dice {
  margin-top: -45px;
  margin-left: -350px;
  transform: translateX(110px);
}
@media screen and (max-width: 543px) {
  .mv .mv__area .main__view .mv-dice {
    display: none;
  }
}
.mv .mv__area .main__view .mv-dice img {
  width: 575px;
  height: auto;
  object-fit: cover;
}
.mv .mv__area .mv__txt {
  max-width: 797px;
  margin: -145px auto 0;
  width: 100%;
  line-height: 30px;
  color: #606060;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 543px) {
  .mv .mv__area .mv__txt {
    line-height: 28px;
    margin-top: 96%;
  }
}
.mv .mv__area span {
  display: inline-block;
}

.bg__gradient {
  background: linear-gradient(to bottom, rgba(165, 165, 167, 0.4) 0%, rgba(252, 252, 252, 0.98) 98%, rgb(252, 252, 252) 100%);
  width: 100%;
  height: 200px;
  margin-top: -170px;
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .bg__gradient {
    background: linear-gradient(to bottom, #f7f7f7 0%, rgba(252, 252, 252, 0.98) 98%, rgb(252, 252, 252) 100%);
    margin-top: -50px;
  }
}
@media screen and (max-width: 768px) {
  .bg__gradient {
    z-index: -1;
    height: 122px;
  }
}

.include {
  margin-top: -60px;
  padding: 0 143px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .include {
    margin-top: 44px;
    padding: 0 10px;
  }
}
.include .include__box {
  background-color: #fcfcfc;
  padding: 91px 86px 179px 96px;
  box-shadow: 1px 1px 80px rgba(165, 165, 167, 0.15);
  border-radius: 80px;
  border-top-left-radius: 200px 200px;
  width: 100%;
  max-width: 994px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .include .include__box {
    border-radius: 20px;
    padding: 45px 13px 45px 12px;
    height: auto;
  }
}
.include .include__box .txt {
  position: relative;
  top: 47px;
  z-index: 2;
  line-height: 40px;
  max-width: 812px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .include .include__box .txt {
    position: static;
    margin-top: 21px;
    line-height: 28px;
  }
}
.include .include__box .txt .txt--break .inner__fwb {
  line-height: 20px;
  border-bottom: 2px solid #161821;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .include .include__box .txt .txt--break .inner__fwb {
    line-height: 28px;
    padding-bottom: 0;
  }
}
.include .include__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  display: block;
  background: linear-gradient(135deg, rgba(252, 252, 252, 0) 55%, rgba(165, 165, 167, 0.2) 100%);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .include .include__box::before {
    display: none;
  }
}
.include .include__box::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 200px;
  height: 200px;
  display: block;
  background-image: url(../images/left-top.svg);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .include .include__box::after {
    display: none;
  }
}

.judgement {
  padding: 150px 143px 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(165, 165, 167, 0) 0%, rgb(242, 242, 242) 30%);
}
@media screen and (max-width: 1023px) {
  .judgement {
    padding: 80px 15px 0;
  }
}
.judgement .judgement__content {
  max-width: 1034px;
  margin: 0 auto;
  padding: 0 95px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__content {
    padding: 0;
  }
}
.judgement .judgement__content .txt {
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__content .txt {
    line-height: 24px;
  }
}
.judgement .judgement__content .space {
  padding-top: 55px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__content .space {
    padding-top: 14px;
  }
}
.judgement .judgement__content .space__large {
  padding-top: 138px;
}
@media screen and (max-width: 1023px) {
  .judgement .judgement__content .space__large {
    padding-top: 50px;
  }
}
.judgement .judgement__content .txt {
  top: 20px;
}
.judgement .judgement__content .roll-the-dice {
  position: absolute;
  left: calc(100vw - 50%);
  top: 320px;
}
@media screen and (max-width: 1023px) {
  .judgement .judgement__content .roll-the-dice {
    position: static;
    text-align: end;
    margin-top: -15px;
  }
}
.judgement .judgement__content .grid {
  margin-top: 20px;
}
.judgement .judgement__content .grid .dice-result {
  margin-top: 20px;
  display: grid;
  justify-content: center; /* 列を中央に配置 */
  align-items: center; /* 行を中央に配置 */
  gap: 32px;
}
@media screen and (min-width: 769px) {
  .judgement .judgement__content .grid .dice-result {
    grid-template-columns: repeat(auto-fit, minmax(246px, 246px));
  }
}
@media screen and (max-width: 768px) {
  .judgement .judgement__content .grid .dice-result {
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  }
  .judgement .judgement__content .grid .dice-result img {
    min-width: 105px;
    max-width: 100%;
  }
}
.judgement .judgement__content .grid .dice-result > * {
  justify-self: center; /* グリッドアイテムを水平方向に中央寄せ */
  align-self: center; /* グリッドアイテムを垂直方向に中央寄せ */
}
.judgement .judgement__box {
  background-color: #fcfcfc;
  margin: 83px auto 0;
  padding: 92px 94px;
  border-radius: 20px;
  max-width: 996px;
  box-shadow: 1px 1px 80px rgba(165, 165, 167, 0.15);
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box {
    margin: 80px auto 0;
    padding: 30px 25px;
  }
}
.judgement .judgement__box::after {
  content: "";
  background-color: #fcfcfc;
  height: 220px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
@media screen and (min-width: 2250px) {
  .judgement .judgement__box::after {
    background-color: #f8f8f8;
  }
}
.judgement .judgement__box .judgement__box--inner {
  display: flex;
}
.judgement .judgement__box .judgement__box--inner .txt-wrap {
  width: 100%;
  margin-top: 22px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner {
    text-align: center;
    display: block;
    align-items: center;
  }
  .judgement .judgement__box .judgement__box--inner .txt-wrap {
    margin-top: 30px;
  }
}
.judgement .judgement__box .judgement__box--inner .unfavorable {
  width: 193px;
  height: 172px;
  margin-right: 35px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .unfavorable {
    margin: 0;
  }
}
.judgement .judgement__box .judgement__box--inner .normal {
  width: 170px;
  height: 171px;
  margin-right: 62px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .normal {
    margin: 0;
  }
}
.judgement .judgement__box .judgement__box--inner .advantageous {
  width: 163px;
  height: 175px;
  margin-right: 69px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .advantageous {
    margin: 0;
  }
}
.judgement .judgement__box .judgement__box--inner .ex {
  width: 157px;
  height: 166px;
  margin-right: 75px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .ex {
    margin: 0;
  }
}
.judgement .judgement__box .judgement__box--inner .ttl-sub {
  font-size: 24px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .ttl-sub {
    text-align: left;
  }
}
.judgement .judgement__box .judgement__box--inner .dice-roll {
  line-height: 24px;
  margin-top: 10px;
  color: #757575;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .judgement .judgement__box .judgement__box--inner .dice-roll {
    line-height: 32px;
  }
}
@media screen and (min-width: 1200px) {
  .judgement .judgement__box .judgement__box--inner .dice-roll img {
    transform: translate(20px, 0px);
    height: 24px;
  }
}
@media screen and (max-width: 1199px) {
  .judgement .judgement__box .judgement__box--inner .dice-roll {
    margin-top: 15px;
    display: block;
    text-align: left;
  }
  .judgement .judgement__box .judgement__box--inner .dice-roll img {
    height: 19px;
    width: auto;
    display: inline-block;
  }
}
@media screen and (max-width: 1199px) {
  .judgement .judgement__box .judgement__box--inner .df {
    display: flex !important;
  }
  .judgement .judgement__box .judgement__box--inner .df img {
    margin-top: 3px;
    margin-left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .df img {
    margin-top: 3px;
  }
}
.judgement .judgement__box .judgement__box--inner .txt {
  width: 100%;
  line-height: 20px;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .judgement .judgement__box .judgement__box--inner .txt {
    text-align: left;
  }
}
.judgement .judgement__box hr {
  border-color: #cdcdcd;
  margin: 35px 0;
}

.Latter-half {
  max-width: 1280px;
  margin: 132px auto 290px;
  padding: 0 238px;
}
@media screen and (max-width: 1023px) {
  .Latter-half {
    padding: 0 15px;
    margin: 70px auto 150px;
  }
}
.Latter-half .annotation {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .Latter-half .annotation {
    line-height: 20px;
  }
}
.Latter-half .ttl-wrap {
  display: flex;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .Latter-half .ttl-wrap {
    margin-top: 18px;
  }
}
.Latter-half .ttl-wrap .online {
  margin-right: 12px;
}
.Latter-half .ttl-wrap .offline {
  margin-right: 11px;
}
.Latter-half .ccforia {
  margin-top: 10px;
  width: 100%;
}
.Latter-half .name {
  box-shadow: 0 0 10% #fff;
  margin-top: 10px;
}

.top__scroll {
  position: absolute;
  bottom: 110px;
  right: 145px;
}
@media screen and (max-width: 768px) {
  .top__scroll {
    bottom: 120px;
    right: 10px;
  }
  .top__scroll img {
    height: 80px;
  }
}

footer .logo-wrap {
  width: 242px;
  margin: 0 auto 40px;
}
footer .logo-wrap .nrr-logo {
  width: 100%;
}
@media screen and (max-width: 768px) {
  footer .logo-wrap .nrr-logo {
    height: 38px;
  }
}
footer .footer__bg {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -10;
  object-position: top;
}
footer .bottom-footer {
  background-color: #2A2A2A;
  color: #fff;
  font-weight: bold;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-delay {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein_text,
.fadein_text span {
  opacity: 0;
}

.ttl {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: bold;
  border-bottom: 4px solid #161821;
  padding-bottom: 18px;
}
@media screen and (max-width: 768px) {
  .ttl {
    line-height: 40px;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 0.15em;
  }
}
.ttl img {
  padding-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .ttl img {
    padding-bottom: 4px;
    width: 82px;
  }
}
.ttl .ttl__inner {
  display: inline;
}
@media screen and (max-width: 768px) {
  .ttl .ttl__inner {
    margin-left: -5px;
  }
}

.ttl__sub {
  font-size: 24px;
  font-weight: bold;
  line-height: 58px;
}
@media screen and (max-width: 768px) {
  .ttl__sub {
    font-size: 20px;
  }
}

.txt {
  margin-top: -10px;
  max-width: 812px;
  width: 100%;
  line-height: 24px;
}
@media screen and (min-width: 769px) {
  .txt {
    line-height: 30px;
    margin-top: 0;
  }
}
.txt .txt--break .inner__fwb {
  border-bottom: 2px solid #161821;
  font-weight: bold;
  padding-bottom: 4px;
}
.txt span {
  line-height: 24px;
}
@media screen and (min-width: 769px) {
  .txt span {
    display: inline-block;
  }
}

.annotation {
  color: #757575;
  font-size: 14px;
  margin-top: 4px;
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  .annotation {
    line-height: 20px;
  }
}

.btn {
  padding: 23px 35px 23px 23px;
  background-color: #000;
  border-radius: 10px;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  margin-top: 24px;
  height: auto;
  position: relative;
  font-size: 20px;
  font-weight: bold;
  display: block;
  box-shadow: 0 0 5px rgba(34, 34, 35, 0.5);
}
@media screen and (max-width: 768px) {
  .btn {
    margin-top: 15px;
  }
}
.btn::after {
  content: url(../images/arrow.svg);
  width: 10px;
  height: 10px;
  right: 26px;
  top: 50%;
  transform: translateY(-10px);
  position: absolute;
}
.btn img {
  margin-right: 30px;
  height: 32px;
  position: absolute;
  top: 16px;
}
.btn span {
  display: inline-block;
}
.btn .btn__inner {
  margin-left: 55px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .btn .btn__inner {
    margin-left: 40px;
  }
}

.ml10 {
  margin-left: 10px;
  font-size: 20px;
  vertical-align: baseline;
}
@media screen and (max-width: 1023px) {
  .ml10 {
    margin-left: 0;
  }
}

.mt4 {
  margin-top: 4px;
}

.mt-flexible {
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .mt-flexible {
    margin-top: 10px;
  }
}

.mt-flexible-short {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .mt-flexible-short {
    margin-top: 18px;
  }
}

.mt50 {
  margin-top: 60px;
}

.mt60 {
  margin-top: 60px;
}

.mt70 {
  margin-top: 70px;
}

.trpg {
  letter-spacing: 0.27em;
}
@media screen and (min-width: 769px) {
  .trpg {
    font-size: 40px;
    letter-spacing: 0.24em;
  }
}

.lh-flexible {
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  .lh-flexible {
    line-height: 24px;
  }
}

@media screen and (max-width: 768px) {
  .sp-none {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .pc-none {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .sp-none {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .sp-lg-none {
    display: none;
  }
}

.h19 {
  height: 17px !important;
}
@media screen and (min-width: 769px) {
  .h19 {
    height: 24px !important;
  }
}

.h25 {
  height: 18px !important;
}
@media screen and (min-width: 769px) {
  .h25 {
    height: 25px !important;
  }
}

.h29 {
  height: 20px !important;
}
@media screen and (min-width: 769px) {
  .h29 {
    height: 29px !important;
  }
}
@media screen and (min-width: 1200px) {
  .h29 {
    transform: translate(20px, -2px) !important;
  }
}

.scroll__down {
  position: absolute;
  right: 50px;
  top: 707px;
  height: 116px;
  writing-mode: vertical-rl;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  .scroll__down {
    display: none;
  }
}
.scroll__down::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 116px;
  background: #757575;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

/*Scrollテキストの描写*/
.scroll__down span {
  /*描画位置*/
  position: absolute;
  left: 4px;
  top: 0px;
  color: #757575;
  font-size: 16px;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 50px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 116px;
    opacity: 0;
  }
}
.swiper {
  width: 100%;
  object-fit: contain;
  position: relative;
  margin-top: -50px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .swiper {
    margin-top: -20px;
  }
}
@media screen and (max-width: 1199px) {
  .swiper .swiper-slide {
    padding: 0px 10px;
  }
}
.swiper .swiper-slide img {
  height: 284px;
  width: auto;
  margin: 0 auto;
}
@media screen and (max-width: 1023px) {
  .swiper .swiper-slide img {
    width: 100%;
    height: auto;
  }
}