/* 新デザインCSS */
:root {
    --color-link: #ff8900;
    --color-text: #d0d0d0;

    --color-back-base: #000000;
    --color-back-ctrl: #000000;
    --color-back-dark: #101010;
    --color-back-default: #202020;
    --color-back-light: #404040;
    --color-back-ctrl-hover: #404040;

    --color-border-ctrl: #a0a0a0;
}
html {
    height: 100%;
}

body {
    background-color: var(--color-back-dark);
    color: var(--color-text);
    font-family: 'メイリオ', 'MS UI Gothic';
    font-size: 11pt;
    height: 100%;
    margin: 0;
}
/* IE用 */
@media all and (-ms-high-contrast: none) {
    body {
        background-color: #000000;
        color: #ffffff;
        font-family: 'メイリオ', 'MS UI Gothic';
        font-size: 11pt;
        height: 100%;
        margin: 0;
    }
}

a:link {
	color: var(--color-link);
	text-decoration: none;
}
a:visited {
	color: var(--color-link);
	text-decoration: none;
}
a:hover {
	color: var(--color-link);
	text-decoration: underline;
}
a:active {
	color: var(--color-link);
	text-decoration: underline;
}

.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.selectable {
	-moz-user-select: initial;
	-khtml-user-select: initial;
	-webkit-user-select: initial;
	-ms-user-select: initial;
	user-select: initial;
}
.select {
    font-size: 0.9rem;
    padding: 4px;
    width: 100%;
    color: var(--color-text);
    background-color: var(--color-back-ctrl);
    border: 1px solid var(--color-border-ctrl);

    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    outline: none;

    background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" fill="%23a0a0a0" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 100%;
}
.select:hover {
    background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>');
    background-color: var(--color-back-ctrl-hover);
}
.select optgroup {
    background-color: var(--color-back-light);
}
.select optgroup option {
    background-color: var(--color-back-ctrl);
}
.inputText {
	background-color: var(--color-back-ctrl);
	color: var(--color-text);
	border: 1px solid var(--color-border-ctrl);
	height: 22px;
	padding-left: 4px;
	padding-right: 4px;
	font-family: "MS ゴシック";
    margin-top: 4px;
    margin-bottom: 4px;

    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    outline: none;
}
.inputText:hover {
    background-color: var(--color-back-ctrl-hover);
}
.btn {
    width: 100%;
    color: var(--color-text);
    background-color: #303030;
    border: 1px solid #c0c0c0;
    font-weight: 900;
    position: relative;
    overflow: hidden;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;

	cursor: pointer;
}
.btn span {
    position: relative;
    z-index: 2;
}
.btn:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: '';
    width: 120%;
    height: 100%;
    background: #606060;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
    transition: transform .2s;
}
.btn:hover:before {
    transform-origin: left top;
    transform: skewX(-30deg) scale(1, 1);
}
.darkScroll::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
.darkScroll::-webkit-scrollbar-track {
	background-color: var(--color-back-base);
	border: 1px solid var(--color-back-light);
}
.darkScroll::-webkit-scrollbar-thumb {
	background-color: var(--color-back-ctrl-hover);
}



/** grid **/
* {
    box-sizing: border-box;
}
.container {
    /*
    background-color: #400000;
    */
    background-color: var(--color-back-base);
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
@media screen and (min-width: 650px)  {
    .container {
        width: 1200px;

        display: grid;
        height: 100%;
        grid-template-rows: 30px 100px 40px auto 130px;
    }
}


/** main grid **/
.main {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}
@media screen and (max-width: 649px) {
    .topMargin {
        /*
        margin-top: 110px;
        */
    }
}
.colTime {
    width: 100%;
    margin-bottom: 12px;
}
.colFilter {
    width: 300px;
    padding: 12px;
    background-color: var(--color-back-default);
}
.colResult {
    width: 415px;
    padding: 12px;
	margin-left: 8px;
    margin-right: 8px;
    background-color: var(--color-back-default);
}
.colFavorite {
    width: 440px;
    padding: 12px;
    background-color: var(--color-back-default);
}

@media screen and (min-width: 650px) and (max-width: 767px) {
    .main {
        flex-wrap: wrap;
    }
    .colFilter {
        width: 250px;
    }
	.colResult {
        flex-grow: 1;
        width: initial;
		
	}
    .colFavorite {
        margin-top: 8px !important;
        width: 100%;
    }
}
@media screen and (max-width: 649px) {
    .main {
        flex-wrap: wrap;
    }
    .colFilter {
        margin-top: 0px !important;
        width: 100%;
    }
	.colResult {
        margin-top: 16px !important;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
	}
    .colFavorite {
        margin-top: 16px;
        margin-bottom: 12px;
        width: 100%;
    }
}


/** top line */
.topLineHamburger {
    display: none;
}
@media screen and (max-width: 649px) {
    .topLineHamburger {
        display: block;
        position: relative;
        left: calc(100vw - 32px - 16px);
        top: 4px;
        width: 32px;
        height: 32px;
        border: 1px solid #a0a0a0;
        z-index: 15000;
        background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" enable-background="new 0 0 24 24" height="32" viewBox="0 0 24 24" width="32"><path d="M0,0h24v24H0V0z" fill="none"/><path d="M3,18h13v-2H3V18z M3,13h10v-2H3V13z M3,6v2h13V6H3z M21,15.59L17.42,12L21,8.41L19.59,7l-5,5l5,5L21,15.59z"/></svg>');
    }
    .topLineHamburger-opened {
        background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" fill="%23ffffff" enable-background="new 0 0 24 24" height="32" viewBox="0 0 24 24" width="32"><path d="M0,0h24v24H0V0z" fill="none"/><path d="M3,18h13v-2H3V18z M3,13h10v-2H3V13z M3,6v2h13V6H3z M21,15.59L17.42,12L21,8.41L19.59,7l-5,5l5,5L21,15.59z"/></svg>');
    }
}
.topLine {
    font-size: 0.8rem;
    padding: 4px;
    background-color: #202020;
    border: 1px solid #606060;

    display: flex;
    justify-content: space-between;
}
.topLine .apInfo {
    display: none;
    border: 1px solid #808080;
    padding: 20px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    background-color: #202020;    
}
.topLine .links {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: hidden;
}
.topLine .link-title {
    display: none;
}
.topLine .links .link a:after {
    color: #ffffff;
    content: "|";
    padding-left: 4px;
    padding-right: 4px;
}
.topLine .links .link:last-child a:after {
    content: "";
}
.topLine .operate {
    white-space: nowrap;
}
.topLine .linkTitle {
    display: inline-block;
    margin-left: 4px;
    margin-right: 8px;    
}
@media screen and (max-width: 649px) {
    .topLine {
        display: none;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 10000;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 4px 8px 16px 8px;
    }
    .topLine .links {
        display: block;
        width: calc(100% - 36px);
    }
    .topLine .linkTitle {
        display: block;
        background-color: #404040;
        color: var(--color-text);
        font-weight: bold;
        font-size: 1.0rem;
        margin-bottom: 12px;
        padding: 4px;

        margin-top: 150px;
    }
    .topLine .links .link {
        font-size: 0.9rem;
        padding: 2px 0px 2px 24px;
        background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>');
        background-repeat: no-repeat;
        background-position-y: 0px;
    }
    .topLine .links .link a:after {
        content: "";
    }
    .topLine .operate {
        font-size: 0.9rem;
        margin-top: 16px;
        white-space: nowrap;
    }

}

/** ヘッダ */
.header {
    background-color: var(--color-back-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*
    height: 100px;
    margin: 8px 0px;
    */
}
.header .logoImage {
    width: 270px;
    height: 80px;
}
.header div:nth-child(1) {
    padding-left: 16px;
}
.header div:nth-child(2) {
    padding: 4px;
    font-size: 0.8rem;
    line-height: 200%;
    white-space: nowrap;
}
.header div:nth-child(3) {
    padding-right: 16px;
    flex-grow: 1;
}
@media screen and (min-width: 650px) and (max-width: 767px) {
    .header div:nth-child(1) {
        padding-left: 8px;
    }
    .header div:nth-child(2) {
        display: none;
    }
    .header div:nth-child(3) {
        padding-right: 8px;
    }
}
@media screen and (max-width: 649px) {
    .header {
        flex-wrap: wrap;
    }
    .header div:nth-child(1) {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        text-align: center;
    }
    .header div:nth-child(2) {
        display: none;
    }
    .header div:nth-child(3) {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
}

.header .noteLink {
    background-color: #c93e11;
    border: 1px solid #ff5722;
    color: var(--color-text);
    padding: 2px;
}


/* フッタ */
.copyrightArea {
	border-top: solid 1px #333333;
	text-align: right;
	line-height: 1.2;
	margin-top: 24px;
	padding-top: 4px;
	padding-bottom: 16px;

    .doc {
        margin-top: 8px;
        
        span {
            font-size: 0.8rem;
            display: block;
        }
    }
    
}

.footer {
	border-top: solid 1px #333333;
	text-align: right;
	line-height: 1.2;
	margin-top: 24px;
	padding-top: 4px;
	padding-bottom: 16px;
}
.footer .footerText {
    padding-top: 8px;
    margin: 16px 16px 8px 16px;
}
@media screen and (max-width: 649px) {
    .footer .footerText {
        border: 0;
        margin-top: 8px;
        margin-bottom: 16px;
    }
}
.footer .footerText span {
    display: block;
    font-size: 0.7rem;
    color: #a0a0a0;
    text-align: right;
    margin-right: 8px;

}
.footer .footer .copyright {
	font-size: 8pt;
	color: #808080;
	display: block;
}

.footer .colFooterText {
    flex-grow: 1;
}

.panelTitle {
    display: block;
    margin-bottom: 8px;

    font-size: 0.9rem;
    /*
    font-weight: bold;
    */
    border-bottom: 1px solid #ffffff;

    background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" fill="%23a0a0a0" transform="rotate(90)" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15.5,5 11,5 16,12 11,19 15.5,19 20.5,12"/><polygon points="8.5,5 4,5 9,12 4,19 8.5,19 13.5,12"/></g></g></svg>');

    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: -4px;
}
.panelTitleOpened {
    background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" fill="%23a0a0a0" transform="rotate(270)" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15.5,5 11,5 16,12 11,19 15.5,19 20.5,12"/><polygon points="8.5,5 4,5 9,12 4,19 8.5,19 13.5,12"/></g></g></svg>');
}

/* time */
.colTime {
    text-align: right;
}
.colTime .timeInfo  {
    display: inline-block;
	background-color: #404040;
    padding: 4px;
    text-align: center;
}
.colTime .timeInfo .timeInfoLine {
    display: inline;
}
@media screen and (max-width: 479px) {
    .colTime .timeInfo .timeInfoLine {
        display: block;
    }
}

.colTime .timeInfo  .timeLabel {
	display: inline-block;
    font-weight: bold;
}
.colTime .timeInfo  .timeValue {
	display: inline-block;
    margin-left: 8px;
	margin-right: 8px;
}


/* filter */
/*** filter:検索フォーム ***/
.colFilter .panelSelector {
	display: flex;
	flex-wrap: nowrap;
	font-size: 0.9rem;
}
.colFilter .panelSelector .panelSelectorLine {
	display: inline-block;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;

    color: var(--color-link);
	background-color: var(--color-back-light);
	text-decoration: none;
	margin-right: 8px;
	cursor: pointer;
}
.colFilter .panelSelector .panelSelectorLine.selected {
	background-color: var(--color-back-base);
    color: var(--color-text);
    font-weight: bold;
}
.colFilter .filterPanel {
	background-color: var(--color-back-ctrl);
	padding: 8px;
    /*
    height: calc(100% - 60px);
    min-height: 600px;
    */
}
@media screen and (max-width: 479px) {
    .colFilter .filterPanel {
        min-height: initial;
    }
}

.colFilter .panel {
	font-size: 0.9rem;
}
.colFilter .nameInputText {
    width: 100%;

	margin-bottom: 8px;
    padding: 4px;

	color: var(--color-text);
	background-color: transparent;

	border: 0px;
	border-bottom: 1px solid var(--color-border-ctrl);
    box-sizing: border-box;
	outline: 0;
}
.colFilter .nameInputText:focus {
	background-color: var(--color-back-light);
}
.colFilter .formTable {
	display: table;
	width: 100%;
}
.colFilter .row {
	display: table-row;
}
.colFilter .col {
	display: table-cell;
	vertical-align: middle;
}
.colFilter .formTable .formLabel {
	/* border: 1px solid orange; */
	display: block;
    margin-right: 4px;
	width: 45px;
	text-align: center;
}
@media screen and (min-width: 650px) and (max-width: 767px) {
    .colFilter .formTable .formLabel {
        font-size: 0.7rem;
        width: 35px;
    }
}
.colFilter .formTable .formCheckList {
	background-color: #000000;
    border: 1px solid #666666;
    padding: 4px;
	box-sizing: border-box;
	line-height: 220%;
}
.colFilter .formTable .formCheckList label {
	display: block;
}
@media screen and (min-width: 650px) and (max-width: 767px) {
    .colFilter .formTable .formCheckList label {
        font-size: 0.7rem;
    }
}

.colFilter .formTable .formCheckList input[type=checkbox] {
	display: inline-block;
}
.colFilter .resetBtnLine {
	width: 100%;
	margin-top: 8px;
}
.colFilter .resetBtnLine .btnReset {
    width: 50%;
    margin-left: 25%;
}
.colFilter .note {
    font-size: 0.8rem;
    color: #a0a0a0;
    display: block;
    margin-top: 8px;
}



/** filter:地域・天気セレクタ **/
.selectorSummary {
	width: 100%;

    border: 1px solid #666666;
    background-color: #000000;
    display: inline-block;
    height: 33px;
    padding-left: 4px;
    padding-right: 4px;

	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;	
}
.selectorSummary .summaryBase {
    display: table;
    width: 100%;
	height: 100%;
}
.selectorSummary .summaryText {
    display: table-cell;
	vertical-align: middle;
    padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;
	font-size: 0.9rem;
}
.selectorSummary .summaryText .summaryWeatherIcon {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-right: 6px;
}
.selectorSummary .summaryText .summaryTextImage {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-right: 6px;
}
.selectorSummary .summaryText .summaryTextText {
	display: inline-block;
	vertical-align: middle;

	width: 155px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (min-width: 650px) and (max-width: 767px) {
    .selectorSummary .summaryText .summaryTextText {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.7rem;
        width: 105px;
    }
}

.selectorSummary .summaryDD {
	display: table-cell;
    vertical-align: middle;
	font-size: 5pt;
	text-align: right;
	padding-right: 4px;	
}

/** filter:地域・天気セレクタ詳細 **/
.selectorDetail {
	position: absolute;
	padding: 4px;
	border: 1px solid #666666;
	background-color: var(--color-back-default);

	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* filter:地域セレクタ詳細 */
.selectorDetailArea {
	display: flex;
	flex-wrap: wrap;
    align-content: flex-start;
	width: 80vw;
}
.selectorDetailArea .areaGroup {
    padding: 8px;
}
.selectorDetailArea .areaGroup .groupTitle {
    white-space: nowrap;
    font-weight: bold;
    display: table-cell;
	padding-bottom: 8px;
}
.selectorDetailArea .areaGroup .groupTitle .image {
    display: inline-block;
    vertical-align: middle;	
}
.selectorDetailArea .areaGroup .groupTitle .label {
    display: inline-block;
    vertical-align: middle;
	margin-left: 8px;
}
.selectorDetailArea .areaGroup .areaList {

}
.selectorDetailArea .areaGroup .areaList .line {
	width: 100%;
	padding: 4px;
    white-space: nowrap;
	cursor: pointer;
}
.selectorDetailArea .areaGroup .areaList .line:hover {
	background-color: var(--color-back-ctrl-hover);
}
.selectorDetailArea .areaGroup .areaList .label {
	
}

/* filter:地域セレクタ詳細：新PC用：横メニュー構成 */
.selectorDetailArea {
    padding: initial;
    width: initial;

    .areaGroups.pc {
        filter: drop-shadow(5px 5px 5px #444);

        .areaGroup {
            position: relative;
            display: flex;
            padding: 4px 4px;
            border-right: 1px solid #666666;
            border-bottom: 1px solid #666666;

            .image {
                display: inline-block;
                width: 20px;
                height: 20px;
            }
            .label {
                display: inline-block;
                margin-left: 4px;
                padding-right: 16px;
            }
        }
        .areaGroup:last-child {
            border-bottom: 0;
        }
        .areaGroup:after {
            content: "▲";
            position: absolute;
            right: 0px;
            display: inline-block;
            transform: rotate(90deg);
            transform-origin: center;
            scale: 0.5;
            color: #888;
        }
        .areaGroup.hoverSelected {
            /*
            background-color: var(--color-back-ctrl-hover);
            */
            border-right: 1px solid var(--color-back-default);
        }
        .areaGroup.hoverSelected:after {
            color: #fff;
        }
    }

    .areas.pc {
        .area {
            display: flex;
            padding: 4px 4px;

            .image {
                display: inline-block;
                width: 20px;
                height: 20px;
            }
            .line {
                display: inline-block;
                margin-left: 4px;
                padding-right: 16px;
            }
        }
        .area:hover {
            background-color: var(--color-back-ctrl-hover);
        }

    }

    .areaGroups.smp {
        display: none;
        width: 100%;

        .areaGroup {
            .groupAreaName { 
                background-color: #404040;
                display: flex;
                width: 100%;
                padding: 4px;
                margin-bottom: 8px;
    
                .image {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    margin-left: 4px;
                }
                .title {
                    display: inline-block;
                    margin-left: 8px;
                    font-weight: bold;
                }
            }
            .area {
                display: flex;
                margin-left: 16px;
                padding: 4px 0px;
                .image {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                }
                .line {
                    display: inline-block;
                    margin-left: 4px;
                }
            }
    
        }
    }
}
.selectorDetailArea .smpCloseLine {
    width: 100%;
    margin-left: 30%;
    margin-right: 30%;
    border: 1px solid #808080;
    background-color: #404040;
    padding: 8px;
    text-align: center;
    margin-top: 20px;
}

@media screen and (max-width: 649px) {
    .selectorDetailArea .areaGroups.pc  {
        display: none;
    }
    .selectorDetailArea .areas.pc  {
        display: none;
    }
    .selectorDetailArea .areaGroups.smp {
        display: block;
    }
}



/* filter:天気セレクタ詳細 */
.selectorDetailWeather .line {
	display: block;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
	cursor: pointer;
}
.selectorDetailWeather .line:hover {
	background-color: var(--color-back-ctrl-hover);
}
.selectorDetailWeather .line .adjust {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
}

.selectorDetailWeather .line .adjust .check {
	display: inline-block;
}
.selectorDetailWeather .line .adjust .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
}
.selectorDetailWeather .line .adjust text {
	display: inline-block;
}

.selectorDetailWeather {
	min-width: 120px;
    filter: drop-shadow(5px 5px 5px #444);
}

@media screen and (max-width: 479px) {
    .selectorDetailWeather .line {
        padding: 8px;
    }
    .selectorDetailWeather .line:nth-child(1) {
        width: calc(100% - 40px);
    }
    .selectorDetailWeather .line .adjust .check {
        width: 16px;
        height: 16px;
    }
    .selectorDetailWeather .line .adjust {
        font-size: 12pt;
    }
}
.selectorDetailWeather .smpCloseLine {
    margin-left: 30%;
    margin-right: 30%;
    border: 1px solid #808080;
    background-color: #404040;
    padding: 8px;
    text-align: center;
    margin-top: 20px;
}

/* filter:ケース指定 */
.casePanel {
	height: 100%;;
}
.casePanel .caseFilterInputText {
    width: 100%;

	margin-bottom: 8px;
    padding: 4px;

	color: var(--color-text);
	background-color: transparent;

	border: 0px;
	border-bottom: 1px solid var(--color-border-ctrl);
    box-sizing: border-box;
	outline: 0;
}

.casePanel .caseFilterInputText:focus {
	background-color: var(--color-back-light);
}
.casePanel .caseList {
	height: 550px;
	padding: 4px;
    overflow-y: scroll;
	overflow-x: hidden;
	line-height: 150%;	
}
.casePanel .caseList .caseLine {

}


.contents .caseForm .caseList {
    line-height: 170%;
    padding: 4px;
    height: 330px;
    overflow-x: hidden;
    overflow-y: scroll;
}



/* result */

/* 検索結果：ページャ */
.colResult .pager {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-top: 4px;
    margin-bottom: 11px;
}
@media screen and (max-width: 649px) {
    .colResult .pager {
        margin-top: 16px;
    }
}

.colResult .pager .btnPager {
	margin-left: 4px;
	margin-right: 4px;
}
.colResult .pager .btnPager.disabled {
	color: #808080;
	pointer-events: none;
}

/* 検索結果：リスト*/
.colResult .listTable {
	border-collapse:  collapse;
	width: 100%;
	background-color: var(--color-back-ctrl);
	font-size: 0.9rem;
}
.colResult th,
.colResult td {
	border: 1px solid #808080;
	padding: 4px;
}
.colResult .listTable thead tr {
	background-color: var(--color-back-ctrl-hover);
}
.colResult .listTable tbody td {
	text-align: center;
}
.colResult .listTable tbody td .iconLine {
	display: flex;
}
.colResult .listTable tbody td .timeInactive,
.colResult .listTable tbody td .timeActive {
    display: block;
}

/* favorite */

/* お気に入り：リスト*/
.colFavorite .favTableWrapper {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 500px;
}
@media screen and (max-width: 649px) {
    .colFavorite .favTableWrapper {
        width: 100%;
        height: initial;
    }
}

.colFavorite .favTable {
	border-collapse:  collapse;
	width: 100%;
	background-color: var(--color-back-ctrl);
	font-size: 0.9rem;
}
.colFavorite .favTable th,
.colFavorite .favTable td {
	border: 1px solid #808080;
	padding: 4px;
}
.colFavorite .favTable tr.favStartLine td {
	border-bottom: 0;
	background-color: #202020;
}
.colFavorite .favTable tr.favStartLine td:hover {
	background-color: #404040;
}

.colFavorite .favTable tr.favEndLine td {
	border-top: 0;
}

.colFavorite .favTable thead tr {
	background-color: var(--color-back-ctrl-hover);
}
.colFavorite .favTable tbody td {
	text-align: center;
}
.colFavorite .favTable .favInputLine {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.colFavorite .favTable .favInputLine .areaImage {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.colFavorite .favTable .favInputLine .favMemoInputText {
    flex-grow: 1;
    padding: 4px;

	color: var(--color-text);
	background-color: transparent;
	outline: 0;
	border: 0;
}
.colFavorite .favTable .favLine {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.colFavorite .favTable .favLine > *:nth-child(2) {
	display: inline-block;
}
.colFavorite .favTable .favLine > *:nth-child(2) {
	display: inline-block;
	margin-left: 4px;
}
.colFavorite .favTable tbody td .timeInactive,
.colFavorite .favTable tbody td .timeActive {
    /* display: block; */
    display: inline-block;
}

.colFavorite .favTable .utilLinks {
	display: block;
	white-space: nowrap;
}
.colFavorite .favTable .utilLink {
    display: inline-block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	cursor: pointer;
    margin-top: 4px;
	margin-left: 2px;
	margin-right: 2px;
}
.colFavorite .favTable .utilLinks .linkGoogle {
	background-image: url(../image/sys/icon_google_off.png);
}
.colFavorite .favTable .utilLinks .linkGoogle:hover {
	background-image: url(../image/sys/icon_google_on.png);
}
.colFavorite .favTable .utilLinks .linkICS {
	background-image: url(../image/sys/icon_ics_off.png);
}
.colFavorite .favTable .utilLinks .linkICS:hover {
	background-image: url(../image/sys/icon_ics_on.png);
}
.colFavorite .favTable .utilLinks .linkDelete {
	background-image: url(../image/sys/icon_delete_off.png);
}
.colFavorite .favTable .utilLinks .linkDelete:hover {
	background-image: url(../image/sys/icon_delete_on.png);
}

/* スマホ幅クローズボタン */
.smpPopupClose {
    z-index: 2147483647;
    width: 24px;
    height: 24px;
    position: fixed;
    top: 8px;
    right: 8px;

    background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23FFFFFF"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 100%;
}

/* 天気アイコン */
.weatherIcon {
	display: inline-block;
	width: 20px;
	height: 20px;
}

/** dialog */
.lockLayer {
    background-color: var(--color-back-base);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30000;
    opacity: 0.7;
}

.dialog {
    position: fixed;
    z-index: 30001;

    background-color: var(--color-back-dark);
    border: 1px solid var(--color-border-ctrl);
    padding: 16px;
    font-size: 0.9rem;
}

.dialog .readText {
    display: block;
    margin-bottom: 8px;
}
.dialog .btnList {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
}
.dialog .btnList button {
    flex-grow: 1;
}

/** docs **/
.docs {
    font-size: 0.8rem;
    width: 90%;
    background-color: var(--color-back-ctrl);
    border: 1px solid var(--color-back-light);
    padding: 16px;
}

.docs .markClose {
    position: absolute;
    border: 2px solid var(--color-border-ctrl);
    background-color: var(--color-back-ctrl);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    top: -14px;
    left: -14px;
    fill: var(--color-back-light);
    box-sizing: content-box;
}
.docs .markClose:hover {
    fill: var(--color-border-ctrl);
}
.docs .scroll {
    overflow-y: auto;
    width: 100%;
    height: 100%;    
}
.docs .indexes {
}
.docs .inquiry {
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.docs .title {
    display: block;
    font-size: 1.0rem;
    font-weight: bold;

    padding-top: 8px;
    margin-top: 16px;

    border-top: 1px solid #808080;
}
.docs .title:before {
    content: '■';
}
.docs .doc {
    margin-left: 16px;
}
.docs .docHighlight {
    background-color: #404000;
    padding: 10px;
    font-weight: bold;
}
.docs .doc .date {
    display: block;
    margin-top: 16px;
    text-decoration: underline;
}
.docs .doc .content {
    margin-top: 4px;
}
.docs .doc .subContent {
    margin-left: 16px;
    font-size: 0.8rem;
    background-color: #202020;
    margin: 4px 8px 16px 8px;
    padding: 8px;
}
@media screen and (max-width: 649px) {
    .docs ul {
        padding-inline-start: 20px;
    }
}
/* adsense 制御 */
.headAdBase {
	text-align: right;
	min-width: 468px;
	min-height: 60px;
}
@media screen and (max-width: 649px) {
    .headAdBase {
        min-width: initial;
        min-height: initial;
        width: 100vw;
        height: 60px;
    }
}