@charset "UTF-8";
	
	.price-page{
		width:100%;
		
		background-image: url("images/bg_system-page.webp");
		background-repeat: repeat;
		background-size:960px 20px;
		background-position: center;
		
		font-size:1.0rem;
		line-height:1.75em;
		font-weight:normal;
		font-style: normal;
		letter-spacing: normal;
	}
	
	.price-page div.wrap{
		width:100%;
		margin:0 auto;
		max-width: 900px;
		box-sizing: border-box;
		padding:15px 25px;
	}
	
	.price-page h2{
		width:100%;
		font-size:1.35rem;
		line-height:30px;
		letter-spacing: 0.05em;
		color: #6a9ee0;
		text-align: center;
		margin-bottom:25px;
	}
	
	.price-page h2 span.note{
		display:block;
		
		font-family: "Jost", sans-serif;
		font-optical-sizing: auto;
		
		font-weight:400;
		
		font-size:3.5rem;
		line-height:60px;
		
		letter-spacing: 0.15em;
	}
	
	.price-page h3{
		font-size:1.35rem;
		line-height:50px;
		font-weight:bold;
		
		text-align: center;
	}
	
	.price-page h3 span.note{
		display:inline-block;
		
		box-sizing: border-box;
		padding:0 40px;
		
		position: relative;
	}
	
	.price-page h3 span.note::before{
		display:block;
		content:"";
		
		width:30px;
		height:30px;
		
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		
		margin:auto 0;
		
		background-image: url("images/icon-system-page-h3.webp");
		background-repeat: no-repeat;
		background-size: 30px;
		background-position: center;
	}
	
	.price-page h3 span.note::after{
		display:block;
		content:"";
		
		width:30px;
		height:30px;
		
		position: absolute;
		top:0;
		bottom:0;
		right:0;
		
		margin:auto 0;
		
		background-image: url("images/icon-system-page-h3.webp");
		background-repeat: no-repeat;
		background-size: 30px;
		background-position: center;
	}
	
	.castrank{
		width:100%;
		margin-bottom:25px;
	}
	
	.castrank div.castrankrow{
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width:100%;
		
		box-sizing: border-box;
		padding:35px 0;
		
		position: relative;
	}
	
	.castrank div.castrankrow::after{
		display:block;
		content:"";
		
		width:100%;
		height:25px;
		
		position: absolute;
		left:0;
		bottom:0;
		
		background-image: url("images/design-castrank-bottom.webp");
		background-repeat: no-repeat;
		background-size:contain;
		background-position: center;
	}
	
	.castrank div.castrankrow p.castrankrow-que{
		width:100%;
		text-align: center;
		
		margin-bottom:10px;
	}
	
	.castrank div.castrankrow p.castrankrow-que img{
		display:block;
		width:180px;
		margin:0 auto;
	}
	
	.castrank div.castrankrow p.castrankrow-que span.note{
		display:block;
		
		font-size:1.0rem;
		line-height:30px;
	}
	
	.castrank div.castrankrow p.castrankrow-ans{
		width:100%;
		
		font-size:0.8rem;
		line-height:1.75em;
	}
	
	.price-basic{
		margin-bottom:25px;
	}
	
	.price-basic div.content{
		box-sizing: border-box;
		padding:25px 0;
	}
	
	.priceinfo{
		width:100%;
		
		box-sizing: border-box;
		border:solid 1px #000;
	}
	
	.priceinfo div.pricerow{
		box-sizing: border-box;
		border-bottom:solid 1px #000;
		
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width:100%;
		
		font-size:1.0rem;
		line-height:1.75em;
	}
	
	.priceinfo div.pricerow:last-child{
		border-bottom:none;
	}
	
	.priceinfo div.pricerow p.pricerow-que{
		width:50%;
		
		box-sizing: border-box;
		padding:10px;
		border-right:solid 1px #000;
	}
	
	.priceinfo div.pricerow p.pricerow-ans{
		width:50%;
		
		box-sizing: border-box;
		padding:10px;
		
		text-align: center;
	}
	
	.price-cource{
		margin-bottom:25px;
	}
	
	.course-cat{
		margin-bottom:20px;
	}
	
	.course-cat h6{
		width:100%;
		
		font-family: "Jost", sans-serif;
		font-optical-sizing: auto;
		font-size:1.5rem;
		line-height:70px;
		
		font-weight:400;
		letter-spacing: 0.5em;
		
		background-color:#fff;
		color:#000;
		
		text-align: center;
		
		margin-top:20px;
	}
	
	.course-cat h6 span.note{
		display:block;
	}
	
	.course-cat:nth-child(1) h6{
		box-sizing: border-box;
		padding:1px;
		
		background-color:#eee;
	}
	
	.course-cat:nth-child(1) h6 span.note{
		background: linear-gradient(to top, #b1b1b1 0%, #ddd 57%, #e4e4e4 57%, #eee 100%);
		
		box-sizing: border-box;
		border:solid 1px #fff;
	}
	
	.course-cat:nth-child(1) div.priceinfo div.pricerow p.pricerow-que{
		background-color:#ececec;
	}
	
	.course-cat:nth-child(2) h6{
		box-sizing: border-box;
		/*padding:1px;*/
		
		background-color:#eee;
	}
	
	.course-cat:nth-child(2) h6 span.note{
		background: linear-gradient(to left, #b29457 0%, #fbf7c8 50%, #b39558 100%);
		
		box-sizing: border-box;
		/*border:solid 1px #fff;*/
	}
	
	.course-cat:nth-child(2) div.priceinfo div.pricerow p.pricerow-que{
		background-color:#e8ddaa;
	}
	
	.course-cat:nth-child(3) h6 span.note{
		background-color:#484848;
		position: relative;
		
		background-image: url("images/bg-pat02.png");
		background-repeat: no-repeat;
		background-size:967px 339px;
		background-position: center;
		
		color:#fff;
	}
	
	.course-cat:nth-child(3) div.priceinfo div.pricerow p.pricerow-que{
		background-color:#8b8b8b;
	}
	
	.course-cat:nth-child(4) h6 span.note{
		position: relative;
		
		background-color:rgba(255,255,255,0.25);
		
		background-image: url("images/bg-pat03.png");
		background-repeat: no-repeat;
		background-size:1030px 633px;
		background-position: center;
		background-blend-mode:lighten;
		
		color:#000;
	}
	
	.course-cat:nth-child(4) div.priceinfo div.pricerow p.pricerow-que{
		background-color:#e0f4ff;
	}
	
	.course-cat:nth-child(5) h6 span.note{
		position: relative;
		
		background-color:rgba(0,0,0,0.75);
		
		background-image: url("images/bg-caption01.png");
		background-repeat: no-repeat;
		background-size:960px;
		background-position: center;
		background-blend-mode:hard-light;
		
		color:#fff;
	}
	
	.course-cat:nth-child(6) h6 span.note{
		position: relative;
		
		background-color:rgba(255,255,255,0.25);
		
		background: linear-gradient(to left, #ffadd1 0%, #ffe2ee 50%, #ffadd1 100%)!important;
		
		color:#000;
	}
	
	.course-cat:nth-child(6) div.priceinfo div.pricerow p.pricerow-que{
		background-color:#ffe2ee;
	}
	
	.course-cat p.extra{
		text-align: left;
		
		font-size:1.0rem;
		line-height:1.75em;
		
		margin-top:15px;
	}
	
	.price-traffic{
		margin-bottom:25px;
	}
	
	.trafficinfo{
		width:100%;
		
		margin-top:25px;
	}
	
	.trafficinfo div.trafficrow{
		margin-bottom:10px;
		
		box-sizing: border-box;
		border-bottom:solid 1px #000;
		
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width:100%;
	}
	
	.trafficinfo div.trafficrow p.trafficrow-que{
		width:120px;
		
		box-sizing: border-box;
		padding:10px;
		
		background-color:#000;
		
		background-image: url("images/bg-pat01.png");
		background-repeat: no-repeat;
		background-size:389px 322px;
		background-position: center;
		
		color:#fff;
	}
	
	.trafficinfo div.trafficrow p.trafficrow-ans{
		width:calc(100% - 120px);
		
		box-sizing: border-box;
		padding:10px;
	}
	
	.price-traffic p.extra{
		text-align: left;
		
		font-size:1.0rem;
		line-height:1.75em;
		
		margin-top:15px;
	}
	
	.price-attention{
		box-sizing: border-box;
		padding:15px;
		
		background-image: url("images/bg-attention.webp");
		background-repeat: repeat;
		background-size: 754px 459px;
		background-position: center;
		
		font-size:0.8rem;
		line-height:1.75em;
	}
	
	.price-attention p{
		font-size:1.0rem;
		line-height:1.75em;
		
		margin-bottom:15px;
	}
	
	.price-attention ul li{
		box-sizing: border-box;
		padding-left:20px;
		
		position: relative;
		margin-bottom:5px;
	}
	
	.price-attention ul li:last-child{
		margin-bottom:0;
	}
	
	.price-attention ul li::before{
		display:block;
		content:"※";
		
		position: absolute;
		top:0;
		left:0;
	}
	
	.price-attention ul li span.note{
		color:#f00;
	}
	
	.price-attention ul li:nth-last-child(1)::before{
		display:none;
	}
	
	.price-attention ul li:nth-last-child(2)::before{
		display:none;
	}
	
	
	
	@media screen and (min-width:768px) {
		
		.price-page div.wrap{
			padding:30px 50px;
			
		}
		
		.price-page h2{
			font-size:2.7rem;
			line-height:60px;
			
			letter-spacing: 0.05em;
			
			margin-bottom:50px;
		}
		
		.price-page h2 span.note{
			font-size:7.0rem;
			line-height:100px;
			letter-spacing: 0.15em;
		}
		
		.price-page h3{
			font-size:1.75rem;
			line-height:75px;
		}
		
		.price-page h3 span.note{
			padding:0 55px;
		}
		
		.price-page h3 span.note::before{
			width:40px;
			height:40px;
			
			background-size: 40px;
		}
		
		.price-page h3 span.note::after{
			width:40px;
			height:40px;
			
			background-size: 40px;
		}
		
		.castrank{
			margin-bottom:50px;
		}
		
		.castrank div.castrankrow{
			padding:35px 0 45px;
		}
		
		.castrank div.castrankrow::after{
			height:45px;
			
			bottom:-15px;
		}
		
		.castrank div.castrankrow p.castrankrow-que{
			width:180px;
			margin-bottom:0;
		}
		
		.castrank div.castrankrow p.castrankrow-ans{
			width:calc(100% - 180px);
			
			box-sizing: border-box;
			padding-left:20px;
			
			font-size:1.0rem;
			line-height:1.75em;
		}
		
		.price-basic{
			margin-bottom:50px;
		}
		
		.priceinfo div.pricerow{
			font-size:1.25rem;
			line-height:1.75em;
		}
		
		.priceinfo div.pricerow p.pricerow-que{
			width:240px;
			
			padding:10px 20px;
		}
		
		.priceinfo div.pricerow p.pricerow-ans{
			width:calc(100% - 240px);
			
			padding:10px 20px;
		}
		
		.priceinfo div.pricerow p.pricerow-ans.fill{
			width:100%;
			
			text-align: center;
		}
		
		.price-cource{
			margin-bottom:50px;
		}
		
		.course-cat{
			margin-bottom:40px;
		}
		
		.course-cat p.extra{
			text-align: center;
		}
		
		.trafficinfo div.trafficrow p.trafficrow-que{
			width:240px;
			
			text-align: center;
		}
		
		.trafficinfo div.trafficrow p.trafficrow-ans{
			width:calc(100% - 240px);
			
			padding:10px 20px;
		}
		
		.price-traffic p.extra{
			text-align: right;
		}
		
		.price-attention{
			padding:25px;
		}
		
	}