/*----------------全体的なcss------------------*/
html {
    width: 100%;
}

body {
    background-color: #ffe89d;

}

#map_page_color {

    background-color: #5F87A7;

}

button.md-btn {
    vertical-align: middle; /* ボタンをテキストの中央に配置 */
}

button.me_btn {
    vertical-align: middle; /* ボタンをテキストの中央に配置 */
}


/*----------------全体的なcss（終了）------------------*/

/*----------------コンテンツ再利用------------------*/


.free_waku {

    border: 0.1em solid #050505;
    padding: 2em;
    background-color: cornsilk;
    border-radius: 0.5em;
    width: 80%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;

}


.free_width_waku {

    border: 0.1em solid #050505;
    padding: 2em;
    background-color: cornsilk;
    border-radius: 0.5em;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;

}


@media screen and (max-width: 480px) {


    .free_waku {

        padding: 1em;
        width: 100%;
    }

    .free_width_waku {

        padding: 1em;
        width: 100%;
    }


}

/*----------------//コンテンツ再利用------------------*/


/*----------------固定ボタン------------------*/


#add_image {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-10%);
    pointer-events: none;
    z-index: 2;
}

#add_image img {
    width: 20%;
    pointer-events: auto
}

@media screen and (max-width: 480px) {


    #add_image {
        position: fixed;
        left: 50%;
        bottom: 10%;
        transform: translateX(-10%);
    }

    #add_image img {
        width: 30%;
    }


}

/*----------------固定ボタン（終）------------------*/


/*----------------シーケンスボタン------------------*/

/* LINE004 */

.button_line004 {
    margin-bottom: 1em;
    font-size: 12px;
}


.button_line004 a {
    position: relative;
    justify-content: space-around;
    align-items: center;
    padding: 5px 10px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    z-index: 1;
}

.button_line004 a:before,
.button_line004 a:after {
    content: '';
    width: 18px;
    height: 18px;
    border-color: #6bb6ff;
    box-sizing: border-box;
    border-style: solid;
    display: block;
    position: absolute;
    transition: all 0.3s ease-in-out;
}

.button_line004 a:before {
    top: -6px;
    left: -6px;
    border-width: 2px 0 0 2px;
    z-index: 5;
}

.button_line004 a:after {
    bottom: -6px;
    right: -6px;
    border-width: 0 2px 2px 0;
}

.button_line004 a:hover:before,
.button_line004 a:hover:after {
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #6bb6ff;
}

.button_line004 a:hover {
    color: #fff;
    background-color: #6bb6ff;
    border-color: #6bb6ff;
}

/*----------------シーケンスボタン------------------*/


/*----------------お絵描きエリア------------------*/


#drawingCanvas {

    position: absolute;
    z-index: 9999;

}


/*----------------お絵描きエリア（終）------------------*/


/*----------------タイトル------------------*/
#list_title {

    text-align: center;
    font-size: 25px;
    font-family: serif;
    line-height: 2em;


}

#list_title span {

    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;

}

@media screen and (max-width: 767px) {

    #list_title {

        text-align: center;
        font-size: 20px;
        font-family: serif


    }


}


/*----------------タイトル（終）------------------*/


/*----------------一覧メニュー関係------------------*/

/*============
nav
=============*/
nav {
    display: block;
    position: fixed;
    top: 0;
    left: -50%;
    bottom: 0;
    width: 50%;
    background: #f7f3ee;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .5s;
    z-index: 3;
    opacity: 0;
}

.open nav {
    left: 0;
    opacity: 1;
    z-index: 4;
}

nav .inner {
    padding: 25px;
}

nav .inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid;
    text-align: center;
}

nav .inner ul li {
    position: relative;
    flex: 43%; /* 25% 幅の列として設定（例えば、4列の場合） */
    margin: 0; /* 列と列の間隔を設定 */
}

nav .inner ul li img {
    width: 50px;

}

nav .inner ul li p {
    font-size: 14px;

}

nav .inner ul li a {
    display: block;
    color: #333;
    font-size: 14px;
    padding: 1em;
    text-decoration: none;
    transition-duration: 0.2s;
}

nav .inner ul li a:hover {
    background: #e4e4e4;
}

.menu_title {
    color: gray;
    font-size: 15px;
}

.only_menu {

    font-size: 14px;
    padding: 1em;
    text-decoration: none;
    transition-duration: 0.2s;
    background-color: aliceblue;
    font-family: serif;
    text-align: center;

}


@media screen and (max-width: 767px) {
    nav {
        left: -80%;
        width: 80%;
    }

    nav .inner ul li p {
        font-size: 13px;
    }

    nav .inner ul li img {
        width: 40px;

    }

}


/*============
.toggle_btn
=============*/
.toggle_btn {
    display: block;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
}

.toggle_btn span {
    display: block;
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
    transition: all .5s;
}

.toggle_btn span:nth-child(1) {
    top: 4px;
    pointer-events: none;
}

.toggle_btn span:nth-child(2) {
    top: 14px;
    pointer-events: none;
}

.toggle_btn span:nth-child(3) {
    bottom: 4px;
    pointer-events: none;
}

.open .toggle_btn span {
    background-color: #fff;
}

.open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-315deg);
}

.open .toggle_btn span:nth-child(2) {
    opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(315deg);
}

/*============
#mask
=============*/
#mask {
    display: none;
    transition: all .5s;
}

.open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    z-index: 3;
    cursor: pointer;
}

/*============
main
=============*/
main {
    padding: 50px;
}

main h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
}


/*----------------一覧メニュー関係（終）------------------*/


/*----------------フォーム関係------------------*/


#new_add_data_textarea {

    white-space: pre-wrap;
    line-height: 2em

}

/*----------------フォーム関係------------------*/


/*----------------パンくすリストCSS------------------*/


.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.breadcrumb li:not(:last-of-type)::after {
    content: "»";
    margin: 0 .6em; /* 記号の左右の余白 */
    color: #777; /* 記号の色 */
}


/*----------------パンくすリストCSS（終了）------------------*/


/*----------------ロード画面-----------------*/

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 46%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*----------------ロード画面-----------------*/


/*-----------図式制作ページcss-----------------*/


#map_set {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

#block_space {
    position: absolute;
    top: 50%;
    left: 21%;
    transform: translate(0%, -50%);
    height: 100%;
    width: 50%;
}

#line_outer {
    width: 50%;
    height: 5%;
    position: absolute;
    top: 50%;
    left: 21%;
    transform: translate(0%, -50%);
    border-left: 2px solid;
    border-right: 2px solid;
}

.line_inner {
    width: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid;
}


#left_box {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
    break-inside: avoid;
    height: 35%;
    width: 15%;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0%, -50%);
}


#right_box {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
    break-inside: avoid;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    height: 15%;
    width: 15%;
    position: absolute;
    top: 50%;
    left: 72%;
    transform: translate(0%, -50%);
    z-index: 2000;
    overflow-wrap: break-word;
}

.left_box_line {
    width: 100%;
    border: 0.5px solid;
}

.right_box_line {
    width: 100%;
    border: 0.5px solid;
}

.shape_line {
    height: 100%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    border-right: 1px solid;
}

.shape_outer {
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top: 1px solid;
}

.line_set {
    width: 25%;
    height: 20%;
    position: relative;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.staging_block {
    position: absolute;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 50%;
}


.icon_space {
    border-top: 1px solid;
}


.staging_box {
    background-color: #FFFFFF; /* 背景色指定 */
    border-radius: 5px; /* 角丸指定 */
    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
    height: 40%;
    break-inside: avoid;
    margin-bottom: 2em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 10px;
    margin-left: 10px;
}


.white_map_box {
    background-color: #FFFFFF; /* 背景色指定 */
    border-radius: 5px; /* 角丸指定 */
    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
    height: 40%;
    break-inside: avoid;
    margin-bottom: 2em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 10px;
    margin-left: 10px;
    overflow-wrap: break-word;
}

.staging_title {
    height: 70%;
    white-space: normal;
    overflow: scroll;
}

.stance_title {
    height: 70%;
    white-space: normal;
    overflow: scroll;
}


.stance_block {
    position: absolute;
    top: 74%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 50%;
}


#map_view {
    white-space: nowrap;
}

#product_name {
    height: 60%;
    white-space: normal;
    overflow: scroll;
}

#char_name {
    margin-left: 5px;
    white-space: normal;
    overflow: scroll;
    height: 60%;
    overflow-wrap: break-word;
}

#stance_name {
    margin: 5px;
    white-space: normal;
    overflow: scroll;
    height: 60%;
    padding-top: 0.5em;
    overflow-wrap: break-word;
}

.stance_text_box {

    height: 50%;

}

.char_text_box {
    height: 50%;
}

.box_group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
}

.title_text {
    padding-bottom: 3em;
    overflow-wrap: break-word;
    pointer-events: none;
}

/*-----------図式制作ページcss（終了）-----------------*/


/*-----------質問エリア-----------------*/

#question_text {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

#question_text:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

#question_text:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}


#question_text2 {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

#question_text2:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

#question_text2:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}

#question_text3 {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

#question_text3:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

#question_text3:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}


#question_text4 {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

#question_text4:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

#question_text4:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}


#question_text5 {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

#question_text5:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

#question_text5:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}


#question_from {
    /*margin-top: 50px;*/
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}

#question_from2 {
    /*margin-top: 50px;*/
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}

#question_from3 {
    /*margin-top: 50px;*/
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}

#button_func {
    /*margin-top: 50px;*/
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}

button.button_center.btn.btn-border {
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}


#button_func2 {
    margin-top: 20px;
}

#button_func3 {
    margin-top: 20px;
}

.sq_margin_text {
    margin-top: 1em;
    margin-bottom: 1em;
    color: cadetblue;

}


.sq_setting_field {
    text-align: center;
}

.button_position {
    text-align: center;
}

#map_button_func {
    /*margin-top: 50px;*/
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}

#button_func_waku4 {
    /*margin-top: 50px;*/
    position: relative;
    left: 50%;
    transform: translate(-50%, 10px);
}

#select_design {
    width: 100%;
    padding: 10px;
    border: 1px solid #b6b5b5;
    color: #757373;
}

.stance_select_design {
    width: 100%;
    padding: 10px;
    border: 1px solid #b6b5b5;
    color: #757373;
}

.staging_select_design {
    width: 100%;
    padding: 10px;
    border: 1px solid #b6b5b5;
    color: #757373;
}


@media screen and (max-width: 480px) {

    #question_text {
        font-size: 15px;
        line-height: 2em;
    }

    #question_text2 {
        font-size: 15px;
        line-height: 2em;
    }

    #question_text3 {
        font-size: 15px;
        line-height: 2em;
    }

    #question_text4 {
        font-size: 15px;
        line-height: 2em;
    }

    #question_text5 {
        font-size: 15px;
        line-height: 2em;
    }


}

/*-----------質問エリア（終了）-----------------*/


/*----------------アンケート設計エリア------------------*/

.dd-box {
    padding: 10px;
}

.dd-box li {
    user-select: none;
    background: #FFFFFFff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
    cursor: grab;
    padding: 10px;
    transition: box-shadow .3s;
}

.dd-box li.onGrab {
    cursor: grabbing;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .15);
    position: absolute;
    z-index: 1;
}

.dd-box li:not(:last-child) {
    margin-bottom: 30px;
}

.hidden {
    visibility: hidden;
}

.setting_position {
    position: absolute;
    right: 0;
    transform: translate(-20%, -120%);
}

.create_item {
    width: 3em;
    vertical-align: middle;

}

@media screen and (max-width: 480px) {

    .create_item {
        width: 3em;
        vertical-align: middle;

    }


}


#create_area {
    margin-top: 100px;
    margin-left: 50px;
}

@media screen and (max-width: 767px) {

    #create_area {
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 5em;

    }

}

/*----------------アンケート設計エリア（終）------------------*/


/*----------------フォームボタンエリア------------------*/
#menu_form {
    background-color: #FFFFFF;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: solid #000000;
    text-align: center;
    position: relative;
    top: 3em;
}

.form_add {

    font-size: 15px;

}


/*----------------フォームボタンエリア（終了）------------------*/


/*----------------１行フォーム------------------*/

.form_design {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.normal_form {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    font: 15px/24px sans-serif;
    box-sizing: border-box;
    padding: 1em;
    transition: 0.3s;
    letter-spacing: 1px;
    color: #aaaaaa;
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 2px 0 #707070 inset;
    border-radius: 4px;
}

.form_design input[type='text'] {
    font: 15px/24px sans-serif;
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    transition: 0.3s;
    letter-spacing: 1px;
    color: #aaaaaa;
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 2px 0 #707070 inset;
    border-radius: 4px;
}

.form_design textarea {
    font: 15px/24px sans-serif;
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    transition: 0.3s;
    letter-spacing: 1px;
    color: #aaaaaa;
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 2px 0 #707070 inset;
    border-radius: 4px;
    margin-top: 2em;
    height: 300px;
    margin-bottom: 2em;
}

.ef textarea:focus {
    outline: none;
    box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}

@media screen and (max-width: 480px) {

    .form_design {
        position: relative;
        width: 98%;
        margin-right: auto;
        margin-left: auto;
    }

}


/*----------------検索フォームcss（終）------------------*/


/*----------------検索フォームcss------------------*/

.cp_iptxt {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.cp_iptxt input[type='text'] {
    font: 15px/24px sans-serif;
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    transition: 0.3s;
    letter-spacing: 1px;
    /*color: #aaaaaa;*/
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 2px 0 #707070 inset;
    border-radius: 4px;
}

.cp_iptxt select{
    font: 15px/24px sans-serif;
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    transition: 0.3s;
    letter-spacing: 1px;
    /*color: #aaaaaa;*/
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 2px 0 #707070 inset;
    border-radius: 4px;
}

.cp_iptxt textarea {
    font: 15px/24px sans-serif;
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    transition: 0.3s;
    letter-spacing: 1px;
    /*color: #aaaaaa;*/
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 2px 0 #707070 inset;
    border-radius: 4px;
    margin-top: 2em;
    height: 300px;
    margin-bottom: 2em;
}

.ef textarea:focus {
    outline: none;
    box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}

@media screen and (max-width: 480px) {

    .cp_iptxt {
        position: relative;
        width: 98%;
        margin-right: auto;
        margin-left: auto;
    }

}


/*----------------検索フォームcss（終）------------------*/


/*----------------ボタンナビゲーションcss------------------*/

.mini-text {
    font-size: 10px;
    pointer-events: none;


}

/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px; /*高さ*/
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; /*背景色*/
    border-top: 2px solid #808080; /*バーの上の線*/
    border-bottom: 2px solid #808080; /*バーの下の線*/
    z-index: 30;
    display: flex;
}


ul.bottom-menu.top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px; /*高さ*/
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; /*背景色*/
    border-top: 2px solid #808080; /*バーの上の線*/
    border-bottom: 2px solid #808080; /*バーの下の線*/
    z-index: 30;
    display: flex;
}

ul.bottom-menu li {
    float: left;
    width: 50%;
    background-color: #f5f5f5; /*背景色*/
    list-style-type: none;
    text-align: center;
    font-size: 25px; /*アイコンのサイズ*/
}

.bottom-menu li a {
    display: block;
    color: #808080; /*アイコン＆文字の色*/
    padding-top: 10px;
    padding-bottom: 5px;
    line-height: 10px;
    text-decoration: none;
}

.bottom-menu li a:hover {
    color: #a9a9a9; /*マウスオーバー時の色*/
}

/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu-second-level li a {
    border-top: 1px dashed #a9a9a9; /*展開の枠点線*/
    font-size: 15px; /*展開メニューの文字サイズ*/
    line-height: 30px; /*文字の縦幅*/
}

.menu-second-level li a:hover {
    height: 100%;
    background: lightgrey; /*マウスオーバーの色*/
}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px; /*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px; /*高さ*/
    visibility: visible;
    opacity: 1;
}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;
}


/* ボトムメニューを表示しない指示 */
@media (orientation: landscape) {
    /*スマホで横画面の時*/
    @media (min-width: 768px) {
        /*PC表示の時*/
        ul.bottom-menu {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 45px; /*高さ*/
            margin: 0;
            padding: 0;
            background-color: #f5f5f5; /*背景色*/
            border-top: 2px solid #808080; /*バーの上の線*/
            border-bottom: 2px solid #808080; /*バーの下の線*/
            z-index: 30;
        }
    }

    /*スマホの時だけ ボトムメニュー分フッタを底上げ*/
    @media (max-width: 767px) {
        #footer {
            margin-bottom: 45px;
        }
    }
}

/*----------------ボタンナビゲーションcss（終）------------------*/


/*---------自作ポップアップcss----------*/
.md-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7;
    z-index: 9999;
}

.md-contents {
    display: none;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 95%;
    height: 95%;
    overflow: hidden;
    transform: translateX(-50%);
    z-index: 10000;
    overflow-y: scroll;
    text-align: left;
    line-height: 2em;
    font-size: 0.9em;
    border-radius: 0.5em;
}

.md-inner {
    padding: 3em;
    background: #ffe89d;
    border-radius: 10px;
}

#waku1 {
    border: 0.1em solid #050505;
    padding: 3em;
    background-color: cornsilk;
    border-radius: 0.5em;
}

#waku2 {
    border: 0.1em solid #050505;
    padding: 3em;
    background-color: cornsilk;
    border-radius: 0.5em;
}

#waku3 {
    border: 0.1em solid #050505;
    padding: 3em;
    background-color: cornsilk;
    border-radius: 0.5em;
}

#waku4 {
    border: 0.1em solid #050505;
    padding: 3em;
    background-color: cornsilk;
    border-radius: 0.5em;
}

.md-xmark {
    position: absolute;
    top: 10px;
    right: 9px;
    width: 25px;
    height: 22px;
    z-index: 9999;
    cursor: pointer;
}

.md-xmark span {
    height: 0.1em;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #333;
    border-radius: 4px;
}

.md-xmark span:nth-of-type(1) {
    top: 0;
    transform: translateY(10px) rotate(-45deg);
    pointer-events: none;

}


.md-xmark span:nth-of-type(2) {
    bottom: 0;
    transform: translateY(-10px) rotate(45deg);
    pointer-events: none;
}


@media screen and (max-width: 480px) {

    .md-inner {
        padding: 1em;
        background: #ffe89d;
        border-radius: 10px;
    }

    #waku1 {
        border: 0.1em solid #050505;
        padding: 1em;
    }

    #waku2 {
        border: 0.1em solid #050505;
        padding: 1em;
    }

    #waku3 {
        border: 0.1em solid #050505;
        padding: 1em;
    }

    #waku4 {
        border: 0.1em solid #050505;
        padding: 1em;
    }


}


/*---------自作ポップアップcss-----------*/


/*---------ナビボタンのサイズ-----------*/

.elem_sys_image {
    width: 3em;
    vertical-align: middle;
}

@media screen and (max-width: 480px) {

    .elem_sys_image {
        width: 4em;
        vertical-align: middle;
    }


}

/*---------ナビボタンのサイズ（終）-----------*/


/*----------タグ生成&検索フォームシステム----------------------*/


/* Reset */
button {
    border: none;
    background-color: transparent;
    cursor: pointer
}

ul, li, button {
    padding: 0;
    margin: 0
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*タグクラウドのデザイン*/
.tag_design {
    display: inline-block;
    margin: 1em .6em 0;
    padding: .6em;
    line-height: 1;
    text-decoration: none;
    color: #0000ee;
    background-color: #fff;
    border: 1px solid #0000ee;
    border-left: 5px solid #0000ee;
}

/*-----------タグ生成&検索フォームシステム（終）-----------------*/


/*-----------アンケート作成 > 選択ボタンcss-----------------*/
.radio-group {
    display: flex;
    column-gap: .5rem;
    margin-bottom: 0.5rem;
    padding: 1rem 0.5rem;
    border: 1px solid #333;
}

.radio-area input[type=radio] {
    display: none;
}

.radio-area label {
    cursor: pointer;
    padding: 0.5rem;
    color: #333;
    transition: .5s;
}

.radio-area input[type=radio]:checked + label {
    color: white;
    background-color: #41e0dd;
}

/*-----------アンケート作成 > 選択ボタンcss（終）-----------------*/


/*----------------一覧ページ関係----------------*/

#elem_all {
    column-count: 4;
    height: auto;
    margin: 2em 2em 10em;
}

#elem_all_tag1 {
    column-count: 4;
    height: auto;
    margin: 2em 2em 10em;
}

#elem_all_tag2 {
    column-count: 4;
    height: auto;
    margin: 2em 2em 10em;
}


.tag_elem_list {
    column-count: 4;
    height: auto;
    margin: 2em 2em 10em;
}


#elem_all2 {
    column-count: 1;
    height: auto;
    margin: 2em 2em 5em;
}

#elem_all3 {
    column-count: 4;
    height: auto;
    margin: 2em 2em 10em;
}

#elem_all4 {
    column-count: 4;
    height: auto;
    margin: 2em 2em 10em;
}

.elem_all {
    column-count: 1;
    height: auto;
    margin: 2em 2em 10em;
}


a {
    text-decoration: none;
}

.elem_field {
    background-color: #FFFFFF; /* 背景色指定 */
    border-radius: 5px; /* 角丸指定 */
    /*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
    height: auto;
    break-inside: avoid;
    margin-bottom: 2em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 10px;
    margin-left: 10px;
    border: black 1px solid;

}

/*アイコン設定*/

.edit_icon {
    border-top: solid #797979 0.25px;
    margin-top: 0.5em;
}

.edit_item {
    width: 2em;
}

.delete_item {
    width: 2em;

}


@media screen and (max-width: 480px) {

    #elem_all {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;

    }

    #elem_all3 {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;
    }

    #elem_all4 {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;

    }

    .elem_all {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;
    }

    #elem_all_tag1 {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;
    }

    #elem_all_tag2 {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;
    }

    .tag_elem_list {
        column-count: 1;
        height: auto;
        margin: 2em 2em 10em;
    }


}


/*----------------一覧ページ関係（終了）----------------*/


/*----------------アンケート設計エリア------------------*/

.dd-box {
    padding: 10px;
}

.dd-box li {
    user-select: none;
    background: #FFFFFFff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
    cursor: grab;
    padding: 10px;
    transition: box-shadow .3s;
}

.dd-box li.onGrab {
    cursor: grabbing;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .15);
    position: absolute;
    z-index: 1;
}

.dd-box li:not(:last-child) {
    margin-bottom: 30px;
}

.hidden {
    visibility: hidden;
}

.setting_position {
    position: absolute;
    right: 0;
    transform: translate(-20%, -120%);
}

.create_item {
    width: 3em;
    vertical-align: middle;

}

@media screen and (max-width: 480px) {

    .create_item {
        width: 3em;
        vertical-align: middle;

    }


}


#create_area {
    margin-top: 100px;
    margin-left: 50px;
}

@media screen and (max-width: 767px) {

    #create_area {
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 5em;

    }

}

/*----------------アンケート設計エリア（終）------------------*/


/*----------------フォームボタンエリア------------------*/
#menu_form {
    background-color: #FFFFFF;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: solid #000000;
    text-align: center;
    position: relative;
    top: 3em;
}

.form_add {

    font-size: 15px;

}


/*----------------フォームボタンエリア（終了）------------------*/


/*----------------ワンブロック全体css------------------*/

.white_space {
    width: 640px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5%;
    background-color: white;
    border-radius: 10px;
    border: solid;
}

.white_space_text {
    padding: 2% 5% 0 6%;
    font-size: 20px;
    line-height: 2em;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

@media screen and (max-width: 480px) {

    .white_space {

        width: 90%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5%;
        background-color: white;
        border-radius: 10px;

    }

    .white_space_text {
        padding: 2% 5% 0 5%;
        font-size: 15px;
        line-height: 2em;
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    }

}

/*----------------ワンブロック全体css（終了）------------------*/


/*----------------ワンブロック個別css------------------*/

.we_dd_rule {
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;
}

.title_space {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 19px;
}

.white_space_layout {
    display: flex;
    width: 80%;
    height: 13em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5em;
}

.white_space_rule {

    width: 80%;
    padding: 0.7em;
    margin-top: 1em;
    background-color: white;
    border-radius: 10px;
    border: solid;
    overflow-y: scroll;

}

.white_space_navi {

    width: 20%;
    margin-top: 1em;
    margin-left: 1em

}

.white_space_text_bottom {
    padding: 0.5em;

}


.white_space_text_tag {
    font-size: 1.3em;
    padding: 1em;
}


.white_space_rule_bottom {

    background-color: white;
    border-radius: 10px;
    border: solid;
    overflow-x: scroll;
    margin-bottom: 1em;
    display: flex;
}

.white_space_rule_tag {

    background-color: white;
    border-radius: 10px;
    border: solid;
    height: 12em;
    font-size: 10px;
    overflow-y: scroll;

}

.white_space_text_rule {
    padding: 0.2em;
    font-size: 18px;
    line-height: 2em;
    font-weight: 300;
    font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;

}

#tag_add_area {
    margin-bottom: 1em;
}


@media screen and (max-width: 480px) {

    .we_dd_rule {
        width: 100%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 3em;
    }

    .title_space {
        width: 98%;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        top: 19px;
    }

    .white_space_layout {
        display: flex;
        width: 98%;
        height: 13em;
        margin-left: auto;
        margin-right: auto;
    }

    .white_space_rule {

        width: 80%;
        padding: 0.7em;
        margin-top: 1em;
        background-color: white;
        border-radius: 10px;
        border: solid;
        overflow-y: scroll;

    }

    .white_space_navi {

        width: 20%;
        margin-top: 1em;
        margin-left: 0.5em

    }

    .white_space_text_bottom {
        padding: 0.5em;

    }


    .white_space_text_tag {
        font-size: 1.3em;
        padding-left: 0.5em;
    }


    .white_space_rule_bottom {

        background-color: white;
        border-radius: 10px;
        border: solid;
        font-size: 10px;
        overflow-x: scroll;
        margin-bottom: 1em;
        display: flex;

    }

    .white_space_rule_tag {

        background-color: white;
        border-radius: 10px;
        border: solid;
        overflow-y: scroll;

    }

    .white_space_text_rule {
        padding: 0.2em;
        font-size: 14px;
        line-height: 2em;
        font-weight: 300;
        font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;

    }


}


/*----------------ワンブロック個別css（終了）------------------*/


/*----------------吹き出しcss------------------*/
h1 {
    position: relative;
    padding: 0.6em;
    background: #FFF056;
    border: 1px solid #000000;
    border-radius: 0.2em;
    font-size: 1em;
}

h1::before {
    position: absolute;
    content: '';
    top: 102%;
    left: 30px;
    border-top: 15px solid #000000;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    width: 0;
    height: 0;
}


h1::after {
    position: absolute;
    content: '';
    top: 98%;
    left: 30px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    width: 0;
    height: 0;
    border-top: 15px solid #FFF056;
}

@media screen and (max-width: 480px) {
    h1 {
        position: relative;
        padding: 0.6em;
        background: #FFF056;
        border: 1px solid #000000;
        border-radius: 0.2em;
        font-size: 1em;
    }

    h1::before {
        position: absolute;
        content: '';
        top: 102%;
        left: 30px;
        border-top: 15px solid #000000;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        width: 0;
        height: 0;
    }


    h1::after {
        position: absolute;
        content: '';
        top: 98%;
        left: 30px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        width: 0;
        height: 0;
        border-top: 15px solid #FFF056;
    }

}


/*----------------吹き出しcss（終）------------------*/


/*---------ナビボタンのサイズ-----------*/

.elem_sys_image {
    width: 3em;
    vertical-align: middle;
}

@media screen and (max-width: 480px) {

    .elem_sys_image {
        width: 4em;
        vertical-align: middle;
    }


}

/*---------ナビボタンのサイズ（終）-----------*/


/*----------タグ生成&検索フォームシステム----------------------*/


/* Reset */
button {
    border: none;
    background-color: transparent;
    cursor: pointer
}

ul, li, button {
    padding: 0;
    margin: 0
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*タグクラウドのデザイン*/
.tag_design {
    display: inline-block;
    margin: 1em .6em 0;
    padding: .6em;
    line-height: 1;
    text-decoration: none;
    color: #0000ee;
    background-color: #fff;
    border: 1px solid #0000ee;
    border-left: 5px solid #0000ee;
}

/*-----------タグ生成&検索フォームシステム（終）-----------------*/


/*-----------登録または変更ボタンのcss-----------------*/


.btn,
button.btn {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
}

button.btn-border {
    margin-bottom: 40px;
    padding: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 0;
}

button.btn-border span {
    position: relative;

    display: block;

    padding: 0.5em 2em;

    color: #000;
    border: 2px solid #000;
    border-radius: 0.5rem;
    background: #fff;
    pointer-events: none;
}

button.btn-border:before {
    position: absolute;
    bottom: -6px;
    left: 0;

    display: block;

    width: 96%;
    height: 10px;

    content: "";
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

    border: 2px solid #000;
    border-top: 1px solid #000;
    border-radius: 0 0 0.5rem 0.5rem;
    background-image: -webkit-repeating-linear-gradient(
            135deg,
            #000,
            #000 1px,
            transparent 2px,
            transparent 5px
    );
    background-image: repeating-linear-gradient(
            -45deg,
            #000,
            #000 1px,
            transparent 2px,
            transparent 5px
    );
    background-size: 7px 7px;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;
}

button.btn-border:hover {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
}

button.btn-border:hover:before {
    bottom: -5px;
}

button.btn-border:active {
    -webkit-transform: translate(0, 7px);
    transform: translate(0, 7px);
}

button.btn-border:active:before {
    bottom: -1px;
}

/*-----------登録または変更ボタンのcss（終）-----------------*/


/*-----------アンケート作成 > 選択ボタンcss-----------------*/
.radio-group {
    display: flex;
    column-gap: .5rem;
    margin-bottom: 0.5rem;
    padding: 1rem 0.5rem;
    border: 1px solid #333;
}

.radio-area input[type=radio] {
    display: none;
}

.radio-area label {
    cursor: pointer;
    padding: 0.5rem;
    color: #333;
    transition: .5s;
}

.radio-area input[type=radio]:checked + label {
    color: white;
    background-color: #41e0dd;
}

/*-----------アンケート作成 > 選択ボタンcss（終）-----------------*/


/*-----------切り替えタグのデザイン------------------------------------------*/

* {
    box-sizing: border-box;
    padding: 0;
}

ul {
    list-style-type: none;
}

.tab-area {
    display: flex;
    border: 1px solid;
    cursor: pointer; /* カーソルポインターに */
    background-color: cornsilk;
}

.tab {
    width: 100%;
    padding: 5px;
    text-align: center;
}

.tab:nth-child(n+2) {
    border-left: 1px solid;
}

.tab.active {
    background-color: cadetblue;
    color: #FFFFFF;

}

.panel {
    display: none;
}

.panel.active {
    display: block;
}


.tab-area2 {
    display: flex;
    border: 1px solid;
    cursor: pointer; /* カーソルポインターに */
    background-color: cornsilk;
    margin-bottom: 2em;
}

.tab2 {
    width: 100%;
    padding: 5px;
    text-align: center;
}

.tab2:nth-child(n+2) {
    border-left: 1px solid;
}

.tab2.active {
    background-color: cadetblue;
    color: #FFFFFF;

}

.panel2 {
    display: none;
}

.panel2.active {
    display: block;
}

.tab_text_area {
    background-color: white;
    border-radius: 0.5em;
    margin-top: 1em;
    border: 1px solid #b6b5b5;
    height: 10em;
    font-size: 16px;
    overflow-y: auto;
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;
}


#tag_page {
    margin-top: 3em;
}

#tag_design {
    margin-top: 3em;
}

#tag_page3 {
    margin-top: 3em;
}

#char_comment_tag {
    margin-top: 3em;

}

#stance_comment_tag {
    margin-top: 3em;

}

#product_comment_tag {
    margin-top: 3em;

}

#how_comment_tag {
    margin-top: 3em;

}

#staging_comment_tag {
    margin-top: 3em;

}


#variation_comment_tag {
    margin-top: 3em;

}

#staging_change_tag {
    margin-top: 3em;

}

#stance_change_tag {
    margin-top: 3em;

}

#char_sequence_tag {
    margin-top: 3em;
}

#product_sequence_tag {
    margin-top: 3em;
}

#staging_sequence_tag {
    margin-top: 3em;
}


@media screen and (max-width: 480px) {

    .tab_text_area {
        padding: 1em;

    }


}

/*-----------切り替えタグのデザイン（終）------------------------------------------*/


/*----------------印刷設定------------------*/

@media print {
    /* 印刷時に適用されるスタイルを指定 */
    /* 例: 不要な要素を非表示にする */
    header, footer {
        display: none;
    }

    ul.bottom-menu {
        display: none;
    }

    html {
        transform: rotate(90deg); /* 90度回転させる */
        margin-top: 10em;

    }

    #left_box {
        box-shadow: none;
        border: black 1px solid;

    }

    .white_map_box {
        box-shadow: none;
        border: black 1px solid;

    }

    #right_box {
        box-shadow: none;
        border: black 1px solid;

    }

    .edit_item {
        display: none;
    }

    .delete_item {
        display: none;
    }

    .icon_space {
        display: none;
    }

    .right_box_line {
        display: none;
    }

    .staging_title {
        height: 90%;
    }

    #char_name {
        height: 90%;
    }

    #stance_name {
        height: 90%;
    }

    #stance_title {
        height: 90%;
    }

    #product_name {
        height: 90%;
    }

    #hint {
        display: none;
    }


}

@page {
    size: portrait;
    margin: 0;
}


/*----------------印刷設定（終）------------------*/


/*----------------マップデザイン------------------*/

#map_space {

    /*height: 800px;*/
    /*width: 1440px;*/
}

#data_page {
    overflow-y: auto;
    margin-top: 3em;
}

.row_elem {
    width: 100%;
    height: 100px;
    position: relative;
    transform: translate(0%, 30%);
}

.row_space {
    height: 150px;
    border-bottom: black 1px solid;
}


.map_block {
    width: 200px;
    background-color: white;
    border: black 1px solid;
    padding: 0.5em;
    position: absolute;
    left: 0;
    white-space: normal; /* テキストの改行によって行を調整する */
    word-wrap: break-word; /* 長い単語がはみ出る場合に改行する */
}


.title_block {
    width: 10%;
    height: 80%;
    background-color: white;
    border: black 1px solid;
    padding: 0.5em;
    position: relative;
}

.title_b {
    position: relative;
}

.vertical-align img {
    display: block;
}

.click_space {
    width: 100%;
    height: 100%;
}

.map_elem_icon {
    position: absolute;
    top: 100%;
    left: -1%
}

/*----------------マップデザイン（終了）------------------*/


/*----------------elem_sq関係------------------*/


#elem_sq_title {

    background-color: white;
    border-radius: 0.5em;
    margin-top: 1em;
    border: 1px solid #b6b5b5;
    height: 4em;
    font-size: 16px;
    overflow-y: auto;
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;


}


#elem_sq_memo {

    background-color: white;
    border-radius: 0.5em;
    margin-top: 1em;
    border: 1px solid #b6b5b5;
    height: 10em;
    font-size: 16px;
    overflow-y: auto;
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 5em;
}


.detail_text {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
}

.detail_text:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

.detail_text:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}


.select_sq_all {

    background-color: white;
    border-radius: 0.5em;
    margin-top: 1em;
    border: 1px solid #b6b5b5;
    height: 4em;
    font-size: 16px;
    padding-left: 2em;


}


.elem_field_sq {
    background-color: #FFFFFF; /* 背景色指定 */
    border-radius: 5px; /* 角丸指定 */
    /*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
    break-inside: avoid;
    margin-bottom: 2em;
    margin-right: 10px;
    margin-left: 10px;
    border: black 1px solid;
    padding: 1em;
    position: relative;
}

.close-button {
    content: "×";
    position: absolute;
    top: -20px;
    right: -10px;
    color: black;
    font-size: 25px;
    padding: 2px 4px;
    border-radius: 50%;
    cursor: pointer;
}


.none_sq {
    background-color: tan; /* 背景色指定 */
    border-radius: 5px; /* 角丸指定 */
    /*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
    break-inside: avoid;
    margin-bottom: 2em;
    margin-right: 10px;
    margin-left: 10px;
    border: black 1px solid;
    text-align: center;
    padding: 1em;
}


.switch {
    position: relative;
    left: 50%;
    width: 150px;
    height: 50px;
    text-align: center;
    margin: 0 0 0 -75px;
    background: #00bc9c;
    transition: all 0.2s ease;
    border-radius: 25px;
    margin-bottom: 3em

}

.switch span {
    position: absolute;
    width: 20px;
    height: 4px;
    top: 50%;
    left: 50%;
    margin: -2px 0px 0px -4px;
    background: #fff;
    display: block;
    transform: rotate(-45deg);
    transition: all 0.2s ease;
}

.switch span:after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 12px;
    margin-top: -8px;
    background: #fff;
    transition: all 0.2s ease;
}

input[type=radio] {
    display: none;
}

.switch label {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.2);
    width: 60px;
    line-height: 50px;
    transition: all 0.2s ease;
}

label[for=yes] {
    position: absolute;
    left: 0px;
    height: 20px;
}

label[for=no] {
    position: absolute;
    right: 0px;
}

#no:checked ~ .switch {
    background: darkgray;
}

#no:checked ~ .switch span {
    background: #fff;
    margin-left: -8px;
}

#no:checked ~ .switch span:after {
    background: #fff;
    height: 20px;
    margin-top: -8px;
    margin-left: 8px;
}

#yes:checked ~ .switch label[for=yes] {
    color: #fff;
}

#no:checked ~ .switch label[for=no] {
    color: #fff;
}


@media screen and (max-width: 480px) {
    .detail_text {
        position: relative;
        padding: 15px;
        border-radius: 5px;
        border: 2px solid #333;
        color: #333;
        font-size: 15px;
        text-align: center;
        margin-bottom: 1em;
        line-height: 2em;
    }
}

/*----------------elem_game------------------*/

#elem_game {
    width: 80%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;
}


.game_waku_white {
    border: 0.1em solid #050505;
    background-color: white;
    border-radius: 0.5em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 1em;
    line-height: 2em;
}

.yazirusi {
    text-align: center;
    margin: 1em
}

@media screen and (max-width: 480px) {

    #elem_game {
        width: 100%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5em;
    }

}

/*----------------elem_game------------------*/


/*----------------hint------------------*/
#hint {
    width: 70%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}

#last_check {
    width: 90%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}


.hint_waku {
    border: 0.1em solid #050505;
    padding: 2em;
    background-color: cornsilk;
    border-radius: 0.5em;
    margin-bottom: 5em;
}

.hint_waku_white {
    border: 0.1em solid #050505;
    background-color: white;
    border-radius: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 2em;
    line-height: 2em;
}

.hint_text {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

.hint_text:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

.hint_text:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}

@media screen and (max-width: 480px) {
    .hint_waku_white {

        line-height: 2em;
        padding-top: 2em;
        padding-left: 1em;
        padding-right: 1em;

    }

    .hint_waku {
        border: 0.1em solid #050505;
        padding: 1em;
    }

    #hint {
        width: 100%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5em;
    }


}

/*----------------hint------------------*/
#top {
    width: 80%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;

}

.top_waku {
    border: 0.1em solid #050505;
    padding: 2em;
    background-color: cornsilk;
    border-radius: 0.5em;
    margin-bottom: 5em;
}

.tab_wide {
    width: 98%;
    margin-top: 5em;
    margin-right: auto;
    margin-left: auto;
}

.top_waku_white {
    border: 0.1em solid #050505;
    background-color: white;
    border-radius: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 2em;
    line-height: 2em;
}

.top_text {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

.top_text:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

.top_text:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}

@media screen and (max-width: 480px) {
    .top_waku_white {

        line-height: 2em;
        padding-top: 2em;
        padding-left: 1em;
        padding-right: 1em;

    }

    .top_waku {
        border: 0.1em solid #050505;
        padding: 1em;
    }

    #top {
        width: 100%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5em;
    }


}

/*----------------rank------------------*/

#rank {
    width: 80%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5em;
}

.rank_waku {
    border: 0.1em solid #050505;
    padding: 2em;
    background-color: cornsilk;
    border-radius: 0.5em;
    margin-bottom: 5em;
}

.rank_waku_white {
    border: 0.1em solid #050505;
    background-color: white;
    border-radius: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 2em;
    line-height: 2em;
}

.rank_text {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    border: 2px solid #333;
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    word-wrap: break-word;
}

.rank_text:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #fff;
    content: "";
}

.rank_text:after {

    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: #333;
    content: "";
}

h4 {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1em;
    font-size: 25px;
    font-weight: 300;
    margin: 0 0 1em;
}

h4::before, h4::after {
    position: absolute;
    content: '';
    height: 50px;
    border-left: #000000 solid 2px;
}

h4::before {
    left: 0;
    transform: rotate(-30deg);
}

h4::after {
    right: 0;
    transform: rotate(30deg);
}

.rank_elem {
    background-color: lightskyblue; /* 背景色指定 */
    border-radius: 5px; /* 角丸指定 */
    /*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
    height: 4em;
    break-inside: avoid;
    margin-bottom: 2em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 10px;
    margin-left: 10px;
    border: black 1px solid;

}


@media screen and (max-width: 480px) {

    .rank_waku_white {

        line-height: 2em;
        padding-top: 2em;
        padding-left: 1em;
        padding-right: 1em;

    }

    .rank_waku {
        border: 0.1em solid #050505;
        padding: 1em;
    }

    #rank {
        width: 100%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5em;
    }


}


/*----------------rank------------------*/


/*!*----------------sq_map------------------*!*/


/*.map_view{*/
/*  white-space: nowrap;*/
/*}*/

/*.map_set{*/
/*    position: relative;*/
/*	top: 50%;*/
/*	left: 50%;*/
/*	transform: translate(-50%, -50%);*/
/*    height: 100%;*/
/*}*/


/*.left_box{*/
/*    background-color: #FFFFFF;*/
/*    border-radius: 5px;*/
/*    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);*/
/*    break-inside: avoid;*/
/*    height: 35%;*/
/*    width: 15%;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 5%;*/
/*    transform: translate(0%, -50%);*/
/*}*/

/*.char_name{*/
/*    margin-left: 5px;*/
/*    white-space: normal;*/
/*    overflow: scroll;*/
/*    height: 60%;*/
/*    overflow-wrap: break-word;*/
/*}*/

/*.stance_name{*/
/*    margin: 5px;*/
/*    white-space: normal;*/
/*    overflow: scroll;*/
/*    height: 60%;*/
/*    padding-top: 0.5em;*/
/*    overflow-wrap: break-word;*/
/*}*/


/* .line_outer{*/
/*    width: 50%;*/
/*    height: 5%;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 21%;*/
/*    transform: translate(0%, -50%);*/
/*    border-left: 2px solid;*/
/*    border-right: 2px solid;*/
/*}*/

/*.right_box{*/
/*    background-color: #FFFFFF;*/
/*    border-radius: 5px;*/
/*    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);*/
/*    break-inside: avoid;*/
/*    padding-top: 1em;*/
/*    padding-left: 1em;*/
/*    padding-right: 1em;*/
/*    height: 15%;*/
/*    width: 15%;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 72%;*/
/*    transform: translate(0%, -50%);*/
/*    z-index: 2000;*/
/*    overflow-wrap: break-word;*/
/*}*/

/*.product_name{*/
/*    height: 60%;*/
/*    white-space: normal;*/
/*    overflow: scroll;*/
/*}*/

/*.block_space{*/
/*    position: absolute;*/
/*	top: 50%;*/
/*	left: 21%;*/
/*	transform: translate(0%, -50%);*/
/*    height: 100%;*/
/*    width: 50%;*/
/*}*/


/*!*----------------sq_map------------------*!*/


/*!*----------------吹き出し------------------*!*/
.balloon1 {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 12px;
    background: #FFF056;
    border: solid 2px #555;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.balloon1:before {
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF056;
    z-index: 2;
}

.balloon1:after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #555;
    z-index: 1;
}

.balloon1 p {
    margin: 0;
    padding: 0;
}


.balloon2 {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 12px;
    background: #FFF056;
    border: solid 2px #555;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.balloon2:before {
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF056;
    z-index: 2;
}

.balloon2:after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #555;
    z-index: 1;
}

.balloon2 p {
    margin: 0;
    padding: 0;
}


/*!*----------------吹き出し------------------*!*/


/*!*----------------生年月日------------------*!*/

.form-select-wrap {
    display: inline-flex;
    max-width: 300px;
    align-items: center;
}

.form-select-wrap > select {
    padding: 8px 16px;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid gray;
    border-radius: 4px;
    font-size: 14px;
}

/* 行の高さを変更する */
#app thead td {
    padding-top: 1px;
    padding-bottom: 1px;
}

#app tbody td {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* 行の色を変更する */
#app thead tr {
    background-color: skyblue;
}

#app tbody tr.odd {
    background-color: cornsilk;
}

#app tbody tr.even {
    background-color: wheat;
}

/* 罫線を引く */
#app thead td:first-child {
    border-left: 1px solid #404040;
}

#app thead td {
    border-top: 1px solid #404040;
    border-right: 1px solid #404040;
}

#app tbody td:first-child {
    border-left: 1px solid #404040;
    padding-top: 1em;
    padding-bottom: 1em;
}

#app tbody td {
    border-right: 1px solid #404040;
}

/* 行の高さを変更する */
#app_other thead td {
    padding-top: 1px;
    padding-bottom: 1px;
}

#app_other tbody td {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* 行の色を変更する */
#app_other thead tr {
    background-color: skyblue;
}

#app_other tbody tr.odd {
    background-color: cornsilk;
}

#app_other tbody tr.even {
    background-color: wheat;
}

/* 罫線を引く */
#app_other thead td:first-child {
    border-left: 1px solid #404040;
}

#app_other thead td {
    border-top: 1px solid #404040;
    border-right: 1px solid #404040;
}

#app_other tbody td:first-child {
    border-left: 1px solid #404040;
    padding-top: 1em;
    padding-bottom: 1em;
}

#app_other tbody td {
    border-right: 1px solid #404040;
}


/*!*----------------生年月日------------------*!*/


/*-----------sq_map-----------------*/


.sp_box {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
    break-inside: avoid;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    height: 15%;
    width: 15%;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 2000;
    overflow-wrap: break-word;
}


.sp_box_text {
    height: 60%;
    white-space: normal;
    overflow: scroll;
}


.sp_line {
    width: 50%;
    height: 5%;
    position: absolute;
    top: 50%;
    left: 16%;
    transform: translate(0%, -50%);
    border-left: 2px solid;
    border-right: 2px solid;
}

.sp_map {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}


/*-----------sq_map（終了）-----------------*/


/*-----------sp_map-----------------*/

.sp_map_box {
    height: 150px;
    width: 150px;
    border-radius: 2px;
    background-color: white;
    border: solid 1px black;
    position: absolute;

}


/*-----------sp_map（終了）-----------------*/


/*-----------answer-----------------*/

.answer_box {
    width: 80%;
    background-color: white;
    border-radius: 5px;
    border: solid 1px black;
    padding: 1em;
    margin-bottom: 2em;
}

.answer_dt {
    text-align: end;
}

.answer_text {
    white-space: pre-wrap;
}

.edit_consultation_icon {
    text-align: end;
    height: 1em;
    margin-bottom: 5px;
}

.answer_name {
    font-size: 10px;
}

.answer_dt {
    font-size: 10px;
}

/*-----------sp_map（終了）-----------------*/


/*-----------content-----------------*/

.content_waku_white {
    border: 0.1em solid #050505;
    background-color: white;
    border-radius: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 2em;
    line-height: 2em;
    margin-bottom: 2em;
}

/*-----------content（終了）-----------------*/


/*----------------design------------------*/


#design_menu {
    width: 3em;
    position: absolute;
    top: 3em;
    left: 3em;

}


.design_btn {
    width: 3em;
    position: relative;
    margin: 1em;
}


button.select.design_btn {
    border: solid 1px #333;
    padding: 16px 20px;
    width: 100%;
    margin: 0 auto 3em;
}

button.select.design_btn::after {
    content: "";
    width: 10px;
    height: 10px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    transform: rotate(45deg);
    margin-top: -5px;
    top: 50%;
    right: 20px;
    position: absolute;
}

div.network-manipulationDiv {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(252, 252, 252, 0.6) 48%, rgba(250, 250, 250, 0.6) 50%, rgba(252, 252, 252, 0.6) 100%)
}


div.vis-network button.vis-edit-mode, div.vis-network div.vis-edit-mode {
    display: none;
}

.vis-manipulation {
    display: none !important;
}


/*----------------design------------------*/

/*----------------chat_admin------------------*/

.chat_space_white {
    border: 0.1em solid #050505;
    background-color: white;
    border-radius: 0.5em;
    line-height: 2em;
    display: flex;
    height: 70vh; /* ブラウザの高さを100%に設定 */

}


.chat_name_area {
    width: 30%; /* 左カラムの幅を指定 */
    overflow-y: auto; /* 縦スクロールを有効にする */
    padding: 10px;
    border-right: 1px solid #0b0b0b; /* カラム間の境界線 */
}

.chat_text_area {
    overflow-y: auto; /* 縦スクロールを有効にする */
    padding: 1em;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat_field {
    padding: 1em;
    border: 1px solid #0b0b0b;
    border-radius: 1em;
    margin-bottom: 1em;

}

.users_field {
    border-bottom: 1px solid #b6b5b5; /* カラム間の境界線 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1em;

}


.chat_name {
    margin: 0;
}

.chat_dt {
    margin: 0;
    font-size: 13px;
}

.chat_input {
    width: 100%; /* 幅を100%に設定 */
    padding: 10px; /* 内側の余白を設定 */
    font-size: 16px; /* フォントサイズを設定 */
    border: 1px solid #ccc; /* 枠線を設定 */
    border-radius: 5px; /* 角を丸くする */
    box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
}

.chat_text_name {
    margin: 0;
    font-size: 13px;
}

.chat_text {
    margin: 0;
    white-space: pre-line;
}

.chat_text_dt {
    margin: 0;
    font-size: 12px;

}

.chat_input_form {

    border-top: 1px solid #0b0b0b; /* カラム間の境界線 */

}

.chat_textarea {

    width: 100%; /* 幅を100%に設定 */
    height: 100px; /* 高さを設定 */
    padding: 10px; /* 内側の余白を設定 */
    font-size: 16px; /* フォントサイズを設定 */
    border: none; /* 枠線を無効にする */
    resize: vertical; /* ユーザーが高さを調整できるようにする */
    outline: none; /* フォーカス時のアウトラインも非表示にする（必要に応じて） */
    background: gold;
}

.chat_input_name {

    width: 100%; /* 幅を100%に設定 */
    padding: 10px; /* 内側の余白を設定 */
    font-size: 16px; /* フォントサイズを設定 */
    border: 1px solid #ccc; /* 枠線を設定 */
    border-radius: 5px; /* 角を丸くする */
    box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
}


.chat_btn {
    background-color: #4CAF50; /* ボタンの背景色 */
    border: none; /* ボーダーなし */
    color: white; /* テキストの色 */
    padding: 15px 32px; /* 内側の余白 (上下15px、左右32px) */
    text-align: center; /* テキストの配置 */
    text-decoration: none; /* テキストの下線なし */
    display: inline-block; /* ボタンをインラインブロックとして表示 */
    font-size: 16px; /* フォントサイズ */
    margin: 4px 2px; /* マージン (上下4px、左右2px) */
    cursor: pointer; /* マウスカーソルをポインタにする */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* 背景色の変化にトランジションを適用 */
}

.chat_btn:hover {
    background-color: #45a049; /* ホバー時の背景色 */
}

.insert_chat_data {
    overflow-y: auto;
}


/*----------------chat_admin------------------*/

/*----------------select------------------*/

.cp_ipselect01 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2em auto;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  width: 100%;
}
/*プルダウンの三角を設定*/
.cp_ipselect01::before {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #666666;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect01 select {
  width: 100%;
  padding: 10px 45px 10px 10px;
  color: #666666;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にする */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
}