/****************************
 * レイアウト
 ****************************/
	body{background:#fff}
	header
	{
		width:100%;
		background:#409af4;
		text-align:center;
	}

	nav
	{
		width:100%;
		max-width:1000px;
		margin:auto;
	}

	main
	{
		width:100%;
		max-width:1000px;
		margin:auto;
	}

	footer
	{
		width:100%;
		margin-top:50px;
		padding:5px;
		background:#a7cc60;
		text-align:center;
		clear:both;
	}

/****************************
 * ヘッダー
 ****************************/
	header h1
	{
		width:100%;
		max-width:1000px;
		margin:auto;
	}

/****************************
 * フッター
 ****************************/
	footer p
	{
		color:#fff;
	}

/****************************
 * ナビゲーション
 ****************************/
	nav h3
	{
		width:100%;
		margin:50px 0 15px;
		padding:10px;
		background:#5ec6f1;
		font-size:2em;
		color:#fff;
	}
	nav ul
	{
		width:100%;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}

	nav ul li
	{
		width:calc(50% - 5px);
		margin-bottom:10px;
	}

	nav ul li a
	{
		width:100%;
		padding:20px 10px;
		background-color:#fff;
		display:block;
		font-size:1.6em;
		font-weight:bold;
		text-decoration:none;
		color:#5ec6f1;
		box-shadow:2px 2px 2px #5ec6f1;
		letter-spacing:0px;
		word-break:break-all;
	}
	nav ul li a:hover
	{
		display:block;
		color:#5ec6f1;
		text-decoration:none;
		box-shadow:4px 4px 5px #5ec6f1;
		transform: translateX(-1px);
		transform: translateY(-2px);
	}
	nav ul li a:active
	{
		box-shadow:-1px -1px 1px #5ec6f1;
		transform: translateX(2px);
		transform: translateY(3px);
	}
/**TOPへ*****************/

	.totop
	{
		width:50px;
		float:right;
		margin:10px 20px 30px 0;
	}

	.totop a
	{
		width:50px;
		height:50px;
		padding:23px 0 0 0;
		background:#fcc800;
		border-radius:50%;
		display:block;
		font-size:2em;
		font-weight:bold;
		color:#fff;
		line-height:0;
		text-align:center;
		text-decoration:none;
		position:relative;
	}
	.totop a:hover
	{
		opacity:0.7;
	}


/****************************
 * コンテンツ
 ****************************/

/**最新号********************/
	main h2
	{
		width:100%;
		margin:50px 0 15px;
		padding:10px;
		background:#bfb5d8;
		font-size:2em;
		color:#fff;
	}
	section.new
	{
		display:flex;
		justify-content:space-between;
	}
	section.new a
	{
		width:38%;
		height:471px;
		display:block;
		position:relative;
	}
	section.new div
	{
		width:60%;
		display:block;
	}

	section.new div h4
	{
		margin:10px 0 20px;
		font-size:2em;
		color:#bfb5d8;
	}
	section.new div p
	{
		margin-left:0.5em;
		margin-bottom:0.5em;
	}

	section.new div strong
	{
		display:block;
		font-size:1.2em;
	}
	img.utb40a
	{
		width:100%;
		max-width:380px;
		display:block;
		transition:0.5s ease,width 0.5s ease;
		position:absolute;
		z-index:10;
	}
	img.utb40a:hover
	{
		opacity: 0;
	}
	img.utb40b
	{
		position:absolute;
		z-index:1;
		width:100%;
		max-width:380px;
	}


/**バックナンバー*****************/
	.BackNumber h3
	{
		width:100%;
		margin:50px 0 15px;
		padding:10px;
		background:#a7cc60;
		font-size:2em;
		color:#fff;
		clear:both;
	}

	.BackNumber ul
	{
		width:100%;
		display:flex;
		flex-wrap:wrap;
		align-items:stretch;
	}

	.BackNumber ul li
	{
		width:calc((100% - 30px) / 4);
		margin-right:10px;
		margin-bottom:10px;
		display:block;
	}
	.BackNumber ul li:nth-child(4n)
	{
		margin-right:0px;
	}
	.BackNumber ul li a
	{
		width:100%;
		display:block;
		line-height:1.1em;
		color:#555;
	}
	.BackNumber ul li a:hover
	{
		text-decoration:none;
		opacity:0.7;
	}
	.BackNumber ul li a img
	{
		width:100%;
		display:block;
	}
	.BackNumber ul li a h4
	{
		margin-bottom:0.5em;
		font-size:1.2em;
		color:#0066cc;
		line-height:1.3em;
		letter-spacing:1px;
	}

@media screen and (max-width: 768px) {
/****************************
 * SP用
 ****************************/
/****************************
 * レイアウト
 ****************************/

/****************************
 * ヘッダー
 ****************************/
	header h1
	{
		line-height:1.1em;
		padding:0 10px;
	}
	header h1 img
	{
		width:100%;
		margin:auto;
	}

/****************************
 * フッター
 ****************************/


/****************************
 * ナビゲーション
 ****************************/
	nav h3
	{
		font-size:1.5em;
		line-height:1.1em;
	}
	nav ul
	{
		padding:0 10px;
	}
	nav ul li
	{
		width:100%;
		margin-bottom:10px;
	}
	nav ul li a
	{
		font-size:1.4em;
		word-break:break-all;
	}
/****************************
 * コンテンツ
 ****************************/
/**最新号********************/
	main h2
	{
		margin-top:20px;
		font-size:1.5em;
	}
	section.new
	{
		padding:0 10px;
		display:block;
	}
	section.new a
	{
		width:80%;
		max-width:380px;
		height:auto;
		margin:auto;
		position:static;
	}
	section.new div h4
	{
		font-size:1.5em;
		line-height:1.1em;
		word-break:break-all;
	}
	section.new div
	{
		width:100%;
		display:block;
	}
	img.utb40a
	{
		width:100%;
		position:static;
	}
	img.utb40a:hover
	{
		opacity: 1;
	}
	img.utb40b
	{
		display:none;
	}
/**バックナンバー*****************/
	.BackNumber h3
	{
		font-size:1.5em;
		line-height:1.1em;
		word-break:break-all;
	}
	.BackNumber ul li
	{
		width:calc((100% - 10px) / 2);
	}
	.BackNumber ul li:nth-child(2n)
	{
		margin-right:0px;
	}
	.BackNumber ul
	{
		padding:0 10px;
	}

}