@charset "UTF-8";

/*画像stage js*/
.archive_journal .ph_stage{
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

body.news .archive_journal{
position: relative;
width: 100%;
isolation: isolate;
}


body.news .journal_list {
width: 100%;
margin: 0;
padding: 0;
}


body.news h1.journal_page_title{
width: calc( 100% - 25px );
margin: 0 10px 0 15px;
padding: 50px 0 30px 0;
}

body.news h1.journal_page_title span {
font-size: 10px;
line-height: 1.0;
background-color: black;
color: white;
padding: 0 2px 0 2px;
}









body.news ul.journal_list_index {
width: 100%;
margin: 0 0 50px 0;
padding: 0;
}



body.news ul.journal_list_index li.journal_item {
position: relative;
width: 100%;

margin: 0 0 15px 0;
padding: 0;

display: flex;
justify-content: space-between;
align-items: flex-end;

line-height: 1.1;
color: #fff;
}


/*2列*/
body.news .journal_niretu{
width: calc( 100% - 25px );
margin: 0 10px 0 15px;
padding: 0;

display: flex;
justify-content: space-between;
align-items: flex-end;
}



body.news a.journal_link_index {
position: absolute;
inset: 0;
z-index: 1;
}




/* 左: 数字 + 英語タイトル + 日本語タイトル */
body.news .journal_num {
display: inline-block;
}


body.news .journal_title_en{
display: inline-block;

font-size: 13px;
line-height: 1.3;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}

body.news .journal_title_en02{
display: block;

font-size: 11px;
line-height: 1.3;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}



body.news .journal_title_jp {
display: block;

/* Noto Sans - Google */
font-family: YakuHanJPs, 'Noto Sans JP',　sans-serif;
font-weight: 800;
font-optical-sizing: auto;
font-style: normal;

font-size: 11px;
line-height: 1.0;
font-feature-settings: normal;
letter-spacing: 0.0em;
}


/* センター */
body.news .journal_center {
visibility: hidden;
display: none;
}

/* 右: 日付 */
body.news .journal_right {
position: relative;
top: 1px;
flex-shrink: 0;
margin: 0 0 0 0;
}


body.news .journal_date_index {
white-space: nowrap;

font-size: 11px;
line-height: 1.0;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}




/*画像ドラッグ用指示タグ*/
body.news .ph-source{
width: 100%;
margin: 0;
padding: 0;
}





/* PC
------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {




body.news .journal_list {
width: 100%;
margin: 0;
padding: 0;

}



body.news h1.journal_page_title{
visibility: hidden;
display: none;

padding: 60px 0 40px 0;
margin: 0;

font-size: 16px;
line-height: 1.0;
color: #fff;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
mix-blend-mode: difference;
}

body.news h1.journal_page_title span {
position: relative;
display: block;
width: calc( 100% - 40px );
margin: 0 auto;
}



body.news ul.journal_list_index {
position: relative;
width: 100%;
margin: 80px 0 0 0;
padding: 0 0 0 0;
mix-blend-mode: difference;
}



body.news ul.journal_list_index li.journal_item {
position: relative;
width: 100%;
height: auto;
margin: 0 0 0 0;
padding: 0 0 20px 0;
color: #fff;
border: none;
}



/* 2. 下線：liの「内側」に100%の幅で線を引く */
body.news ul.journal_list_index li.journal_item::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: 20px;/* ★ここがポイント：paddingの20px分だけ上に引き上げることで、文字のすぐ下になります */
border-bottom: 1px solid transparent;
transition: border-color .3s;
}

/* 3. ホバー時：liがホバーされたら、先ほどの100%の線を黄色にする */
body.news ul.journal_list_index li.journal_item:hover::after {
border-bottom: 1px solid yellow;
}

/*2列*/
body.news .journal_niretu{
width: calc( 100% - 40px );
margin: 0 auto;
padding: 0;

display: flex;
justify-content: space-between;
align-items: flex-end;
}




/*リンクエリア*/
body.news a.journal_link_index {
position: absolute;
inset: 0;
z-index: 1;
}


/* 左: 数字 + 英語タイトル + 日本語タイトル */
body.news .journal_left {
position: relative;
flex-shrink: 0;
flex: 1;
}

body.news .journal_num {
display: inline-block;
}


body.news .journal_title_en{
display: inline-block;

font-size: 15px;
line-height: 1.3;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}


body.news .journal_title_en02{
display: block;

font-size: 11px;
line-height: 1.0;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}


body.news .journal_title_jp {
display: block;

font-size: 10px;
font-feature-settings: normal;
letter-spacing: 0.0em;
}


/*中央　キャッチコピー*/
body.news .journal_center {
visibility: visible;
display: block;

flex-shrink: 0;
margin-left: 0;
text-align: left;
flex: 1;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}


/* 右: 日付 */
body.news .journal_right {
flex-shrink: 0;
margin: 0 0 0 20px;
width: 150px;
font-size: 11px;
text-align: right;
}


body.news .journal_date_index {
display: block;

white-space: nowrap;
font-size: 11px;
line-height: 1;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}






/*画像ドラッグ用指示タグ*/
body.news .ph-source{
width: 100%;
margin: 0;
padding: 0;
}



/*画面サイズ ruler.css上書き*/
body.news .size_badge{
position: fixed;
z-index: 5;
top: 35px;
right: 10px;
bottom: auto;

font-size: 10px;
color :#fff;
user-select: none;
pointer-events: none;
mix-blend-mode: difference;
}





}/*PC終了*/