@charset "utf-8";

/* あしあと機能 */
#footstep_wrap {
    max-width: var(--content-width);
    margin: 0px auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#mymainback #footstep_wrap {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
}

#footstep {
    position: relative;
    padding-left: 7rem;
}

#footstep_detail {
    display: inline;
    position: static;
}

#footstep_ttl {
    display: block;
    width: 5rem;
    height: 2rem;
    background: #3C4D63;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding: 0.4rem 0px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 1px;
    left: 0px;
}

#clear_footstep {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin: 0px 0px 0px 5px;
    padding: 0px;
    border: none;
    background: url(/img/common/icon_clear.png) no-repeat center center #3C4D63;
    background-size: 10px 10px;
    border-radius: 100%;
    color: #fff;
    line-height: 1;
    text-align: left;
    text-indent: -9999em;
    overflow: hidden;
    cursor: pointer;
}

#footstep_detail:empty,
#footstep_detail:empty+#clear_footstep {
    display: none;
}

.fs_rireki {
	display: inline;
	font-size: 1.4rem;
	vertical-align: text-bottom;
}

.fs_rireki::before {
    content: '>';
    padding: 0px 0.4em;
}

.fs_rireki:first-child::before {
    display: none;
}

.fs_rireki:last-child a {
    text-decoration: none !important;
    color: inherit !important;
    cursor: default;
}

/* あしあと機能 ここまで */
/* ページ記憶 */
#keep_page {
    position: fixed;
    /* 	top: 150px; */
    /* 	right: 0px; */
    z-index: 90;
    border: none;
    width: 70vw;
    height: 70vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* overflow: hidden; */
    background: #fff;
}

#keep_page[open] {
    border-radius: 2px;
    /* box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
		6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
		12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
		22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
		41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
		100px 100px 80px rgba(0, 0, 0, 0.07); */
    /* -webkit-box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.1),0px 0px 20px -10px rgba(0,0,0,1); */
    /* box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.1),0px 0px 20px -10px rgba(0,0,0,1); */
}

#keep_page::-webkit-backdrop {
    -webkit-backdrop-filter: blur(0px) grayscale(0.8);
    backdrop-filter: blur(0px) grayscale(0.8);
    /* 	backdrop-filter: grayscale(1); */
}

#keep_page::backdrop {
    -webkit-backdrop-filter: blur(0px) grayscale(0.8);
    backdrop-filter: blur(0px) grayscale(0.8);
    /* 	backdrop-filter: grayscale(1); */
    background: rgba(0, 0, 0, 0.4);
    mix-blend-mode: multiply;
    -webkit-box-shadow: 0px 0px 80px -50px rgba(0, 0, 0, 1) inset;
    box-shadow: 0px 0px 80px -50px rgba(0, 0, 0, 1) inset;
}

#ktp_viewsw {
    display: inline-block;
    width: 6rem;
    height: auto;
    background: #333;
    color: #fff;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 6rem;
    letter-spacing: 1px;
    text-decoration: none;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-indent: 1em;
    white-space: nowrap;
    text-align: left;
    padding: 0px 0px 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

#ktp_viewsw.open {
    display: block;
    width: auto;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    padding: 0px 50px 0px 0px;
}

#ktp_viewsw::after {
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    background: url(/img/common/icon_keep_open.png) no-repeat center center;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

#ktp_viewsw.open::after {
    width: 50px;
    height: 100%;
    background-image: url(/img/common/icon_keep_close.png);
}

#ktp_list_wrap {
    /* background: #fff; */
    /* border: 1px solid #ccc; */
    /* border-top: none; */
    /* border-right: none; */
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

#ktp_list_wrap2 {
    padding: 15px;
    text-align: left;
    height: calc(100% - 50px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
    outline: 1px solid;
}

#ktp_list_wrap2 .btn_func {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ccc;
    color: #1a0dab;
    line-height: 1.8rem;
    text-decoration: underline;
    margin: 0px 0px 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

#ktp_list_wrap2 .btn_func:hover {
    text-decoration: none;
    background: #f5f5f5;
}

#ktp_item_list {
    display: block;
    /* width: 18em; */
    height: auto;
    margin: 0px;
    padding: 0px;
    list-style: none;
    /* max-height: calc(100vh - 350px); */
    /* min-height: 1.5em; */
    overflow-y: auto;
    counter-reset: num 0;
}

#ktp_item_list:empty::before {
    content: '登録がありません。';
}

#ktp_item_list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin: 0px 0px 10px;
    padding: 0px;
    border-bottom: 1px solid transparent;
}

#ktp_item_list li:hover {
    border-bottom: 1px solid currentcolor;
}

#ktp_item_list li:last-child {
    margin-bottom: 0px;
}

#ktp_item_list li::before {
    counter-increment: num;
    content: counter(num)'.';
    width: 24px;
    text-align: right;
    white-space: nowrap;
}

/* 11件目以前の古い一時保存は非表示にする */
/* #ktp_item_list li:nth-last-child(n+11) {
	display: none;
} */

#ktp_item_list li>span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

#ktp_item_list li>button.delete_this {
    display: block;
    width: 20px;
    height: 20px;
    text-align: left;
    text-indent: -9999em;
    overflow: hidden;
    border: none;
    background: #333;
    margin: 0px;
    margin-left: auto;
    padding: 0px;
    position: relative;
    border-radius: 2px;
}

#ktp_item_list li>button.delete_this::before,
#ktp_item_list li>button.delete_this::after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background: #fff;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

#ktp_item_list li>button.delete_this::before {
    rotate: 45deg;
}

#ktp_item_list li>button.delete_this::after {
    rotate: -45deg;
}

#ktp_item_list li>button.delete_this:hover {
    -webkit-filter: invert(0.9);
    filter: invert(0.9);
}

.ktp_item {
    display: block;
    margin: 0px;
    padding: 10px 30px 10px 0px;
    border-bottom: 1px solid #ccc;
    position: relative;
}

#ktp_item_list li a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.ktp_item_del {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0px;
    padding: 0px;
    border: none;
    background: url(/img/common/icon_clear.png) no-repeat center center #333;
    background-size: 10px 10px;
    border-radius: 100%;
    color: #fff;
    line-height: 1;
    text-align: left;
    text-indent: -9999em;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

button#ktp_dialog_close {
    display: block;
    margin: 0px 0px 10px auto;
    padding: 0px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    position: relative;
    border: none;
    color: #fff;
    background: #000;
}

button#ktp_dialog_close:hover {
    -webkit-filter: invert(0.9);
    filter: invert(0.9);
}

button#ktp_dialog_close::before,
button#ktp_dialog_close::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: currentColor;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

button#ktp_dialog_close::before {
    rotate: 45deg;
}

button#ktp_dialog_close::after {
    rotate: -45deg;
}

button#ktp_dialog_close span {
    display: block;
    text-align: left;
    text-indent: -9999em;
    overflow: hidden;
}

/* ページ記憶ここまで */
/* アクセシビリティチェック画面 */
.errrange~#keep_page {
    display: none !important;
}

/* アクセシビリティチェック画面 ここまで */
/* スマートフォン */
@media screen and (max-width: 670px) {
    #footstep_wrap {
        display: none !important;
    }

    #keep_page {
        /* display: none !important; */
        width: 90vw;
        height: 90vh;
    }
}

/* スマートフォン ここまで */

/* dialogタグに対応していないブラウザでは表示させない */
dialog#keep_page.no_support {
    display: none !important;
}

button#keep_page_sw.no_support {
    pointer-events: none;
}