@charset "utf-8";
body {
		font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		line-height: 2;
		background-color: #FF0086;
		font-size: 14.5px;
		letter-spacing: 0.1em;
		line-height: 2;
}
header {
		width: 100%;
		margin-top: 10px;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 10px;
}
.link {
		float: right;
}
a {
		text-decoration: none;
		color: #000000;
}
.cap a:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
}
.ul li {
/*		display: inline-block;*/
		font-family: 'Oxygen', sans-serif;
		margin: 5px 0;
		letter-spacing: 0.05em;
		font-size: 12px;
}
main .right ul {
		display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
li figure .cap {
		margin-top: -10px;
}
img {
		width: 100%;
}
.page-title {
		font-size: 1.5em;
		margin-left: 20px;
		font-family: 'Oxygen', sans-serif;
		letter-spacing: 0.1em;
		color: #FFFFFF;
}
.Oxygen {
		font-family: 'Oxygen', sans-serif;
		letter-spacing: 0.1em;
}
.not-f figure .cap a {
		color: #DF0075;
}
main ol li {
		list-style: decimal;
		text-decoration: none;
		color: rgba(255, 255, 255, 1.00);
		margin-left: 20px;
		margin-top: 10px;
		line-height: 1.4em;
}
main ol li a {
		list-style-type: none;
		text-decoration: underline;
		color: rgba(255, 255, 255, 1.00);
}
main ol li a:hover {
		text-decoration: line-through;
}
main ol {
		width: calc(100% - 20px);
		margin: 0 auto;
}
.Oxygen {
		font-family: 'Oxygen', sans-serif;
		letter-spacing: 0.1em;
}
.sub-title {
		margin-left: 20px;
		font-size: 1em;
}
main {
		width: 100%;
		display: flex;
		flex-direction: row;
}
.left, .right {
		width: 50%;
}
.left {
		background-color: deeppink;
	max-width: 500px;
}
.right {
		background-color: greenyellow;
}
@media screen and (max-width:500px) {
	main{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.left,.right{
		width: 100%;
		padding-bottom: 30px;
	}
		ul li {
					width: calc(100% / 2);
		}
}
@media screen and (min-width:501px) and (max-width:700px) {
	.right{
		width: 50%;
	}
				ul li {
				width: 100%;
		}
}

@media screen and (min-width:700px) and (max-width:1000px) {
	.right{
		width: 50%;
	}
				ul li {
					width: calc(100% / 2);
		}
}
@media screen and (min-width:1000px) and (max-width:1500px) {
	.right{
		width: calc(100% - 500px);
	}
				ul li {
				width: calc(100% / 3);
		}
}
@media screen and (min-width:1500px) {
	.right{
		width: calc(100% - 500px);
	}
				ul li {
				width: calc(100% / 4);
		}
}