/*ドラマを楽しむための「車いすラグビー」基礎知識*/
.knowledge #contentsArea .contentsBlock { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08); margin: 0 auto;}
.unit{ padding:0 0 0em; text-align: center; position: relative;
}


.knowledge article {margin: 0 auto;}
.knowledge article h2 {background-color: #E3007E; color: #fff; font-weight: 700; line-height: 1.6em;}
.knowledge article h3 {padding-bottom: 0.5em;}

article .txt, p.notes:last-of-type{padding-bottom: 0.8em;}
.notes {padding-left:1em; text-indent:-1em; line-height: 1.5em; text-align: left; }

.phArea { position: relative; margin: 0 auto;}
#knowledge2 .phArea .ph_cut span {padding-top: -webkit-calc(200 / 200 * 100%); padding-top: calc(200 / 200 * 100%);}
#knowledge3 .paragraph .phArea .ph_cut span {padding-top: -webkit-calc(300 / 740 * 100%); padding-top: calc(300 / 740 * 100%);}
#knowledge3 .column .phArea .ph_cut span {padding-top: -webkit-calc(250 / 200 * 100%); padding-top: calc(250 / 200 * 100%);}
#knowledge4 .paragraph .phArea .ph_cut span {padding-top: -webkit-calc(195 / 800 * 100%); padding-top: calc(195 / 800 * 100%);}
#knowledge4 .column .phArea .ph_cut span {padding-top: -webkit-calc(280 / 200 * 100%); padding-top: calc(280 / 200 * 100%);}
#knowledge5 .phArea .ph_cut span {padding-top: -webkit-calc(150 / 820 * 100%); padding-top: calc(150 / 820 * 100%);}
#knowledge6 .phArea .ph_cut span {padding-top: -webkit-calc(340 / 700 * 100%); padding-top: calc(340 / 700 * 100%);}
#knowledge7 .paragraph .phArea .ph_cut span {padding-top: -webkit-calc(300 / 740 * 100%); padding-top: calc(300 / 740 * 100%);}
#knowledge7 .column .phArea .ph_cut span {padding-top: -webkit-calc(275 / 380 * 100%); padding-top: calc(275 / 380 * 100%);}

@media all and (min-width: 768px) {
	.knowledge #contentsArea .contentsBlock { width: 1080px; margin:0 auto;}
	.knowledge #contentsArea .contentsBlock h1 {width: 1080px; height: 250px; background-image: url(../img/knowledge/h1.png);}
	.knowledge article {padding-bottom: 60px;}
	.knowledge article h2 {text-align: center; padding: 8px; margin-bottom: 1em; font-size: 1.6em;}
	.column{display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;}
	.knowledge article .column, .knowledge article .paragraph {
		width: 900px;
        margin: 0 auto;
        padding: 0 0 1em;}
	.knowledge article h3 { font-size: 1.2em;}
	#knowledge4 .column, #knowledge7 .column:not(:first-of-type) {padding-top: 1.5em;}
	
	article p.txt, article p.notes { font-size: 1.1em; line-height: 2.0;}
	
	#knowledge2 .column div.txtBox, #knowledge4 .column div.txtBox {width: 660px; padding-right: 40px;}
	#knowledge2 .column .phArea, #knowledge4 .column .phArea {width: 200px;}
	#knowledge3 .paragraph .phArea { width: 740px;}
	#knowledge3 .column div.txtBox {width: 700px; padding-right: 0px;}
	#knowledge3 .column .phArea {width: 200px;}
	#knowledge7 .column .txt {width: 500px; padding-right: 20px;}
	#knowledge7 .column .phArea {width: 380px;}
	#knowledge7 .paragraph .phArea { width: 740px;}
	
	#knowledge4 .paragraph .phArea { width: 800px;}
	#knowledge5 .phArea { width: 820px;}
	#knowledge6 .phArea { width: 700px;}
	
	

}

@media all and (max-width: 767px) {
	.knowledge #contentsArea {
        padding: 2.5% 2.5%;
    }
	.knowledge #contentsArea .contentsBlock { width: 100%; margin: 0 auto;}
	.knowledge #contentsArea .contentsBlock h1 {width: 100%; height: 0; margin: 0 auto 10px; padding-top: -webkit-calc(180 / 500 * 100%); padding-top: calc(180 / 500 * 100%); background-image: url(../img/knowledge/h1_sp.png?1);}
	.knowledge article {padding-bottom: 20px;}
	.knowledge article h2 {text-align: left; padding: 6px 10px; margin-bottom: 0.8em; font-size: 1.3em;}
	.knowledge article h2 span { display: block; padding-left:2em; text-indent:-2em;}
	.knowledge article h3 { font-size: 1.15em;}
	.knowledge article .column, .knowledge article .paragraph { padding: 0 1em 1em;}
	/*.txtBox {padding-top: 1em;}*/
	article p.txt, article p.notes { font-size: 1.1em; line-height: 1.9em;}

	#knowledge2 .column .phArea { width: 50%; max-width: 200px;}
	#knowledge4 .column .phArea, #knowledge3 .column .phArea { width: 40%; max-width: 200px;}
	#knowledge7 .column .phArea { width: 80%; max-width: 380px;}

}




/*	table
============================== */

table {
 border-collapse:collapse;
 border-spacing:0;
 margin: 0;
 letter-spacing: 0.05em;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}
table th ,
table td {
 line-height: 1.6em; vertical-align: top; font-weight: normal; padding-bottom: 0.3em;
}
table th ,
table td {
 text-align:left;
}
table th {
 white-space: nowrap;
}

@media all and (min-width: 768px) {
	table { font-size: 1.1em; line-height: 2.0;}
}
@media all and (max-width: 767px) {
 table { font-size: 1.1em; line-height: 1.9em;}
	.notes { font-size: 1.1em; padding-top: 0.3em;}

}