@font-face {
		font-family: 'マキナス4Square';
		src: url('../font/Makinas-4-Square.otf')  format("opentype");
		}
body{
	background-color:#E0E5EC;
	color: #212121;
	font-size: 13px;
	/*font-family: 'Noto Sans JP' , Verdana; */
	/*font-family: "Sawarabi Mincho"; */
	font-family: "マキナス4Square";
	line-height: 1.2;
}

.wf-sawarabimincho {
	font-family: "Sawarabi Mincho";
}
a.block,
a.block:link {
 	color: #fff;
	text-decoration: none;
}
.comment {
	width: 90%;
	font-size: 20px;
	padding: 0 5% 5px 5%;
	line-height: 1.5;
}
.comment:first-letter {
	font-weight: 500;
	font-size: 2em;
	line-height: 1;
	float: left;
	margin: 0 .1em 0 0;
	padding: .1em 0;
}
.detailCard {
	width: auto;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	border-radius:8px;
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	background: #fff;
	-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.22);
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.22);
	overflow:hidden;
}

.viewCard {
	width: auto;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	background: #E0E5EC;
	border-radius: 5px;
	box-shadow: 
		inset 0 0 5px rgba(55, 84, 170, 0), 
		inset 0 0 10px rgba(255, 255, 255, 0), 
		2px 2px 4px rgba(55, 84, 170, 0.15), 
		-2px -2px 4px white, 
		inset 0px 0px 2px rgba(255, 255, 255, 0.2);
	transition: box-shadow 0.2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	border: none;
	overflow:hidden;
}
/*
.viewCard{
  margin-left: auto;
  margin-right: auto;
  margin-top:0px;
	margin-bottom: 5px;
  border-radius:5px;
   background-color:#F0F0F0;
  box-shadow: 4px 4px 8px rgb(163,177,198,0.6), -4px -4px 8px    rgba(255,255,255, 0.5);
	overflow:hidden;
}				
*/
#nippon_smart {
	width: 340px;
	height: 280px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	overflow: hidden;
}
#nippon_pc {
	width: 694px;
	height: 530px;	
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 10;
	margin-left: auto;
	overflow: hidden;
}
.img-block {
  width: auto;
  height: auto;
  overflow: hidden;
}
 
.img-block img {
  transition: 0.3s;
  /*拡大されるスピードを設定します*/
}
 
.img-block img:hover {
  -moz-transform: scale(1.5,1.5);
  -webkit-transform: scale(1.5,1.5);
  -o-transform: scale(1.5,1.5);
  -ms-transform: scale(1.5,1.5);
  /*拡大される比率を設定します*/
}
.circle {
	background: #990000;
	color: #ffffff;
	margin: 0 auto;
	position: relative;
	/*display: inline-block; */
	display: block;
	border-radius: 50%;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 20px;
	font-weight: 600;
	padding-top: 18px;
	padding-left: 5px;
	letter-spacing: 4px;
	text-align: center;
}
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

			
.card {
margin:0;
padding:0 4px 8px;
}

.card-wrapper {
border-radius:4px;
background: #fff;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
border-radius: 4px;
overflow:hidden;
}

.card-image {
width: 100%;
}

.card-image img {
width: 100%;
border-radius: 4px 4px 0 0;
}

.card-info {
padding: 10px 16px;
color: rgb(33, 25, 34);
text-align: left;
}


.cards {
margin:0 auto;
width:100%;
}

.card {
width: 20%;
overflow: hidden;
opacity: 0;
transform-property: opacity, transform;
transform-origin: 50%;
}

/* change card size for small screens */
@media (max-width: 600px) {
.card {width:33.3333%;}
}


/* change card size for small screens */
@media (max-width: 400px) {
.card {width:49.9999%;}
}
/* Tooltip container */
.tooltip {
 }

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #fff;
  color: #990000; 
  text-align: left;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 18px;
  /*border-radius: 5px; */
  font-weight: 600;
  /* Position the tooltip text - see examples below! */
  margin-left: -286px;
  margin-top: -23px;
  position: absolute;
  z-index: 10;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/*
*{
	box-sizing: border-box;
}
*/

.button {
	font-family: "マキナス4Square";
	font-size:20px;
	font-weight: 600;
  color: #990000;
  cursor: pointer;
  margin: 1rem;
  position: relative;
   width: 62px;
  height: 62px;
  padding: 0px;
  background: #E0E5EC;
  border-radius: 50%;
  box-shadow: 
    inset 0 0 5px rgba(55, 84, 170, 0), 
    inset 0 0 10px rgba(255, 255, 255, 0), 
    2px 2px 4px rgba(55, 84, 170, 0.15), 
    -2px -2px 4px white, 
    inset 0px 0px 2px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
}

.button:focus, .button:hover {
  color: #666;
background: #f1f3f6;
}

.button:focus,
.button:active {
  box-shadow: inset 2px 2px 4px rgba(55, 84, 170, 0.15), inset -2px -2px 4px white, 0px 0px 2px rgba(255, 255, 255, 0.2);
}
*/