@charset "UTF-8";
/* CSS Document */
.sp_only{
	display: none;
}

.mookbook .main_info{
	display:flex;
	justify-content:space-between;
}

.mookbook .main_info dt{
	width:55%!important;
	background:#f8f8f8;
	padding:50px 10%;
	box-sizing:border-box;
}

.mookbook .main_info dt img{
	box-shadow:10px 10px 10px #ccc;
	width:100%;
}

.mookbook .main_info dd{
	width:42%;
}
.mookbook .main_info date{
	font-weight:bold;
    background:#FFEB3B;
    padding:0.5em;
}
.mookbook .main_info dd h5{
	font-size:150%;
	margin:1.0em 0 1.5em;
	letter-spacing:0.2em;
}
.mookbook .main_info dd h5 strong{
	font-size:170%;
	letter-spacing:0.2em;
}
a.cras_link{
	color: #ff5353;
	text-decoration: underline;
}
/* a:link, a:visited a:hover, a:focus, a:active */

/*
.mookbook .sub_info{
	background-color: #f5f5f5;
	position:relative;
  padding-top: 30px;
  padding: 60px;
  margin-top: 120px;
  margin-bottom:5em;
}
.mookbook .sub_info::before {
  content: "content";
  position: absolute;
  display: block;
  color: #cec8c8;
  top: 0;
  left: 0;
  font-size: 800%;
  width: 100%;
}


.mookbook .sub_info dl{
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin-top: 30px;
}
.reverse{
	flex-direction:row-reverse;
}
.mookbook .sub_info dl dt{
	width:60%;
	margin-bottom:30px;
}

.mookbook .sub_info dl dt img{
	width:100%;
	filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.4));
}
.mookbook .sub_info dl dd{
	width:32%;
	text-align: left;
	padding: 1%;
}
.mookbook .sub_info dl dd h5{
	font-size: 168%;
	padding: 2%;
	margin-bottom: 1em;
	color: #462a34;
  font-style: italic;
}
.mookbook .sub_info dl dd span{
	color: #5a7344;
}
.mookbook .sub_info dl dd em{
	font-size: 60%;
}
.mookbook .ex_info{
	padding: 3% 20%;
	background-color: #f3fbf6;

}
.mookbook .ex_info h5{
	font-size: 140%;
	text-align: center;
	border-bottom: 3px solid #95cabb;
	margin-bottom: 18px;
}
.mookbook .ex_info ul{
	padding: 0 12%;
	margin-bottom: 15px;
}
.mookbook .ex_info ul li{
	padding: 1% 5%;
}
.mookbook .ex_info ul li em{
	font-family: fantasy;
  color: #297d20;
  font-style: italic;
}
.mookbook .ex_info p{
	font-size: 90%;
	text-align: center;
}
.form_info{
	margin-bottom: 20px;
}
.form_info p{
	text-align: center;
}
.form_info p span{
	color: #e82e2e;
	border-bottom: 1px;
}
.form_info p{
	text-align: left;
	padding: 0 11%;
} */
@media screen and (max-width:768px) {

    .mookbook .main_info{
	    display:block;
	    justify-content:unset;
    }
    .mookbook .main_info dt{
    	width:100%!important;
    }
    .mookbook .main_info dd{
	    width:96%;
	    margin:10px auto;
    }
    .mookbook .main_info dd h5{
	    text-align:center;
    }
		.mookbook .ex_info{
			padding: 3% 6%;
		}
		.mookbook .ex_info h5{
			font-size: 135%;
		}
		.mookbook .ex_info ul {
			padding: 0 8%;
			margin-bottom: 9px;
	}
	.mookbook .ex_info li {
		font-size: 100%;
		padding: 0.5% 5%!important;
}
	.form_info p{
		padding: 0 1%;
		font-size: 93%;
	}
}



@media screen and (max-width:500px) {
	.sp_only{
		display: block;
	}
	.mookbook .main_info dd h5 strong {
	  font-size: 123%;
	  letter-spacing: 0.2em;
	}
	.mookbook .sub_info{
		padding: 0;
	  padding-top: 30px!important;
		padding-bottom: 20px;
	}
	.mookbook .sub_info::before {
		font-size: 470%;
		top:-20px;
	}
	.mookbook .sub_info dl{
		width:96%;
		padding: 0!important;
		display: block;
		justify-content: unset;
		margin-bottom: 10px;
}

	.mookbook .sub_info dl dt{
		width:100%;
	}
	.mookbook .sub_info dl dd{
		width: 90%;
		padding: 0 5%;
		padding-bottom: 10px;
	}
	.mookbook .ex_info{
		padding: 3% 1%;
}
.mookbook .ex_info ul {
	padding: 0 1%;
	margin-bottom: 9px;
}
.mookbook .ex_info li {
	font-size: 93%;
}
}