/* パソコン用のCSS */
@media(min-width:751px){

	.f-item03 {
		align-self:stretch;
	}
			
	.text {
		margin-top:18px;
		margin:0 auto;
		margin-bottom:120px;
		width:1200px;
		height:auto;
	}
	
	h5.for-pc {
		display:block;
		margin-top:10px;
		margin-bottom:5px;
		font-size:16px;
		color:#33CC00;
		text-align:center;
	}
	
	h5.for-sp {
		display:none;
	}
	
	.monthly1 {
		width:auto;
		height:300px;
		float:left;
	}
	
	.monthly11 {
		width:auto;
		height:0px;
		clear:both;
	}
		
	table.monthly2 {
		width:300px;
		height:300px;
		border:none;
		border-collapse:collapse;
		border-spacing:0;
	}
	
	td.monthly3 {
		width:150px;
		height:300px;
	}
	
	td.monthly4 {
		width:150px;
		height:300px;
		font-size:11px;
		padding-left:2px;
		padding-top:6px;
		vertical-align:text-top;
		border-top:dotted 1px #CCCCCC;
		border-left:dotted 1px #CCCCCC;
		border-right:dotted 1px #CCCCCC;
	}
	
	.monthly5 {
		font-size:15px;
		color:#FF00FF;
		padding-left:10px;
	}
	
	.monthly6 {
		font-size:15px;
		color:#FF00FF;
		padding-bottom:0px;
		padding-left:10px;
	}
	
	.monthly7 {
		font-size:10px;
		color:#FF00FF;
		padding-top:-10px;
		padding-left:10px;
	}
	
	
/* 見出し表紙画像のマウスオン拡大作動CSS */	
	a.cover {
	text-decoration-line:none;
	display:inline-block;
	transition:1s;
	}

	a:hover.cover {
		transform:scale(1.3,1.3);
	}

	.page{
		position:relative;
		width:1100px;
		padding-bottom:780px;
	}

	.page input{
		display:none;
	}

	.page input~span{
		transition:2s;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		position:absolute;
		width:50%;height:100%;
		background-color:#FFFFFF;
		border:0.1px solid #CCCCCC;
	}

	.page input+span{
		left:50%;
		transform-origin:left;
		transform:perspective(1500px) rotateY(0deg);
	}

	.page input+span+span{
		right:50%;
		transform-origin:right;
		transform:perspective(1500px) rotateY(180deg);
	}

	.page input:checked+span{
		transform:perspective(1500px) rotateY(-180deg);
	}

	.page input:checked+span+span{
		transform:perspective(1500px) rotateY(0deg);
	}
}

/* スマホ用のCSS */
@media(max-width:750px){

	.f-item03 {
		align-self:stretch;
	}
	
	.text {
		margin-top:18px;
		margin:0 auto;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:120px;
		width:100%;
		height:auto;
	}
	
	h5.for-pc {
		display:none;
	}
	
	h5.for-sp {
		display:block;
		margin-top:10px;
		margin-bottom:5px;
		font-size:15px;
		color:#33CC00;
		text-align:center;
	}
	
	.monthly1 {
		margin-left:auto;
		margin-right:auto;
		width:auto;
		height:300px;
	}
	
	.monthly11 {
		width:auto;
		height:auto;
	}
		
	table.monthly2 {
		width:90%;
		height:300px;
		margin-left:15px;
		margin-right:15px;
		border:none;
		border-collapse:collapse;
		border-spacing:0;
	}
	
	td.monthly3 {
		width:auto;
		height:300px;
		vertical-align:top;
	}
	
	td.monthly4 {
		width:auto;
		height:300px;
		font-size:11px;
		padding-left:2px;
		padding-top:6px;
		vertical-align:text-top;
		border-top:dotted 1px #CCCCCC;
		border-left:dotted 1px #CCCCCC;
		border-right:dotted 1px #CCCCCC;
	}
	
	.monthly5 {
		font-size:15px;
		color:#FF00FF;
		padding-left:10px;
	}
	
	.monthly6 {
		font-size:15px;
		color:#FF00FF;
		padding-bottom:0px;
		padding-left:10px;
	}
	
	.monthly7 {
		font-size:10px;
		color:#FF00FF;
		padding-top:-10px;
		padding-left:10px;
	}
	
	/* 見出し表紙画像のマウスオン拡大作動CSS */	
	a.cover {
		text-decoration-line:none;
		display:inline-block;
		transition:1s;
	}

	a:hover.cover {
		transform:scale(1.3,1.3);
	}

	.caption {
		text-align:center;
		font-weight:bold;
		color:#33CC00;
	}

	.page{
		position:relative;
		width:100%;
		padding-bottom:auto;
	}

	.page input{
		display:none;
	}

	.page input~span{
		transition:2s;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		position:absolute;
		width:50%;height:100%;
		background-color:#FFFFFF;
		border:0.1px solid #CCCCCC;
	}

	.page input+span{
		left:50%;
		transform-origin:left;
		transform:perspective(1500px) rotateY(0deg);
	}

	.page input+span+span{
		right:50%;
		transform-origin:right;
		transform:perspective(1500px) rotateY(180deg);
	}

	.page input:checked+span{
		transform:perspective(1500px) rotateY(-180deg);
	}

	.page input:checked+span+span{
		transform:perspective(1500px) rotateY(0deg);
	}
}