@charset "utf-8";
/*---------------- based on 2025/03/04 */
/* > 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: left;
		margin: 0;
		width: calc(24% - 20px);
		max-width: calc(var(--mainarea-width) * 0.24 - 20px);
		padding-top: 80px;
	}

	[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: right;
		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;
	}
}