@charset "UTF-8";

.cssgrid {
  margin: 0 auto;
  padding: 5px;
  width: 90%;
  background-color: #fff;
  column-count: 4;
  column-gap: 0;
}

.cssgrid > div {
  padding: 1rem;
  margin:0 0.5rem 1rem 0.5rem;
  border:1px solid #CCC;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}






:root{
	--base: #17A2B8;
	--sub: #FFB74D;
	--dark: #00838F;
	--darker: #006064;
}

/* Bootstrap4 のカルーセルの高さがChromeだけおかしい件への対応 */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
display:block !important;
}

h1,h2,h3,h4,h5,h6{font-weight: 300;}

.card-columns {column-count: 5;}

.grid{margin:0 auto;display:block;}
.grid-item{width:300px;border:1px solid #CCC;padding:15px;margin-bottom: 20px;}


.table01 th{background-color: #FAFAFA;white-space:nowrap;padding:1rem;}
.table01 td{padding:1rem;}
.table01 p{margin-bottom: 1rem;}

.privacy_box{border:0.2rem solid #CCC;padding:2rem;}
.privacy_box h3{color:var(--dark);font-size:1.2rem;margin-top:50px;margin-bottom: 30px;}
.privacy_box p{line-height: 200%;}
.privacy_box li{margin-bottom: 15px;}

.article a{background: #FAFAFA;padding:15px;border:1px solid #CCC; display:block;}
.article a:before {
font-family: FontAwesome;
content: "\f08e";
margin-right: 0.3em;
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

@media (min-width: 1201px) {
.card-columns {column-count: 5;}
.cssgrid{column-count:4;}
}



@media (max-width: 1200px) {
.card-columns {column-count: 4;}
.cssgrid{column-count:3;}
}



@media (max-width: 992px) {
.card-columns {column-count: 3;}
.cssgrid{column-count:2;}
}



@media (max-width: 768px) {
.card-columns {column-count: 2;}
.cssgrid{column-count:1;}
}



@media (max-width: 576px) {
.card-columns {column-count: 1;}
body,html{font-size:12px;}
}