@charset "utf-8";
@charset "utf-8";

.section~.section {
    max-width: 1400px;
    margin-top: 40px;
}

.headline {
    margin-top: 50px;
    margin-bottom: 70px;
}

/* ==========================================
   コンテンツ全体を画面の中央（center）に寄せる設定
========================================== */
.contents {
    max-width: 1400px; 
    margin: 0 auto;   
    padding: 0 40px;   
}


.contents ul {
    padding-left: 20px;
    line-height: 1.8;  
}

/*---------------------------*/
/*ニュース*/
/*----------------------------*/
#news {
    background: url('../img/wave_single_b.svg') no-repeat center bottom;
    background-color: #fff;
    padding-bottom: 50px;
}
#news .container {
    max-width: 1680px;
    padding-top: 10px; /*調整*/
}

/*見出し*/
#news .read-headline {
    max-width: 1480px;
    margin-bottom: 60px;
    margin: 0 auto;       /* 左右の余白は、ブラウザで自動（auto）で均等*/
}
#news .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 100px;
    margin-bottom: 30px;
}
#news .links img {
    display: block;
    max-width: 60px;          /* 画像のサイズ */
    margin-right: 10px;         /* 画像の右側隙間 */
}
#news .links a {
    display: inline-block;
    /*16-22*/
    font-size: clamp(1rem, 0.925rem + 0.38vw, 1.375rem);
    line-height: 100%;
    background:url("../img/icon_arrow_b.png") no-repeat right center;
    background-size: 22px;
    padding: 1px 30px 1px 0;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}


/*ニュース一覧*/
.newslist {
    max-width: 1440px;
    margin: 0 auto;
}
.newslist dl {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    line-height: 140%;
    margin-left: 120px;
    padding: 15px 20px;
    background: url("../img/dot.png") repeat-x bottom center;
}
.newslist dt {
    width: 200px;
    display: inline-block;
    margin-right: 30px;
    cursor: auto;
    font-weight: bold;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.newslist dd {
    flex: 1;
    margin: 0;
    display: block;
}
.newslist dd a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
.newslist dd a:hover {
    text-decoration: underline;
}


/* ==========================================
   ニュースのカテゴリー（category）ごとの色設定（jsと一緒に動作）
========================================== */
/* 「最新情報」の色 */
.newslist .category.cat-info {
    display: inline-block;
    min-width: 90px;
    /*12-13*/
    font-size: clamp(0.75rem, 0.738rem + 0.06vw, 0.813rem);
    padding: 4px 5px;
    line-height: 100%;
    border-radius: 2px;

    text-align: center;
    margin: 0 20px;
    font-weight: bold;

    background-color: #e65a5a;
    color: #ffffff;
}

/* 「解説」の色 */
.newslist .category.cat-guide {
    display: inline-block;
    min-width: 90px;
    /*12-13*/
    font-size: clamp(0.75rem, 0.738rem + 0.06vw, 0.813rem);
    padding: 4px 5px;
    line-height: 100%;
    border-radius: 2px;

    text-align: center;
    margin: 0 20px;
    font-weight: bold;

    background-color: #5ab45a;
    color: #ffffff;
}

/* 「トピック」の色 */
.newslist .category.cat-topic {
    display: inline-block;
    min-width: 90px;
    /*12-13*/
    font-size: clamp(0.75rem, 0.738rem + 0.06vw, 0.813rem);
    padding: 4px 5px;
    line-height: 100%;
    border-radius: 2px;

    text-align: center;
    margin: 0 20px;
    font-weight: bold;
    background-color: #f39c12;
    color: #ffffff;
}

/* 「お知らせ」の色（ */
.newslist .category.cat-notice {
    display: inline-block;
    min-width: 90px;
    /*12-13*/
    font-size: clamp(0.75rem, 0.738rem + 0.06vw, 0.813rem);
    padding: 4px 5px;
    line-height: 100%;
    border-radius: 2px;

    text-align: center;
    margin: 0 20px;
    font-weight: bold;

    background-color: #7b8da3;
    color: #fff;
}
/*---------------------------------------------------*/
/*過去の一覧*/
.newslist #past {
    display: none;
}

/*もっと見る*/
.newslist .more {
    margin-top: 40px;
    text-align: right;
}
#morenews {
    display: inline-block;
    font-weight: 400;
    line-height: 100%;
    color:#fff;
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    padding: 7px 40px 7px 30px;
    cursor: pointer;

    /*12-16*/
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

/*＋-ボタン*/
#morenews.plus {
	background:url("../img/icon_plus_w.png") no-repeat 90% center;
	background-size: 18px;    
    background-color: #005aba;
}
#morenews.plus::after {
   content: "過去のニュース";
}
#morenews.plus:hover {
    transition: all .5s;
    background-color: #b1d558;
}
#morenews.plus-on {
	background:url("../img/icon_minus_w.png") no-repeat 90% center;
	background-size: 18px;
    background-color: #005aba;
}
#morenews.plus-on::after {
    content: "閉じる";
}
#morenews.plus-on:hover {
    transition: all .5s;
    background-color: #b1d558;
}
/* ==========================================
   「過去のニュースを見る」ボタンの設定
========================================== */
.newslist .more a {
  display: inline-block;            /* ボタンとしての形を作れるようにする設定 */
  background-color: #005aba;        /* 背景色（background-color）を青色に */
  color: #ffffff;                   /* 文字色（color）を白色に */
  text-decoration: none;            /* リンクの標準の下線を消す */
  padding: 8px 40px;               /* 上下・左右の余白（padding）でボタンの大きさを調整 */
  border-radius: 30px;              /* 角の丸み（border-radius）。数字が大きいほど丸く */
  font-weight: bold;                /* 文字を太字（bold）にして目立たせる */
  box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* ほんの少し影（box-shadow）をつけて立体的に */
  transition: all 0.3s ease;        /* ふわっとアニメーション（transition）させる準備 */
}

/* マウスが乗った時（hover：ホバー）の動き */
.newslist .more a:hover {
  background-color: #00428a;      /* 少し濃い青色に変化させます */
  transform: translateY(-2px);      /* 少しだけ上に浮くような動き */
  text-decoration: none;            /* 下線が出ないようにキープ */
}

/****************************/
/*レスポンシブ*/
/****************************/
@media screen and (max-width: 1279px) {
}

@media screen and (max-width: 979px) {
    /* タブレットくらいの画面：左の大きな余白を少し減らす */
    .newslist dl {
        margin-left: 40px; 
    }
}

@media screen and (max-width: 579px) {    
    /* スマホなどの小さな画面：左の余白（120px）をゼロにして、右寄りを解消 */
    .newslist dl {
        margin-left: 0;          /* 右寄りを直す */
        flex-direction: column;  /* 日付とタイトルを縦並び */
        padding: 15px 10px;      
    }
    
    /* 日付とカテゴリの幅固定（200px）も解除して、画面幅広げる */
    .newslist dt {
        width: 100%;             
        margin-right: 0;
        margin-bottom: 10px;     
    }
    
    /* カテゴリのラベル位置の微調整 */
    .newslist .category {
        margin-left: 15px; 
    }
}

@media screen and (max-width: 379px) {
}