@charset "UTF-8";

.t_menu {
	position: fixed;
	bottom: 0;
	right: 0;
	border: 1px solid #184c87;
	box-sizing: border-box;
	width: 62px;
	z-index: 100000;
}

.t_menu *{
	box-sizing: border-box;
}

	.t_menu li {
		border-bottom: 1px solid #184c87;
		position: relative;
	}
	.t_menu li:last-child {
		border: none;
	}


	/*矢印*/
	.t_menu .is-menu-active:before {
		content: "";
		position: absolute;
		top     : 50%;
		left    : -7px;
		margin  : -6px 0 0 0;
		border-width: 6px 7px 6px 0;
		border-style: solid;
		border-color: transparent #184c87 transparent;
	}
	/*搭載物件を見る 矢印*/
	.t_menu .is-menu-active_01:before {
		border-color: transparent #ffa200 transparent;
	}
	/*テクニカル01耐震×制震 矢印*/
	.t_menu .is-menu-active_02:before {
		border-color: transparent #009345 transparent;
	}
	/*テクニカル02ヘーベルパワーボード 矢印*/
	.t_menu .is-menu-active_03:before {
		border-color: transparent #8f1c3b transparent;
	}
	/*テクニカル03地盤調査・改良工事・保障 矢印*/
	.t_menu .is-menu-active_04:before {
		border-color: transparent #59bcf3 transparent;
	}
	/*テクニカル04アフターサービス 矢印*/
	.t_menu .is-menu-active_05:before {
		border-color: transparent #999 transparent;
	}

		/* 基本 */
		.t_menu a {
			-webkit-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			width: 60px;
			line-height: 1.2;
			font-size      : 12px;
			font-family    : "メイリオ",Meiryo,Tahoma,Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif!important;
			color          : #333;
			text-decoration: none;
			background-color: #fff;
			box-sizing: border-box;
			padding-top   : 10px;
			padding-bottom: 10px;
			position: relative;
			overflow: hidden;
			vertical-align: bottom;
		}
		.t_menu .active_01 {
			color: #ffa200;
			font-size: 14px;
			font-weight: bold;
			letter-spacing: 1px;
		    background: #f9f5ef;
		}
			.t_menu_number {
				transform: rotate(-90deg);
				display: inline-block;
			}
		/* 行数別 */
		.t_menu--line a   { padding-right: 23px;}
		.t_menu--line2 a { padding-right: 13px;}
		
		/* 左上飾り */
		.t_menu a:before {
			content: "";
			position: absolute;
			top     : -8px;
			left    : -8px;
			display: block;
			width: 16px;
			height: 16px;
			background-color: #184c87;
			transform: rotate(45deg);
		}
		/*搭載物件を見る 左上飾り*/
		.t_menu a.active_01:before {
			background-color: #ffa200;
		}
		/*テクニカル01耐震×制震 左上飾り*/
		.t_menu a.active_02:before {
			background-color: #009345;
		}
		/*テクニカル02ヘーベルパワーボード 左上飾り*/
		.t_menu a.active_03:before {
			background-color: #8f1c3b;
		}
		/*テクニカル03地盤調査・改良工事・保障 左上飾り*/
		.t_menu a.active_04:before {
			background-color: #59bcf3;
		}
		/*テクニカル04アフターサービス 左上飾り*/
		.t_menu a.active_05:before {
			background-color: #999;
		}

		/*.t_menu .is-none a:before {
			background-color: #5e89b9;
		}*/
		/* hover */
		.t_menu a:hover {
			opacity: 1;
		}
		.t_menu li:not(.is-menu-active):not(.is-none) a:hover {
			background-color: #fff;
			color: #184c87;
		}
		.t_menu li:not(.is-menu-active):not(.is-none) a.active_01:hover {
			background-color: #FFC107;
			color: #fff;
		}
		/*
		.t_menu li:not(.is-menu-active):not(.is-none) a.active_01:hover:before {
			background-color: #FFC107;
		}
		*/
		/* アクティブ時 */
		.t_menu .is-menu-active a {
			background-color: #184c87;
			color: #fff;
		}
		/*搭載物件を見る アクティブ時*/
		.t_menu .is-menu-active a.active_01 {
			background-color: #ffa200;
			color: #fff;
		}
		/*テクニカル01耐震×制震 アクティブ時*/
		.t_menu .is-menu-active a.active_02 {
			background-color: #009345;
			color: #fff;
		}
		/*テクニカル02ヘーベルパワーボード アクティブ時*/
		.t_menu .is-menu-active a.active_03 {
			background-color: #8f1c3b;
			color: #fff;
		}
		/*テクニカル03地盤調査・改良工事・保障 アクティブ時*/
		.t_menu .is-menu-active a.active_04 {
			background-color: #59bcf3;
			color: #fff;
		}
		/*テクニカル04アフターサービス アクティブ時*/
		.t_menu .is-menu-active a.active_05 {
			background-color: #999;
			color: #fff;
		}



		/*.t_menu .is-menu-active a:before {
			background-color: #a5c6ec;
		}*/
		/* リンクなし */
		/*.t_menu .is-none a {
			color: #5e89b9;
		}*/

/*-------------------------------------------------------------------------
レスポンシブ
-------------------------------------------------------------------------*/

.res_headline {
    display: none;
}
@media screen and (max-width: 748px){

    .menu_cover {
        position: fixed;
        bottom  : 0;
        left    : 0;
        width: 100%;
    }
    /* 見出し */
    .res_headline {
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 13px;
        position: relative;
        font-size  : 16px;
        font-weight: bold;
        color      : #fff;
		background-color: #184c87;
    }
        /* プラス/マイナス */
        .res_headline_mark {
            position: absolute;
            top     : 50%;
            right   : 5px;
            margin: -13px 0 0;
            width: 26px;
            height: 26px;
            background-color: #fff;
            border-radius: 50px;
            display: block;
        }
        .res_headline_mark:before,
        .res_headline_mark:after {
            content: "";
            position: absolute;
            top     : 50%;
            left    : 50%;
            margin: -10.1% 0 0 -33%;
            width: 18px;
            height: 5px;
            border-radius: 1px;
            display: block;
			background-color: #184c87;
        }
        .res_headline_mark:after {
            transform: rotate(90deg);
            transform-origin: center center;
            transition: .1s ease;
        }
        .is-menu-active .res_headline_mark:after {
            transform: rotate(0);
        }
    /* 一覧 */
    .res_menu {
        display: none;
    }
        .res_menu li {
            border-bottom: 1px solid #999;
            background-color: #fff;
            position: relative;
        }
			/* 基本 */
            .res_menu a {
                display: block;
                width: 97%;
                height: 34px;
                line-height: 35px;
                font-size: 13px;
                font-weight: bold;
                padding: 0 12px;
				text-decoration: none;
            }
            .res_menu a:before,
            .res_menu a:after {
                content: "";
                position: absolute;
                right   : 12px;
                display: block;
                width: 10px;
                height: 2px;
                background-color: #060606;
            }
            .res_menu a:before {
                top: 13px;
                transform: rotate(25deg);
            }
            .res_menu a:after {
                top: 17px;
                transform: rotate(-25deg);
            }
				.res_menu br {
					display: none;
				}
				.t_menu_number {
					transform: rotate(0deg);
				}
				.t_menu_number:after {
					content: "|";
					color: #184c87;
					padding: 0 0 0 3px;
					margin: 0 5px 0 0;
				}
			/* ナンバーを振ってあるリンク */
			.res_list a {
				color: #184c87;
			}
			.res_list a:before,
			.res_list a:after {
				background-color: #184c87;
			}

}