@charset "UTF-8";

/* ===== 共通 ===== */

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
body{
	margin: 0;
	padding: 0;
	color: #623911;
	background-attachment: fixed;
	background-size: cover;
	background:#FFF;
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック", "MS P Gothic",Verdana,Arial, Helvetica, sans-serif;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
.clearfix{
	clear:both;
	display: inline-table; 
}
a {
	color: #222;
	position: relative;
}
article{
	width:90%;
	margin:5% auto 0;
}
@media screen and (max-width: 736px) {
article{
	margin:5%;
}
}
	/* リンクボタン */
.button {
	display: inline-block;
	width: 300px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
	font-size:130%;
	font-weight:bold;
}
.button a{
	text-decoration: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button {
	margin:3% auto;
	display:block;
	position: relative;
	z-index: 2;
	background-color: #b2961e;
	line-height: 50px;
	width: 100%;
}
.button:hover {
	color: #fff;
}
.button::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
.button:hover::after {
	background: #dab523;
	-webkit-transform: scale(1);
	transform: scale(1);
}
@media screen and (max-width: 736px) {
.button {
	width: 95%;
	height:auto;
}
}

h1{
	margin:1% auto 0;
	width:90%;
	text-align:center;
	font-size:200%;
}
h2.paper{
	margin:3% auto;
	width:100%;
	text-align:center;
	font-size:150%;
	background:#461406;
	color:#FFF;
	padding:0.5%;
}
h2.online{
	margin:3% auto;
	width:100%;
	text-align:center;
	font-size:150%;
	background:#062263;
	color:#FFF;
	padding:0.5%;
}
h3{
	font-size:150%;
	margin: 0;
	font-style:italic;
	text-align:center;
}
h4{
	font-size:130%;
	background:#dab523;
	text-align:center;
	padding:1%;
    margin: 2% 0;
}
}
div.lineup{
	width:95%;
	margin:1% auto;
}
div.lineup div.book{
	width:27%;
	margin:3%;
	display: inline-block;
	vertical-align: top;
}
div.lineup div.book img{
	width:100%;
	vertical-align:bottom;
	border:1px solid #000;
}
div.lineup div.book img.noborder{
	border:none;
}
div.lineup div.book b{
	background:#fae98c;
	font-weight:normal;
}
div.lineup div.book p.title{
	font-weight:bold;
	font-size:120%;
}
.target{
	border:1px dotted #dab523;
	font-size:90%;
	padding:2%;
}
.target a{
	text-decoration:none;
}
div.elearn{
	border:3px solid #dab523;
	padding:2%;
	width:80%;
	margin:2% auto;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
div.elearn img{
	float:right;
}

@media screen and (max-width: 736px) {
div.lineup div.book{
	width:43%;
}
div.elearn{
	width:90%;
}
div.elearn img{
	width:100%;
}
]