@charset "UTF-8";

/* ------------------------------- */
/* ------------------------------- */
/* 解説ページ共通定義              */
/* ------------------------------- */
/* ------------------------------- */
body {
	width: 1200px;
	/* background-color: papayawhip; */
        background-color: #fffdeb;
	
	display: grid;
	grid-template-columns: 80px auto 80px;
	row-gap: 20px;
	
	font-family: Inter, "Noto Sans JP", sans-serif;
	
}


/* リンク部（閉じる） */
div.close_section{
	grid-column: 2 / 3;
}

/* リンク部（トップ画面へ） */
div.top_jump_section{
	grid-column: 2 / 3;
}


/* 解説部 */
div.explanation_box{
	grid-column: 2 / 3;
}

/* 引用資料一覧部 */
div.reference_list{
	grid-column: 2 / 3;
}

/* フッター部 */
footer {
	grid-column: 2 / 3;
}

/* ------------------------------- */
/* リンク部 （閉じる）             */
/* ------------------------------- */
div.close_section{
       display: grid;
       grid-template-columns: auto 120px auto;
       grid-template-rows: 50px;
}

div.close_button{
       grid-column: 2 / 3;
       background-color: #ccffff;
       text-align: center;
       border: solid 1px;
}

div.close_button input{
       font-size: 28px;
       font-weight: bold;
       padding-top: 5px;
}

/* ------------------------------- */
/* リンク部 （トップ画面へ）       */
/* ------------------------------- */

div.top_jump_section{
       display: grid;
       grid-template-columns: auto 200px auto;
       grid-template-rows: 50px;
}

div.top_jump_button{
       grid-column: 2 / 3;
       background-color: #ccffff;
       text-align: center;
       border: solid 1px;
}

div.top_jump_button input{
       font-size: 28px;
       font-weight: bold;
       padding-top: 5px;
}


/* ------------------------------- */
/* ------------------------------- */
/* 解説部                          */
/* ------------------------------- */
/* ------------------------------- */
div.explanation_box{
       display: grid;
       grid-template-columns: 35px auto 35px;

}
div.explanation{
	grid-column: 2 / 3;
	background: #ffffff;
}

/* ------------------------------- */
/* 解説部 - 目次                   */
/* ------------------------------- */

div.explanation div.exp_mokuji {
       margin: 2px 50px 30px 50px;
       border: solid 1px;
}


div.explanation div.exp_mokuji ul{
}


div.explanation div.exp_mokuji li.under_space{
        margin: 0 0 0px 0;
        font-size: 32px;
}

div.explanation div.exp_mokuji li.under_space_continued{
        margin: 20px 0 0px 0;
        font-size: 32px;
}

div.explanation div.exp_mokuji li.under_space_indent01{
        margin: 10px 0 0px 43px;
        font-size: 30px;
}

div.explanation div.exp_mokuji li.under_space_indent01_last{
        margin: 10px 0 20px 43px;
        font-size: 30px;
}

div.explanation div.exp_mokuji li.under_space_indent02{
        margin: 0 0 0px 130px;
        font-size: 30px;
}

div.explanation div.exp_mokuji li.under_space_indent02_last{
        margin: 0 0 12px 130px;
        font-size: 30px;
}

div.explanation div.exp_mokuji h2{
       margin: 0 0 0 50px;
       font-size: 32px;
       font-weight: normal;
       font-style:  italic;
}

/* ------------------------------- */
/* 解説部 - 画像とキャプション     */
/* ------------------------------- */
div.explanation div.photo_area_left30_border img{
	margin: 5px 5px 0px 30px;
	border: solid 1px;
}

div.explanation div.photo_caption_left30 p{
	font-size: 20px;
	margin: 0 0 20px 30px;
}


/*  */
div.explanation div.photo_area_left50_border img{
	margin: 5px 5px 0px 50px;
	border: solid 1px;
}

div.explanation div.photo_caption_left50 p{
	font-size: 20px;
	margin: 0 0 20px 50px;
}


/*  */
div.explanation div.photo_area_left80_border img{
	margin: 5px 5px 0px 80px;
	border: solid 1px;
}

div.explanation div.photo_caption_left80 p{
	font-size: 20px;
	margin: 0 0 20px 80px;
}

/*  */
div.explanation div.photo_area_left100_border img{
	margin: 5px 5px 0px 100px;
	border: solid 1px;
}

div.explanation div.photo_caption_left100 p{
	font-size: 20px;
	margin: 0 0 20px 100px;
}

/*  */
div.explanation div.photo_area_left150_border img{
	margin: 5px 5px 0px 150px;
	border: solid 1px;
}

div.explanation div.photo_caption_left150 p{
	font-size: 20px;
	margin: 0 0 20px 150px;
}


/* ------------------------------- */
/* 解説部 - 文章・章立て           */
/* ------------------------------- */
div.explanation h1{
	font-size: 46px;
	font-weight: 700;
	
	line-height: 2em;
	text-align: center;
	margin: 0 0 6px 0;
}

div.explanation h2{
	font-size: 38px;
	font-weight: 700;
	
	line-height: 2em;
	margin: 0 0 6px 0;
}

div.explanation h3{
	font-size: 32px;
	font-weight: 600;
	
	line-height: 2em;
	margin: 0 0 6px 0;

}

div.explanation h4{
	font-size: 30px;
	font-weight: 600;
	
	line-height: 2em;
	margin: 0 0 6px 0;

}




div.explanation p{
	font-size: 28px;
	line-height: 1.5em;
	margin: 0 35px 15px 50px;
}


/* ------------------------------- */
/* 解説部 - 文章中のリンク         */
/* ------------------------------- */

/* [目次へ戻る]であれば */
div.explanation p.jump_to{
	font-size: 28px;
	line-height: 1.5em;
	margin: 0 35px -10px 10px;
}

div.explanation p a{
	text-decoration: underline blue;
	color: blue;
}

div.explanation ul a{
	text-decoration: underline blue;
	color: blue;
}

/* ------------------------------- */
/* 解説部 - 一覧                   */
/* ※標準の一覧（ul）定義          */
/*   クラス定義適用が望ましい？    */
/* ------------------------------- */
div.explanation ul{
	font-size: 26px;
        list-style-type: none;
	margin: 0 35px 15px 98px;
}

/* ------------------------------- */
/* 解説部 -                    */
/* ------------------------------- */



/* ------------------------------- */
/* 説明文中の引用資料インデックス  */
/* ------------------------------- */
span.quote_index{
	font-size: 86%;
	/* font-weight: bold; */
}

/* ------------------------------- */
/* 引用資料一覧                    */
/* ------------------------------- */

div.reference_list{
       display: grid;
       grid-template-columns: 50px auto 50px;

}

div.reference_list_box{
	grid-column: 2 / 3;
}

div.reference_list_box p{
	font-size: 24px;
}

div.reference_list_box ul{
        list-style-type: none;
        padding: 0 0 0 20px;
        
        font-size: 24px;
}

/* ------------------------------- */
/* ------------------------------- */
/* フッター部                      */
/* ------------------------------- */
/* ------------------------------- */
footer{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 50px;
	background: #6666ff;
	
	font-size: 18px;
	color: #ffffff;
	padding: 5px 15px 0 0;
	text-align: right;
	
	
}