@charset "UTF-8";
/* =====================================================================================================================
=
= なにわ歯科衛生専門学校
= oc_web index
=
===================================================================================================================== */
/*
- index online
--------------------------------------------------------------------------------------------------------------------- */
.wrap_oc_web img{
 width: auto;
 max-width: 100%;
}
#oc_web-header {
 position: relative;
 height: 630px;
}
#oc_web-header h1{
 height: 630px;
}
#oc_web-header h1 img{
 object-fit: cover;
 height: 100%;
 width: 100%;
}
#oc_web-header p{
 position: absolute;
 top: 78px;
 left: 0;
 right: 0;
 margin: auto;
 max-width: 1346px;
}
#oc_web-header p::after{
 content: "";
 display: block;
 background:url("../../img/pc/oc_web/main_ic.png") no-repeat left top /100% auto;
 width: 197px;
 height: 158px;
 position: absolute;
 top: 100%;
 right: 156px;
 margin: 50px 0 0;
}
#oc_web-header p span{
 display: flex;
 align-content: center;
 align-items: center;
 justify-content: center;
 background: #FF4ABF;
 border-radius: 50%;
 width: 274px;
 height: 274px;
 color: #fff;
 font-size: 34px;
 line-height: 1.4;
 text-align: center;
 margin: 0 0 0 auto;
}

#event{
 overflow: hidden;
 position: relative;
 background: url("../../img/pc/oc_web/event_bg.png") repeat center top ;
 padding: 100px 4%;
 text-align: center;
}
#event h2{
text-align: center;
}
#event p{
 margin-bottom: 15px;
 text-align: center;
}
#event h2 img{
 height: 199px;
}
#event p img{
 height: 40px;
}
.event-list{
 position: relative;
 display: flex;
 justify-content: space-between;
 max-width: 962px;
 margin: 0 auto;
}
.event-list >li{
 position: relative;
 border-radius: 50px;
background: rgb(255,160,0);
background: -moz-linear-gradient(top,  rgba(255,160,0,1) 55%, rgba(255,92,0,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(255,160,0,1) 55%,rgba(255,92,0,1) 100%);
background: linear-gradient(to bottom,  rgba(255,160,0,1) 55%,rgba(255,92,0,1) 100%);
 width:47% ;
max-width: 446px;
}
.event-list >li a{
 display: block;
 padding: 40px 10px 65px;
}
.event-list >li + li{

background: rgb(0,211,186);
background: -moz-linear-gradient(top,  rgba(0,211,186,1) 55%, rgba(0,163,206,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(0,211,186,1) 55%,rgba(0,163,206,1) 100%); 
background: linear-gradient(to bottom,  rgba(0,211,186,1) 55%,rgba(0,163,206,1) 100%);

}
.event-list >li::after{
 content: "";
	display: block;
	border-bottom:3px #fff solid;
	border-right: 3px #fff solid;
	width: 28px;
	height: 28px;
	-webkit-transform: rotate(45deg);
transform: rotate(45deg);
	position: absolute;
 bottom: 30px;
	right: 0;
 left: 0;
 margin: auto;
}
.event-list >li h3{
 margin-bottom: 30px;
}
.event-list >li h3::after{
 content: "";
 display: block;
 background: #fff;
 width: 136px;
 height: 2px;
 margin: 38px auto 0;
}
.event-list >li h3 img{
 height: 85px;
}
.event-list >li p{
 color: #fff;
 font-size: 2rem;
}
.event-list >li ul{
 display: inline-block;
}
.event-list >li li{
 color: #fff;
 font-size: 23px;
 text-align: left;
 line-height: 1.5;
}
.event-list::before{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/event_deco01.png") no-repeat left top /100% auto;
 width: 193px;
 height:328px ;
 position: absolute;
 right: 100%;
 top: -145px;
 margin: 0 88px 0 0;
}
.event-list::after{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/event_deco02.png") no-repeat left top /100% auto;
 width: 311px;
 height: 311px;
 position: absolute;
 left: 100%;
 bottom: -80px;
 margin: 0 0 0 90px;
}
/*
- media query (tablet)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:963px){

	}/*-tablet END-*/

/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
 #oc_web-header {
 height: 200px;
 margin-top: 80px;
}
#oc_web-header h1{
 height: 200px;
}
#oc_web-header p{
 top: 3vw;
 max-width: 92%;
}
#oc_web-header p::after{
 content: "";
 display: block;
 background:url("../../img/pc/oc_web/main_ic.png") no-repeat left top /100% auto;
 width: 20vw;
 height: 20vw;
 top: 100%;
 right: 8vw;
 margin: 5px 0 0;
}
#oc_web-header p span{
 width: 30vw;
 height: 30vw;
 font-size: 5vw;
}
 
 
#event{
 padding: 40px 4% ;
}
/*#event h2{
 margin-bottom: 50px;
}*/
#event h2 img{
 height: auto;
 max-height: 199px;
}
#event p{
 margin-bottom: 15px;
}
#event p img{
 height: auto;
 max-height: 40px;
}
.event-list{
 display: block;
 max-width: 962px;
 margin: 0 auto;
}
.event-list >li{
 position: relative;
 border-radius: 50px;
background: rgb(255,160,0);
background: -moz-linear-gradient(top,  rgba(255,160,0,1) 55%, rgba(255,92,0,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(255,160,0,1) 55%,rgba(255,92,0,1) 100%);
background: linear-gradient(to bottom,  rgba(255,160,0,1) 55%,rgba(255,92,0,1) 100%);
 width:auto;
max-width: 446px;
 margin: 0 auto;
}
.event-list >li a{
 padding: 20px 20px 40px;
}
.event-list >li + li{margin-top: 20px;}
.event-list >li::after{
	border-bottom:2px #fff solid;
	border-right: 2px #fff solid;
	width: 14px;
	height: 14px;
 bottom: 20px;
}
.event-list >li h3{
 margin-bottom: 20px;
}
.event-list >li h3::after{
 margin: 20px auto 0;
}
.event-list >li h3 img{
 height: auto;
 max-height: 85px;
}
.event-list >li p{
 font-size: 1.8rem;
}
.event-list >li li{
 font-size: 1.8rem;
}
.event-list::before{
 display: none;
}
.event-list::after{
 display: none;
}
}/*SP END*/




#weboc{
 background: #E5FBF8;
 padding: 84px 0 0;
}
/***/
#weboc-top{
 padding: 0 4%;
}
#weboc-top h2{
 margin-bottom: 50px;
 text-align: center;
}
#weboc-top h2 img{height: 80px;}
#weboc-top h2 + p{
 max-width: 950px;
 margin: 0 auto;
 font-size: 2rem;
 line-height: 1.8;
}
.weboc-date{
 display: flex;
 align-items: center;
 justify-content: center;
 background: url("../../img/pc/oc_web/weboc_date_bg.png") no-repeat left top /100% 100%;
 max-width: 492px;
 height: 150px;
 margin: 50px auto 96px;
}
.weboc-date dt{
 width:140px ;
}
.weboc-date dd{
 padding: 0 0 0 20px;
 color: #fff;
 font-size: 90px;
 font-weight: bold;
 text-shadow: 4px 4px 5px rgba(248,85,168,0.8);
}
/***/
#weboc-point{
 padding: 0 4% 95px;
 text-align: center;
}
#weboc-point h3{
 position: relative;
 max-width: 926px;
 margin: 0 auto 40px;
 text-align: center;
}
#weboc-point h3::before{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/weboc_point_title_deco01.png") no-repeat left top /100% auto;
 width: 311px;
 height: 311px;
 position: absolute;
 left: -45px;
 bottom: -40px;
}
#weboc-point h3::after{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/weboc_point_title_deco02.png") no-repeat left top /100% auto;
 width: 122px;
 height: 128px;
 position: absolute;
 right:20px;
 bottom: 40px;
}
#weboc-point ul li + li{
 margin-top: 25px;
}

/*** 20210521add ***/
#weboc-schedule{
	background: #d9f8f5;
	padding: 105px 4% 45px;
}
#weboc-schedule h3{
	margin-bottom: 110px;
	text-align: center;
}
#weboc-schedule ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 964px;
	margin: 0 auto;
}
#weboc-schedule ul li{
	width: 100%;
	max-width: 436px;
	margin-bottom: 110px;
}
#weboc-schedule ul li p{
	background: #fff;
	border: 1px solid #00D3BA;
	margin-top: 7px;
}
#weboc-schedule ul li p span{
	background: #00D3BA;
	display: inline-block;
	margin-right: 20px;
	padding: 13px 18px;
	text-align: center;
	width: 30%;
	max-width: 147px;
}
#weboc-schedule ul li p img{
	height: 27px;
	vertical-align: middle;
}
#weboc-schedule ul li p span img{
	height: auto;
}
/*
- media query (tablet)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:963px){
#weboc-schedule h3{
	margin-bottom: 50px;
}
#weboc-schedule ul li{
	width: 45%;
	margin-bottom: 65px;
}
#weboc-schedule ul li p span{
	margin-right: 10px;
	padding: 13px 10px;
}
#weboc-schedule ul li p img{
	height: 23px;
}
}/*-tablet END-*/
/*** //20210521add ***/

/***/
#weboc-procedure{
 background: url("../../img/pc/oc_web/weboc_procedure_bg.png") repeat;
}
.procedure{
 padding: 80px 4% 90px;
}
.procedure h3{
 margin-bottom: 50px;
 text-align: center;
}
.procedure-step{
 display: flex;
 justify-content: space-between;
 max-width: 964px;
 margin: 0 auto;
}
.procedure-step > li{
 border: 3px #00D3BA solid;
 background: #fff;
 width: 32%;
 max-width: 302px;
 padding: 0 26px 20px;
}
.procedure-step > li h4{
 background: #00D3BA;
 padding: 24px 28px;
 margin:0 -26px 24px;
}
.procedure-step > li h4 img{
 height: 27px;
}
.procedure-step > li p{
 margin-bottom: 20px;
 font-size: 15px;
 line-height: 1.8;
}
.procedure-step > li p > img{
 height: 64px;
}
.procedure-step > li p.flex{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 45px -10px 0;
}
.procedure-step > li:last-of-type figure{
 margin-top: -10px;
}

.reserv-btn{
 margin: 50px auto 0;
 text-align: center;
}
.reserv-tel{
 margin: 30px 0 0;
 font-size: 22px;
 font-weight: bold;
 text-align: center;
}
.reserv-tel img{
 height: 36px;
 margin: 0 0 0 22px;
 vertical-align: -0.1em;
}
/***/
.faq {
	padding: 90px 4% 120px;
}
.faq h3{
 margin-bottom: 40px;
 text-align: center;
}
.faq_inner {
	max-width: 962px;
	margin: auto;
	position: relative;
}
.faq_box {
	border: 1px solid #666464;
	margin-bottom: 30px;
}
.faq_box dt {
	background: #CCF6F1;
	padding: 30px 30px 30px 130px;
	position: relative;
	cursor: pointer;
}
.faq_box dt.q_on {
	border-bottom: 1px solid #666464;
}
.faq_box dt .faq_q {
	position: absolute;
	left: 40px;
 width: 31px;
}
.faq_box dt p {
	font-size: 2rem;
	font-weight: bold;
 line-height: 1.4;
}
.faq_box dd {
	border-top: 1px solid #666464;
	background: #FFF;
	padding: 30px 30px 30px 130px;
	display: none;
}
.faq_box dd .faq_a {
	position: absolute;
	left: 40px;
 width: 35px;
}
.faq_box dd p {
	font-size: 2rem;
	font-weight: bold;
	color: #ff88bf;
 line-height: 1.4;
} 
.faq_switch {
	background: #E5FBF8;
	border: 1px solid #00D3BA;
	position: absolute;
	top: 24px;
	right: 30px;
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.faq_switch span {
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
}
.faq_switch span::before,
.faq_switch span::after {
	content: '';
	display: block;
	width: 20px;
	height: 3px;
	border-radius: 5px;
	background: #00D3BA;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.faq_switch span::after {
	background: #00D3BA;
	transform: translateY(-50%) rotate(90deg);
	transition: 0.5s;
}
.faq_switch span.active::after {
	transform: rotate(0);
	transition: 0.5s;
}
.faq .reserv-btn{
 margin-top: 115px;
}

/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
#weboc{
 padding: 40px 0 0;
}
#weboc-top h2{
 margin-bottom: 30px;
}
#weboc-top h2 img{
 height: auto;
 max-height: 75px;
 }
#weboc-top h2 + p{
 font-size: 2rem;
 line-height: 1.6;
}
.weboc-date{
 width: 90%;
 height: 26vw;
 max-height: 150px;
 margin: 30px auto 40px;
}
.weboc-date dt{
 width:100px ;
}
.weboc-date dd{
 padding: 0 0 0 10px;
 font-size: 60px;
}
/***/
#weboc-point{
 padding: 0 4% 50px;
}
#weboc-point h3{
 margin: 0 auto 30px;
}
 #weboc-point h3 img{
  max-height: 150px;
 }
#weboc-point h3::before{
 width: 180px;
 height: 180px;
 left: -50px;
 bottom: -30px;
}
#weboc-point h3::after{
 width: 60px;
 height:66px ;
 right:0px;
 bottom: 10px;
}
#weboc-point ul li + li{
 margin-top: 20px;
} 

/*** 20210521add ***/
#weboc-schedule{
	padding: 40px 4%;
}
#weboc-schedule h3{
	margin-bottom: 30px;
}
#weboc-schedule h3 img{
	max-height: 150px;
}
#weboc-schedule ul li{
	margin-bottom: 20px;
}
#weboc-schedule ul li:last-child{
	margin-bottom: 0;
}
#weboc-schedule ul li p span{
	margin-right: 10px;
	padding: 12px 10px;
}
#weboc-schedule ul li p span img{
	max-height: 18px;
}
#weboc-schedule ul li p img{
	height: 20px;
}
/*** //20210521add ***/

 /***/
.procedure{
 padding: 40px 4% 40px;
}
.procedure h3{
 margin-bottom: 30px;
}
 .procedure h3 img{
  max-height: 150px;
 }
.procedure-step{
 display: block;
}
.procedure-step > li{
 width: auto;
 max-width: 302px;
 padding: 0 15px 20px;
 margin: 0 auto;
}
 .procedure-step > li + li{
  margin-top: 20px;
 }
.procedure-step > li h4{
 padding: 20px 20px;
 margin:0 -15px 20px;
}
.procedure-step > li h4 img{
 height: 20px;
}
.procedure-step > li p{
 margin-bottom: 15px;
 font-size: 14px;
 line-height: 1.6;
}
.procedure-step > li p > img{
 height: 64px;
}
.procedure-step > li p.flex{
 justify-content: center;
 margin: 30px 0 0;
}
.procedure-step > li:last-of-type figure{
 margin-top: -5px;
}

.reserv-btn{
 margin: 30px auto 0;
}
.reserv-tel{
 margin: 30px 0 0;
 font-size: 22px;
}
.reserv-tel img{
 display: block;
 height: 36px;
 margin: 10px auto 0;
}
/**/
	.faq {
		padding: 40px 4%;
	}
 .faq h3 img{
  max-height: 150px;
 }
	.faq_box dt {
		padding: 12px 50px 14px 50px;
	}
	.faq_box dt .faq_q {
		left: 10px;
  width: 20px;
	}
	.faq_switch {
		right: 10px;
		top: 10px;
	width: 30px;
	height: 30px;
	}
.faq_switch span {
	width: 18px;
	height: 18px;
}
.faq_switch span::before,
.faq_switch span::after {
	width: 18px;
}
	.faq_box dt p {
		font-size: 1.8rem;
	}
	.faq_box dd {
		padding: 10px 10px 10px 50px;
	}
	.faq_box dd .faq_a {
		left: 10px;
  width: 22px;
	}
 .faq .reserv-btn {
    margin-top: 50px;
}
}/*SP END*/

/***consul**/
#consul{
 background: #FFF5E5;
 padding: 85px 0 0;
}
#consul-top{
 padding: 0 4%;
}
#consul-top h2{
 margin-bottom: 50px;
 text-align: center;
}
#consul-top h2 img{height: 80px;}
#consul-top h2 + p{
 max-width: 965px;
 margin: 0 auto;
 font-size: 2rem;
 line-height: 1.8;
}
.consul-date{
 position: relative;
 background: #fff;
 max-width: 750px;
 height: 170px;
 padding: 32px 0;
 margin: 60px auto 65px;
	text-align: center;
}
.consul-date img{
 max-height: 100%;
}
/***/
#consul-point{
 padding: 0 4% 130px;
 text-align: center;
}
#consul-point h3{
 position: relative;
 max-width: 926px;
 margin: 0 auto 40px;
 text-align: center;
}
/*#consul-point h3::before{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/consul_deco01.png") no-repeat left top /100% auto;
 width: 303px;
 height: 454px;
 position: absolute;
 top: -180px;
 left: -250px;
}
#consul-point h3::after{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/consul_deco02.png") no-repeat left top /100% auto;
 width: 196px;
 height:130px ;
 position: absolute;
 right:0;
 bottom: 80px;
}*/
#consul-point ul li + li{
 margin-top: 25px;
}
/***/
#consul-procedure{
 background: url("../../img/pc/oc_web/consul_procedure_bg.png") repeat;
}
#consul-procedure .procedure-step > li{
 border: 3px #FFA000 solid;
}
#consul-procedure .procedure-step > li h4{
 background: #FFA000;
}
/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
 #consul{
 padding: 40px 0 0;
}
#consul-top h2{
 margin-bottom: 30px;
}
#consul-top h2 img{
 height: 75px;
 }
#consul-top h2 + p{
 font-size: 2rem;
 line-height: 1.6;
}
.consul-date{
 height: auto;
 padding: 20px 20px;
 margin: 30px auto 35px;
}
/***/
#consul-point{
 padding: 0 4% 50px;
}
#consul-point h3{
 margin: 0 auto 30px;
}
 #consul-point h3 img{
  max-height: 150px;
 }
#consul-point h3::before{
 width: 150px;
 height: 227px;
 top: -50px;
 left: -70px;
}
#consul-point h3::after{
 width: 80px;
 height:60px ;
 bottom: 10px;
}
#consul-point ul li + li{
 margin-top: 20px;
}

}/*SP END*/


/**more**/
#more{
 background: #FFF3F9;
 padding: 120px 4% 130px;
}
#more h2{
 margin-bottom: 85px;
 text-align: center;
}
#more h2 img{
 height: 138px;
}
#more h3{
 margin-bottom: 25px;
 text-align: center;
}
#more h3 span{
 display: block;
 width: 220px;
 margin: 0 auto 10px;
}
#more h3 > img{
 height: 36px;
}

.senior_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
 max-width: 962px;
 margin: 0 auto 50px;
}
.senior_list li {
	max-width: 476px;
	width: 50%;
	background: #FFF;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-right: 1px solid #ff88bf;
	border-bottom: 1px solid #ff88bf;
	margin-bottom: 13px;
}
.senior_list li:nth-child(odd) {
	margin-right: 1%;
}
.senior_list li img {
	width: auto;
}
.senior_list li h4 {
	font-size: 2rem;
	font-weight: bold;
}
.senior_list li figure {
	width: 30%;
}
.senior_list li .senior_texts {
	width: 68%;
	margin-left: 2%;
}
.senior_list .senior_list_col1 h4 {
	color: #ff88bf;
}
.senior_list .senior_list_col2 h4 {
	color: #ffbe00;
}
.senior_list .senior_list_col3 h4 {
	color: #8cdc0a;
}
.senior_list .senior_list_col4 h4 {
	color: #0aa0d2;
}
.senior_list li p {
	font-size: 1.5rem;
}

#more .btn{
 position: relative;
 max-width: 463px;
 margin: 0 auto;
 text-align: center;
}
/*#more .btn::before{
 content: "";
 display: block;
 background: url("../../img/pc/oc_web/more_doco01.png") no-repeat left top /100% auto;
 width: 311px;
 height: 311px;
 position: absolute;
 right:100%;
 top: 10px;
 margin: 0 35px 0 0;
}*/
/*
- media query (tablet)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:963px){

	}/*-tablet END-*/

/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
#more{
 padding: 60px 4% 80px;
}
#more h2{
 margin-bottom: 40px;
}
#more h2 img{
 height: auto;
 max-height: 128px;
}
#more h3{
 margin-bottom: 20px;
}
#more h3 span{
 width: 180px;
 margin: 0 auto 10px;
}
#more h3 > img{
 height: auto;
 max-height: 36px;
}
.senior_list {
 margin: 0 auto 30px;
}
 .senior_list li {
		width: 100%;
		margin-right: 0 !important;
	}
	.senior_list li img {
		width: 100%;
	}

#more .btn::before{
 display: none;
}
}/*SP END*/

/*** END r ***/