@charset "UTF-8";

/* ================================================================
 main
=================================================================== */
#main{
    padding-bottom: 0;
}

#breadcrumbs{
    background-image: linear-gradient(90deg, #bdd8ec, #f5eff6);
}

a{
    color:#341516;
}

.articleMainInner{
    padding-bottom: 105px;
    border-bottom: 1px solid #ddd;
}

.articleBackground {
    position: relative;
    content: "";
    background-image: linear-gradient(90deg, #bdd8ec, #f5eff6);
    height: 345px;
    /* margin-top: -50px; */
    z-index: -1;
}

.articleWrap {
    width: 816px;
    margin: -245px auto 0;
}

.columnTag a {
    border: 1px solid #5A9BCC;
    font-weight: bold;
    font-size: 14px;
    padding: 2px 10px;
    text-decoration: none;
    color: #5A9BCC;
}

.articleWrap h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 36px;
    line-height: 56px;
    margin-bottom:25px;
}


/* アイキャッチ */

.eyecatch {
    text-align: center;
}

.articleWrap img {
    display: block;
    width: 816px;
}

.date_time {
    color: #757575;
    display: flex;
    justify-content: end;
    margin: 7px 0;
}

/* 日付・時間 */

.date_time>p {
    display: flex;
    align-items: center;
}

.date_time>p:first-child::before {
    content: '';
    margin: 0px 5px;
    background: url(../../img/column/date.png) no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.date_time>p:last-child span {
    font-weight: bold;
}

.date_time>p:last-child::before {
    content: '';
    margin: 0px 5px;
    background: url(../../img/column/readTime.png) no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* ================================================================
　　目次
=================================================================== */

.chapter {
    border: 1px solid #ddd;
    padding: 40px 40px 0;
    margin-top: 40px;
}

.chapter h2 {
    text-align: center;
    font-weight: bold;
    line-height: 1;
}

.chapter summary {
    display: inline-block;
    position: relative;
    left: 399px;
    top: -26px;
    text-decoration: underline;
}

.chapter summary:after {
    content: '[表示]';
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 2px;
    line-height: 1.1;
}

.chapter details {
    margin-bottom: 20px;
}

.chapter details[open] {
    margin-bottom: 40px;
}

.chapter details[open] summary:after {
    content: '[非表示]';
}

.chapter summary::-webkit-details-marker {
    display: none;
}

.chapter ol {
    counter-reset: my-counter;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.chapter ol li::before {
    content: counter(my-counter);
    counter-increment: my-counter;
    font-weight: bold;
    margin-right: 10px;
}

/* ================================================================
　　見出し
=================================================================== */

.articleWrap h2[id] {
    scroll-margin-top: 60px;
    /* スクロール時の上部の余白を60pxに設定 */
}

.ba_midashi02 {
    font-size: 32px;
    margin: 2em 0 1em;
    line-height: 1.5;
    border-bottom: 2px solid #5A9BCC;
    color: #341516;
    font-weight: bold;
    padding-bottom: 25px;
}

.ba_midashi03 {
    font-size: 20px;
    font-weight: bold;
    border-left: 4px solid #5A9BCC;
    padding-left: 14px;
    margin: 2em 0 1em;
}

.ba_midashi04 {
    border-bottom: 1px solid;
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    margin: 2em 0 1em;
}

/* ================================================================
　　コンポーネント：テキスト周り
=================================================================== */

.articleWrap p {
    font-size: 16px;
    line-height: 2;
    margin-top: 15px;
}

.articleWrap .boldDesign {
    font-weight: bold;
}

.articleWrap .makerDesign {
    background-image: linear-gradient(90deg, #bdd8ec, #f5eff6);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 40%;
    display: inline;
}

.articleWrap .textBlue {
    color: #2473B1;
}

.articleWrap .textRed {
    color: #C1271F;
}

.articleWrap .notes {
    font-size: 12px;
}

/* リストブロック */

.articleWrap ul {
    margin: 24px 0;
    line-height: 1.5;
}

.articleWrap ul li {
    list-style: disc;
    list-style-position: outside;
    margin: 0.5em 0 0.5em 22px;
}

.articleWrap ul li::marker {
    font-weight: bold;
}

.articleWrap .listBlock02 li {
    list-style: decimal;
    list-style-position: outside;
}

/* テキストリンク */

.articleWrap a[target="_blank"]::after {
    content: '';
    margin: 0px;
    background: url(../../img/column/icon_exlink.png) no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    top: 5px;
}

.articleWrap a[href$=".pdf"]::after {
    content: '';
    margin: 0px;
    background: url(../../img/column/icon_pdf.png) no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    top: 5px;
}

/* 区切り線 */

.articleWrap hr {
    margin: 50px 0;
}

/* 囲い線 */

.itemBox {
    border: 1px solid;
    padding: 20px;
}

/* アイキャッチ以外の画像 08.htmlで使用 */
.articleWrap .otherImg {
    text-align: center;
}
.articleWrap .otherImg img{
    display: inline-block;
    width: 60%;
}

/* ================================================================
　コンポーネント：表（テーブル）
=================================================================== */

.articleWrap table,
.articleWrap table th,
.articleWrap table td {
    border: 1px solid #DDDDDD;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.articleWrap table{
  width: 100%;
  margin-top: 15px;
}

.articleWrap table th {
    background: #F7F9FA;
    padding: 10px;
}

.articleWrap table .tableh {
    background: #F7F9FA;
    font-weight: bold;
    width: 20%;
}

.articleWrap .tableCaption {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 10px;
}

.articleWrap table ul{
    margin:0;
}

/* テーブルブロックスクロール */

.articleWrap .overTable {
    overflow-x: auto;
}

.articleWrap .overTable table {
    width: 816px;
}

.articleWrap .overTable th,
.articleWrap .overTable td {
    min-width: 123px;
}

.articleWrap .overTable .tableh {
    width: 163px;
    min-width: 163px;
    box-sizing: border-box;
}

.articleWrap h4:has(+table){
    margin: 40px 0 10px;
}

/* ================================================================
　ボタン
=================================================================== */

button {
    border: 0;
    background: none;
    margin: 20px 0;
}

.articleWrap button a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    background: #341516;
    border: none;
    border-radius: 40px;
    border: 2px solid transparent;
    box-sizing: border-box;
    min-width: 256px;
    min-height: 64px;
}

.articleWrap button a span{
    width: 200px;
}

.articleWrap button a:after {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    box-sizing: border-box;
    position: relative;
    left: 5px;
}

.articleWrap button a:hover{
    background: #fff;
    border: 2px solid #341516;
    box-sizing: border-box;
    position: relative;
    color: #341516;
}

.articleWrap button a:hover:after{
    border-color: #341516;
}

.articleWrap button a[target="_blank"]:after{
    background: url('../../img/column/icon_exlink_w.png') no-repeat;
    background-size: contain;
    position: relative;
    top:0;
    margin: 0;
    border: none;
    transform: none;
    width:20px;
    height: 20px;
}

.articleWrap button a[target="_blank"]:hover:after{
    background: url('../../img/column/icon_exlink.png') no-repeat;
    background-size: contain;
}

.articleWrap button a[href$=".pdf"]:after{
    background: url('../../img/column/icon_pdf_w.png') no-repeat;
    background-size: contain;
    position: relative;
    top:0;
    margin: 0;
    border: none;
    transform: none;
    width:20px;
    height: 20px;
}

.articleWrap button a[href$=".pdf"]:hover:after{
    background: url('../../img/column/icon_pdf.png') no-repeat;
    background-size: contain;
}

.articleWrap button.btnWhite a{
    background: #fff;
    border: 2px solid #341516;
    box-sizing: border-box;
    position: relative;
    color: #341516;
}

.articleWrap button.btnWhite a:after{
    border-color: #341516;
}

.articleWrap button.btnWhite a[target="_blank"]:after{
    background: url('../../img/column/icon_exlink.png') no-repeat;
    background-size: contain;
    position: relative;
    top:0;
    margin: 0;
    border: none;
    transform: none;
    width:20px;
    height: 20px;
}

.articleWrap button.btnWhite a[href$=".pdf"]:after{
    background: url('../../img/column/icon_pdf.png') no-repeat;
    background-size: contain;
    position: relative;
    top:0;
    margin: 0;
    border: none;
    transform: none;
    width:20px;
    height: 20px;
}

.articleWrap .centerBtn{
    text-align: center;
    margin-top: 20px;
}

.articleWrap button.btnWhite.w360 {
    width: 320px;
}

.articleWrap button.btnWhite.w360 a span{
    width: 244px;
}

/* ================================================================
　関連記事・注目記事
=================================================================== */

.articleListBox{
    width: 816px;
    margin: 0 auto;
    padding: 80px 0 90px;
}

.articleListBox h2{
    font-family: "Noto Serif JP", serif;
    font-size: 36px;
    text-align: center;
    margin-bottom: 50px;
}

.articleList{
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
}

.articleList a {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    text-decoration: none;
    background: #fff;
}

.articleList a .a_img img {
    width: 100%;
}

.articleList a .a_text {
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 149px;
}

.articleList .a_text.noCate {
    justify-content: flex-start;
    min-height: auto;
}

.articleList a .a_cate {
    color: #5A9BCC;
    font-size: 11px;
    font-weight: bold;
    margin: 10px 10px 0px 10px;
}

.articleList a .a_title {
    font-size: 14px;
    margin: 10px 10px 5px;
    min-height: 73px;
}

.articleList a .a_date {
    font-size: 12px;
    color: #757575;
    margin: 0 10px 10px;
}

.detailLink{
    text-align: center;
    margin: 40px 0;
}

.detailLink button a{
    background: #fff;
    border: 2px solid #341516;
    box-sizing: border-box;
    position: relative;
    color: #341516;
    font-weight: bold;
     display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 256px;
    border-radius: 40px;
    min-width: 200px;
    text-decoration: none;
}

.detailLink button a:after {
    content: '';
    position: relative;
    top: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid #341516;
    border-right: 2px solid #341516;
    transform: rotate(45deg);
    box-sizing: border-box;
    left: 40px;
}

.articleListContainer.focus{
    background-image: linear-gradient(90deg, #bdd8ec, #f5eff6);
}