@charset:"UTF-8";

/*-----------------------------------
style.css
----------------------------------*/

@media all and (min-width:769px){
/*-----------------------------------
main
----------------------------------*/
main h1{
	background: url(../images/title.png);
	background-repeat: no-repeat;
	background-size:100%;
}

/*-----------------------------------
contents
----------------------------------*/
.contents:before,.contents:after{
	display: none;
}
.topics_detail h3{
	font-size: 28px;
    font-weight: bold;
    margin: 0 0 40px;
    padding: 10px 0 20px 40px;
    position: relative;
    border-bottom: 5px solid #ccc;
}
.topics_detail h3:before{
	content: "";
    background: url(https://aoisora.care/images/crown01.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 65px;
    height: 65px;
    position: absolute;
    top: -30px;
    left: 0;
}
.topics_detail #up_ymd{
	width: fit-content;
    margin: 0 0 20px auto;
}
.topics_detail .nav_cat{
	border:1px solid #ccc;
	padding: 0 10px;
}
.topics_detail #detail{
	line-height: 2.3em;
}
.topics_detail #detail .detailText{
	margin: 0 0 20px;	
}
.backORcloseBtn{
	width: fit-content;
    margin: 30px auto 30px;
}
.backORcloseBtn a{
	display: block;
	border: 1px solid #ccc;
	border-radius: 100px;
	margin: 0 5px;
	padding: 2px 10px;
	width: fit-content;
	min-height: 32px;
	font-size: 16px;
	transition: all ease 0.8s;
}
.backORcloseBtn a:hover{
	background:#add8e6;
}
}

@media all and (max-width:768px){
/*-----------------------------------
main
----------------------------------*/
main h1{
	background: url(../images/title.png);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
}
main h1 span{
	padding: 2% 50px 0;
}
.pan{
	font-dize:0.7em;
}
/*-----------------------------------
contents
----------------------------------*/
.contents:before,.contents:after{
	display: none;
}
.topics_detail h3{
	font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0 0 40px;
    padding: 10px 0 20px 40px;
    position: relative;
    border-bottom: 5px solid #ccc;
}
.topics_detail h3:before{
	content: "";
    background: url(https://aoisora.care/images/crown01.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 65px;
    height: 65px;
    position: absolute;
    top: -30px;
    left: 0;
}
.topics_detail #up_ymd{
	font-size:14px;
	width: fit-content;
    margin: 0 0 20px auto;
}
.topics_detail .nav_cat{
	border:1px solid #ccc;
	padding: 0 10px;
}
.topics_detail #detail{
	line-height: 2.3em;
}
.topics_detail #detail .detailText{
	margin: 0 0 20px;	
}
.backORcloseBtn{
	width: fit-content;
    margin: 30px auto 30px;
}
.backORcloseBtn a{
	display: block;
	border: 1px solid #ccc;
	border-radius: 100px;
	margin: 0 5px;
	padding: 2px 10px;
	width: fit-content;
	min-height: 32px;
	font-size: 16px;
	transition: all ease 0.8s;
}
.backORcloseBtn a:hover{
	background:#add8e6;
}
}