/* # =================================================================
   # 一覧共通
   # リスト
   # ================================================================= */

#list .person {
    /* width: 220px; */
    width: 15.2vw;
    /* padding-top: 25px; */
    padding-top: 1.73vw;
    text-decoration: none;
}

#list .name {
    text-align: center;
    /* font-size: 18px; */
    font-size: 1.25vw;
    color: #000;
    /* padding-top: 10px; */
    padding-top: 0.7vw;
    line-height: 1.2;
    font-weight: 300;
}

#list .text {
    font-weight: 300;
    /* font-size: 14px; */
    font-size: 0.97vw;
    color: #555;
    text-align: center;
    line-height: 1.2;
}

.is-hide {
    display: none;
}

/* 画像トリミング
------------------------------ */

#list .person img {
    /* width: 220px;
    height: 330px; */
    width: 15.2vw;
    height: 23vw;
    object-fit: cover;
}

/* # =================================================================
   # 一覧共通
   # ナビゲーション
   # ================================================================= */

#navigation .inner {
    /* padding-top: 104px; */
    padding-top: 7.22vw;
}

.btn-simple {
    margin: 0;
    text-align: left;
}

.btn-simple a {
    box-shadow: none;
    border: 2px solid #000000;
    /* height: 64px; */
    height: 4.44vw;
}

.nav_list {
    /* padding-top: 8px;
    padding-left: 16px; */
    padding-top: 0.5vw;
    padding-left: 1vw;
}

.nav_list_item a {
    /* font-size: 18px; */
    font-size: 1.25vw;
    text-decoration: none;
    font-weight: 300;
}

.nav_list_item a:hover {
    text-decoration: underline;
}

/* modelsの反転させる部分
------------------------------ */

.models_nav .nav_list {
    /* padding-top: 8px; */
    padding-top: 0.5vw;
    padding-left: 0;
    /* padding-right: 16px; */
    padding-right: 1vw;
    text-align: right;
}

.models_nav .btn-simple a {
    box-shadow: none;
    border: 2px solid #000000;
    /* height: 64px; */
    height: 4.44vw;
    background-color: #000;
    color: #fff;
}

/* # =================================================================
   # モデルのみ（セレクトフォーム）←アーティストも多少影響あり（Niinaのデザイン前）
   # 参考サイト：http://www.ascend-models.com/
   # ================================================================= */

/* 検索部分の固定
------------------------------ */

#search {
    width: 100vw;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    z-index: 4;
}

#search .inner {
    height: 100%;
}

.search_area {
    width: 100%;
}

/* closeのバツボタン
------------------------------ */

.search-close {
    position: absolute;
    /* width: 50px; */
    width: 3.47vw;
    right: 0;
    /* top: 80px; */
    top: 30px;
    cursor: pointer;
}

/* クリックしたら.activeを追加
------------------------------ */

#search {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
}

#search.active {
    /* display: block; */
    opacity: 1;
    visibility: visible;
}

/* # =================================================================
   # モデルのみ（serch-open）
   # 参考サイト：http://www.ascend-models.com/
   # ================================================================= */

#search-open {
    background: #000000;
    border: 1px solid #ffffff;
    width: 100%;
}

#search-open button {
    width: 100%;
    text-align: center;
    display: block;
    border: none;
    /* height: 50px;
    line-height: 50px; */
    height: 3.47vw;
    line-height: 3.47vw;
    padding: 0;
    background-color: #000;
    color: #fff;
    /* font-size: 30px; */
    font-size: 2vw;
    cursor: pointer;
}

#search-open {
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* svgの色とサイズ
------------------------------ */

.search-open_icon {
    /* width: 20px; */
    width: 1.38vw;
    fill: #fff;
}

/* クリックしたら.inactiveを追加
------------------------------ */

#search-open.inactive {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
}

/* # =================================================================
   # セレクトフォーム（Niinaのデザイン）
   # ================================================================= */

#search .inner {
    width: 1200px;
}

/* カテゴリー部分
------------------------------ */

.select_categoly_box {
    width: 20%;
}

._categoly_box_title {
    font-size: 18px;
    font-weight: 500;
}

select {
    width: 80%;
    font-size: 14px;
    border: none;
    border-bottom: 1px solid #000;
    background-color: transparent;
}

/* 目の色の部分
------------------------------ */

.form_select_eye {
    padding-top: 30px;
}

.select_eye_title {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 12px;
}

.select_eye_box {
    width: 80px;
    height: 80px;
    cursor: pointer;
}

.select_eye_box p {
    width: 100%;
    height: 100%;
    text-align: center;
}

.form_select_categoly.flexbox {
    align-items: center;
}

.japanese_label {
    font-size: 18px;
    font-weight: 500;
}

.japanese_label input {
    transform: scale(1.5);
    margin-right: 10px;
}

/* それぞれの色*/

.select_eye_box {
    background-color: #fff;
}

.select_eye_box.black {
    color: #000;
    border: 1px solid #000;
}

.select_eye_box.brown {
    color: #9e5716;
    border: 1px solid #9e5716;
}

.select_eye_box.grey {
    color: #c2bebe;
    border: 1px solid #c2bebe;
}

.select_eye_box.blue {
    color: #3e86f2;
    border: 1px solid #3e86f2;
}

.select_eye_box.green {
    color: #56b446;
    border: 1px solid #56b446;
}

.select_eye_box.hazel {
    color: #b97e4d;
    border: 1px solid #b97e4d;
}

.select_eye_box.dark-brown {
    color: #553e29;
    border: 1px solid #553e29;
}

.select_eye_box.light-brown {
    color: #d38f50;
    border: 1px solid #d38f50;
}

.select_eye_box.another {
    color: #583f99;
    border: 1px solid #583f99;
}

/* チェックされた時とホバーの時*/

@media screen and (min-width: 1200px) {
    .select_eye_box p:hover {
        background-color: #fff;
    }
    .select_eye_box.black p:hover {
        color: #000;
        border: 1px solid #000;
    }
    .select_eye_box.brown p:hover {
        color: #9e5716;
        border: 1px solid #9e5716;
    }
    .select_eye_box.grey p:hover {
        color: #c2bebe;
        border: 1px solid #c2bebe;
    }
    .select_eye_box.blue p:hover {
        color: #3e86f2;
        border: 1px solid #3e86f2;
    }
    .select_eye_box.green p:hover {
        color: #56b446;
        border: 1px solid #56b446;
    }
    .select_eye_box.hazel p:hover {
        color: #b97e4d;
        border: 1px solid #b97e4d;
    }
    .select_eye_box.dark-brown p:hover {
        color: #553e29;
        border: 1px solid #553e29;
    }
    .select_eye_box.light-brown p:hover {
        color: #d38f50;
        border: 1px solid #d38f50;
    }
    .select_eye_box.another input[type='checkbox']:checked + p {
        color: #583f99;
        border: 1px solid #583f99;
    }
}

.select_eye_box.black input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #000;
}

.select_eye_box.brown input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #9e5716;
}

.select_eye_box.grey input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #c2bebe;
}

.select_eye_box.blue input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #3e86f2;
}

.select_eye_box.green input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #56b446;
}

.select_eye_box.hazel input[type='checkbox']:checked + p {
    color: #fff;
    background: linear-gradient(180deg, rgba(187, 148, 79, 0.9) -14%, #b97e4d -14%, rgba(186, 134, 78, 0.90625) 24%, #bfb451 114%);
}

.select_eye_box.dark-brown input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #553e29;
}

.select_eye_box.light-brown input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #d38f50;
}

.select_eye_box.another input[type='checkbox']:checked + p {
    color: #fff;
    background-color: #583f99;
}

/* 特技の部分
------------------------------ */

.form_select_skill {
    padding-top: 30px;
}

.select_skill_title {
    font-weight: 500;
    font-size: 18px;
}

.select_skill_box {
    width: 110px;
    height: 40px;
    cursor: pointer;
    background-color: #fff;
    margin-top: 12px;
    border: 1px solid #000;
}

.select_skill_box p {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 10px;
}

.select_skill_box p span {
    white-space: nowrap;
}

/* チェックされた時とホバーの時*/

.select_skill_box input[type='checkbox']:checked + p {
    background-color: #000;
    color: #fff;
}

@media screen and (min-width: 1200px) {
    .select_skill_box p:hover {
        background-color: #000;
        color: #fff;
    }
}

/* .form_select_skill label {
    display: inline-block;
    margin: 3px 20px 10px 0;
    cursor: pointer;
    font-weight: 600;
}

.form_select_skill label span {
    display: block;
    text-align: center;
    padding: 4px 14px 4px;
    padding: 0.27vw 0.97vw;
    background-color: #fff;
    background-size: 12px;
    font-size: 0.83vw;
    min-width: 3em;
    border: 1px solid
} */

/* 共通部分
------------------------------ */

#selectForm .form_select_eye label input[type='checkbox'],
#selectForm .form_select_skill label input[type='checkbox'] {
    display: none;
}

/* 全ての選択を外すボタン
------------------------------ */

.form_select_reset {
    margin-top: 30px;
    text-align: center;
}

.form_select_reset input {
    width: 200px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #000;
}

.form_select_reset input:hover {
    background-color: #000;
    color: #fff;
}

/* 日本語対応チェックボックス
参考サイト：https://kinocolog.com/css_checkbox/
------------------------------ */

.japanese-check-box input[type='checkbox'] {
    display: none;
}

/* チェックボックスの代わりを成すラベル */

.japanese-check-box input[type='checkbox'] + label {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 10px;
}

/* ラベルの左に表示させる正方形のボックス */

.japanese-check-box input[type='checkbox'] + label::before {
    content: '';
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -9px;
    left: 0;
    top: 50%;
    border: 1px solid;
    /* 枠の色変更 お好きな色を */
    border-color: #585753;
    /* 背景の色変更 お好きな色を */
    background-color: #fff;
}

/* チェックが入った時のレ点 */

.japanese-check-box input[type='checkbox']:checked + label::after {
    content: '';
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 9px;
    margin-top: -8px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    /* チェックの色変更 お好きな色を */
    border-color: #585753;
}

@media screen and (max-width: 960px) {
    .japanese-check-box input[type='checkbox'] + label::before {
        width: 18px;
        height: 18px;
        margin-top: -9px;
    }
}

/* # =================================================================
   # セレクトフォーム（1200px以下）
   # ================================================================= */

@media screen and (max-width: 1200px) {
    .form_select_skill .flexbox {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: scroll;
    }
    .select_skill_box {
        width: 100%;
        min-width: 110px;
        margin-right: 20px;
    }
}