/* ======================================================================
 reset
====================================================================== */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  overflow-y: scroll;
}
/* html, body {
  height: 100%;
} */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
ul {
  list-style: none;
  padding-left: 0;
}


:root {
  --color-main: #ffff00;
  --color-text: #000000;
  --font-base: "Noto Sans JP", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic',Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, sans-serif;
  --font-alpha: "Roboto", sans-serif;
  --font-awesome: "Font Awesome 7 Free";
  --base-width: 1200px;
}

html {
  font-size: 62.5%;
}

body {
  font-family: var(--font-base);
  font-weight: 400;
  background: #000;
  color: var(--color-text);
  line-height: 1.6;
  word-wrap : break-word;
	word-break: break-all;
	overflow: hidden;
  @media (width >= 751px) {
    background: url(../img/pc/chara.png) calc(50% - 318px) bottom / auto no-repeat var(--color-main);
    background-attachment: fixed;
    /* min-width: var(--base-width); */
  }
}

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

strong {
	font-weight: bold;
}

a {
  @media (width >= 751px) {
    transition: opacity .2s;
  }
	&:link {
		color: var(--color-text);
		text-decoration: none;
		cursor: pointer;
	}
	&:visited {
		color: var(--color-text);
		text-decoration: none;
	}
	&:hover {
		color: var(--color-text);
		text-decoration: none;
    @media (width >= 751px) {
      opacity: .8;
    }
	}
	&:active {
		color: var(--color-text);
		text-decoration: none;
	}
}

/* モバイル時 電話番号カラー */
a[href^="tel"]{
  color: var(--color-text);
}

:focus-ring {
  outline: none;
}


/* input */
/* ( 1 ) radio / checkbox 以外リセット */
input[type='button'], input[type='submit'], input[type='text'], input[type='email'], input[type='tel'],  input[type='url'], input[type='password'], input[type='reset'], input[type='search'], textarea, select {
  display: block;
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  border-image: none;
  background: transparent;
  font-family: inherit; /* 子要素へ引き継ぎ */
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

input, textarea {
  &:placeholder-shown {
    color: var(--color-text);
  }
  &::placeholder {
    color: var(--color-text);
  }
  &:focus {
    &:placeholder-shown {
      color: var(--color-text);
    }
    &::placeholder {
      color: var(--color-text);
    }
  }
}


/* =================================
 l-content__size
================================= */
.l-content__size-sp-1 {
  padding-inline: 4vw;
  @media (width > 750px) {
    /* width: var(--base-width); */
    margin: 0 auto;
    padding-inline: 0;
  }
}

.contain {
  padding-inline: 4vw;
  @media (width > 750px) {
    padding-inline: 19.2px;
  }
}


/* =================================
 l-header
================================= */
.l-header {
  z-index: 998;
  position: relative;
}

.l-header__toggle {
  border: none;
  background: none;
  width: calc( 100 / 750 * 100vw);
  position: fixed;
  top: calc( 20 / 750 * 100vw);
  right: calc( 20 / 750 * 100vw);
  padding: 0;
  @media (width >= 751px) {
    display: none;
  }
}


/* =================================
 l-menu
================================= */
.l-menu {
  z-index: -1;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--color-main);
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.l-menu__toggle {
  border: none;
  background: none;
  width: calc( 100 / 750 * 100vw);
  margin-top: calc( 20 / 750 * 100vw);
  margin-inline: auto calc( 20 / 750 * 100vw);
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.l-menu__nav {
  margin-block: calc( 115 / 750 * 100vw) calc( 95 / 750 * 100vw);
  li {
    + li  {
      margin-top: calc( 95 / 750 * 100vw);
    }
    img {
      height: calc( 45 / 750 * 100vw);
      margin-inline: auto;
    }
  }
}

.l-menu__sns {
  display: flex;
  justify-content: center;
  li {
    a {
      font-size: calc( 50 / 750 * 100vw);
      width: calc( 90 / 750 * 100vw);
      height: calc( 90 / 750 * 100vw);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: #000;
      border-radius: 50%;
    }
  }
}

/* =================================
 l-footer
================================= */
.l-footer {
  padding-top: calc( 100 / 750 * 100vw);
  @media (width > 750px) {
    padding-top: 64.8px;
  }
}

.l-footer__logo {
  width: calc( 220 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 30 / 750 * 100vw);
  @media (width > 750px) {
    width: 140.8px;
    margin-bottom: 19.36px;
  }
}

.l-footer__txt {
  text-align: center;
  font-size: calc( 22 / 750 * 100vw);
  font-weight: 500;
  color: #949595;
  margin-bottom: calc( 100 / 750 * 100vw);
  @media (width > 750px) {
    font-size: 14.22667px;
    margin-bottom: 64.8px;
  }
}

.l-footer__links {
  display: flex;
  justify-content: center;
  gap: calc( 30 / 750 * 100vw);
  font-size: calc( 24 / 750 * 100vw);
  margin-bottom: calc( 50 / 750 * 100vw);
  @media (width > 750px) {
    gap: 19.2px;
    font-size: 15.36px;
    margin-bottom: 32.4667px;
  }
  a {
    color: #fff;
  }
}

.l-footer__bottom {
  background: #e8380d;
  color: #fff;
  font-size: calc(18 / 750*100vw);
  font-weight: 500;
  padding-block: calc( 30 / 750 * 100vw);
  text-align: center;
  @media (width > 750px) {
    font-size: 11.52px;
    padding-block: 19.2px;
  }
}

/* =================================
 l-loader
================================= */
.l-loader {
  z-index: 1000;
  position: fixed;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: #000;
}
.l-loader.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}
.l-loader__img {
  position: relative;
  top: calc(50% - (135 / 750 * 100vw));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc( 688 / 750 * 100vw);
  display: flex;
  justify-content: center;
  @media (width > 750px) {
    top: calc(50% - 76px);
    width: 378px;
  }
  img {
    max-width: 100%;
  }
}

/* =================================
 l-main
================================= */
.l-main {
  @media (width >= 751px) {
    width: 480px;
    margin-inline: auto;
    overflow: hidden;
    background: #000;
    position: relative;
    z-index: 1;
    border-inline: 2px solid #000;
  }
}

.l-main__wrap {
  
  @media (width >= 751px) {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    /* min-width: var(--base-width); */
  }
}

/* =================================
 l-side
================================= */
.l-side {
  display: none;
  position: absolute;
  top: 0;
  /* left: calc(50% + 306px); */
  right: 20px;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  @media (width >= 751px) {
    display: flex;
    width: calc((100% - 500px) / 2);
  }
  @media (width >= 976px) {
    width: auto;
    right: calc(50% - 469px);
  }
  @media (width >= 1200px) {
    right: calc(50% - 515px);
  }
}

.l-side__logo {
  border-bottom: 1px solid rgb(0 0 0 / .2);
  padding-bottom: 21px;
}

.l-side__nav {
  li {
    border-bottom: 1px solid rgb(0 0 0 / .2);
    a {
      display: flex;
      justify-content: center;
      padding-block: 19px;
    }
  }
}

.l-side__sns {
  margin-top: 20px;
  li {
    a {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: #fff;
      background: #000;
      font-size: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-inline: auto;
    }
  }
}

.border_left {
  border-right: 2px solid #000;
  height: 100vh;
  width: 46px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  @media (width > 750px) {
    display: block;
  }
}

.border_right {
  border-left: 2px solid #000;
  height: 100vh;
  width: 46px;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  @media (width > 750px) {
    display: block;
  }
}

.border_left_inner {
  background: url(../img/pc/sideL.png) repeat-y;
  background-size: 100%;
  width: 19px;
  height: 100%;
  position: fixed;
  top: 0;
  display: block;
  will-change: transform;
  animation: bg_sideL 8s linear infinite;
  left: 0;
  margin-left: 14px;
}

.border_right_inner {
  background: url(../img/pc/sideR.png) repeat-y;
  background-size: 100%;
  width: 19px;
  height: 100%;
  position: fixed;
  top: 0;
  display: block;
  will-change: transform;
  animation: bg_sideR 8s linear infinite;
  right: 0;
  margin-right: 14px;
}

@keyframes bg_sideL {
  0% {
    background-position: 0 -991px;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes bg_sideR {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -991px;
  }
}


.c-fixed {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgb(0 0 0 / .85);
  padding-block: calc( 10 / 750 * 100vw) calc( 20 / 750 * 100vw);
  transition: opacity .2s;
  @media (width > 750px) {
    width: 480px;
    left: calc(50% - 240px);
    padding-block: 6.4px 12.8px;
  }
  &.fade-in {
    opacity: 1;
    pointer-events: inherit;
  }
}

.c-fixed__period {
  font-size: calc( 26 / 750 * 100vw);
  font-weight: 500;
  margin-bottom: calc( 15 / 750 * 100vw);
  text-align: center;
  color: #fff;
  @media (width > 750px) {
    font-size: 1.664rem;
    margin-bottom: 9.6px;
  }
  .alpha {
    font-family: var(--font-alpha);
    font-weight: 500;
    font-size: calc( 30 / 750 * 100vw);
    @media (width > 750px) {
      font-size: 1.92rem;
    }
  }
}

.c-fixed__btn {
  width: calc( 590 / 750 * 100vw);
  margin-inline: auto;
  @media (width > 750px) {
    width: 377.6px;
  }
}

/* アニメーション設定 */
.c-sa {
  opacity: 0;
  &.show {
    opacity: 1;
  }
}

@keyframes lr {
  0% {
    transform: translate(-100px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes rl {
  0% {
    transform: translate(100px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes diagonalL {
  0% {
    transform: translate(-100px, 100px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes diagonalR {
  0% {
    transform: translate(100px, 100px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes up {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes logoUp {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}


.c-sa__lr {
  &.show {
    animation: lr .5s ease-in-out;
  }
}

.c-sa__rl {
  &.show {
    animation: rl .5s ease-in-out;
  }
}

.c-sa__diagonalL {
  &.show {
    animation: diagonalL .3s ease-in-out;
  }
}

.c-sa__diagonalR {
  &.show {
    animation: diagonalR .3s ease-in-out;
  }
}

.c-sa__up {
  &.show {
    animation: up 1s ease-in-out;
  }
}

.c-sa__logoUp {
  &.show {
    animation: logoUp 2s ease-in-out;
  }
}

.c-sa__scaleUp {
  &.show {
    animation: scaleUp .5s ease-in-out;
  }
}

.c-sa__jello {
  &.show {
    animation: jello-vertical 0.9s both;
  }
}


.c-btn__back {
  position: relative;
  a,
  input[type="button"] {
    width: calc( 550 / 750 * 100vw);
    height: calc( 100 / 750 * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #cb0000;
    color: #fff;
    font-size: calc( 40 / 750 * 100vw);
    font-weight: 900;
    border-radius: calc( 15 / 750 * 100vw);
    margin-inline: auto;
    @media (width > 750px) {
      width: 352px;
      height: 64px;
      font-size: 2.56rem;
      border-radius: 9.6px;
      cursor: pointer;
    }
  }
  &:has(input) {
    margin-top: calc( 50 / 750 * 100vw);
    @media (width > 750px) {
      margin-top: 50px;
    }
  }
}




.p-index__mv-img-1 {
  margin-bottom: calc( 50 / 750 * 100vw);
  @media (width > 750px) {
    width: 100%;
    margin-bottom: 32px;
  }
  img {
    width: 100%;
  }
}

.p-index__mv-img-2 {
  margin-bottom: calc( -596 / 750 * 100vw);
  @media (width > 750px) {
    width: 100%;
    margin-bottom: -381.44px;
  }
}

.p-index__mv-img-3 {
  margin-bottom: calc( -352 / 750 * 100vw);
  @media (width > 750px) {
    width: 100%;
    margin-bottom: -225.28px;
  }
}

.p-index__mv-logo {
  margin-bottom: calc( -6 / 750 * 100vw);
  @media (width > 750px) {
    margin-bottom: -3.84px;
  }
}

.p-index__catch {
  background: var(--color-main);
  padding-block: calc( 70 / 750 * 100vw);
  @media (width > 750px) {
    padding-block: 44.8px;
  }
}

.p-index__catch-txt {
  width: calc( 602 / 750 * 100vw);
  margin-inline: auto;
  @media (width > 750px) {
    width: 385.28px;
  }
}

.p-index__message {
  background: url(../img/bg_message.jpg) center top / calc(690 / 750 * 100vw) no-repeat;
  margin-block: calc( 30 / 750 * 100vw);
  padding-block: calc( 140 / 750 * 100vw);
  @media (width > 750px) {
    background: url(../img/bg_message.jpg) center top / 441.6px no-repeat;
    margin-block: 19.2px;
    padding-block: 89.6px;
  }
}

.p-index__message-ttl {
  width: calc( 498 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 140 / 750 * 100vw);
  @media (width > 750px) {
    width: 318.72px;
    margin-bottom: 89.6px;
  }
}

.p-index__message-txt-1 {
  width: calc( 404 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 140 / 750 * 100vw);
  @media (width > 750px) {
    width: 258.56px;
    margin-bottom: 89.6px;
  }
}

.p-index__message-txt-2 {
  width: calc( 550 / 750 * 100vw);
  margin-inline: auto;
  @media (width > 750px) {
    width: 352px;
  }
}

.p-index__benefits {
  background: var(--color-main);
  padding-block: calc( 19 / 750 * 100vw) calc( 16 / 750 * 100vw);
  position: relative;
  @media (width > 750px) {
    padding-block: 12.16px 10.24px;
  }
}

.c-scroll__top {
  padding-bottom: calc( 16 / 750 * 100vw);
  border-bottom: 2px solid #000;
  @media (width > 750px) {
    padding-bottom: 10.24px;
  }
}

.c-scroll__bottom {
  padding-top: calc( 19 / 750 * 100vw);
  border-top: 2px solid #000;
  @media (width > 750px) {
    padding-top: 12.16px;
  }
}

@keyframes scrollLtoR_benefits {
  0% {
    background-position: calc( -1088 / 750 * 100vw) 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes scrollRtoL_benefits {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc( -1088 / 750 * 100vw) 0;
  }
}

@keyframes scrollLtoR_benefitsPC {
  0% {
    background-position: -696.32px 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes scrollRtoL_benefitsPC {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -696.32px 0;
  }
}

.p-index__benefits-top,
.p-index__benefits-bottom {
  .inner {
    background: url(../img/slide_benefits.png) repeat-x;
    background-size: calc( 1088 / 750 * 100vw);
    width: 100%;
    height: calc( 30 / 750 * 100vw);
    display: block;
    will-change: transform;
    @media (width > 750px) {
      background-size: 696.32px;
      height: 19.84px;
    }
  }
}

.p-index__benefits-top .inner {
  animation: scrollRtoL_benefits 8s linear infinite;
  @media (width > 750px) {
    animation: scrollRtoL_benefitsPC 8s linear infinite;
  }
}

.p-index__benefits-bottom .inner {
  animation: scrollLtoR_benefits 8s linear infinite;
  @media (width > 750px) {
    animation: scrollLtoR_benefitsPC 8s linear infinite;
  }
}

.p-index__benefits-txt {
  margin-block: calc( 81 / 750 * 100vw) calc( 102 / 750 * 100vw);
  @media (width > 750px) {
    margin-block: 51.84px 65.28px;
  }
}

.p-index__benefits-chara-1 {
  position: absolute;
  top: calc( -128 / 750 * 100vw);
  right: 0;
  margin-right: calc( -125 / 750 * 100vw);
  width: calc( 326 / 750 * 100vw);
  @media (width > 750px) {
    top: -81.92px;
    margin-right: -80px;
    width: 208.64px
  }
}

.p-index__benefits-chara-2 {
  position: absolute;
  bottom: calc( 94 / 750 * 100vw);
  left: calc( -80 / 750 * 100vw);
  width: calc( 266 / 750 * 100vw);
  @media (width > 750px) {
    bottom: 60.16px;
    left: -51.2px;
    width: 170.24px
  }
}

.p-index__recruitment {
  margin-block: calc( 30 / 750 * 100vw);
  @media (width > 750px) {
    margin-block: 19.2px;
  }
  .contain {
    padding-inline: 0;
    padding-bottom: calc( 100 / 750 * 100vw);
    margin-inline: 4vw;
    background: #fff;
    @media (width > 750px) {
      padding-bottom: 64px;
      margin-inline: 19.2px;
    }
  }
}

.p-index__recruitment-ttl {
  width: calc( 410 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 100 / 750 * 100vw);
  @media (width > 750px) {
    width: 262.44px;
    margin-bottom: 64px;
  }
}

.p-index__recruitment-subttl-1 {
  width: calc( 330 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 41 / 750 * 100vw);
  @media (width > 750px) {
    width: 211.2px;
    margin-bottom: 26.24px;
  }
}

.p-index__recruitment-txt-1 {
  width: calc( 550 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 84 / 750 * 100vw);
  @media (width > 750px) {
    width: 352px;
    margin-bottom: 53.76px;
  }
}

.p-index__recruitment-subttl-2 {
  width: calc( 330 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 84 / 750 * 100vw);
  @media (width > 750px) {
    width: 211.2px;
    margin-bottom: 53.76px;
  }
}

.p-index__recruitment-txt-2 {
  width: calc( 550 / 750 * 100vw);
  margin-inline: auto;
  @media (width > 750px) {
    width: 352px;
  }
}

.p-index__flow {
  margin-block: calc( 30 / 750 * 100vw);
  @media (width > 750px) {
    margin-block: 19.2px;
  }
  .contain {
    padding-inline: 0;
    padding-bottom: calc( 100 / 750 * 100vw);
    margin-inline: 4vw;
    background: #fff;
    @media (width > 750px) {
      padding-bottom: 64px;
      margin-inline: 19.2px;
    }
  }
}

.p-index__flow-ttl {
  width: calc( 410 / 750 * 100vw);
  margin-inline: auto;
  margin-bottom: calc( 90 / 750 * 100vw);
  @media (width > 750px) {
    width: 262.44px;
    margin-bottom: 57.6px;
  }
}

.p-index__flow-list {
  position: relative;
  &:before {
    position: absolute;
    top: calc( 50 / 750 * 100vw);
    left: calc(50% - 1.5px);
    width: 3px;
    height: calc(100% - ( 50 / 750 * 100vw));
    content: "";
    border-left: 3px dotted #000;
    @media (width > 750px) {
      top: 32px;
      height: calc(100% - 32px);
    }
  }
  li {
    width: calc( 599 / 750 * 100vw);
    margin-left: calc( 70 / 750 * 100vw);
    position: relative;
    @media (width > 750px) {
      width: 383.36px;
      margin-left: 44.8px;
    }
    + li {
      margin-top: calc( 42 / 750 * 100vw);
      @media (width > 750px) {
        margin-top: 26.88px;
      }
    }
  }
}

.p-index__entry {
  background: var(--color-main);
  padding-block: calc( 19 / 750 * 100vw) calc( 16 / 750 * 100vw);
  position: relative;
  @media (width > 750px) {
    padding-block: 12.16px 10.24px;
  }
}

@keyframes scrollLtoR_entry {
  0% {
    background-position: calc( -924 / 750 * 100vw) 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes scrollRtoL_entry {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc( -924 / 750 * 100vw) 0;
  }
}

@keyframes scrollLtoR_entryPC {
  0% {
    background-position: -591.36px 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes scrollRtoL_entryPC {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -591.36px 0;
  }
}

.p-index__entry-top,
.p-index__entry-bottom {
  .inner {
    background: url(../img/slide_entry.png) repeat-x;
    background-size: calc( 924 / 750 * 100vw);
    width: 100%;
    height: calc( 30 / 750 * 100vw);
    display: block;
    will-change: transform;
    @media (width > 750px) {
      background-size: 591.36px;
      height: 19.84px;
    }
  }
}

.p-index__entry-top .inner {
  animation: scrollRtoL_entry 8s linear infinite;
  @media (width > 750px) {
    animation: scrollRtoL_entryPC 8s linear infinite;
  }
}

.p-index__entry-bottom .inner {
  animation: scrollLtoR_entry 8s linear infinite;
  @media (width > 750px) {
    animation: scrollLtoR_entryPC 8s linear infinite;
  }
}

.p-index__entry-chara-1 {
  position: absolute;
  top: calc( -128 / 750 * 100vw);
  left: calc( -188 / 750 * 100vw);
  width: calc( 440 / 750 * 100vw);
  @media (width > 750px) {
    top: -81.92px;
    left: -120.32px;
    width: 281.6px;
  }
}

.p-index__entry-chara-2 {
  position: absolute;
  top: calc( 335 / 750 * 100vw);
  right: 0;
  margin-right: calc( -215 / 750 * 100vw);
  width: calc( 410 / 750 * 100vw);
  z-index: 1;
  @media (width > 750px) {
    top: 214.4px;
    margin-right: -137.6px;
    width: 262.4px;
  }
}

.p-index__entry-ttl {
  width: calc( 510 / 750 * 100vw);
  margin: calc( 69 / 750 * 100vw) auto calc( 90 / 750 * 100vw);
  @media (width > 750px) {
    width: 326.4px;
    margin: 44.16px auto 57.6px;
  }
}

.p-index__entry-form {
  display: inline-block;
  margin: 4px;
  padding: calc( 20 / 750 * 100vw) calc( 62 / 750 * 100vw) calc( 80 / 750 * 100vw);
  margin-bottom: calc( 100 / 750 * 100vw);
  border: solid 1px #000;
  position: relative;
  background: #fff;
  @media (width > 750px) {
    padding: 12.8px 39.68px 51.2px;
    margin-bottom: 64px;
  }
  &:before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    border: solid 1px #000;
  }
}

.p-index__entry-form-item {
  padding-block: calc( 60 / 750 * 100vw);
  border-bottom: 1px solid #000;
  position: relative;
  @media (width > 750px) {
    padding-block: 38.4px;
  }
  dl {
    margin-inline: calc( 20 / 750 * 100vw);
    @media (width > 750px) {
      margin-inline: 12.8px;
    }
    + dl {
      margin-top: calc( 30 / 750 * 100vw);
      @media (width > 750px) {
        margin-top: 19.2px;
      }
    }
  }
  dt {
    font-size: calc( 24 / 750 * 100vw);
    font-weight: 500;
    margin-bottom: calc( 12 / 750 * 100vw);
    @media (width > 750px) {
      font-size: 15.36px;
      margin-bottom: 7.68px;
    }
  }
  input[type="text"],
  input[type="email"],
  textarea {
    border: 1px solid rgb(0 0 0 / .15);
    width: 100%;
    font-size: 1.6rem;
    padding: calc( 20 / 750 * 100vw);
    @media (width > 750px) {
      padding: 12.8px;
    }
  }
  textarea[name="これだけは負けないパチスロジャンル"] {
    height: calc( 240 / 750 * 100vw);
    @media (width > 750px) {
      height: 153.6px;
    }
  }
  textarea[name="そのジャンルを200文字以内でアツく語って！"] {
    height: calc( 640 / 750 * 100vw);
    @media (width > 750px) {
      height: 409.6px;
    }
  }
  ::placeholder {
    color: #cccccc;
  }
  :focus::placeholder {
    color: #cccccc;
  }

  /* Safari 対策 */
  ::-webkit-input-placeholder {
    color: #cccccc;
  }
  :focus::-webkit-input-placeholder {
    color: #cccccc;
  }
  
  input[type="file"] {
    display: none;
    /* font-size: calc( 24 / 750 * 100vw);
    @media (width > 750px) {
      font-size: 15.616px;
    } */
    /* &::file-selector-button {
      font-weight: bold;
      background: #ebebeb;
      font-size: calc( 34 / 750 * 100vw);
      border: 1px solid rgb(0 0 0 / .15);
      border-radius: calc( 10 / 750 * 100vw);
      padding: calc( 30 / 750 * 100vw) calc( 30 / 750 * 100vw);
      text-align: center;
      color: #000;
      @media (width > 750px) {
        font-size: 21.76px;
        border-radius: 6.4px;
        padding: 19.2px 25.6px;
      }
    }
    & + & {
      margin-top: calc( 30 / 750 * 100vw);
        @media (width > 750px) {
        margin-top: 20px;
      }
    } */
  }
}

.p-index__entry-form-item-btn {
  font-weight: bold;
  background: #ebebeb;
  font-size: calc( 34 / 750 * 100vw);
  border: 1px solid rgb(0 0 0 / .15);
  border-radius: calc( 10 / 750 * 100vw);
  padding: calc( 30 / 750 * 100vw) calc( 30 / 750 * 100vw);
  text-align: center;
  color: #000;
  display: block;
  @media (width > 750px) {
    font-size: 21.76px;
    border-radius: 6.4px;
    padding: 19.2px 25.6px;
    cursor: pointer;
  }
}

.p-index__entry-form-item-btnWrap {
  & + & {
    margin-top: calc( 30 / 750 * 100vw);
      @media (width > 750px) {
      margin-top: 20px;
    }
  }
}

.p-index__entry-form-item-filename {
  font-size: calc( 24 / 750 * 100vw);
  @media (width > 750px) {
    font-size: 15.616px;
  }
}

.p-index__entry-form-item-inner {
  margin-inline: calc( 20 / 750 * 100vw);
  @media (width > 750px) {
    margin-inline: 12.8px;
  }
}

.p-index__entry-form-item-ttl {
  font-size: calc( 32 / 750 * 100vw);
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: calc( 40 / 750 * 100vw);
  @media (width > 750px) {
    font-size: 20.48px;
    margin-bottom: 25.6px;
  }
  .required {
    font-size: calc( 20 / 750 * 100vw);
    color: #fff;
    background: #000;
    padding: calc( 2 / 750 * 100vw) calc( 10 / 750 * 100vw);
    margin-left: calc( 14 / 750 * 100vw);
    @media (width > 750px) {
      font-size: 12.8px;
      padding: 1.28px 6.4px;
      margin-left: 8.96px;
    }
  }
}

.p-index__entry-select {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: calc( 28 / 750 * 100vw);
  @media (width > 750px) {
    font-size: 17.92px;
  }
}

.p-index__entry-select-warp {
  position: relative;
  margin-right: calc( 14 / 750 * 100vw);
  width: calc( 170 / 750 * 100vw);
  @media (width > 750px) {
    margin-right: 8.96px;
    width: 108.8px;
  }
  &:before {
    position: absolute;
    top: calc( 50% - (12 / 750 * 100vw));
    right: calc( 20 / 750 * 100vw);
    content: "\f0d7";
    font-family: var(--font-awesome);
    font-weight: 900;
    font-size: calc( 24 / 750 * 100vw);
    color: #cccccc;
    line-height: 1;
    pointer-events: none;
    @media (width > 750px) {
      top: calc( 50% - 7.68px);
      right: 12.8px;
      font-size: 15.36px;
    }
  }
  select {
    width: 100%;
    font-size: 1.6rem;
    padding: calc( 20 / 750 * 100vw);
    border: 1px solid rgb(0 0 0 / .15);
    color: #000;
    @media (width > 750px) {
      padding: 12.8px;
    }
  }
  &.year {
    width: calc( 270 / 750 * 100vw);
    @media (width > 750px) {
      width: 172.8px;
    }
  }
  &.date {
    margin-left: calc( 18 / 750 * 100vw);
    @media (width > 750px) {
      margin-left: 11.52px;
    }
  }
  &.place {
    width: calc( 270 / 750 * 100vw);
    @media (width > 750px) {
      width: 172.8px;
    }
  }
}

.p-index__entry-select-outer {
  margin-bottom: calc( 30 / 750 * 100vw);
  display: flex;
  align-items: center;
  width: 100%;
  @media (width > 750px) {
    margin-bottom: 19.2px;
  }
}

.p-index__entry-agree-wrap {
  margin-block: calc( 80 / 750 * 100vw);
  @media (width > 750px) {
    margin-block: 51.2px;
  }
}

.p-index__entry-agree {
  position: relative;
  font-size: calc( 28 / 750 * 100vw);
  @media (width > 750px) {
    font-size: 17.92px;
  }
  label {
    display: flex;
    align-items: center;
  }
  & + & {
    margin-top: calc( 14 / 750 * 100vw);
    @media (width > 750px) {
      margin-top: 8.96px;
    }
  }
}

.p-index__entry-agree-parts {
  margin-left: calc( 17 / 750 * 100vw);
  @media (width > 750px) {
    margin-left: 10.88px;
  }
}

.p-index__entry-submit {
  position: relative;
  button {
    background: none;
    border: none;
    padding: 0;
    @media (width > 750px) {
      cursor: pointer;
    }
  }
}

.p-index__note-inner {
  margin-block: calc( 30 / 750 * 100vw);
  padding: calc( 50 / 750 * 100vw) calc( 70 / 750 * 100vw);
  background: rgb(255 255 255 / .15);
  border: 1px solid rgb(255 255 255 / .3);
  color: #fff;
  font-size: calc( 24 / 750 * 100vw);
  font-weight: 500;
  @media (width > 750px) {
    margin-block: 19.2px;
    padding: 32px 44.8px;
    font-size: 15.36px;
  }
}

.p-index__note-ttl {
  
  margin-bottom: calc( 26 / 750 * 100vw);
  text-align: center;
  @media (width > 750px) {
    margin-bottom: 16.64px;
  }
}

.p-index__note-list {
  list-style: disc;
  margin-left: 1.5em;
  a {
    color: #fff;
    text-decoration: underline;
  }
}

.p-index__note-asta {
  li {
    padding-left: 1em;
    text-indent: -1em;
    &:before {
      content: "※";
    }
  }
}

.p-index__sns {
  background: var(--color-main);
  padding-block: calc( 19 / 750 * 100vw) calc( 16 / 750 * 100vw);
  @media (width > 750px) {
    padding-block: 12.16px 10.24px;
  }
}

@keyframes scrollLtoR_sns {
  0% {
    background-position: calc( -1072 / 750 * 100vw) 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes scrollRtoL_sns {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc( -1072 / 750 * 100vw) 0;
  }
}

@keyframes scrollLtoR_snsPC {
  0% {
    background-position: -686.08px 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes scrollRtoL_snsPC {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -686.08px 0;
  }
}

.p-index__sns-top,
.p-index__sns-bottom {
  .inner {
    background: url(../img/slide_sns.png) repeat-x;
    background-size: calc( 1072 / 750 * 100vw);
    width: 100%;
    height: calc( 30 / 750 * 100vw);
    display: block;
    will-change: transform;
    @media (width > 750px) {
      background-size: 686.08px;
      height: 19.84px;
    }
  }
}

.p-index__sns-top .inner {
  animation: scrollRtoL_sns 8s linear infinite;
  @media (width > 750px) {
    animation: scrollRtoL_snsPC 8s linear infinite;
  }
}

.p-index__sns-bottom .inner {
  animation: scrollLtoR_sns 8s linear infinite;
  @media (width > 750px) {
    animation: scrollLtoR_snsPC 8s linear infinite;
  }
}

.p-index__sns-top,
.p-index__sns-bottom {
  img {
    width: calc( 1050 / 750 * 100vw);
    max-width: inherit;
    @media (width > 750px) {
      width: 672px;
    }
  }
}

.p-index__sns-bnr {
  margin-block: calc( 106 / 750 * 100vw) calc( 70 / 750 * 100vw);
  @media (width > 750px) {
    margin-block: 67.84px 44.8px;
  }
}
.p-index__sns-yt {
  a {
    width: calc( 110 / 750 * 100vw);
    height: calc( 110 / 750 * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #ff0033;
    color: #fff;
    font-size: calc( 60 / 750 * 100vw);
    margin-bottom: calc( 90 / 750 * 100vw);
    margin-inline: auto;
    @media (width > 750px) {
      width: 70.54667px;
      height: 70.54667px;
      font-size: 38.56px;
      margin-bottom: 57.96px;
    }
  }
}

.p-thanks__contents {
  background: var(--color-main);
  padding-block: calc( 19 / 750 * 100vw) calc( 16 / 750 * 100vw);
  @media (width > 750px) {
    padding-block: 12.16px 10.24px;
  }
  .p-index__entry-form {
    padding-top: calc( 80 / 750 * 100vw);
    @media (width > 750px) {
      padding-top: 51.2px;
    }
  }
}

.p-thanks__ttl {
  text-align: center;
  margin-block: calc( 70 / 750 * 100vw) calc( 90 / 750 * 100vw);
  margin-inline: auto;
  width: calc( 450 / 750 * 100vw);
  @media (width > 750px) {
    margin-block: 44.8px 57.6px;
    font-size: 2rem;
    width: 288px;
  }
}

.p-thanks__text {
  font-size: calc( 28 / 750 * 100vw);
  margin-bottom: calc( 50 / 750 * 100vw);
  @media (width > 750px) {
    font-size: 1.792rem;
    margin-bottom: 50px;
  }
}


.p-confirm__contents {
  background: var(--color-main);
  padding-block: calc( 100 / 750 * 100vw);
  @media (width > 750px) {
    padding-block: 80px;
  }
  h4 {
    margin-bottom: calc( 50 / 750 * 100vw);
    font-size: calc( 40 / 750 * 100vw);
    @media (width > 750px) {
      margin-bottom: 50px;
      font-size: 2rem;
    }
  }
  .error_messe {
    font-size: calc( 24 / 750 * 100vw);
    /* margin-bottom: calc( 50 / 750 * 100vw); */
    @media (width > 750px) {
      font-size: 1.6rem;
      /* margin-bottom: 50px; */
    }
  }
}


 /* spからコーディング : モバイルファースト */
@media (width >= 751px) {
  .u-pc {
    display: block;
  }
  .u-sp {
    display: none;
  }
}
@media (width <= 750px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
}

/* pcからコーディング */
/* @media (width >= 769px) {
  .u-pc {
    display: block;
  }
  .u-sp {
    display: none;
  }
}
@media (width <= 768px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
} */