@charset "shift-jis";
/* CSS Document */

/* 基本CSS
================================ */

#blanko_mtx *{ list-style:none; margin:0; padding:0;}
#blanko_mtx { width:750px; margin: 20px auto; font-family: 'Noto Sans JP', sans-serif;}

#blanko_mtx img,
#blanko_mtx a img{ border:none; vertical-align:bottom;}
#blanko_mtx a { text-decoration:none; }
#blanko_mtx a:hover img{ opacity:1;}

#blanko_mtx a,
#blanko_mtx a::after,
#blanko_mtx a:hover,
#blanko_mtx a:hover::after{ transition: 0.2s all; opacity:1; }


/* 看板
================================ */

#blanko_mtx .title {
	width: 100%;
	margin-bottom: 20px;
}
#blanko_mtx .title img {
	width: 100%;
	height: auto;
}

/* レイアウト
================================ */
#blanko_mtx .wrap_mtx_2clm,
#blanko_mtx .wrap_mtx_1clm,
#blanko_mtx .wrap_mtx_mix {
	width: 100%;
}

/* マトリクス2カラム */
#blanko_mtx .wrap_mtx_2clm {
	display: flex;
}
#blanko_mtx .wrap_mtx_2clm .item_mtx {
	width: 50%;
}

/* マトリクス1カラム */
#blanko_mtx .wrap_mtx_1clm {
}
#blanko_mtx .wrap_mtx_1clm .item_mtx {
	width: 100%;
	display: flex;
	align-items: center;
	/*border-bottom: dotted 1px #aaa;*/
	padding: 0 0 10px;
}

/* マトリクス混合 */
#blanko_mtx .wrap_mtx_mix {
	display: flex;
	flex-wrap: wrap;
}
#blanko_mtx .wrap_mtx_mix .item_mtx {
	width: 100%;
	/*border-bottom: dotted 1px #ccc;*/
	display: flex;
	align-items: center;
	padding: 0 0 10px;
}
#blanko_mtx .wrap_mtx_mix .item_mtx02 {
	width: 50%;
}

/* 見出し
================================ */
#blanko_mtx .item_mtx p {
	font-size: 16px;
}
#blanko_mtx .item_mtx p span {
	font-size: 20px;
	font-weight: 700;
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffe58b 0%) repeat scroll 0 0;
}

/* マトリクス2カラム */
#blanko_mtx .wrap_mtx_2clm .item_mtx p {
	text-align: center;
	margin-bottom: 10px;
} 

/* マトリクス1カラム */
#blanko_mtx .wrap_mtx_1clm .item_mtx p {
	width: 200px;
	font-size: 18px;
	display: inline-block;
	vertical-align: middle;
	padding-left: 10px;
}
#blanko_mtx .wrap_mtx_1clm .item_mtx p span {
	font-size: 24px;
}

/* 混合 */
#blanko_mtx .wrap_mtx_mix .item_mtx p {
	width: 200px;
	font-size: 18px;
	display: inline-block;
	vertical-align: middle;
	padding-left: 10px;
}
#blanko_mtx .item_mtx p span {
	font-size: 24px;
}


/* ボタン
================================ */
#blanko_mtx ul.mtx_btn {
	width: 100%;
	display: inline-block;
	letter-spacing: -.40em;
	text-align: right;
	padding: 0 10px;
	box-sizing: border-box;
}
#blanko_mtx ul.mtx_btn li {
	display: inline-block;
	letter-spacing: normal;
	vertical-align: middle;
}
#blanko_mtx ul.mtx_btn li a {
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 1em 0;
	border-radius: 5px;
	color: #121212;
	border: solid 2px #121212;
	position: relative;
    vertical-align: middle;
    text-decoration: none;
}
#blanko_mtx ul.mtx_btn li a::after{
    position: absolute;
    margin: -4px auto auto auto;
    content: "";
    vertical-align: middle;
	top: 50%;
	right: 10px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#blanko_mtx ul.mtx_btn li a span {
	display: block;
	font-size: 48px;
	margin-bottom: 5px;
}

#blanko_mtx ul.mtx_btn li a:hover {
	color: #fff;
	background-color: #ff821c;
	border: solid 2px #ff821c;
}
#blanko_mtx ul.mtx_btn li a:hover::after {
	right: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

/* 2カラム */
#blanko_mtx .wrap_mtx_2clm .item_mtx ul.mtx_btn li {
	width: calc((100% - 15px*2)/3);
	margin: 0 5px;
}

/* 1カラム */
#blanko_mtx .wrap_mtx_1clm .item_mtx ul.mtx_btn {
	width: calc(100% - 200px);
}
#blanko_mtx .wrap_mtx_1clm .item_mtx ul.mtx_btn li {
	width: calc((100% - 15px*2)/3);
	margin: 0 5px;
}

/* 混合 */
#blanko_mtx .wrap_mtx_mix .item_mtx ul.mtx_btn {
	width: calc(100% - 200px);
}
#blanko_mtx .wrap_mtx_mix .item_mtx ul.mtx_btn li{
	width: calc((100% - 15px*2)/3);
	margin: 0 5px;
}


#blanko_mtx .wrap_mtx_mix .btn_2clm {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 10px 10px;
	box-sizing: border-box;
	margin-top: 10px;
}
#blanko_mtx .wrap_mtx_mix .btn_2clm li {
	width: calc((100% - 10px)/2);
	box-sizing: border-box;
	margin: 0 5px;
}
#blanko_mtx .wrap_mtx_mix .btn_2clm li a {
	display: block;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	padding: 1.5em 0;
	border-radius: 5px;
	color: #121212;
	border: solid 2px #121212;
	position: relative;
    vertical-align: middle;
    text-decoration: none;
}
#blanko_mtx .wrap_mtx_mix .btn_2clm li a::after{
    position: absolute;
    margin: -4px auto auto auto;
    content: "";
    vertical-align: middle;
	top: 50%;
	right: 20px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#blanko_mtx .wrap_mtx_mix .btn_2clm li a span {
	font-size: 24px;
	/*background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffe58b 0%) repeat scroll 0 0;*/
}

/**/
#blanko_mtx .wrap_mtx_mix .btn_2clm li a:hover {
	color: #fff;
	background-color: #ff821c;
	border: solid 2px #ff821c;
}
#blanko_mtx .wrap_mtx_mix .btn_2clm li a:hover::after {
	right: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
#blanko_mtx .wrap_mtx_mix .btn_2clm li a:hover span {
	background:none;
}