@charset "utf-8";

/* PC
-------------------------------------------------- */
@media screen and (min-width:1200px){
	main{
		padding: 0 0 40px;
	}
	
	.mainVisual{
		width: 100%;
		background: #2659aa;
		margin: auto;
		text-align: center;
	}
	
	#overview{
		margin-top: 50px;
	}
	
	#overview .secInner{
		width: 100%;
		max-width: 1200px;
		margin: auto;
	}
	
	#overview h1{
		font-size: 30px;
		text-align: center;
		line-height: 1em;
		position: relative;
	}
	
	#overview h1 span{
		padding-left: 0.3em;
	}
	
	#overview h1::after{
		content: "";
		display: block;
		width: 50px;
		height: 4px;
		background: #000000;
		position: absolute;
		left: 50%;
		bottom: -30px;
		transform: translateX(-50%);
	}
	
	#overview p{
		font-size: 14px;
		line-height: 1.8em;
		margin-top: 80px;
	}
	
	#detail{
		margin-top: 50px;
	}
	
	#detail .secInner{
		width: 100%;
		max-width: 1200px;
		margin: auto;
	}
	
	#detail h2{
		font-size: 24px;
		text-align: center;
	}
	
	#detail h2 span::before{
		content: "：";
	}
	
	.terms_wrap{
		margin-top: 50px;
	}
	
	.terms_wrap li{
		display: flex;
		box-sizing: border-box;
		width: calc(100% - 15px);
		align-items: center;
		background: #f7f7f7;
		padding: 20px 20px 20px 50px;
		border-radius:  0 5px 5px 0;
		position: relative;
		margin-left: auto;
		margin-bottom: 20px;
	}
	
	.terms_wrap li:nth-child(1)::before{
		content: "";
		display: block;
		width: 0;
		height: calc(100% - 20px);
		position: absolute;
		top: 0;
		left: -30px;
		border-top: 10px solid #3558a8;
		border-right: 15px solid #3558a8;
		border-bottom: 10px solid #3558a8;
		border-left: 15px solid #3558a8;
		border-color: transparent #3558a8 transparent transparent;
	}
	
	.terms_wrap li:nth-child(2)::before{
		content: "";
		display: block;
		width: 0;
		height: calc(100% - 20px);
		position: absolute;
		top: 0;
		left: -30px;
		border-top: 10px solid #3a9802;
		border-right: 15px solid #3a9802;
		border-bottom: 10px solid #3a9802;
		border-left: 15px solid #3a9802;
		border-color: transparent #3a9802 transparent transparent;
	}
	
	.terms_wrap li:nth-child(3)::before{
		content: "";
		display: block;
		width: 0;
		height: calc(100% - 20px);
		position: absolute;
		top: 0;
		left: -30px;
		border-top: 10px solid #b51b1b;
		border-right: 15px solid #b51b1b;
		border-bottom: 10px solid #b51b1b;
		border-left: 15px solid #b51b1b;
		border-color: transparent #b51b1b transparent transparent;
	}
	
	.terms_wrap li:nth-child(4)::before{
		content: "";
		display: block;
		width: 0;
		height: calc(100% - 20px);
		position: absolute;
		top: 0;
		left: -30px;
		border-top: 10px solid #000000;
		border-right: 15px solid #000000;
		border-bottom: 10px solid #000000;
		border-left: 15px solid #000000;
		border-color: transparent #000000 transparent transparent;
	}
	
	.price{
		font-size: 20px;
		font-weight: 600;
	}
	
	.coaster{
		width: 270px;
		margin-right: 20px;
		margin-left: auto;
	}
	
	.coaster div{
		text-align: center;
		background: #ffffff;
		padding: 15px 0;
	}
	
	.coaster p{
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}
	
	.coupon span{
		display: block;
		width: 270px;
		background: #ffffff;
		padding: 15px 0;
		text-align: center;
	}
	
	.coupon p{
		font-size: 14px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}
}

/* SP
-------------------------------------------------- */
@media screen and (max-width:1199px){
	main{
		padding: 0 0 40px;
	}
	
	.mainVisual{
		width: 100%;
		background: #2659aa;
		margin: auto;
	}
	
	.mainVisual img{
		width: 100%;
	}
	
	#overview{
		margin-top: 40px;
	}
	
	#overview .secInner{
		width: 100%;
		max-width: 1200px;
		margin: auto;
	}
	
	#overview h1{
		font-size: 24px;
		text-align: center;
		line-height: 1.5em;
		position: relative;
	}
	
	#overview h1 span{
		display: block;
	}
	
	#overview h1::after{
		content: "";
		display: block;
		width: 50px;
		height: 4px;
		background: #000000;
		position: absolute;
		left: 50%;
		bottom: -30px;
		transform: translateX(-50%);
	}
	
	#overview p{
		font-size: 14px;
		line-height: 1.8em;
		margin-top: 60px;
		padding: 0 20px;
	}
	
	#detail{
		margin-top: 40px;
	}
	
	#detail .secInner{
		width: 100%;
		max-width: 1200px;
		margin: auto;
	}
	
	#detail h2{
		font-size: 18px;
		text-align: center;
	}
	
	#detail h2 span{
		display: block;
	}
	
	.terms_wrap{
		margin-top: 50px;
	}
	
	.terms_wrap li{
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		width: 100%;
		align-items: center;
		background: #f7f7f7;
		padding: 20px;
		border-radius:  0 5px 5px 0;
		position: relative;
		margin-left: auto;
		margin-bottom: 40px;
	}
	
	.terms_wrap li:nth-child(1)::before{
		content: "";
		display: block;
		width: calc(100% - 20px);
		height: 0;
		position: absolute;
		top: -30px;
		left: 0;
		border-top: 15px solid #3558a8;
		border-right: 10px solid #3558a8;
		border-bottom: 15px solid #3558a8;
		border-left: 10px solid #3558a8;
		border-color: transparent transparent #3558a8 transparent;
	}
	
	.terms_wrap li:nth-child(2)::before{
		content: "";
		display: block;
		width: calc(100% - 20px);
		height: 0;
		position: absolute;
		top: -30px;
		left: 0;
		border-top: 15px solid #3a9802;
		border-right: 10px solid #3a9802;
		border-bottom: 15px solid #3a9802;
		border-left: 10px solid #3a9802;
		border-color: transparent transparent #3a9802 transparent;
	}
	
	.terms_wrap li:nth-child(3)::before{
		content: "";
		display: block;
		width: calc(100% - 20px);
		height: 0;
		position: absolute;
		top: -30px;
		left: 0;
		border-top: 15px solid #b51b1b;
		border-right: 10px solid #b51b1b;
		border-bottom: 15px solid #b51b1b;
		border-left: 10px solid #b51b1b;
		border-color: transparent transparent #b51b1b transparent;
	}
	
	.terms_wrap li:nth-child(4)::before{
		content: "";
		display: block;
		width: calc(100% - 20px);
		height: 0;
		position: absolute;
		top: -30px;
		left: 0;
		border-top: 15px solid #000000;
		border-right: 10px solid #000000;
		border-bottom: 15px solid #000000;
		border-left: 10px solid #000000;
		border-color: transparent transparent #000000 transparent;
	}
	
	.price{
		text-align: center;
		width: 100%;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 20px;
	}
	
	.coaster{
		width: 270px;
		margin: 0 auto 20px;
	}
	
	.coaster div{
		text-align: center;
		background: #ffffff;
		padding: 15px 0;
	}
	
	.coaster p{
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}
	
	.coupon{
		width: 100%;
	}
	
	.coupon span{
		display: block;
		width: 270px;
		margin: auto;
		background: #ffffff;
		padding: 15px 0;
		text-align: center;
	}
	
	.coupon p{
		font-size: 14px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}
}