@charset "UTF-8";

.sub-menu {
	width: 20%;
	font-size: 10px;
}

.btn-category {
	font-size: 10px;
	height: calc(1.5em * 3 + 40px);
	white-space: normal;
	border-top: none;
	border-right: none;
	border-bottom: none;
	text-align: left;
	width: 100%;
}

@media screen and (min-width: 545px) {
	.sub-menu {
		font-size: 12px;
	}

	.btn-category {
		font-size: 12px;
		height: calc(1.5em * 2 + 40px);
	}
}

.marquee {
	width:100%;
	padding:0.5em 0;
	overflow:hidden;
	/*background-color:#f6f6f6;*/
	margin-bottom:10px;
	position:relative;
}

.marquee p:after {
	content:"";
	white-space:nowrap;
	padding-right:50px;
}

.marquee p {
	margin:0;
	padding-left:100%;
	display:inline-block;
	white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
	from { -webkit-transform: translate(0%);}
	99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
	from { -moz-transform: translate(0%);}
	99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
	from { -ms-transform: translate(0%);}
	99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
	from { -o-transform: translate(0%);}
	99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
	from { transform: translate(0%);}
	99%,to { transform: translate(-100%);}
}

.text-myrec-memo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: #000000;
}

.myrec-article-title-link-color {
	color: #000000;
}

.myrec-article-title-link {
	color: #000000;
}

/*
 郵便番号|電話番号|FAX番号等、ハイフン区切りの複数入力欄.
 Bootstrap の .form-inline .form-control が width:auto になり、
 type="number" の input はブラウザの初期幅が極端に狭くなるため、
 読みやすい最低幅を明示的に指定する.
 */
.form-inline .input-group input[type="number"].form-control {
	width: 4.5rem;
	flex: 0 0 auto;
}