@charset "UTF-8";
/*
Theme Name: child
Theme URI:
Description:
Template: twentytwentyone
Author: makesview
Author URI: https://makes-view.co.jp/
Version: 1.0.0
*/

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
    /* 不要な指定は消す */
    font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-feature-settings: "palt";
}

body {
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
    margin: 0px;
    background-color: #FFFFFF;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
}

a {
    transition: .2s;
}

a:link {
    color: #004CCA;
}

a:visited {
    color: #6219DB;
}

a:hover {
    color: #048ADE;
    text-decoration: none;
}

a:active {
    color: #048ADE;
    text-decoration: none;
}

img {
    max-width: 100%;
}

ul {
    padding: 0px;
    list-style: none;
    margin:0;
}

.oh {
    overflow: hidden;
}

.L {
    float: left;
}

.R {
    float: right;
}

.sp {
    display: none;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

img {
    vertical-align: bottom;
}

#menu {
    display: none;
}

.flex {
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.flex-sb {
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    justify-content: space-between;
}

.wrap {
    width: 90%;
    margin: 0 auto;
}

header.site_hd {
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    padding: 30px 0;
}

.hd_logo {
    width: 320px;
    margin: 0 auto;
}

.login_form {
    padding: 100px 0;
}

.login_form form {
    width: 300px;
    margin: 0 auto;
}

.login_form input[type=submit] {
    width: 100%;
    background: #FAA543;
    border: none;
    border-radius: 5em;
    font-weight: bold;
    color: #fff;
    font-size: 1.5em;
    padding: 0.5em;
}

.login_form p.login-remember {
    text-align: center;
    padding: 1em 0;
}

.login_form p.login-remember label {
    cursor: pointer;
}

.login_form p.login-username label,
.login_form p.login-password label {
    font-weight: bold;
}

.login_form p.login-username input,
.login_form p.login-password input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    background: #fafafa;
    padding: 0.5em 1em;
}

.login_form p.login-username {
    margin-bottom: 1em;
}

p.my_forgot_pass {
    text-align: center;
    margin-top: 1em;
    font-size: 80%;
}

.page_common {
    padding: 100px 0;
}

.direction_data_page .title {
    font-weight: bold;
    margin: 3em 0 1em;
    font-size: 2em;
}

.direction_data_page .title:first-child {
    margin-top: 0;
}

.input_box {
    flex-wrap: nowrap;
    gap: 0 20px;
    border-bottom: 1px solid #ccc;
    width: 49%;
    align-items: center;
    margin-bottom: 1em;
}

.input_box .input {
    width: 100%;
    word-break: break-word;
}

.input_box .label {
    font-weight: bold;
    white-space: nowrap;
}

.input_box .input input[type=text],
.input_box .input input[type=date] {
    width: 100%;
    border: none;
    padding: 0.5em 1em;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    border-radius: 6px;
    margin-bottom: 6px;
}

.input_box .input input:focus {
    outline: 2px solid #ccc;
}

.input_box.-wide {
    width: 100%;
}

.designer_or_engineer ul.flex-sb li {
    width: 49%;
    text-align: center;
    font-weight: bold;
    padding: 0.5em;
    position: relative;
    z-index: 2;
    cursor: pointer;
    color: #ccc;
    transition: .2s;
}

.designer_or_engineer ul.flex-sb li.bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    background: #FAA543;
    border-radius: 30px;
    transition: .1s;
}

.designer_or_engineer ul.flex-sb {
    background: #f2f2f2;
    border-radius: 30px;
    border: 5px solid #f2f2f2;
}

.designer_or_engineer ul.flex-sb li.active {
    color: #333;
}

.designer_or_engineer {
    margin: 3em 0 1em;
}

.designer_or_engineer ul.flex-sb li.active:nth-child(2) ~ li.bg {
    left: 51%;
}

.engineer_content .sitemap li {
    margin-left: 2em;
    box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
    border-radius: 20px;
    padding: 20px 20px 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.engineer_content .sitemap li.top {
    margin-left: 0;
}

.engineer_content .sitemap li + li {
    margin-top: 20px;
}

.engineer_content .sitemap li:nth-child(even) {
    background: #fafafa;
}

.check_box .check_item {
    background: #eee;
    padding: 0 1em;
    border-radius: 3em;
    font-weight: bold;
    color: #999;
    transition: .2s;
}

.check_box label input {
    display: none;
}

.check_box label {
    margin-right: 1em;
    margin-bottom: 0.5em;
    cursor: pointer;
}

.check_box input:checked ~ .check_item {
    background: #faa543;
    color: #fff;
}

.input_box .input textarea {
    width: 100%;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    border-radius: 10px;
    padding: 1em;
}

.input_box .input textarea:focus {
    outline: 2px solid #ccc;
}

ul.top_page_design li {
    border: solid #ccc;
    border-width: 0 1px;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    cursor: grab;
    flex-wrap: wrap;
}

ul.top_page_design li:nth-child(even) {
    background: #f2f2f2;
}

ul.top_page_design li:first-child {
    border-top: 1px solid #ccc;
    border-radius: 20px 20px 0 0;
}

ul.top_page_design li:last-child {
    border-bottom: 1px solid #ccc;
    border-radius:  0 0 20px 20px;
}

ul.top_page_design li .sec_name {
    width: 220px;
}

ul.top_page_design li .sec_name input {
    width: 100%;
    padding: 0.5em 1em;
    border-radius: 30px;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    font-weight: bold;
}

ul.top_page_design li .sec_name input:focus {
    outline: 2px solid #ccc;
}

ul.top_page_design li .sec_detail {
    width: calc(100% - 240px);
}

ul.top_page_design li .sec_detail textarea {
    width: 100%;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    border-radius: 10px;
    padding: 1em;
}

ul.top_page_design li .sec_detail textarea:focus {
    outline: 2px solid #ccc;
}

.form_submit {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10;
}

.form_submit input[type=submit] {
    width: 220px;
    border-radius: 40px;
    border: none;
    font-weight: bold;
    padding: 0.5em 1em;
    background: #f9a543;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.engineer_content .sitemap li .page_info {
    display: flex;
    align-items: center;
    position: sticky;
    top: 10px;
    z-index: 3;
}

.engineer_content .sitemap li .child .page_info {
    top: 50px;
    z-index: 2;
}

.engineer_content .sitemap li .child .child .page_info {
    top: 90px;
    z-index: 1;
}

.engineer_content .sitemap li .page_info .page_name {
    width: 220px;
    margin-right: 10px;
}

.engineer_content .sitemap li .page_info input {
    width: 100%;
    padding: 0.5em 1em;
    border-radius: 30px;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    font-weight: bold;
}

.engineer_content .sitemap li .page_info input:focus {
    outline: 2px solid #ccc;
}

.engineer_content .sitemap li .page_info select {
    width: 100%;
    padding: 0.5em 1em;
    border-radius: 30px;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    font-weight: bold;
}

.engineer_content .sitemap li .page_info .page_type {
    width: 150px;
}

.engineer_content .sitemap li .page_detail {
    width: calc(100% - 240px);
}

.engineer_content .sitemap li .page_detail textarea {
    width: 100%;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    border-radius: 10px;
    padding: 1em;
}

.engineer_content .sitemap li .page_detail textarea:focus {
    outline: 2px solid #ccc;
}

.add_btn {
    cursor: pointer;
    width: 320px;
    margin: 50px auto 0;
    justify-content: center;
    background: #f9a543;
    color: #fff;
    font-weight: bold;
    border-radius: 40px;
    padding: 1em;
    font-size: 20px;
    align-items: center;
}

.add_btn .mark {
    width: 1em;
    height: 1em;
    position: relative;
    margin-right: 1em;
}

.add_btn .mark:before,
.add_btn .mark:after {
    content: "";
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.add_btn .mark:after {
    transform: rotate(90deg);
}

.add_btn.add_child {
    font-size: 16px;
    width: 260px;
    margin-top: 1em;
    margin-right: 0;
}

.engineer_content .sitemap li .child {
    width: calc(100% - 50px);
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 20px;
}

.child .add_btn.add_child {
    font-size: 14px;
    width: 220px;
}

.engineer_content .sitemap li .child {
    width: calc(100% - 50px);
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 20px;
}

.child .add_btn.add_child {
    font-size: 14px;
    width: 220px;
}

.engineer_content .sitemap li .child:nth-of-type(odd) {
    background: #fff;
}

.engineer_content .sitemap li .child:nth-of-type(even) {
    background: #fafafa;
}

.engineer_content .sitemap li .child .add_btn {
    background-color: #333;
}

.engineer_content .sitemap li .child .child .add_btn {
    display: none;
}

::-webkit-input-placeholder {
    color: #ddd;
}

ul.top_page_design li .sec_delete {
    display: flex;
    margin-left: auto;
    background: #F44336;
    color: #fff;
    font-weight: bold;
    align-items: center;
    padding: 0 1em;
    border-radius: 20px;
    cursor: pointer;
}

ul.sitemap li .page_delete {
    display: flex;
    margin-left: 10px;
    background: #F44336;
    color: #fff;
    font-weight: bold;
    align-items: center;
    padding: 0 1em;
    border-radius: 20px;
    cursor: pointer;
    height: 2em;
    margin-top: auto;
    margin-bottom: 15px;
}

ul.top_page_design li .sec_delete .mark,
ul.sitemap li .page_delete .mark {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    position: relative;
}

ul.top_page_design li .sec_delete .mark:before,
ul.sitemap li .page_delete .mark:before,
ul.top_page_design li .sec_delete .mark:after,
ul.sitemap li .page_delete .mark:after {
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

ul.top_page_design li .sec_delete .mark:before,
ul.sitemap li .page_delete .mark:before {
    transform: rotate(45deg);
}

ul.top_page_design li .sec_delete .mark:after,
ul.sitemap li .page_delete .mark:after {
    transform: rotate(-45deg);
}

.engineer_content .sitemap li .child .child .page_delete {
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 0;
}

.engineer_content .sitemap li .page_detail input[type="text"] {
    width: 100%;
    width: 100%;
    border: none;
    padding: 0.5em 1em;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    border-radius: 6px;
    margin-bottom: 6px;
}

.engineer_content .sitemap li .page_detail input[type="text"]:focus {
    outline: 2px solid #ccc;
}

.hd_login_menu {
    justify-content: center;
    padding: 20px 0 0;
    align-items: center;
}

.hd_login_menu ul.menu_list {
    margin-right: 20px;
}

.hd_login_menu ul.menu_list li + li {
    margin-left: 20px;
}

.hd_login_menu ul.menu_list li a {
    text-decoration: none;
}

.hd_login_menu .user_name {
    font-size: 80%;
    padding: 0 1em;
    background: #f2f2f2;
    font-weight: bold;
    border-radius: 3em;
}

.input_box select {
    border-radius: 30px;
    padding: 0.5em 1em;
    cursor: pointer;
}

.edit_result {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 0.5em;
    background: #f2f2f2;
}

.my_directions_list {
    padding: 100px 0;
}

.my_directions_list ul li {
    padding: 1em 1em 1em 2em;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    position: relative;
}

.my_directions_list ul li + li {
    margin-top: 15px;
}

.my_directions_list ul li .site_name {
    font-weight: bold;
    margin-bottom: 10px;
}

.my_directions_list ul li .site_name .managed_id {
    background: #a3a3a3;
    color: #fff;
    margin-right: 1em;
    padding: 0.2em 0.5em;
    font-size: 80%;
}

.my_directions_list ul {
    padding: 0 200px;
}

.my_directions_list ul li .btns {
    justify-content: flex-end;
}

.my_directions_list ul li .btns a {
    text-decoration: none;
    background: #eee;
    color: #333;
    font-weight: bold;
    display: block;
    padding: 0 1em;
    border-radius: 2em;
}

.my_directions_list ul li .btns .delete a {
    background: #f63648;
    color: #fff;
}

.my_directions_list ul li .btns > div + div {
    margin-left: 1em;
}

.my_directions_list ul .status_btns ul {
    padding: 0;
    margin-bottom: 15px;
}

.my_directions_list ul .status_btns ul li {
    background: #f5f5f5;
    border: none;
    font-size: 14px;
    font-weight: bold;
    padding: 0.2em 1em;
    border-radius: 0;
    cursor: pointer;
    clip-path: polygon(0% 0%, 0% 100%, 90% 100%, 100% 0%);
}

.my_directions_list ul .status_btns ul li + li {
    margin: 0;
}

.my_directions_list ul .status_btns ul li:last-child {
    clip-path: none;
    border-radius: 20px;
    margin-left: auto;
}

.my_directions_list ul .status_btns ul.in_preparation .in_preparation {
    background: #2196f3;
    color: #fff;
    pointer-events: none;
}

.my_directions_list ul .status_btns ul.design_in_progress .design_in_progress {
    background: #4caf50;
    color: #fff;
    pointer-events: none;
}

.my_directions_list ul .status_btns ul.design_done .design_done {
    background: #4caf50;
    color: #fff;
    pointer-events: none;
}

.my_directions_list ul .status_btns ul.coding_in_progress .coding_in_progress {
    background: #4caf50;
    color: #fff;
    pointer-events: none;
}

.my_directions_list ul .status_btns ul.coding_done .coding_done {
    background: #4caf50;
    color: #fff;
    pointer-events: none;
}

.my_directions_list ul .status_btns ul.completed .completed {
    background: #f9a543;
    color: #fff;
    pointer-events: none;
}

.my_directions_list ul .status_btns ul:after {
    content: "";
    position: absolute;
    left: 0;
    top: 1em;
    bottom: 1em;
    width: 4px;
    background: #ccc;
}

.my_directions_list ul .status_btns ul.in_preparation:after {
    background: #2196f3;
}

.my_directions_list ul .status_btns ul.design_in_progress:after {
    background: #4caf50;
}

.my_directions_list ul .status_btns ul.design_done:after {
    background: #4caf50;
}

.my_directions_list ul .status_btns ul.coding_in_progress:after {
    background: #4caf50;
}

.my_directions_list ul .status_btns ul.coding_done:after {
    background: #4caf50;
}

.my_directions_list ul .status_btns ul.completed:after {
    background: #f9a543;
}

.my_directions_list ul li + li {
    margin-top: 15px;
}

.direction_data_page-kakunin .input_box select:disabled {
    text-align: center;
    appearance: none;
    border-color: #333;
    color: #333;
    font-weight: bold;
}

.direction_data_page-kakunin ul.top_page_design li .sec_name {
    font-weight: bold;
    text-align: center;
}

.direction_data_page-kakunin ul.top_page_design li {
    align-items: center;
    cursor: inherit;
}

.direction_data_page-kakunin .engineer_content .sitemap li .page_info .page_name {
    font-weight: bold;
    background: #faa543;
    color: #fff;
    text-align: center;
    border-radius: 4px;
}

.direction_data_page-kakunin .engineer_content .sitemap li .page_info .page_type select {
    color: #000;
    appearance: none;
    text-align: center;
    background: #eee;
    font-weight: bold;
}

.direction_data_page-kakunin .engineer_content .sitemap li .pagereference {
    font-size: 80%;
    margin-bottom: 0.5em;
    margin-top: 0.2em;
}

.direction_data_page-kakunin .engineer_content .sitemap li {
    border-radius: 0;
    box-shadow: none;
    border: solid;
    border-width: 0 0 2px 4px;
    padding: 20px;
}

.direction_data_page-kakunin .engineer_content .sitemap li + li {
    margin-top: 0;
}

.direction_data_page-kakunin .engineer_content .sitemap li .child {
    margin: 20px 0 0 30px;
    border-radius: 0;
    border-width: 0 0 0 4px;
    border-color: #999;
    position: relative;
    box-shadow: 0 1px 3px #eee;
}

.direction_data_page-kakunin .engineer_content .sitemap li.top {
    border-width: 0 0 2px;
}

.direction_data_page-kakunin .engineer_content .sitemap li .child:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 50px;
    background: #333;
    top: 20px;
    left: -54px;
}

.direction_data_page-kakunin .engineer_content .sitemap li .child:last-child {
    margin-bottom: 0;
}

ul.top_page_design li .sec_name select {
    width: 100%;
    padding: 0.5em 1em;
    border-radius: 30px;
    border: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    font-weight: bold;
    margin-top: 10px;
}

.direction_data_page-kakunin ul.top_page_design li .sec_name select {
    text-align: center;
    appearance: none;
    font-weight: bold;
    color: #333;
    opacity: 1;
}

.single_edit_btn a {
    width: 220px;
    border-radius: 40px;
    border: none;
    font-weight: bold;
    padding: 0.5em 1em;
    background: #f9a543;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
}

.single_edit_btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.form_submit .view {
    text-align: center;
    margin-top: 0.5em;
}

.designer_or_engineer.-edit_page ul.flex-sb {
    background: no-repeat;
    border: none;
}

.designer_or_engineer.-edit_page ul.flex-sb li {
    color: #333;
    background: #FAA543;
    border-radius: 30px;
}

.designer_content.-edit_page, .engineer_content.-edit_page {
    display: block !important;
    width: 49%;
    padding-top: 30px;
}

.engineer_content.-edit_page {
    padding-top: 620px;
}

.-edit_page ul.top_page_design li .sec_detail {
    width: 100%;
    margin-top: 10px;
}

.engineer_content.-edit_page .sitemap li .page_detail {
    width: 100%;
    margin-top: 10px;
}

.engineer_content.-edit_page .sitemap li .child {
    width: 100%;
}

section.projects_detail_sec + section.projects_detail_sec {
    margin-top: 80px;
}

.page-project .add_title {
    align-items: center;
    margin-bottom: 1em;
}

.page-project .add_title h1 {
    margin-right: 1em;
}

select {
    height: 40px;
    padding: 0 1em;
    border-radius: 30px;
    cursor: pointer;
}

.page-project h2 {
    margin: 2em 0 1em;
}

.page-project .column-4 .input_box {
    width: 25%;
    padding-right: 15px;
    padding-bottom: 5px;
}

.page-project .column-4 .input_box strong {
    display: block;
}

.page-project .column-4 .input_box input {
    width: 100%;
    background: #f2f2f2;
    border: none;
    height: 40px;
    padding: 0 1em;
}

.page-project input[type="submit"] {
    margin: 2em auto 0;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 0.5em 3em;
    border-radius: 5em;
    border: none;
    background: #f8a543;
    color: #fff;
    cursor: pointer;
}

.page-project .projects_detail_block_title {
    margin: 2em 0 1em;
}

.page-project .projects_detail_block_title h2 {
    margin: 0 1em 0 0;
}

.page-project .projects_detail_block_title button {
    cursor: pointer;
    padding: 0 2em;
    border-radius: 2em;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 100%;
}

.page-project h3 {
    margin: 2em 0 1em;
}

.page-project button[type=submit] {
    margin: 2em auto 0;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 0.5em 3em;
    border-radius: 5em;
    border: none;
    background: #f8a543;
    color: #fff;
    cursor: pointer;
}

.page-project .projects_detail_block_title button.saveButton {
    background: #f8a543;
    color: #fff;
}

.page-project .input_box {
    width: 100%;
    padding-bottom: 5px;
    margin: 0.5em 0;
}

.page-project .input_box input[type="date"] {
    width: 100%;
    padding: 0 1em;
    height: 40px;
    border-radius: 2em;
    border: 1px solid #ddd;
}

.page-project .input_box select {
    width: 100%;
}

button#addStructureButton, button#addSitemapButton,button.addFeedbackListButton {
    display: block;
    margin: 0 auto;
    font-weight: bold;
    border-radius: 3em;
    border: 2px solid #f8a543;
    padding: 1em 3em;
    background: no-repeat;
    cursor: pointer;
}

button.removeFeedbackButton {
    display: block;
    margin: 0.5em auto 0;
    border: none;
    border-radius: 5px;
}

.top_page_structure .infos,
.top_page_structure_form .infos,
.sitemap_item .infos,
.sitemap_form .infos {
    width: 330px;
}

.top_page_structure .contents,
.top_page_structure_form .contents,
.sitemap_item .contents,
.sitemap_form .contents {
    width: calc(100% - 380px);
}

.top_page_structure_container {
    border: 1px solid #ccc;
    padding: 30px;
    border-radius: 30px;
}

.sitemap_item:nth-child(2n) {
    background: #f6f6f6;
}

.sitemap_item {
    padding: 20px;
}

.sitemap_form + .sitemap_form {
    margin-top: 30px;
}

div#sitemapsContainer {
    margin-bottom: 50px;
}

@media (max-width: 750px) {

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /*spmenu~*/
    .sp_hd {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10000;
    }

    .sp_pr {
        position: relative;
    }

    .slicknav_menu .slicknav_menutxt {
        display: none !important;
    }

    .slicknav_menu .slicknav_icon {
        width: 100%;
        margin: 0;
    }

    .slicknav_menu .slicknav_icon-bar {
        width: 25px !important;
        height: 3px !important;
    }

    a.slicknav_btn {
        background: #fff;
        border-radius: 0px;
        margin: 12px 3px 3px 0px;
        padding: 0px 0 0 0px;
        height: 25px;
        width: 25px;
    }

    /*SPMENU kurukuru*/
    a.slicknav_btn.slicknav_open span.slicknav_icon-bar:first-child {
        top: 5px;
        -moz-transform: rotate(405deg);
        -webkit-transform: rotate(405deg);
        -o-transform: rotate(405deg);
        -ms-transform: rotate(405deg);
        transform: rotate(405deg);
        position: absolute;
    }

    a.slicknav_btn.slicknav_open span.slicknav_icon-bar:nth-child(3) {
        top: 0.4px;
        -moz-transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
        -o-transform: rotate(-405deg);
        -ms-transform: rotate(-405deg);
        transform: rotate(-405deg);
        position: absolute;
    }

    a.slicknav_btn.slicknav_open span.slicknav_icon-bar:nth-child(2) {
        opacity: 0;
    }

    span.slicknav_icon-bar {
        transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
    }

    .slicknav_menu .slicknav_icon {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        position: relative;
    }

    /*kokomade*/
    .slicknav_menu {
        background-color: #fff;
    }

    .slicknav_menu .slicknav_icon {
        height: 16px !important;
        display: block;
    }

    .slicknav_menu .slicknav_icon:after {
        display: block;
        font-size: 70%;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -20px;
        margin: 0 auto;
    }

    .slicknav_nav a {
        color: #333 !important;
        display: inline-block;
        font-weight: bold;
        line-height: 2;
        width: 100%;
        text-align: left;
        margin: 0;
        letter-spacing: normal;
        font-size: 80%;
        border: solid #ccc;
        border-width: 0 0px 1px 0;
        line-height: 30px;
        padding-left: 25px;
    }

    /*~spmenu*/
    .sp_hd_logo {
        position: absolute;
        width: 220px;
        top: 12.5px;
        left: 5px;
    }

    .sp_hd_tel {
        position: absolute;
        width: 20px;
        top: 12.5px;
        right: 5px;
    }

    .sp_hd_mail {
        position: absolute;
        width: 20px;
        top: 12.5px;
        right: 5px;
    }

    .wrap {
        max-width: 90%;
    }

    .input_box {
        width: 100%;
    }

    .check_box label {
        margin-right: 0.2em;
    }

    ul.top_page_design li .sec_name {
        width: 100%;
    }

    ul.top_page_design li .sec_detail {
        width: 100%;
        margin-top: 1em;
    }

    .engineer_content .sitemap li .page_info {
        width: 100%;
    }

    .engineer_content .sitemap li .page_detail {
        width: 100%;
        margin-top: 1em;
    }

    .engineer_content .sitemap li {
        margin-left: 1em;
    }

    .engineer_content .sitemap li + li {
        margin-top: 1em;
    }

    .engineer_content .sitemap li .child {
        width: calc(100% - 0px);
    }

    .add_btn {
        font-size: 16px;
        width: calc(100% - 1em);
        margin-top: 20px;
        margin-left: 1em;
    }

    .form_submit input[type=submit] {
        font-size: 16px;
        width: 50%;
        margin: 0 auto;
        display: block;
    }

    .form_submit {
        right: 5vw;
        left: 5vw;
        bottom: 5vw;
        z-index: 3;
    }

    .my_directions_list ul {
        padding: 0;
    }

    .my_directions_list {
        padding: 15vw 0;
    }

}