@charset "UTF-8";

.l-header__center {
	display: none!important;
}

.atn-top-image {
	display: block;
	width: 100%;
}

.atn-top-image img {
	width: 100%;
	height: auto;
}

.atn-blog-area {
	width: 95%;
	height: auto;
	margin: 0 auto;
	padding-top: calc(100vw / 768 * 20);
	padding-bottom: calc(100vw / 768 * 50);
}

h2 {
	font-size: 20px;
}

.atn-blog-area h3 {
	margin-top: calc(100vw / 768 * 20);
	font-size: 16px;
}

.atn-blog-area p {
	font-size: 12px;
}

.atn-more {
	margin-top: calc(100vw / 768 * 20);
}

.atn-more a {
	font-size: 16px;
	font-weight: bold;
	color: #3fa3ff;
}

.atn-second-area {
	width: 100%;
	height: auto;
	margin: 0 auto 20px;
	font-size: 0;
	padding-bottom: calc(100vw / 768 * 50);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	row-gap: 20px;
}

.atn-prelude,
.atn-cat,
.atn-sarusaru,
.atn-profile,
.atn-bbs,
.atn-link {
	position: relative;
	width: 45.2898550725%;
	height: calc(100vw / 768 * 400);
	border: 1px solid #333;
}

.atn-second-area-l div a {
	display: block;
	width: 100%;
	height: 100%;
}

.atn-prelude {
	background: url(/wp-content/uploads/images/top_tile_prelude.png) no-repeat top center;
	background-size: cover;
}

.atn-cat {
	background: url(/wp-content/uploads/images/top_tile_cat.png) no-repeat top center;
	background-size: cover;
}

.atn-sarusaru {
	background: url(/wp-content/uploads/images/top_tile_sarusaru.png) no-repeat top center;
	background-size: cover;
}

.atn-profile {
	background: url(/wp-content/uploads/images/top_tile_profile.png) no-repeat top center;
	background-size: cover;
}

.atn-bbs {
	background: url(/wp-content/uploads/images/top_tile_bbs.png) no-repeat top center;
	background-size: cover;
}

.atn-link {
	background: #00F;
}

.atn-prelude p,
.atn-cat p,
.atn-sarusaru p,
.atn-bbs p,
.atn-link p {
	position: absolute;
	font-size: 12px;
	color: #333;
	padding: 50% 1em 1em;
}

.atn-profile a {
	display: block;
	width: 100%;
	height: 100%;
}

/*
break point
width:1296px
width:999px
width:768px
*/

/* ----------------------------------------------------------------
common(larger-SP)
----------------------------------------------------------------- */
@media screen and (min-width: 481px) {

.atn-prelude p,
.atn-cat p,
.atn-sarusaru p,
.atn-bbs p,
.atn-link p {
	font-size: 16px;
}

}



/* ----------------------------------------------------------------
common(tablet)
----------------------------------------------------------------- */

@media screen and (min-width: 769px) {

.atn-blog-area {
	padding-top: calc(100vw / 1296 * 20);
	padding-bottom: calc(100vw / 1296 * 50);
}

.atn-blog-area h3 {
	margin-top: calc(100vw / 1296 * 20);
}

.atn-more {
	margin-top: calc(100vw / 1296 * 20);
}

.atn-second-area {
	width: 95%;
	padding-bottom: calc(100vw / 1296 * 50);
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.atn-prelude,
.atn-cat,
.atn-sarusaru,
.atn-profile,
.atn-bbs,
.atn-link {
	position: relative;
	display: inline-block;
	width: 22.81%;
	height: calc(100vw / 1296 * 325);
}

.atn-prelude:hover,
.atn-cat:hover,
.atn-sarusaru:hover,
.atn-profile:hover,
.atn-bbs:hover,
.atn-link:hover {
	border: 1px solid #3fa3ff;
}

.atn-prelude p,
.atn-cat p,
.atn-sarusaru p,
.atn-bbs p,
.atn-link p {
	font-size: 12px;
}

}



/* ----------------------------------------------------------------
common(PC)
----------------------------------------------------------------- */

@media screen and (min-width: 1000px) {

.atn-prelude p,
.atn-cat p,
.atn-sarusaru p,
.atn-bbs p,
.atn-link p {
	font-size: 14px;
}

}



/* ----------------------------------------------------------------
common(PC)
----------------------------------------------------------------- */

@media screen and (min-width: 1297px) {

.atn-blog-area {
	padding-top: 20px;
	padding-bottom: 50px;
}

.atn-blog-area h3 {
	margin-top: 20px;
}

.atn-blog-area p {
	font-size: 12px;
}

.atn-more {
	margin-top: 20px;
}

.atn-second-area {
	padding-bottom: 50px;
}

.atn-prelude,
.atn-cat,
.atn-sarusaru,
.atn-profile,
.atn-bbs,
.atn-link {
	height: 325px;
}

.atn-prelude p,
.atn-cat p,
.atn-sarusaru p,
.atn-bbs p,
.atn-link p {
	font-size: 16px;
}

}