@charset "utf-8";

/* modal */
div.modal-container {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 2147483647;
}
div.modal-body {
	width: 100%;
	height: 100vh;
	background: #000000;
	opacity: 0.8;
	position: absolute;
}
div.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.2);
}
div.modal-close-btn {
	text-align: right;
}
div.modal-close-btn span {
	color: #ffffff;
	cursor: pointer;
	font-size: 1.5rem;
}
div.modal-close-btn span:hover {
	color: #6c757d;
}

/* modal Safari */
_::-webkit-full-page-media, :future, :root div.modal-container {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 2147483647;
}
_::-webkit-full-page-media, :future, :root div.modal-body {
	width: 100%;
	height: 100vh;
	background: #000000;
	opacity: 0.8;
	position: absolute;
}
_::-webkit-full-page-media, :future, :root div.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.2);
}
_::-webkit-full-page-media, :future, :root div.modal-close-btn {
	text-align: right;
}
_::-webkit-full-page-media, :future, :root div.modal-close-btn span {
	color: #ffffff;
	cursor: pointer;
	font-size: 1.5rem;
}
_::-webkit-full-page-media, :future, :root div.modal-close-btn span:hover {
	color: #6c757d;
}

p.topimage_1 {
background-image: url(../img/home/topimage_1.png);
}
p.topimage_2 {
background-image: url(../img/home/topimage_2.png);
}
p.topimage_3 {
background-image: url(../img/home/topimage_3.png);
}

p.topimage_1 img,p.topimage_2 img,p.topimage_3 img {
margin-top: 71px;
max-width: 100%;
}
div.section {
margin-bottom: 50px;
padding: 0;
border: 1px solid #fff;
float: left;
clear: none;
width: 405px;
}

/* news */
div.news,
div.facebook,
div.link {
margin-right: 50px;
}

/* topics */
div.topics h2 {
margin-top: 29px;
position: relative;
}
div.topics h2 img {
position: absolute;
bottom: -3px;
}
div.topics ul.topics-list li {
	margin: 0 0 0.5em;
    padding: 0.5em 0;
	border-bottom: 1px dotted #ccc;
}

/* facebook */
div.facebook h2 {
padding: 0.7em 19px;
border: none;
background: #EDEFF4;
}
div.facebook {
border-color: #EDEFF4;
}

/* link */
div.link {
background: #F9FAFB;
}
div.link h2 {
padding: 20px 27px;
border: none;
}
div.link ul {
margin: 0;
padding-bottom: 10px;
text-align: center;
}
div.link ul li {
margin-bottom: 15px;
padding: 0 15px;
background: none;
}
div.link ul li img {
border: 1px solid #aaa;
}

/* more */
p.more {
text-align: right;
}
p.more a {
padding:0.4em 12px 0.4em 30px;
border: 1px solid #F77088;
color: #fff;
background: #F77088 url(../img/icon_arrow_nav01b.png) no-repeat 10px 50%;
-webkit-background-size: 10px 10px;
background-size: 10px 10px;
text-decoration: none;
}
p.more a:hover {
color: #F77088;
background-color: #fff;
background-image: url(../img/icon_arrow_nav01d.png);
}



@media screen and (max-width:1299px){

div.contents_box {
padding-right: 0;
padding-left: 0;
}
div.section {
margin: 0 -5px 30px 5%;
width: 42%;
}
div.news,
div.facebook {
margin-right: 0;
}
div.facebook iframe,
div.link ul li img {
width: 100% !important;
height: auto;
}

} /* max-width:1299px */



@media screen and (max-width:949px){

div.section {
margin: 0 2% 20px;
width: 96%;
}
div.link ul li img {
max-width: 363px;
}

} /* max-width:949px */



@media screen and (max-width:849px){
/* modal */
div.modal-content {
position: absolute;
transform: translate(-50%, -50%) scale(2);
}
/* modal Safari */
_::-webkit-full-page-media, :future, :root div.modal-content {
position: absolute;
transform: translate(-50%, -50%) scale(2);
}
	
div.section {
margin: 0 7% 20px;
width: 86%;
}
} /* max-width:849px */



@media screen and (max-width:649px){

p.topimage {
margin: 0;
height: auto !important;
text-align: center;
background: none;
}
p.topimage img {
margin-top: 25px;
margin-bottom: 35px;
width: 85% !important;
}

} /* max-width:649px */