@charset "UTF-8";
/* =====================================================================================================================
=
= なにわ歯科衛生専門学校
= single index
=
===================================================================================================================== */

/*
- single 共通
--------------------------------------------------------------------------------------------------------------------- */
#news{}
#news #content-header h1{
	background-image:url('/_assets/img/pc/info/main_image.jpg');
}

#news .content-inner img {
	width: auto;
}

#topics{}
#topics #content-header h1{
	background-image:url('/_assets/img/pc/info/main_image.jpg');
}

/*
- index 新着情報一覧
--------------------------------------------------------------------------------------------------------------------- */
#news.index{}
#topics.index{}

#news.index .content-inner,
#topics.index .content-inner{
	margin-bottom:62px;
}

#news.index p,
#topics.index p{
	margin-bottom:1em;
}

#news.index hr,
#topics.index hr{
	display:block;
	width:100%;
	height:0;
	margin:20px 0;
	background:transparent;
	border:none;
	border-bottom:2px dotted #ff88bf;
}

#news.index .content-inner img,
#topics.index .content-inner img{
	width:auto;
	height:auto;
}

/**
	この記事を見た人はこの記事も見ています
 */
#news.index .relation-link,
#topics.index .relation-link{
	margin-top: 40px;
}

#news.index .relation-link ul,
#topics.index .relation-link ul{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}

#news.index .relation-link ul li,
#topics.index .relation-link ul li{
	width:32%;

}

#news.index .relation-link a,
#topics.index .relation-link a{
	width:32%;

}

#news.index .relation-link img,
#topics.index .relation-link img{
	width:100%;
}

/**
	p=813 ページ対応
 */
#news.index .content-inner .relation_button,
#topics.index .content-inner .relation_button{
	display:block;
	position:relative;
	width:80%;
	margin:0 auto 60px auto;
	padding:12px 0;
	background:#ff88bf;
	border-radius:50px;
	color:#ffffff;
	font-size:1.8rem;
	text-align:center;
	transition:
		background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1)
		, box-shadow 300ms cubic-bezier(0.215, 0.61, 0.355, 1)
		, transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
	box-shadow:2px 2px 0 0 #c665bf;
	transform:translate3d(0,0,0);
}

#news.index .content-inner .relation_button:link,
#topics.index .content-inner .relation_button:link{
	color:#ffffff;
}

#news.index .content-inner .relation_button::before,
#topics.index .content-inner .relation_button::before{
	content:'';
	display:block;
	position:absolute;
	top:50%;
	right: 20px;
	z-index:2;
	width: 0;
	height: 0;
	margin-top: -7px;
	border-style: solid;
	border-width: 7px 0 7px 12.1px;
	border-color: transparent transparent transparent #ff88bf;
	transition:border-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

#news.index .content-inner .relation_button::after,
#topics.index .content-inner .relation_button::after{
	content:'';
	display:block;
	position:absolute;
	z-index:1;
	top:50%;
	right:10px;
	width:36px;
	height:36px;
	margin-top:-18px;
	background:#ffffff;
	border-radius:50%;

}

#news.index .content-inner .relation_button:hover,
#topics.index .content-inner .relation_button:hover{
	background-color:#f855a8;
	box-shadow:0 0 0 0 #c665bf;
	transform:translate3d(2px,2px,0);
}

#news.index .content-inner .relation_button:hover::before,
#topics.index .content-inner .relation_button:hover::before{
	border-color: transparent transparent transparent #f855a8;
}

#news.index .content-inner .relation_button.back::before,
#topics.index .content-inner .relation_button.back::before{
	content:'';
	display:block;
	position:absolute;
	top:50%;
	left: 20px;
	margin-top: -7px;
	border-style: solid;
	border-width: 7px 12.1px 7px 0;
	border-color: transparent #ff88bf transparent transparent ;
	transition:border-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

#news.index .content-inner .relation_button.back::after,
#topics.index .content-inner .relation_button.back::after{
	left:10px;
}

/**
	SNSボタン追加　1906add
 */

#topics #sns-area{
width: 100%;
padding: 0 0;
margin: 0 auto 50px;
display:flex;
justify-content:space-between;
}

#topics #sns-area li{
	width:31%;
	text-align:center;
	border:1px solid #ccc;
}

#topics #sns-area li a{
	display:block;
	width:100%;
	padding:20px 0;
	font-size:1.9rem;
	font-weight:bold;
}

#topics #sns-area li.sns-twitter a{
	color: #1dade5;
}
#topics #sns-area li.sns-line a{
	color:#44af35
}

#topics #sns-area li.sns-fb a{
	color: #395590;
}

#topics #sns-area li a::before{
content: '';
display: inline-block;
width: 40px;
height: 40px;
margin-right: 10px;
margin-top:-5px;
background: no-repeat 0 center;
background-size: contain;
vertical-align: middle;
}


#topics #sns-area li.sns-twitter a::before{
	background-image:url('/_assets/img/icon_twitter.png');
	}
#topics #sns-area li.sns-line a::before{
	background-image:url('/_assets/img/icon_line.png');
	}
#topics #sns-area li.sns-fb a::before{
	background-image:url('/_assets/img/icon_facebook.png');
	}



/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){

	#news.index .content-inner .relation_button,
	#topics.index .content-inner .relation_button{
		padding:12px 52px 12px 22px;
		font-size:1.4rem;
	}


	#news.index .relation-link,
	#topics.index .relation-link{}

	#news.index .relation-link ul,
	#topics.index .relation-link ul{
		display:flex;
		flex-flow:row wrap;
		justify-content:space-between;
	}

	#news.index .relation-link ul li,
	#topics.index .relation-link ul li{
		width:47%;

	}

	#news.index .relation-link a,
	#topics.index .relation-link a{
		font-size:1.4rem;

	}

	#news.index .relation-link img,
	#topics.index .relation-link img{
		width:100%;
	}


}

@media screen and (max-width:768px){
#topics #sns-area{
	width: 100%;
}
#topics #sns-area li a{
	font-size:1.6rem
}
#topics #sns-area li a::before{
width: 30px;
height: 30px;
margin-right: 10px;
}

}

@media screen and (max-width:414px){
		#topics #sns-area li a{
			text-align:center;
		}
	#topics #sns-area li a::before{
		margin: 0 auto;
		display:block;
	}

}



.wrap-topics-contents h1 {
	/*font-size: 8.4rem;*/
	font-size: 28px;
	margin-bottom: 20px;
	font-weight: 700;
}
.wrap-topics-contents h2 {
	font-size: 26px;
	margin-bottom: 20px;
	font-weight: 700;
}
.wrap-topics-contents h3 {
	font-size: 24px;
	margin-bottom: 20px;
	font-weight: 700;
}
.wrap-topics-contents h4 {
	font-size: 22px;
	margin-bottom: 20px;
	font-weight: 700;
}
.wrap-topics-contents h5 {
	font-size: 20px;
	margin-bottom: 20px;
	font-weight: 700;
}
.wrap-topics-contents h6 {
	font-size: 18px;
	margin-bottom: 20px;
	font-weight: 700;
}
@media screen and (max-width:768px){
	.wrap-topics-contents h1 {
		/*font-size: 3.6rem;*/
		font-size: 22px;
	}
	.wrap-topics-contents h2 {
		font-size: 20px;
	}
	.wrap-topics-contents h3 {
		font-size: 18px;
	}
	.wrap-topics-contents h4 {
		font-size: 16px;
	}
	.wrap-topics-contents h5 {
		font-size: 14px;
	}
	.wrap-topics-contents h6 {
		font-size: 12px;
	}
}