@charset "utf-8";
/* チーム作成エリア */
.create-team-area {
    width: 90%;
    height: 94%;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    top: 3%;
    left: 5%;
    overflow: scroll;
}

/* 各セレクトエリア */
.team-name-setting-area,
.team-numberofpeople-setting-area,
.team-time-setting-area,
.team-distance-setting-area,
.team-update-setting-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 15%;
    min-height: 65px;
    max-height: 15%;
    margin-top: 5px;
}

/* 各項目名 */
.team-name-text,
.team-numberofpeople-text,
.team-time-text,
.team-distance-text,
.team-update-text {
    font-size: 20px;
    font-weight: bold;
    padding-left: 25px;
    margin-bottom: 3px;
    color: #545454;
}

/* チーム名入力エリア */
.input-team-name {
    width: 85%;
    height: 40px;
    min-height: 32px;
    margin: 0 auto;
    border: 1px solid #545454;;
    border-radius: 5px;
    font-size: 25px;
    padding-top: 1%;
    padding-left: 3%;
    color: #545454;
}

/* 人数選択エリア */
.input-team-numberofpeople {
    width: 85%;
    height: 38px;
    min-height: 32px;
    margin: 0 auto;
    border: 1px solid #545454;
    border-radius: 5px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

/* 人数オプション表示 */
.select-people-value {
    width: 85%;
    padding-top: 1%;
    padding-left: 4%;
    color: #545454;
}

/* 時間選択エリア */
.input-team-time {
    width: 85%;
    height: 38px;
    min-height: 32px;
    margin: 0 auto;
    border: 1px solid #545454;
    border-radius: 5px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

/* 時間オプション表示 */
.select-time-value {
    width: 85%;
    padding-top: 1%;
    padding-left: 4%;
    color: #545454;
}

/* 距離選択エリア */
.input-team-distance {
    width: 85%;
    height: 38px;
    min-height: 32px;
    margin: 0 auto;
    border: 1px solid #545454;
    border-radius: 5px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

/* 距離オプション表示 */
.select-distance-value {
    width: 85%;
    padding-top: 1%;
    padding-left: 4%;
    color: #545454;
}

/* 更新頻度選択エリア */
.input-team-update {
    width: 85%;
    height: 38px;
    min-height: 32px;
    margin: 0 auto;
    border: 1px solid #545454;
    border-radius: 5px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

/* 更新頻度オプション表示 */
.select-update-value {
    width: 85%;
    padding-top: 1%;
    padding-left: 4%;
    color: #545454;
}

/* 各選択項目のした三角アイコン */
.triangle-icon-area {
    width: 20%;
    display: flex;
    justify-content: flex-end;
}

.triangle-icon {
    width: 25px;
    height: auto;
    transform: translateX(-5px);
}

/* 確認画面に進むボタン */
.finish-input-button-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 19%;
    margin-top: 5px;
    align-items: center;
    justify-content: center;
}

.finish-input-button {
    width: 210px;
    height: 45px;
    background-color: white;
    font-size: 25px;
    border: 1px solid #545454;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.finish-input-icon-area {
    margin-right: 3px;
    display: flex;
    align-items: center;
}

.finish-input-icon {
    width: 36px;
    height: auto;
}

.finish-input-text-area {
    height: 45px;
    line-height: 45px;
    color: #545454;
    font-size: 16px;
    font-weight: bold;
}

/* ドラムロール */
.selecter {
    display: none;
    margin-inline: auto;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 81%;
    background: white;
    padding: 10px;
    font-size: 20px;
    line-height: 2.4;
    border: 1px solid #545454;
    z-index: 100;
}

.team-numberofpeople-title-area,
.team-time-title-area,
.team-distance-title-area,
.team-update-title-area {
    display: flex;
    position: absolute;
    border-bottom: 1px solid #C0C2C3;
    background-color: #C0C2C3;
    width: 100%;
    height: 15%;
    align-items: center;
    justify-content: center;
    transform: translate(-10px, -10px);
    z-index: 100;
    color: #545454;
}

.selecter_inner1,
.selecter_inner2,
.selecter_inner3,
.selecter_inner4 {
    margin-inline: auto;
    height: calc(20px * 2.4 * 5);
    overflow-y: scroll;
    padding: 0;
    scroll-snap-type: y mandatory;
    position: relative;
}

.selecter_inner1::-webkit-scrollbar,
.selecter_inner2::-webkit-scrollbar,
.selecter_inner3::-webkit-scrollbar,
.selecter_inner4::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    display: none;
}
.selecter_inner1::-webkit-scrollbar-thumb,
.selecter_inner2::-webkit-scrollbar-thumb,
.selecter_inner3::-webkit-scrollbar-thumb,
.selecter_inner4::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
.selecter_inner1::-webkit-scrollbar-thumb:hover,
.selecter_inner2::-webkit-scrollbar-thumb:hover,
.selecter_inner3::-webkit-scrollbar-thumb:hover,
.selecter_inner4::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}
.selecter_inner1::-webkit-scrollbar-track,
.selecter_inner2::-webkit-scrollbar-track,
.selecter_inner3::-webkit-scrollbar-track,
.selecter_inner4::-webkit-scrollbar-track {
    background-color: transparent;
}

.selecter_inner1 div,
.selecter_inner2 div,
.selecter_inner3 div,
.selecter_inner4 div {
    height: calc(20px * 2.4);
    /* border: 1px solid black; */
    user-select: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C0C0C0;
}

.selecter_inner1 div:empty,
.selecter_inner2 div:empty,
.selecter_inner3 div:empty,
.selecter_inner4 div:empty {
    height: calc(20px * 2.4);
}

.selecter_inner1 div:has(input:checked),
.selecter_inner2 div:has(input:checked),
.selecter_inner3 div:has(input:checked),
.selecter_inner4 div:has(input:checked) {
    color: #545454;
    font-weight: 700;
    border: 1px solid #EDEDED;
    border-radius: 15px;
    background-color: #EDEDED;
}

.selecter_inner1 div input,
.selecter_inner2 div input,
.selecter_inner3 div input,
.selecter_inner4 div input {
    appearance: none;
}

/* クーポンアイコン */
.coupon-icon {
    width: 70px;
    height: auto;
}