@charset "utf-8";

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

/* ====================================================== */
/* HTML部品標準設定                                       */
/* ====================================================== */

/*リセット用*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
}

h2{
  font-size: inherit;
}

/* a */
a {
	color: #2980b9
}

a:hover {
	color: #0094c8
}

/* h1 */
h1 {
    font-size: 1.5em;
    line-height: 1.333em;
}

/* h1（スマホ） */
@media screen and (min-width: 760px) {
    h1 {
        font-size: 2em;
        line-height: 1.333em;
        padding-left: 0;
    }
}

/* h2 */
h2 {
    font-size: 1.3em;
    font-weight: 500;
}

/* h2（スマホ） */
@media screen and (min-width: 760px) {
    h2 {
        font-size: 1.75em;
        line-height: 1.4em;
        margin-bottom: 0.375em;
    }
}

/* h3 */
h3 {
    font-size: 1.125em;
    font-weight: 500;
}

/* h4 */
h4 {
    font-size: 1.1em;
    font-weight: 500;
}

/* h5 */
h5{
    font-size: 0.846em;
    font-weight: 500;
    letter-spacing: 2px;
}

/* table */
table{
    width: 100%;
    border: 1px solid #eaedf2;
    margin-bottom: 1.5em;
    border-collapse: collapse;
    border-spacing: 0;
}

/* tr */
tr{
    border-bottom: 1px solid #eaedf2;
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* th */
th{
    font-size: 100%;
    width: auto;
    font-size: 80%;
    width: 40px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaedf2;
    border-right: 1px solid #eaedf2;
}

/* th（スマホ） */
@media screen and (min-width: 760px) {
    th {
        font-size: 100%;
        width: auto;
        background-color: #f8f9fa;
        border-bottom: 1px solid #eaedf2;
        border-right: 1px solid #eaedf2;
    }
}

/* td */
td{
    padding: 7px;
    font-size: 80% !important;
    border-right: 1px solid #eaedf2;
}

td:last-child{
    border-right: 0;
}

/* dl */
dl {
    margin: 1em 0;
}

/* dd */
dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em;
}

/* img */
img {
    max-width: 100%;
    height: auto;
}

iframe { 
    max-width: 100%;
    height: auto;
    aspect-ratio: 6 / 4;
}

/* p （よくあるご質問）*/
.question p {
    margin-left: 16px;
}

/* ====================================================== */
/* メイン部品標準設定                                     */
/* ====================================================== */
/* 文字色 */
.main{
    color: #5c6b80;
}

/* スライダー */
/* スライダーを使用する場合 */
.slider { 
	margin: 0px auto;
    width:100%;
	height: auto;
    aspect-ratio: 11 / 4;
	border: solid 1px;
	border-color: #494a41;
}
.slider img{
    width: 100%;
    height: auto;
    aspect-ratio: 11 / 4;
}

/* スライダーを使用しない場合 */
.single {
	margin: 0px auto;
    width:100%;
	height: auto;
}
.single img{
    width: 100%;
    height: auto;
    aspect-ratio: 11 / 4;
	border: solid 1px;
	border-color: #494a41;
}

/* ニュース一覧（PC・タブレット） */
.articles {
	display: flex;
	margin: 0px auto;
    margin-top: 25px;
	flex-direction: column;
	width: 100%;
	border-bottom: 10px;
	border: solid 2px;
    border-color: #bb8eef;
}
.articles .article-header {
	width: 100%;
	font-size: x-large;
	color: #eaf4fc;
    background-color: #bb8eef;
}
.articles .article-header span {
	padding: 5px 10px;
}

.articles .article-detail {
	display: flex;
	flex-direction: row;
	padding: 5px;
	width: 100%;
	font-size: normal;
}
.articles .article-date {
	display: block;
	width: 140px;
	font-size: medium;
}
.articles .article-title {
	display: block;
	width: calc(100% - 140px);
	font-size: medium;
}
.articles .article-detail span {
	padding: 5px;
    color: #5c6b80;
}

.articles .article-more {
	width: 100%;
	font-size: medium;
	text-align: right;
}

.articles .article-more a {
	padding: 5px 10px;
}

.articles .article-more a:hover {
	padding: 5px 10px;
	color: #0094c8;
}

/* ニュース一覧（スマホ） */
@media screen and (max-width: 760px) {
    .articles .article-detail {
        flex-direction: column;
    }
	.articles .article-date {
		display: block;
		width: 100%;
		font-size: small;
	}
	.articles .article-title {
		display: block;
		width: calc(100%);
		font-size: small;
	}
	.articles .article-more {
		width: 100%;
		font-size: small;
		text-align: right;
	}
}

/* タイトル */
.title {
    padding: 15px 0px ;
    border-bottom: 1px solid;
    border-color: #eaedf2;
    font-weight: 500;
    margin-bottom: 3em;
    margin-top: 15px;
}

/* タイトル（スマホ） */
@media screen and (max-width: 760px) {
    .title {
        padding-top: 70px;
        margin-top:-60px;
    }
}