/*

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_background {
    border-top: 5px solid darkviolet;
    border-bottom: 5px solid darkviolet;
    background-color: #FFEEFF;
}

article {
    background-color: #FFEEFF;
}


article img {
    width: 47.91%; /* 6 */
}

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

article p {
    font-size: 1.2em;
    margin: 0.5em 0;
    padding: 0 3% 0 3%;
    color: black;
    text-indent: 1em;
}

/* 著者一覧 */
div#member_list {
    font-size: 1.2em;
    color: black;
    width: 81.25%;
    margin: auto;
}

div#member_list img.member_icon {
    width: 14.58%; /* 2 */
    float: left;
    margin: 0.5% 0;
}



div#member_list .name {
    width: 56.25%; /* 7 */
    float: left;
    display: table;
    margin: 1.04%;
    padding: 0 2%;
}

div#member_list .name .text {
    border-bottom: 2px solid black;
    padding: 0 3%;
}

div#member_list .temple {
    width: 31.25%; /* 4 */
    margin: 1.04%;
    padding: 0 0 0 5%;
    float: left;
    display: table;
}

div#member_list .link {
    width: 14.58%; /* 2 */
    margin: 1.04%;
    float: left;
    display: table;
    border-radius: 1.0em;

    border: 3px solid #FF99FF;
    background-color: #FF99FF;
    color: black;
    text-align: center;
}

div#member_list .link:hover {
    border: 3px solid darkviolet;
    background-color: #FF66FF;
    color: white;
}

.member {
    margin: 2% 1.04%;
    border-top: 2px solid black;
}


/* 個々の寺院紹介 */
div.top_image {
    margin: auto;
    width: 55%;
    max-width: 1024px;
}

div.top_image img {
    width: 100%;
}


div#contents {
    line-height: 1.4;
    width: 97.91%; /* 12 */
    margin: 1.04%;
}

div#contents h1 {
    margin: 0;
    padding: 0.5% 1% 0.5% 1%;
    font-size: 2.2em;
    border: none;
}

div#contents h1 span#temple_name {
    border-bottom: 4px solid black;
    padding: 0 1% 0 1%;
}


div#contents h2 {
    font-size: 1.6em;
    padding: 0.5% 1% 0.5% 1%;
}

div#contents h2 span.text {
    border-bottom: 2px solid black;
    padding: 0.5%;
}

div#contents h3 {
    font-size: 1.2em;
    padding: 0.5% 1% 0.5% 1%;
}

div#contents p {
    font-size: 1.2em;
    padding: 0 2% 0 2%;
}

div#contents ul {
    padding: 0 2% 0 5%;
}

div#contents li {
    font-size: 1.2em;
}

div#contents div.map {
    width: 60%;
    margin: auto;
}

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

}


div.twitter, div.facebook, div.blog {
    float: left;
    width: 97.91%; /* 12 */
    margin: 1.04%;
    font-size: 2.4em;
    color: white;
    text-align: center;
}

div.twitter {
    background-color: dodgerblue;
}

div.facebook {
    background-color: royalblue;
}

div.blog {
    background-color: crimson;
}

@media screen and (max-width: 960px) {
    div.top_image {
	margin: auto;
	width: 80%;
    }

    div#contents div.map {
	width: 90%;
    }

    div#member_list {
	width: 97.91%; /* 12 */
    }

    div#member_list .name {
	width: 70%;
    }

    div#member_list .temple {
	width: 39.58%; /* 5 */
    }

    div#member_list .link {
	width: 31.25%; /* 4 */
    }

    .member, 
    div#member_list .name,
    div#member_list .name .text, 
    div#member_list .temple, 
    div#member_list .link {
	border-width: 1px;
    }

    div#member_list .name {
	border-left-width: 0.4em;
    }
}