@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    font-family: "Noto Sans JP", 'Hiragino Kaku Gothic ProN', 'Futura PT', 'Noto Sans JP', Roboto, 'Segoe UI', Arial, Meiryo, sans-serif;
}

.eng-num {
    font-family: 'Futura PT', 'Jost', 'Helvetica', Arial, 'Noto Sans JP', Meiryo, 'Hiragino Kaku Gothic ProN', Roboto, 'Segoe UI', sans-serif;
}

/* ヘッダーの高さ仮置き */
:root {
    --header-height: 150px;
}

/*
    header : スクロール時にヘッダー下に来たコンテンツを隠すため
    body : スクロールで背景が動かないようにする
*/
header,
body {
    background-image: url('./../img/login_pic.png');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
}

header.other,
body.other {
    background-image: url('./../img/bg_2.png');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
}

.login-logo {
    margin-top: 3rem;
    margin-bottom: 60px;
}

/* ロードスクリーン */
body.load {
    background-image: url('./../img/login_pic.png');
    height: 100vh;
}

/* ロードスクリーン : 全体の高さを画面の縦幅にする */
body.load main,
body.load main .container,
body.load main .container .row {
    height: 100%;
}

/* ロゴのサイズ調整 */
.logo {
    width: 198.13px;
    height: auto;
}

/* HOWTO */
.howto {
    max-width: 68px;
}

/* 入力欄 */
input {
    height: 50px;
    background-color: rgba(45, 45, 45, 0.5);
    color: white;
    letter-spacing: 0.15em;
}

/* 自動入力時のスタイル */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #222 inset !important;
    -webkit-text-fill-color: white !important;
    /* 文字色を白に固定 */
}

button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: none;
}

input.bg-transparent:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ボタン系 */
input[type=submit],
#get_team_code {
    color: white;
    background-color: gray;
}

#get_team_code:active {
    background-color: rgba(255, 255, 255, 0.8);
}

.btn-act {
    background-color: transparent;
}

.btn-act:active {
    background-color: rgba(255, 255, 255, 0.4);
}

.btn-act_w:active {
    background-color: rgba(255, 255, 255, 0.8);
}

/* チームコード取得 */
#get_team_code {
    font-size: 12px;
    transform: translateY(20%);
    height: 37px;
}

@media (max-width: 380px) {
    #get_team_code {
        font-size: 10px;
        width: 50%;
    }

    .px-3 {
        padding: 0.5rem !important;
    }
}



/* 新規登録の画像 */
.register {
    background-image: url('./../img/login-bottom.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 案内書き、入力欄ラベル */
.info,
label {
    font-size: x-small;
}

/* 選手プロフィール設定画面時のinputの縦幅 */
.set-profile .profile {
    height: 70px;
    display: grid;
    align-items: center;
}

.set-profile .profile input {
    height: auto;
}

/* プルダウン系 */
.set-profile .profile-pulldown,
.set-profile .profile-pulldown-half {
    height: 70px;
    display: grid;
    align-items: center;
    background-color: rgba(45, 45, 45, 0.5);
    color: white;
    position: relative;
}

/* デフォルトの三角マークを非表示(Safari用、Firefox用の設定を含む) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* プルダウンの下矢印画像位置 */
.profile-pulldown-half .icon-arrow {
    position: absolute;
    left: 75%;
}

.profile-pulldown .icon-arrow {
    position: absolute;
    left: 88%;
}

/* 三角マーク無しの設定項目、プラン選択項目、クレカ登録ボタン(仮) */
.profile.no-arrow,
.plan,
#register_card {
    background-color: rgba(45, 45, 45, 0.5);
    color: white;
}

#register_card:active {
    background-color: rgba(255, 255, 255, 0.4);
}

/* プラン選択 : 幅 */
.plan {
    width: 48%;
    color: rgb(150, 150, 150);
    border-color: rgb(150, 150, 150) !important;
}

/* プラン名 */
.plan-name {
    font-size: x-small;
}

/* プラン情報 */
.plan-info {
    font-size: 10px;
    font-weight: 100;
    margin: 0px;
}

/* アカウント種別、支払い方法 */
.account-type,
.payment-type {
    height: 50px;
    line-height: 50px;
    font-size: small;
    color: rgb(150, 150, 150) !important;
    border-color: rgb(150, 150, 150) !important;
}

/* 支払い方法、有効期限、有効期限の月(多分CVC?)の幅 */
.payment-type,
#card_expiry,
#card_expiry_month {
    width: 48%;
}

/* カード情報の文字サイズ */
#card_holder,
#card_number,
#card_expiry,
#card_expiry_month {
    font-size: small;
}

/* アカウント種別 : 選択 */
.account-type.selected,
.payment-type.selected,
.plan.selected {
    background-color: rgba(130, 130, 130, 0.5) !important;
    color: white !important;
    border-color: white !important;
}

/* 入力不可のinput */
input:disabled,
select:disabled {
    color: rgb(150, 150, 150) !important;
}


.formStep {
    position: relative;
    width: 100%;
    max-width: 265px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.formStep .formStepItem {
    position: relative;
    padding: 0;
    text-align: center;
    z-index: 1;
    max-width: 100%;
    text-align: center;
    z-index: 5;
}

.formStep::before {
    content: "";
    display: block;
    position: absolute;
    top: 29px;
    left: 52px;
    width: 24%;
    height: 3px;
    background-image: linear-gradient(90deg, rgba(255, 201, 0, 1), rgba(247, 121, 1, 1) 49%, rgba(205, 47, 47, 1));
}

.formStep.player::before {
    content: "";
    display: block;
    position: absolute;
    top: 29px;
    left: 53px;
    width: 22%;
    height: 3px;
    background-image: linear-gradient(90deg, rgba(255, 201, 0, 1), rgba(247, 121, 1, 1) 49%, rgba(205, 47, 47, 1));
}

.formStep.step1::before {
    background: #626262;
}

.formStep::after {
    content: "";
    display: block;
    position: absolute;
    top: 29px;
    right: 53px;
    width: 21%;
    height: 3px;
    background-image: linear-gradient(90deg, rgba(255, 201, 0, 1), rgba(247, 121, 1, 1) 66%, rgba(205, 47, 47, 1))
}

.formStep.player::after {
    content: "";
    display: block;
    position: absolute;
    top: 29px;
    right: 49px;
    width: 23%;
    height: 3px;
    background-image: linear-gradient(90deg, rgba(255, 201, 0, 1), rgba(247, 121, 1, 1) 66%, rgba(205, 47, 47, 1))
}

.formStep.step1::after {
    background: #626262;
}

.formStep.step2::after {
    background: #626262;
}

.formStep .formStepItem.on .formStepImg {
    position: relative;
    color: #fff;
}

.formStep .formStepItem .formStepImg {
    color: #626262;
}

.formStep .formStepItem:first-child .formStepImg span {
    position: relative;
    z-index: 2;
}

.formStep .formStepItem .formStepImg span {
    display: inline-block;
    background: var(--bs-black-1200);
    font-size: 60px;
}

.whitespace {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .formStep {
        margin: 0 auto 60px;
    }

    .formStep .formStepItem {
        padding: 0;
        margin: 0;
        width: auto;
    }

    .formStep::before {
        top: 29px;
        left: 52px;
        width: 23%;
    }

    .formStep.player::before {
        top: 29px;
        left: 55px;
        width: 21%;
        height: 3px;
    }

    .formStep::after {
        top: 29px;
        right: 49px;
        width: 24%;
        height: 3px;
    }

    .formStep.player::after {
        top: 29px;
        right: 49px;
        width: 23%;
        height: 3px;
    }
}

/* テキストリンク */
.link-line {
    display: inline;
    padding-bottom: 2px;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 1px;
    transition: none;
}

/* アニメ用のキーアニメーション */
@keyframes underline-restart {
    0% {
        background-size: 100% 1px;
    }

    10% {
        background-size: 0 1px;
    }

    100% {
        background-size: 100% 1px;
    }
}

.link-line.animate {
    animation: underline-restart 0.6s ease;
}

a {
    text-decoration: none;
}

/* 共通余白、フォント */
.margin-top-0 {
    margin-top: 0;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-67 {
    margin-bottom: 67px;
}

.margin-bottom-60 {
    margin-bottom: 60px;
}

.margin-bottom-100 {
    margin-bottom: 100px;
}


.margin-top-60 {
    margin-top: 60px;
}

.padding-left-right-48 {
    padding: 0 48px;
}

.fontsize-14 {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.15em;
}

.fontsize-16 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.fontsize-20 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.fontsize-24 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.fontsize-34 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.lineheight-25 {
    line-height: 25px;
}

/* ログインページ関連のアラート */

.alert {
    --bs-green:#BBFF00;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
    font-size: 1rem;
    font-weight: 400;
}

.alert > p {
    margin-bottom: 0.75rem;
}

.alert-warning,
.alert-primary {
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left-width: 3px;
    border-radius: 3px;
    padding: 0.75rem 0rem 0 2.3rem;
    margin: 0 0 1.2rem;
    overflow: hidden;
    position: relative;
    background: #2b1b20;
}

@media (min-width: 768px) {
    .alert-warning,
    .alert-primary {
        padding: 0.75rem 1rem 0 3rem;
    }
}

.alert-warning {
    border-left-color: var(--bs-red);
    color: var(--bs-red);
    background: #2b1b20;
}

.alert-primary {
    border-left-color: var(--bs-green);
    color: var(--bs-green);
    background: #283533;
}

.alert-warning::before,
.alert-primary::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 1rem;
    left: 0.8rem;
    width: 1rem;
    height: 1rem;
}

.alert-warning::before {
    background: url(./../../img/icon_alert_warning.svg) no-repeat center center/100% auto;
}

.alert-primary::before {
    background: url(./../../img/icon_alert_primary.svg) no-repeat center center/100% auto;
}

@media (min-width: 768px) {
    .alert-warning::before,
    .alert-primary::before {
        top: 0.9rem;
        left: 1rem;
        width: 1.2rem;
        height: 1.2rem;
    }
}

.alert-warning p {
    color: var(--bs-red);
}

.alert-primary p {
    color: var(--bs-green);
}

@media screen and (max-width: 380px) {
    .fs-btnreg input{
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 500px) {
    .fontsize-07 {
      font-size: 12px;
    }
}

@media screen and (max-width: 430px) {
    .fontsize-07 {
      font-size: 9px;
    }
}

@media screen and (max-width: 380px) {
    .fs-btn input{
        font-size: 14px;
    }
}