/*ドラマを楽しむための「車いすラグビー」基礎知識*/
.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:0.2em 0 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); margin-bottom: 30px;}
	.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;}

}

/*	nav
============================== */

nav#words ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
nav#words ul li a { display: block; transition:0.5s; border: solid 2px #1693A3; color: #1693A3; font-weight: 700; text-align: center;}
nav#words ul li a:hover { background-color: #C7FFFC;}
nav#words ul li a span { background-image: url(../img/knowledge/arrow.png); background-position: right center; background-repeat: no-repeat; background-size: 18px 18px; display: block;}

@media all and (min-width: 768px) {
	nav#words {padding-bottom: 30px;}
	nav#words ul li { margin: 5px;}
	nav#words ul li a { min-width: 165px; padding: 10px; font-size: 1.3em;
	border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;}
	nav#words ul li a span { padding:0 20px 0 10px;}
}
@media all and (max-width: 767px) {
	nav#words {padding-bottom: 10px;}
	nav#words ul li { margin: 3px;}
	nav#words ul li a { padding: 10px 5px; font-size: 1.0em;
	border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;}
	nav#words ul li a span { padding:0 18px 0 8px; background-size: 15px 15px;}
}


/*	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;}

}