/* =================================
	DATA
================================= */

div.data,
div.data div.unit {
	padding:0;
}


div.data {
	background-color:hsla(343,100%,70%,0.95);
}
div.unit article header h1 {
	color:#fff;
	/**/
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight:800;
	/**/
	line-height:1.25;
}
div.unit article header h1 {
	display:none;
	color:#fff;
	margin-bottom:0.5em;
}
@media all and (min-width: 768px) {
div.data {
	padding:40px 0;
}
div.unit article header h1 {
	font-size:400%;
}
}
@media all and (max-width: 767px) {
div.data {
	padding:20px 0;
}
div.unit article header h1 {
	font-size:7.5vw;
}
}



/*	.kome
============================== */
ul.kome {
	text-align:left;
	margin-left:0.5em;
}
ul.kome li {
	color:#000;
	line-height:1.5;
}
ul.kome li:not(:last-child) {
	margin-bottom:0.25em;
}
ul.kome li:before {
	content:"※";
	display:block;
	float:left;
}
ul.kome li > span {
	display:block;
	padding-left:1.5em;
}
ul.kome li > span a {
	color:#0050ff;
}
@media all and (min-width: 768px) {
ul.kome:not(:last-child) {
	margin-bottom:40px;
}
ul.kome li {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {
ul.kome:not(:last-child) {
	margin-bottom:20px;
}
ul.kome li {
	font-size:87.5%;
}
}

section.unit div.inner ol {
	text-align:left;
	margin-left:1.5em;
	list-style-type:decimal;
}
section.unit div.inner ol li {
	color:#000;
	line-height:1.5;
}
section.unit div.inner ol li b {
	color:#c00;
}
section.unit div.inner ol li:not(:last-child) {
	margin-bottom:0.25em;
}
@media all and (min-width: 768px) {
section.unit div.inner ol:not(:last-child) {
	margin-bottom:40px;
}
section.unit div.inner ol li {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {
section.unit div.inner ol:not(:last-child) {
	margin-bottom:20px;
}
section.unit div.inner ol li {
	font-size:87.5%;
}
}

/*	figure
============================== */
div.ph-large {
	margin:0 auto;
}
div.ph-large figure span, div.ph-large figure span img {
	display:block;
}
div.ph-large figure span {
	position:relative;
	height:0;
	background-size:cover;
	padding-top:100%;
}
section#howto div.ph-large figure span {
	padding-top:56.25%;
}
div.ph-large {
	width:40%;
}
section#howto div.ph-large {
	width:100%;
}
div.ph-large figure span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
div.ph-large figure span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.ph-large figure figcaption {
	text-align:center;
	line-height:1.5;
	margin-top:1em;
}
@media all and (min-width: 768px) {
div.ph-large {
	/* max-width:700px; */
}
div.ph-large:not(:last-child) {
	margin-bottom:40px;
}
div.ph-large figure span.lazy-done {
	-webkit-box-shadow:12px 12px 0 0 hsla(42,90%,54%,.7);
	box-shadow:12px 12px 0 0 hsla(42,90%,54%,.7);
}
div.ph-large figure figcaption {
	font-size:87.5%;
}
}
@media all and (max-width: 767px) {
div.ph-large {
	width:60%;
}
div.ph-large:not(:last-child) {
	margin-bottom:20px;
}
div.ph-large figure span.lazy-done {
	-webkit-box-shadow:6px 6px 0 0 hsla(42,90%,54%,.7);
	box-shadow:6px 6px 0 0 hsla(42,90%,54%,.7);
}
div.ph-large figure figcaption {
	font-size:75%;
}
}

@media print {
div.ph-large {
	display:none;
}
}


/*	.unit
============================== */
article div.unit > article {
	/**/
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight:500;
	/**/
	background-color:hsla(0,0%,100%,0.9);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-image:none;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:90% 90%;
}
article div.unit > article > header h2 {
	color:#00a0e9;
	line-height:1.5;
	margin-bottom:0.5em;
}
article div.unit > article > header h2 > span {
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #ff6), to(#ff6));
	background-image: linear-gradient(transparent 50%, #ff6 50%);
}
article div.unit > article p {
	line-height:1.5;
}
article div.unit > article > header p {
	font-weight:bold;
	line-height:1.75;
}
article div.unit > article > header p:not(:last-child) {
	margin-bottom:1.25em;
}

@media all and (min-width: 768px) {
article div.unit:not(:last-child), div.anchor > div.unit {
	margin-bottom:40px;
}
article div.unit > article {
	width:980px;
	padding:50px;
	margin:0 auto;
	-webkit-box-shadow:10px 20px 0 0 hsla(0,0%,0%,.05), hsla(48,100%,68%,0.6) 0 0 60px 0 inset;
	box-shadow:10px 20px 0 0 hsla(0,0%,0%,.05), hsla(48,100%,68%,0.6) 0 0 60px 0 inset;
}
article div.unit > article > header:not(:last-child) {
	margin-bottom:40px;
}
article div.unit > article > header h2 {
	font-size:200%;
}
article div.unit > article > header p {
	font-size:150%;
}
article div.unit > article p.notes {
	font-size:87.5%;
}
}
@media all and (max-width: 767px) {
article div.unit:not(:last-child), div.anchor > div.unit {
	margin-bottom:20px;
}
article div.unit > article {
	margin:0 12px;
	padding:20px 12px;
	-webkit-box-shadow:6px 12px 0 0 hsla(0,0%,0%,.05), hsla(48,100%,68%,0.6) 0 0 30px 0 inset;
	box-shadow:6px 12px 0 0 hsla(0,0%,0%,.05), hsla(48,100%,68%,0.6) 0 0 30px 0 inset;
}
article div.unit > article > header:not(:last-child) {
	margin-bottom:20px;
}
article div.unit > article > header h2 {
	font-size:125%;
}
article div.unit > article > header p {
	font-size:100%;
}
article div.unit > article p.notes {
	font-size:75%;
}
}


/*	section.unit
============================== */
article > section.unit {
	text-align:left;
	background-color:#ffea7b;
}
article > section.unit > h3 {
	background-color:#000;
	color:hsla(60,100%,65%,1);
	line-height:1.5;
}
article > section.unit > div.inner > h4 {
	color:#c00;
	line-height:1.5;
	padding:0 0.5em;
	margin-bottom:0.5em;
}

@media all and (min-width: 768px) {
.unit article > section.unit div.inner {
	width:auto;
	margin:auto;
}
article > section.unit {
	-webkit-box-shadow:10px 20px 0 0 hsla(1,82%,47%,.1);
	box-shadow:10px 20px 0 0 hsla(1,82%,47%,.1);
}
article > section.unit:not(:last-child) {
	margin-bottom:40px;
}
article > section.unit > h3 {
	font-size:150%;
	padding:12px 30px;
}
article > section.unit > div.inner {
	padding:30px;
}
article > section.unit > div.inner > h4 {
	font-size:150%;
}
}
@media all and (max-width: 767px) {
article > section.unit {
	-webkit-box-shadow:6px 12px 0 0 hsla(1,82%,47%,.1);
	box-shadow:6px 12px 0 0 hsla(1,82%,47%,.1);
}
article > section.unit:not(:last-child) {
	margin-bottom:20px;
}
article > section.unit > h3 {
	font-size:100%;
	padding:6px 15px;
}
article > section.unit > div.inner {
	padding:15px;
}
article > section.unit > div.inner > h4 {
	font-size:100%;
}
}


/*	p.lines
============================== */
p.lines {
	background-position:left bottom;
	background-repeat:repeat;
	text-align:justify;
	text-justify:inter-ideograph;
	padding:0 0.75em;
}
p.lines a {
	color:hsla(202,89%,53%,1);
}
@media all and (min-width: 768px) {
p.lines {
	font-size:112.5% !important;
	background-image:url(../img/line36.png);
	line-height:36px !important;
	background-size:36px 36px;
}
p.lines:not(:last-child) {
	margin-bottom:36px;
}
}
@media all and (max-width: 767px) {
p.lines {
	font-size:87.5% !important;
	background-image:url(../img/line30.png);
	line-height:30px !important;
	background-size:30px 30px;
}
p.lines:not(:last-child) {
	margin-bottom:30px;
}
}



/*	.present
============================== */
section.present h3 {
	color:#f943c9;
	line-height:1.5;
	margin-bottom:0.25em;
}
section.present p {
	line-height:1.5;
	margin-bottom:0.5em;
}
@media all and (min-width: 768px) {
section.present {
	margin-bottom:40px;
}
section.present h3 {
	font-size:200%;
}
section.present p {
	font-size:125%;
}
}
@media all and (max-width: 767px) {
section.present {
	margin-bottom:20px;
}
section.present h3 {
	font-size:125%;
}
section.present p {
	font-size:100%;
}
}

div.unit section.unit div.inner h4 a {
	color:#000;
}