@charset "utf-8";

/* <inline> */

@font-face {
  font-family: "Icons-SNS";
  src:
    url(/fonts/icons-sns.ttf?v=2025051201) format("opentype"),
    url(/fonts/icons-sns.woff?v=2025051201) format("woff");
}


@media (min-width:480px) {

/* </inline> */

/* <pconly> */
	
	/* <inline> */
	a[href^="tel:"]::before {
		content: "☎ ";
	}
	.inline-word-wrap-zone {
		word-break: keep-all;
	}
	.block-word-wrap-zone {
		display: flex;
		flex-flow: row wrap;
	}
	.block-word-wrap-gap-zone {
		display: flex;
		flex-flow: row wrap;
		column-gap: 1em;
	}
	.text-small {
		font-size: 12px;
	}
	.text-warning {
		text-indent: -1em;
		padding-left: 1em;
	}
	.text-warning::before {
		content: "※";
	}

	.article-main {
		-ms-grid-column: 1;
		-ms-grid-column-span: 4;
		grid-column: 1 / 5;
	}

	.headline {
		background-color: #F0F0F0;
		margin-top: 0;
	}
	.headline-logo {
		background-image: url(/images/rougainohito/480/title.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		margin-right: auto;
		margin-left: auto;
		padding-right: calc(50% - 480px);
		padding-left: calc(50% - 480px);
		height: 960px;
		width: 960px;
		overflow: hidden;
		position: relative;
	}
	.headline-logo > img {
		position: absolute;
		top: 100%;
		left: 0;
	}

	.end-of-life,
	.what,
	.introduction,
	.story,
	.highlight,
	.comment,
	.supervisor,
	.overview,
	.media {
		margin-right: calc(50% - 607px);
		margin-left: calc(50% - 480px);
		width: 753px;
	}

	.end-of-life {
		font-size: 24px;
		font-weight: bold;
		color: #FFF;
		background-color: #C0153F;
		margin-top: 40px;
		margin-right: calc(50% - 607px);
		margin-left: calc(50% - 480px);
		width: 673px;
		padding: 20px 40px;
		position: relative;
	}
	.end-of-life::before {
		content: "";
		border: 1px solid #FFF;
		height: calc(100% - 9px);
		width: calc(100% - 9px);
		position: absolute;
		top: 4px;
		left: 4px;
	}

	.introduction > p,
	.introduction > ol,
	.story > p {
		text-align: left;
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 40px;
	}
	.introduction > p:first-child,
	.story > p:first-child {
		margin-top: 0;
	}

	.what {
		margin-top: 20px;
		display: grid;
		row-gap: 20px;
		column-gap: 20px;
		grid-template-rows: auto auto;
		grid-template-columns: 20px 200px 1fr 20px;
	}
	.what > h2 {
		grid-row: 1;
		grid-column: 1 / -1;
	}
	.what > .what-book {
		grid-row: 2;
		grid-column: 2;
		align-self: center;
		justify-self: center;
	}
	.what > .what-book > img {
		height: auto;
		width: 100%;
	}
	.what > .what-book > figcaption {
		font-size: 10px;
		margin-top: 5px;
	}
	.what > .what-periods {
		text-align: left;
		grid-row: 2;
		grid-column: 3;
		align-self: center;
		justify-self: start;
	}
	.what > .what-periods > p + p {
		margin-top: 1em;
	}

	.side-menu {
		padding-top: 1000px;
		padding-bottom: 40px;
		position: relative;
	}

	/* </inline> */

	.highlight > dl > div {
		text-align: left;
		margin-top: 1em;
		margin-right: 40px;
		margin-left: 40px;
	}
	.highlight > dl > div:first-child {
		margin-top: 20px;
	}
	.highlight > dl > div > dt {
		font-weight: bold;
	}
	.highlight > dl > div > dt::before {
		content: "・";
	}
	.highlight > dl > div > dd {
		margin-left: 3em;
	}

	.comment > dl > div {
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 40px;
		display: grid;
		row-gap: 20px;
		column-gap: 20px;
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-columns: 200px 1fr;
	}
	.comment > dl > div > dt {
		font-size: 24px;
		font-weight: bold;
		grid-row: 2;
		grid-column: 2;
		align-self: end;
		justify-self: start;
	}
	.comment > dl > div > dd:nth-of-type(1) {
		grid-row: 1 / 5;
		grid-column: 1;
		align-self: center;
		justify-self: start;
	}
	.comment > dl > div > dd:nth-of-type(2),
	.comment > dl > div:last-child > dd:nth-of-type(1) {
		text-align: left;
		grid-row: 3;
		grid-column: 2;
		align-self: start;
		justify-self: start;
	}
	.comment > dl > div > dd:nth-of-type(1) > img {
		height: auto;
		width: 100%;
	}

	.supervisor > p,
	.outline > p {
		text-align: left;
		margin-top: 1em;
		margin-right: 40px;
		margin-left: 40px;
	}
	.supervisor > p:first-of-type,
	.outline > p:first-of-type {
		margin-top: 20px;
	}

	.supervisor > dl {
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 40px;
		display: -webkit-flex;
		-webkit-flex-flow: row nowrap;
		-webkit-justify-content: flex-end;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
	}
	.supervisor > dl > dd {
		margin-left: 1em;
	}

	.overview > dl,
	.media > dl {
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 40px;
	}
	.overview > dl > div,
	.media > dl > div {
		text-align: left;
		margin-top: 10px;
		display: -webkit-flex;
		-webkit-flex-flow: row nowrap;
		display: flex;
		flex-flow: row nowrap;
	}
	.overview > dl > div > dt,
	.media > dl > div > dt {
		width: 14em;
	}
	.overview > dl > div > dd,
	.media > dl > div > dd {
		width: calc(100% - 14em);
	}

	.overview-stuffs > li {
		display: inline-block;
	}
	.overview-stuffs > li::before {
		content: "・";
	}
	.overview-stuffs > li:first-child::before {
		content: none;
	}

	.overview-pr {
		font-size: 24px;
		font-weight: bold;
		text-shadow: 
			2px 2px 0px #E88EB9,
			-2px -2px 0px #E88EB9,
			2px -2px 0px #E88EB9,
			-2px 2px 0px #E88EB9,
			2px 0px 0px #E88EB9,
			-2px 0px 0px #E88EB9,
			0px -2px 0px #E88EB9,
			0px 2px 0px #E88EB9;
		color: #FFF;
		background:
			url(/images/rougainohito/320/overview-pr-sakura.png) no-repeat left top,
			url(/images/rougainohito/320/overview-pr-sakura.png) no-repeat right bottom;
		margin-top: 40px;
	}

	.media dl > div > dd > ul > li {
		display: inline;
	}
	.media dl > div > dd > ul > li::before {
		content: "・";
	}
	.media dl > div > dd > ul > li:first-child::before {
		content: unset;
	}

	.side-menu > ul {
		border-top: 1px dotted #999;
	}
	.side-menu > ul > li > a {
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGPMinchoE, serif;
		font-size: 15px;
		font-weight: bold;
		text-align: left;
		text-decoration: none;
		color: #000;
		border-bottom: 1px dotted #333;
		padding: 20px;
		display: block;
		transition: background-color ease 0.5s;
	}
	.side-menu > ul > li > a:hover,
	.side-menu > ul > li > a:active,
	.side-menu > ul > li > a:focus {
		background-color: #F8F8F8;
	}

	.side-menu > ul > li:last-child > a {
		text-align: center;
		line-height: 1;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.side-menu > ul > li:last-child > a::before {
		content: "\e901";
		font-family: "Icons-SNS";
		font-size: 40px;
		line-height: 1;
		display: block;
	}

	.aside-x {
		display: none;
	}

/* </pconly> */
	
/* <inline> */

}

/* </inline> */





/* <inline> */

@media (min-width: 1px) and (max-width: 479px) {

	.pconly {
		display: none;
	}
	a[href^="tel:"]::before {
		content: "☎ ";
	}
	.inline-word-wrap-zone {
		word-break: keep-all;
	}
	.block-word-wrap-zone {
		display: flex;
		flex-flow: row wrap;
	}
	.block-word-wrap-gap-zone {
		display: flex;
		flex-flow: row wrap;
		column-gap: 1em;
	}
	.text-small {
		font-size: 12px;
	}
	.text-warning {
		text-indent: -1em;
		padding-left: 1em;
	}
	.text-warning::before {
		content: "※";
	}

	.headline {
		text-align: center;
		background-color: #F0F0F0;
		margin-top: 0;
	}
	.headline-logo > img {
		height: auto;
		width: 100%;
	}

	.end-of-life {
		font-size: 18px;
		font-weight: bold;
		text-align: left;
		color: #FFF;
		background-color: #C0153F;
		margin-top: 40px;
		padding: 20px 15px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.end-of-life::before {
		content: "";
		border: 1px solid #FFF;
		height: calc(100% - 9px);
		width: calc(100% - 9px);
		position: absolute;
		top: 4px;
		left: 4px;
	}

	.introduction > p,
	.introduction > ol,
	.story > p {
		text-align: left;
		margin-top: 20px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.introduction > p:first-child,
	.story > p:first-child {
		margin-top: 0;
		padding-top: 40px;
	}

	.what > .what-book {
		margin-top: 20px;
	}
	.what > .what-book > img {
		height: auto;
		width: 100%;
	}
	.what > .what-book > figcaption {
		font-size: 9px;
		margin-top: 5px;
	}
	.what > .what-periods > p {
		text-align: left;
		margin-top: 1em;
		margin-right: 10px;
		margin-left: 10px;
	}
	.what > .what-periods > .what-outside {
		margin-right: 0;
		margin-left: 0;
	}
	.what-outside > cite > a {
		text-align: center;
		display: block;
	}

/* </inline> */

	.highlight > dl > div {
		margin-top: 1em;
		margin-right: 10px;
		margin-left: 10px;
	}
	.highlight > dl > div > dt {
		font-weight: bold;
		text-align: left;
	}
	.highlight > dl > div > dt::before {
		content: "・";
	}
	.highlight > dl > div > dd {
		text-align: left;
		margin-left: 1em;
	}

	.comment > dl > div {
		text-align: left;
		margin-top: 20px;
		display: flex;
		flex-flow: column nowrap;
		align-items: flex-start;
		justify-content: center;
	}
	.comment > dl > div > dt {
		font-size: 24px;
		font-weight: bold;
		margin-top: 1em;
		order: 2;
		align-self: center;
	}
	.comment > dl > div > dd {
		margin-top: 1em;
	}
	.comment > dl > div > dd:first-of-type {
		margin-top: 0;
		order: 1;
		align-self: center;
	}
	.comment > dl > div:last-child > dd:first-of-type {
		margin-top: 1em;
		order: 3;
	}
	.comment > dl > div > dd:first-of-type > img {
		height: auto;
		width: 100%;
	}
	.comment > dl > div > dd:last-of-type {
		margin-right: 10px;
		margin-left: 10px;
		order: 3;
	}

	.supervisor > p,
	.outline > p {
		text-align: left;
		margin-top: 1em;
		margin-right: 10px;
		margin-left: 10px;
	}
	.supervisor > p:first-of-type,
	.outline > p:first-of-type {
		margin-top: 20px;
	}

	.supervisor > dl {
		margin-top: 20px;
		margin-right: 10px;
		margin-left: 10px;
		display: -webkit-flex;
		-webkit-flex-flow: row nowrap;
		-webkit-justify-content: flex-end;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
	}
	.supervisor > dl > dd {
		margin-left: 1em;
	}

	.overview > dl,
	.media > dl {
		margin-top: 20px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.overview > dl > div,
	.media > dl > div {
		text-align: left;
		margin-top: 10px;
	}
	.overview > dl > div > dd,
	.media > dl > div > dd {
		margin-left: 2em;
	}

	.overview-stuffs > li {
		display: inline-block;
	}
	.overview-stuffs > li::before {
		content: "・";
	}
	.overview-stuffs > li:first-child::before {
		content: none;
	}

	.overview-pr {
		font-size: 22px;
		font-weight: bold;
		text-align: left;
		text-shadow: 
			2px 2px 0px #E88EB9,
			-2px -2px 0px #E88EB9,
			2px -2px 0px #E88EB9,
			-2px 2px 0px #E88EB9,
			2px 0px 0px #E88EB9,
			-2px 0px 0px #E88EB9,
			0px -2px 0px #E88EB9,
			0px 2px 0px #E88EB9;
		color: #FFF;
		background:
			url(/images/rougainohito/320/overview-pr-sakura.png) no-repeat left top,
			url(/images/rougainohito/320/overview-pr-sakura.png) no-repeat right bottom;
		margin-top: 40px;
		padding: 60px 20px;
	}

	.media dl > div > dd > ul > li {
		display: inline;
	}
	.media dl > div > dd > ul > li::before {
		content: "・";
	}
	.media dl > div > dd > ul > li:first-child::before {
		content: unset;
	}

	.aside-x > div > a {
		text-decoration: none;
		line-height: 1;
		background-color: #F0F0F0;
		margin-top: 40px;
		padding-top: 40px;
		padding-bottom: 40px;
		display: block;
		transition: background-color ease 0.5s;
	}
	.aside-x > div > a:hover,
	.aside-x > div > a:active,
	.aside-x > div > a:focus {
		color: #FFF;
		background-color: #305389;
	}
	.aside-x > div > a::before {
		content: "\e901";
		font-family: "Icons-SNS";
		font-size: 40px;
		line-height: 1;
		margin-bottom: 10px;
		display: block;
	}

	body > footer {
		margin-top: 0;
	}

/* <inline> */

}

/* </inline> */