@charset "utf-8";
/*---------------- based on 2024/12/03 */
/* > 1%, last 4 versions, Firefox ESR, not dead */
/*------------------------------------ */


/*------------------------------------- 
グリッドレイアウト
-------------------------------------*/
/* ページプロパティで「サイドナビを表示しない」に設定した場合 */
/* promos1は非表示にはならない */
body.col-subcol #nav-box ,
body.col-subcol #promos2 {
display: none;
}

/*------------------------------------- 
基礎設定
-------------------------------------*/
/* コンテンツエリア幅パラメータ */
html {
--mainarea-width-pc: 1170px;
--mainarea-width-sp: 500px;
--parts-common-margin-top: 30px;
}

body {
position: relative;
margin: 0 auto;
}

/*---------- デスクトップ用 ----------*/
@media print, screen and (min-width: 769px) {
body {
/* コンテンツエリア幅の最大を設定する場合 */
/*		max-width: 1600px; */
/* コンテンツエリア幅の最小を設定する場合 */
/*		min-width: calc(var(--mainarea-width--pc) + 40px); */
}


/*------------------------------------- 
グリットレイアウト
-------------------------------------*/
#html1 {
}

/*-- コンテンツエリア --*/
#wrapper-2 {
width: 100%;
}

#nav {
margin: 0;
}

#wrapper-3 {
float: none;
clear: both;
margin: auto;
}


/*-- コンテンツ下エリア --*/
#promos3 {
clear: both;
}


/*-- ローカルナビエリア --*/
#promos1 {
}

#nav {
}

#promos2 {
}


#page-intro {
}

/*------------------------------------- 
フッターエリア
-------------------------------------*/
/*-- セクションフッター --*/
#section-site-info {
}

#section-site-info-box {
}

/*-- フッター --*/
#site-info {
}

#site-info-box {
margin: auto;
}

p#copyright {
display: none;
}

/*------------------------------------- 
ヘッダエリア
-------------------------------------*/
/*-- 画像とテキストの場合のみ --*/
#branding ,
#logo ,
#nav-meta {
display: none;
}

/*-- 更新日表示 --*/
#pub-date {
max-width: var(--mainarea-width);
margin: auto;
}

#pub-date p {
text-align: right;
}

/*-- セクションヘッダー（総合トップ・スペシャル以外） --*/
#section-header {
display: none;
}




/*------------------------------------- 
ローカルナビをサイドに配置するレイアウト
※ ワイドモードはサイドナビと共存できない為、自動的にオフ。
-------------------------------------*/
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) #wrapper-2 {
max-width: calc(var(--mainarea-width) + 40px);
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}

[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) #nav {
clear: none;
	float: right;
margin: 0;
width: calc(24% - 20px);
max-width: calc(var(--mainarea-width) * 0.24 - 20px);
padding-top: 100px;
}

[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) #nav-box {
padding: 0;
}

[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) #wrapper-3 {
clear: none;
	float: left;
margin: 0;
padding-top: 60px;
width: 76%;
--mainarea-width: calc(var(--mainarea-width-pc) * 0.76);
max-width: var(--mainarea-width);
}

[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] .reuse-main-area ,
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] .reuse-component {
--mainarea-width: calc(var(--mainarea-width-pc) * 0.76);
}

[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) #page-intro {
max-width: none;
}

[data-page-marker~="layout-pc-nav-side"] body[id=wide] #page-intro ,
[data-page-marker~="layout-pc-nav-side"] body[id=index] #page-intro ,
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) #page-intro {
padding-left: 0;
padding-right: 0;
}

[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] > .multiColumn1 ,
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] > .multiColumn2 ,
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] > .multiColumn3 ,
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] > .multiColumn4 ,
[data-page-marker~="layout-pc-nav-side"] body:not(.col-subcol) [role="main"] > .multiColumn5 {
padding-left: 0;
padding-right: 0;
}

[data-page-marker~="layout-pc-nav-side"] [id=index]:not(.col-subcol) #wrapper-3 {
padding-left: 0;
padding-right: 0;
}
}



/*---------- スマホ用 ----------*/
@media screen and (max-width: 768px) {
/*------------------------------------- 
グリットレイアウト
-------------------------------------*/
#html1 {
}


#wrapper-2 {
}

/*-- コンテンツエリア --*/
#wrapper-3 {
width: 100%;
margin: auto;
}

#promos2 > .promos {
padding: 0 10px;
}

/* デフォルトはローカルナビ非表示 */
#nav-box ,
#promos2 {
display: none;
}

/*== 表示順を入れ替えて、ローカルナビをコンテンツエリアの下に設定 ==*/
[data-page-marker~="layout-sp-nav-bottom"] #wrapper-2 {
display: flex;
flex-direction: column;
}

[data-page-marker~="layout-sp-nav-bottom"] #wrapper-2 > * {
flex: 0 0 auto;
width: 100%;
}

[data-page-marker~="layout-sp-nav-bottom"] #nav {
order: 3;
}

[data-page-marker~="layout-sp-nav-bottom"] #wrapper-3 {
order: 1;
}

[data-page-marker~="layout-sp-nav-bottom"] #promos3 {
order: 2;
}

[data-page-marker~="layout-sp-nav-bottom"] #nav {
display: flex;
flex-direction: column;
}

[data-page-marker~="layout-sp-nav-bottom"] #nav > * {
flex: 0 0 auto;
}

[data-page-marker~="layout-sp-nav-bottom"] #promos1 {
order: 2;
}

[data-page-marker~="layout-sp-nav-bottom"] #nav-box {
order: 3;
}

[data-page-marker~="layout-sp-nav-bottom"] #promos2 {
order: 1;
}


/*------------------------------------- 
フッターエリア
-------------------------------------*/
/*-- セクションフッター --*/
#section-site-info {
}

#section-site-info-box {
}

/*-- フッター --*/
#site-info {
}

#site-info-box {
}

p#copyright {
display: none;
}



/*------------------------------------- 
ヘッダエリア
-------------------------------------*/
/*-- 画像とテキストの場合のみ --*/
#branding ,
#logo ,
#nav-meta {
display: none;
}

/*-- 更新日表示 --*/
#pub-date {
margin: auto;
}

#pub-date p {
text-align: right;
}

/*-- セクションヘッダー（総合トップ・スペシャル以外） --*/
#section-header {
display: none;
}
}

/*------------------------------------- 
カラムレイアウト
-------------------------------------*/
[role="main"] {
/*	overflow: hidden; */
}

/*-- リダイレクト --*/
.redirect {
margin-top: 30px;
}

@media print, screen and (min-width: 769px) {
[role="main"] > .redirect {
width: calc(100% - 40px);
max-width: var(--mainarea-width);
margin-left: auto;
margin-right: auto;
}
}

@media screen and (max-width: 768px) {
[role="main"] > .redirect {
width: calc(100% - 30px);
max-width: calc(var(--mainarea-width));
margin-left: auto;
margin-right: auto;
}
}


/*------------------------------------- 
body IDにindexを設定するとインデックスモード
body IDにwideを設定するとワイドモード
-------------------------------------*/

/*---------- ワイドモード ----------*/
@media print, screen and (min-width: 769px) {
body[id=wide] #wrapper-2 {
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: auto;
max-width: none;
}

body[id=wide] #wrapper-3 {
float: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: auto;
max-width: none;
}

/* ワイドモードはデフォルトでローカルナビ非表示 */
body[id=wide] #nav-box ,
body[id=wide] #promos2 {
display: none;
}

body[id=wide] #page-intro {
max-width: var(--mainarea-width);
margin-left: auto;
margin-right: auto;
}

body[id=wide] #site-info {
margin-top: 0;
}

}

@media screen and (max-width: 768px) {
body[id=wide] #wrapper-2 {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

body[id=wide] #wrapper-3 {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

body[id=wide] #site-info {
margin-top: 0;
}

/* ワイドモードはデフォルトでローカルナビ非表示 */
body[id=wide] #nav-box ,
body[id=wide] #promos2 {
display: none;
}

}


/*------------------------------------- 
特殊カラム設定
-------------------------------------*/

/*------------------------------------- 
その他の特殊設定
-------------------------------------*/


/*==== 素材ページ用設定 ====*/
/* 背景黒 素材ページ等で白いロゴを見える様にする */
body#bg-black {
background: #000;
}

/* メインエリア幅を２～５カラム幅に */
@media print, screen and (min-width: 769px) {
[data-page-marker~="index-col2pc"] #sharewithmain {
max-width: calc((var(--mainarea-width-pc) - 30px * 1) / 2 + 20px *2);
margin: auto;
}

[data-page-marker~="index-col3pc"] #sharewithmain {
max-width: calc((var(--mainarea-width-pc) - 30px * 2) / 3 + 20px *2);
margin: auto;
}

[data-page-marker~="index-col4pc"] #sharewithmain {
max-width: calc((var(--mainarea-width-pc) - 30px * 3) / 4 + 20px *2);
margin: auto;
}

[data-page-marker~="index-col5pc"] #sharewithmain {
max-width: calc((var(--mainarea-width-pc) - 30px * 4) / 5 + 20px *2);
margin: auto;
}
}

@media screen and (max-width: 768px) {
[data-page-marker~="index-col2sp"] #sharewithmain {
max-width: calc((var(--mainarea-width-sp) - 30px * 1) / 2 + 15px *2);
margin: auto;
}

[data-page-marker~="index-col3sp"] #sharewithmain {
max-width: calc((var(--mainarea-width-sp) - 30px * 2) / 3 + 15px *2);
margin: auto;
}
}



/* -- 印刷用 -- */
@media print {
html {
zoom: 0.7;
width: calc(var(--mainarea-width-pc) + 40px);
--vw: calc((var(--mainarea-width-pc) + 40px) / 100);
margin: 0 auto;
}
}