@charset "utf-8";

/* ========================================================================== */
/* articles.html 個別スタイルシート設定                                       */
/* ========================================================================== */
/* ・配色は和色大辞典より引用しています                                       */
/*     https://www.colordic.org/w                                             */
/* ・レスポンシブはメニューのみ対応しています                                 */
/*     タブレット（1100px以下）、スマホ（760px以下）                           */
/* ========================================================================== */

/* ====================================================== */
/* HTML部品標準設定                                       */
/* ====================================================== */
/* a */
a {
	color: #2980b9
}
a:hover {
	color: #0094c8
}

@media screen and (max-width: 760px) {
    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 14 / 7;
    }
}

/* ====================================================== */
/* メイン部品標準設定                                     */
/* ====================================================== */
/* ニュース一覧（PC・タブレット） */
.article-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20px;
}
.article-item .article-header {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px;
    border : solid 2px;
    border-bottom: none;
    border-color: #eaedf2;
	border-radius: 10px 10px 0px 0px;
	cursor: pointer;
}
.article-item .article-date {
    color: #9fa6b4;
	font-size: large;
}
.article-item .article-title {
    color:#2980b9;
	font-size: x-large;
}
.article-item .article-none {
    color:#2980b9;
	font-size: x-large;
	cursor: auto;
}

.article-item .article-detail {
	display: block;
	width: 100%;
	max-height: 0px;
	overflow: hidden;
	font-size: medium;
	border: solid 2px;
    border :solid 2px;
    border-color:#eaedf2;
    color: #5c6b80;
	border-radius: 0px 0px 10px 10px;
	transition: max-height 0.5s;
}
.article-item.open .article-detail {
	display: block;
	width: 100%;
	max-height: 10000px;
}
.article-item .article-detail div {
	width: 100%;
	padding: 10px;
}

/* ニュース一覧（スマホ） */
@media screen and (max-width: 760px) {
    .article-item{
        padding-top: 70px;
        margin-top:-70px;
    }

	.article-item .article-date {
        color: #9fa6b4;
		font-size: medium;
	}
	.article-item .article-title {
        color: #2980b9;
		font-size: large;
	}
	.article-item .article-none {
        color:#2980b9;
		font-size: large;
		cursor: auto;
	}
	.article-item .article-detail {
		display: block;
		width: 100%;
		max-height: 0px;
		overflow: hidden;
		font-size: small;
        border :solid 2px;
        border-color:#eaedf2;
        color: #5c6b80;
		border-radius: 0px 0px 10px 10px;
		transition: max-height 0.5s;
	}
	.article-item.open .article-detail {
		display: block;
		width: 100%;
	    max-height: 10000px;
	}
	.article-item .article-detail div {
		width: 100%;
		padding: 10px;
	}
}

/*ニュースの文字色*/
.news{
    color: #5c6b80;
}