@charset "utf-8";
/* CSS Document */


/* ===================== top header ===================== */

.top .header {
	background-color: transparent;
}

.top-h1 {
	color: #6cf;
	font-size: 2em;
	letter-spacing: 4px;
	padding: .2em 0;
}

.top-h2 {
	text-align: center;
	font-size: 1.8em;
	padding: 2em 0 .5em;
}


/* ===================== top-hero ===================== */

.top-hero {
	text-align: center;
}

.top-hero-img {
	width: 50%;
	max-width: 150px;
	margin: 0 auto;
}

.top-hero-txt {
	font-weight: bold;
	line-height: 1.4em;
	padding: 0em 0 2em;
}



/* ===================== top-update ===================== */

.top-update {
	text-align: center;
	padding-bottom: 1em;
}

.top-update-bg {
	width: 92%;
	max-width: 600px;
	margin: 0 auto;
	padding: 1em;
	box-sizing: border-box;
	background-image: url("../img/bg_update.jpg");
	background-position: center center;
	background-size: cover;
}

.top-update-img {
	width: 60%;
	max-width: 300px;
	margin: 0 auto;
}

.top-update-txt {
	color: #fff;
	font-weight: bold;
	line-height: 1.4em;
	padding-top: .5em;
}


/* ===================== top-log ===================== */

.top-log {
	width: 92%;
	max-width: 900px;
	margin: 0 auto;
}

.top-log-list {
	width: 92%;
	max-width: 600px;
	margin: 0 auto;
	padding-top: 1em;
	display: flex;
	gap: 1em;
	font-size: 0.9em;
}

.top-log-list01 {
	display: flex;
	gap: 1em;
}

.top-log-icon {
	width: 120px;
	text-align: center;
}

.bg-bk {
	color: #fff;
	background-color: #333;
}

.bg-gr {
	background-color: #ccc;
}

.bg-bl {
	color: #fff;
	background-color: #6cf;
}

.bg-tr {
	border: 1px solid #999;
}

.top-log-date {
	width: 5em;
	color: #999;
	
}


@media (max-width:768px) {

.top-log-list {
	flex-direction: column;
	gap: 0.3em;
}

}


/* ===================== top-archive ===================== */

.top-archive {
	width: 92%;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 2em;
	text-align: center;
}

.top-archive-bg {
	margin: 0 1em 0 0;
	padding: 2em;
	box-sizing: border-box;
	background-color: #fff;
}

.top-archive-img {
	width: 150px;
	margin: 0 auto;
}

.top-archive-txt {
	font-weight: bold;
	line-height: 1.4em;
	padding-top: .5em;
}

.slider {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	position: relative;
}

.slick-dotted.slick-slider {
  margin-bottom: 1em;
  }

.dots-class button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.dots-class {
    display: flex;
    justify-content: center;
	position: absolute;
	right: 0;
	left: 0;
    bottom: -2em;
	margin: 0 auto;
	z-index:100;
}
.dots-class li {
    width: 8px;
    height: 8px;
    background-color: #e3e3e3;
    border-radius: 50%;
    margin-right: 1.8em;
    cursor: pointer;
    transition: .5s ease;
}
.dots-class li.slick-active {
    background-color: #6cf;
}
.dots-class li:hover {
    background-color: #6cf;
}
.dots-class li:last-child {
    margin-right: 0;
}



/* ===================== top-link ===================== */

.top-link-list {
	display: flex;
	align-items: center;
	width: 92%;
	max-width: 900px;
	margin: 0 auto 2em;
	background-color: #fff;
}

.top-link-img {
	width: 45%;
	max-width: 300px;
	height: auto;
}

.top-link-txt {
	padding: 0 2em;
	box-sizing: border-box;
}


/* END */