/*----------------------------------------------------
	caption illust
----------------------------------------------------*/

/* キャプションイラスト内部に関するもの */

div.caption_illust_container div.caption_illst_src {
    height: 0px;
}
div.caption_illust_container div.caption_illst_src > div.img {
    display: block;
}
div.caption_illust_container {
    position: relative;
    margin-left: 0px;
}
div.caption_illust_container div.caption_texts {
    position: relative;
}
div.caption_illust_container p img/*.img-inline*/ {
    display: inline;
    padding: 0 1.5px;
}
div.caption_illust_container div.caption_text {
    position: absolute;
    text-align: left;
}
div.caption_illust_container div.caption_text.center {
    text-align: center;
}
div.caption_illust_container div.caption_text.right {
    text-align: right;
}
#main div.caption_illust_container div.caption_text.right * {
    margin: 0 0 0 auto;
}
#main div.caption_illust_container div.caption_text > *
, .second #contents #main .article div.caption_text > * {
    line-height: inherit;
    height: inherit;
    width: inherit;
    display: table-cell;    /* 子要素の vertical-align を有効にするため */
}
#main div.caption_illust_container div.bold {
    font-weight: bold;
}
#main div.caption_illust_container div.underlined {
    text-decoration: underline;
}
#main div.caption_illust_container div.italic {
    font-style: italic;
}
#main div.caption_illust_container div.v_top > * {
    vertical-align: top;
}
#main div.caption_illust_container div.v_center > * {
    vertical-align: middle;
}
#main div.caption_illust_container div.v_bottom > * {
    vertical-align: bottom;
}
#main div.caption_illust_container * {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
}
#main div.caption_illust_container img.self_cap
, #main div.caption_illust_container div.img
, #main div.caption_illust_container div.caption_text * {
    margin: 0px;
}

/* 高さの異なるイラストが並んだ場合に上端揃えするため */ 

div.figures > div.caption_illust_container {
    vertical-align: top;
}
/*----------------------------------------------------
 キャプションイラスト外部 (他要素との位置関係) に関するもの
----------------------------------------------------*/

div.caption_illust_container.caption_illust_float_right {
    float: right;
    clear: right;
}
article aside.important
, article aside.note { /* 直前に float:right のキャプションイラストがある場合に被ってしまう件への対応。 */
    clear: both;
}

/* 処理中にスクロールバーが表示される結果、素材イラストサイズがスクロールバー幅分小さくなることを防ぐ
----------------------------------------------------------------------------------------------------*/

div#contents {
    overflow: visible;
}


/* column group の要素である場合
     　chrome は css column 内で position:absolute を利用すると bug 発生
       -ms-xxx は ie11 及び old edge 対応
----------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 769px) {
    div.multi-column-caption {
        display:grid;
		column-gap:30px;
		grid-template-columns: repeat(2, 1fr);
        /*grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));*/
    }
    div.multi-column-caption.col-len-3 {
		grid-template-columns: repeat(3, 1fr);
    }
    div.multi-column-caption.col-len-4 {
		grid-template-columns: repeat(4, 1fr);
    }
}

/* ie11
div.multi-column-caption {
    display:-ms-grid; }
div.multi-column-caption.col-len1 { -ms-grid-columns: (minmax(0, 1fr))[1]; }
div.multi-column-caption.col-len2 { -ms-grid-columns: (minmax(0, 1fr))[2]; }
div.multi-column-caption.col-len3 { -ms-grid-columns: (minmax(0, 1fr))[3]; }
div.multi-column-caption.col-len4 { -ms-grid-columns: (minmax(0, 1fr))[4]; }
div.multi-column-caption.col-len5 { -ms-grid-columns: (minmax(0, 1fr))[5]; }
div.multi-column-caption.col-len-1 { -ms-grid-columns: (minmax(0, 1fr))[1]; }
div.multi-column-caption.col-len-2 { -ms-grid-columns: (minmax(0, 1fr))[2]; }
div.multi-column-caption.col-len-3 { -ms-grid-columns: (minmax(0, 1fr))[3]; }
div.multi-column-caption.col-len-4 { -ms-grid-columns: (minmax(0, 1fr))[4]; }
div.multi-column-caption.col-len-5 { -ms-grid-columns: (minmax(0, 1fr))[5]; }

div.multi-column-caption > div:nth-child(1) { -ms-grid-column:1; }
div.multi-column-caption > div:nth-child(2) { -ms-grid-column:2; }
div.multi-column-caption > div:nth-child(3) { -ms-grid-column:3; }
div.multi-column-caption > div:nth-child(4) { -ms-grid-column:4; }
div.multi-column-caption > div:nth-child(5) { -ms-grid-column:5; }
*/
/* 互換性担保 (現在は multi-column-caption 推奨) */
/*
.multi-column > div:nth-child(1) { -ms-grid-column:1; }
.multi-column > div:nth-child(2) { -ms-grid-column:2; }
.multi-column > div:nth-child(3) { -ms-grid-column:3; }
.multi-column > div:nth-child(4) { -ms-grid-column:4; }
.multi-column > div:nth-child(5) { -ms-grid-column:5; }
*/

/*----------------------------------------------------
    arabic
----------------------------------------------------*/
/* itrex で左右端に余裕のないレイアウトをした場合に見切れる件への対応 */
/* html[dir="rtl"] #main div.caption_illust_container { 
    margin-left: 5px;
    margin-right: 5px;
}

html[dir="rtl"] #main div.caption_illust_container *:not(.center .left) {
    text-align: left;
}*/

/*----------------------------------------------------
----------------------------------------------------*/