@charset "UTF-8";

/*▼▼▼リンク▼▼▼*/
.link-01{
	margin-top:1rem;
}
.link-01 a{
	width:100%;
	font-weight:bold;
	padding-left:2rem;
}
.link-01 a::before{
	font-family: 'FontAwesome';
	content: '\f138';
	color:rgba(var(--color-red),1.00);
	padding-right:0.25rem;
}

/*▼▼▼サムネイル▼▼▼*/
.mycss .thumbnail{
	width: 100%;
	height: auto;
}
.mycss .thumbnail img{
	width: 100%;
	border: 1px solid rgba(var(--color-main-c),1.00);
}

/*▼▼▼ボタン▼▼▼*/
.mycss .button-01{
	width: auto;
	height: 40px;
	float: right;
	background-color: rgba(var(--color-main),1.00);
	color: rgba(var(--color-white));
	display: block;
	border-radius: 20px;
	padding: 0 3em;
	line-height:250%;
	transition: all .3s;
}
.mycss .button-01:hover{
	transform: scale(1.1,1.1);
}

/*▼▼▼バナー3列▼▼▼*/
.mycss .banner{
margin: 20px 0 0 0;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}

/* 最後のコンテンツを左寄せにする指定 */
.mycss .banner::after {
    content: "";
    display: block;
    width: calc(100%/3 - 10px);  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
.mycss .banner>dl{
	display: block;
	width: calc(100%/3 - 10px);
	margin-bottom:20px;
	border: 1px solid rgba(var(--color-main-c),1.00);
}
.mycss .banner>dl>p{
	text-align:center;
	background-color:rgba(var(--color-main-c));
	color:rgba(var(--color-white));
	padding:0.5em 0;
}

@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 640px) {

/*▼▼▼バナー3列▼▼▼*/
.mycss .banner{
display: table;
}
.mycss .banner>dl{
	width: 100%;
}
.mycss .banner>dl>p{
	text-align:center;
	background-color:rgba(var(--color-main-c));
	color:rgba(var(--color-white));
	padding:0.5em 0;
}
}