@charset "utf-8";


/*動画エリア-------------------------------------------------------------------*/

.movieWrap{
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}

/* 動画は未使用 */
.movieWrap video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

/*タブ（未使用）-----------------------------------------------------------------------*/

.tab_01 {
    display: flex;
    flex-wrap: wrap;
    max-width: 1500px;
	margin-top: 10px;
}

.tab_01 > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    background-color: #3cb371;
    color: #fff;
            font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab_01 > label:hover {
	background: linear-gradient(#87cefa, #3cb371);/*背景グラデーション*/
}
.tab_01 label:has(:checked) {
    /*background-color: #191970;*/
    color: #fff;
	background: linear-gradient(#7fffd4, #2e8b57);/*背景グラデーション*/
}

.tab_01 label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #2e8b57;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab_01 input {
    display: none;
}

.tab_01 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}

.tab_01 label:has(:checked) + div {
    display: block;
}

.tab_wrap {
    display: flex; /*横並び*/
	justify-content: center; /*タブ内要素をセンターリング*/
}
.tab_wrap .image {
    display: flex; /*画像を縦横センターリング*/
	justify-content: center; /*画像を縦横センターリング*/
	align-items: center; /*画像を縦横センターリング*/
	width: 60px; /*画像サイズ指定*/
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.tab_wrap .text {
    margin: 0 0 0 10px;
    padding: 0;
}

/*過去のトピックスはこちら*/
.tab_01 .kako {
	text-align: right;	
	margin-top: 8px; /*上の余白*/
}

/*トピックスエリア
---------------------------------------------------------------------------*/
/*トピックスエリア*/
.new {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 20px;	/*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
.new dt {
    width: 14em;	/*14emは下の.new ddのwidthの値*/
    display: flex;	/*flexボックスを使う指定*/
    justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
.new dt span {
	/*display: none;	小さな端末では非表示にしておく。*/
    display: inline-block;
    width: 6em;
    background: #999;
    color: #fff;
    font-size: 0.9em;
    text-align: center;
    border-radius: 3px;
    margin-right: 1.2em;
    align-self: flex-start;
    line-height: 1.5;		
    position: relative;top: 0.4em;	/*上下の配置バランスの微調整*/
}

/*リストのラベル（コンテナ）*/
.new dt span.icon-bg1 {
    background: #4c82ba;	/*背景色*/
}
/*リストのラベル（トピックス）*/
.new dt span.icon-bg2 {
    background: #6aaece;	/*背景色*/
}

/*記事(dd)設定*/
.new dd {
	/*width: calc(100% - 14em);	8emは上の.new dtのwidthの値*/
	width: 100%;
}


/*スライドショーslick
---------------------------------------------------------------------------*/
.mainimg {
	position: relative;
}

/*丸いページナビボタン全体を囲むエリア*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 10px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #fff;		/*背景色。白。*/	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
	background: #54adf1;	/*色*/
}




/*-------------------------------------------------------------------------*/
/*画面幅900px以上*/
/*-------------------------------------------------------------------------*/
@media screen and (min-width:900px) {

    /*トピックス-----------------------------------------------------------------*/
	
    /*日付(dt)、記事(dd)共通設定*/
    .new dt,
    .new dd {
        border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
        padding: 5px 0;					/*上下、左右へのボックス内の余白*/
    }    
	/*日付*/
    .new dt {
        width: 14em;	/*14emは下の.new ddのwidthの値*/
        display: flex;	/*flexボックスを使う指定*/
        justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
    }

    /*ラベル*/
    .new dt span {

    }

    /*記事*/
    .new dd {
        width: calc(100% - 14em);	/*14emは上の.new dtのwidthの値*/
    }
    .new dd figure {
        float: left;
		margin-right: 1em;
    }
    .new dd img {
        max-width: 200px;
    }
}

/*-------------------------------------------------------------------------*/
/*画面幅900px以下*/
/*-------------------------------------------------------------------------*/
@media screen and (max-width:900px) {
    
	dl {
        flex-flow: column;
    }
    .new dd {
        border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
        padding: 5px 0;					/*上下、左右へのボックス内の余白*/
		margin-bottom: 1em;
    } 
}