/*

Fluid Grid
全体 960px, 1カラム 60px, 隙間 20px(10px x 2)
    margin  10px   1.04%
   1カラム  60px   6.25%
   2カラム 140px  14.58%
   3カラム 220px  22.91%
   4カラム 300px  31.25%
   5カラム 380px  39.58%
   6カラム 460px  47.91%
   7カラム 540px  56.25%
   8カラム 620px  64.58%
   9カラム 700px  72.91%
  10カラム 780px  81.25%
  11カラム 860px  89.58%
  12カラム 940px  97.91%
 */

article h1 {
    margin: 0;
    padding: 0.2em 3% 0.2em 3%;
    font-size: 2.0em;
    //border-left: 1em solid blue;
    border-bottom: 3px solid black;
}

article p {
    font-size: 1.0em;
    margin: 0.8em 0 ;/* 上下 左右 */
    padding: 0 3% 0 3%;/* 上右下左 */
    color: black;
    text-indent: 1em;
}

article p div.big_text {
    font-size: 1.4em;
    margin: 0.5em 0 ;/* 上下 左右 */
    padding: 0 3% 0 3%;/* 上右下左 */
    color: black;
    text-indent: 1em;
}

div#article_list h1 {
    border-bottom: 3px solid black;
}

div#article_list h2 {
    margin: 0.8em 1%; /* 上下 左右 */
    padding: 0 2% ;
    font-size: 1.6em;
    text-align:left;
    border: 3px solid;
}

div#article_list div.index {
    margin: 0.8em 1%; /* 上下 左右 */
    padding: 0 2% ;
    font-size: 1.2em;
    text-align:left;
}

div#contents h1 {
    margin: 0;
    padding: 0.2em 3% 0.2em 3%;
    font-size: 2.0em;
}

div#contents div.yomi {
    //border-left: 2.0em solid;
    //border-top: 3px solid blue;
    margin: 0;
    padding: 0 3% 0 3%;
    font-size: 1.0em;
}

div#contents div#title_etc {
    border: 3px solid;
    padding: 0 1.04% 1.04% 1.04%;
    margin: 0 1.04%;
}

div#contents span.title {
    border-bottom: 3px solid;
    margin: 0;
    padding: 0 1.04% 1.04% 1.04%;
    line-height: 2.0em;
}

div.author_and_last_updated {
    text-align: right;
    padding: 1.04%;
    font-size: 1.2em;
}

div#contents h2 {
    margin: 1em 1%; /* 上下 左右 */
    padding: 0.2em 3% 0.2em 3%;/* 上右下左 */
    font-size: 1.6em;
    text-align:left;
}


div#contents h3 {
    margin: 0 1%; /* 上下 左右 */
    padding: 2% 3% 0% 3%;
    text-align:left;
    border-bottom: 3px solid;
    
    /*
    width: 50%;
    border-left: 8px solid limegreen;
    border-bottom: 2px dotted limegreen;
    border-top: 2px dotted limegreen;
      */
    
    font-size: 1.6em;
}

div#contents h4 {
    margin: 0 1%;
    padding: 2% 3% 0% 3%;
    font-size: 1.4em;
}

div#contents h5 {
    font-weight: normal;
    font-size: 1.2em;
    margin: 0;
    padding: 2% 3% 0% 3%;
}

div#contents h6 {
    font-weight: bold;
    font-size: 1.0em;
    margin: 0;
    padding: 0% 3% 0% 3%;
    text-decoration-line: underline;
}

div#contents blockquote {
    border: 4px solid;
    border-left: 16px solid;
    padding: 0;

}

div#contents blockquote p {
    line-height: 2.0em;
    text-indent: 0;
}

div#contents blockquote p.indent {
    line-height: 2.0em;
    text-indent: 1em;
    margin-left: 3em;
}

div#contents cite {
    font-size: 0.9em;
    font-weight: bold;
    display: block;
    text-align: right;
}

div#contents div.right {
    display: block;
    text-align: right;
    padding: 0% 3% 0% 3%;
}

div#contents dl {
    border: 1px dotted black;
    margin: 0% 3% 0% 3%;
    padding: 3% 0% 3% 0%;
}

div#contents div.note dl {
    border: 1px dotted black;
    margin: 0% 3% 0% 3%;
    padding: 3% 0% 3% 0%;
}

div#contents div.not_note dl {
    border: none;
    margin: 0% 3% 0% 3%;
    padding: 3% 0% 3% 0%;
}

div#contents dt {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration-line: underline;
    text-decoration: underline;
    margin: 0;
    padding: 0% 3% 0% 3%;
}

div#contents dd {
    font-size: 0.9em;
    margin: 0;
    padding: 0% 6% 0% 6%;
    line-height: 2.4em;
}

div#contents ul, div#contents ol {
    margin: 1em 4em;
    padding: 0;
    font-size: 1.0em;
}

div#contents div.kansuuji ol {
    list-style-type: cjk-ideographic;
}

div#contents ul ul , div#contents ol ol {
    margin: 0 2em;
    font-size: 1.0em;
}

div#contents ul ul ul, div#contents ol ol ol {
    margin: 0 2em;
    font-size: 1.0em;
}

div#contents table.kikyoushiki {
    border: none;
    margin: 0 2%;
}

div#contents table.kikyoushiki tr {
    border: none;
}

div#contents table.kikyoushiki td {
    border: none;
    padding: 0 10px;
}

div#contents table.kikyoushiki td.nowrap {
    white-space:nowrap;
}



div#contents rt {
    font-size: 0.5em;
}

div#contents form {
    margin: 0.5em 0 ;/* 上下 左右 */
    padding: 0 3% 0 3%;/* 上右下左 */
}

div#contents form select ,div#contents form button {
    font-size: 1.2em;
}

div#contents div.youtube {
    width: 80%;
    margin: auto;
}

div#contents div.youtube iframe {
    height: 400px;
    width: 100%;
}


span.emphasis {
    color: red;
    font-weight: bold;
}

span.mark_yellow {
    background: linear-gradient(transparent 0%, lightgoldenrodyellow 0%);
}

span.mark_red {
    background: linear-gradient(transparent 0%, lightsalmon 0%);
}

span.mark_blue {
    background: linear-gradient(transparent 0%, cornflowerblue 0%);
}

span.mark_green {
    background: linear-gradient(transparent 0%, darkseagreen 0%);
}


/* index (list) ページ用のソートボタンの装飾 */
button.sort_button {
    font-size: 1.4em;
    border-style: solid;
    border-width: 3px;
    border-radius: 3em;
    width: 22.91%; /* 3 */
    padding: 30px 1.04%;
    margin: 1.04%;
    float: right;
}

button.sort_button:hover {
    cursor: pointer;
}


/* table */
div#contents table {
    font-size: 1.1em;
    color: black;
    
    border-collapse: collapse;
    margin: 3% 0 0 4%; /* 上右下左 */
    border: 4px solid black;
    
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

div#contents td {
    padding: 16px 10px 10px 10px;
    border: 1px solid black;
}

div#contents th {
    padding: 6px 10px 6px 10px;
    text-align: center;
}


div#contents td.noborder_r {
    border-right: none;
}

div#contents td.noborder_l {
    border-left: none;
}

/* bibliography */
div#contents div.bibliography {
    line-height: 2.0em;
    font-size: 1.0em;
    padding: 0 2%;
    color: black;
}



/* side_contents */
div#side_contents h2 {
    margin: 0 1% 1em 1%; /* 上下 左右 */
    padding: 0.2em 3% 0.2em 3%;/* 上右下左 */
    font-size: 1.4em;
    text-align:left;
}



div#side_contents div.table_like {
    width: 97.91%;
    padding: 2.08% 1.04%;
    float: left;
    display: table;
    font-size: 0.9em;
    line-height: 2.4em;
}

/*
  関連記事は、仏教知識・コラムともに現れる可能性があるので
  共通部分である article.css にタイトルの色まで書いておく。
 */

div#side_contents div.table_like .title .knowledge{
    text-align: left;
    padding: 0% 5%;
    font-size: 1.3em;
    border-radius: 0.4em;

    border: 3px solid skyblue;
    background-color: skyblue;
    color: black;
}

div#side_contents div.table_like .title .knowledge:hover {
    border: 3px solid blue;
    background-color: deepskyblue;
    color: white;
}

div#side_contents div.table_like .title .column {
    text-align: left;
    padding: 0% 5%;
    font-size: 1.3em;
    border-radius: 0.4em;

    border: 3px solid lightgreen;
    background-color: lightgreen;
    color: black;
}

div#side_contents div.table_like .title .column:hover {
    border: 3px solid green;
    background-color: limegreen;
    color: white;
}

div#side_contents .description {
    padding: 1.04% 1.04% 1.04% 8%;
    font-size: 0.8em;
    line-height: 1.6em;
}


/*
  検索結果を表示するときに使う。
  knowledge, column ともにここに書く。
 */

div#search div.inside_border, div#search_result div.inside_border {
    border: 1px solid black;
    padding-bottom: 2.2em;
}

div#search h2, div#search_result h2 {
    margin: 0;
    padding: 0.1em 3% 0.1em 3%;
    font-size: 2.0em;
}

div#search p , div#search_result p {
    margin: 0.2em 0;
}

div#search #keyword_input {
    margin: 0.1em 0% 0.1em 3%;
    width: 50%;
    height: 2.0em;
    font-size: 1.6em;
}

div#search #submit_button {
    margin: 0.1em 0%;
    width: 20%;
    height: 2.1em;
    font-size: 1.6em;
}

div#search li {
    margin: 0 0 0 2%;
}

div#search_result div.table_like .title .knowledge,
div#search_result div.table_like .title .column {
    width: 31.25%; /* 4 */ /* ブラウザの横幅を縮めたときは大きくする */
    margin: 1.04% 3%;
    float: left;
    display: table;
    border-radius: 0.4em;
    
    text-align: center;
    font-size: 1.3em;
    color: black;
}

div#search_result div.table_like .title .knowledge {
    border: 3px solid skyblue;
    background-color: skyblue;
}

div#search_result div.table_like .title .knowledge:hover {
    border: 3px solid blue;
    background-color: deepskyblue;
    color: white;
}

div#search_result div.table_like .title .column {
    border: 3px solid lightgreen;
    background-color: lightgreen;
}

div#search_result div.table_like .title .column:hover {
    border: 3px solid green;
    background-color: limegreen;
    color: white;
}

div#search_result .part_of_contents {
    padding: 0% 1.04% 0% 4%;
    font-size: 1.1em;
}

div#search_result span.highlight {
    background-color: khaki;
}



@media screen and (max-width: 960px) {
    button.sort_button {
	font-size: 1.2em;
	border-width: 2px;
	border-radius: 2em;
	width: 22.91%; /* 3 */
	padding: 20px 1.04%;
	margin: 1.04%;
	float: right;
    }

    div#article_list .article .inside_border, 
    div#article_list .article .inside_border:hover {
	border-width: 1px;
    }
    
    div#article_list .article .title {
	font-size: 1.0em;
    }

    div#article_list .article .yomi,
    div#article_list .article .author,
    div#article_list .article .last_updated {
	font-size: 0.6em;
    }

    div#contents div.youtube iframe {
	height: 240px;
    }

    div#search_result div.table_like .title .knowledge,
    div#search_result div.table_like .title .column {
    width: 47.91%; /* 6 */ /* ブラウザの横幅を縮めたときは大きくする */
    }

}