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

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

#campuslife .bgWhite{
    background: white;
}
#campuslife .text-lead{
    font-size: 2.2rem;
}
#campuslife .headline-2, #campuslife .headline-3{
    font-size: 1.8rem;
}
#campuslife hr{
    height: 0;
    margin: 40px 0;
    background: none;
    border: none;
    border-top: 1px dashed #FF88BF;
}
/*
- added at 2018.08.01 一人暮らし・下宿をお考えの方へ
--------------------------------------------------------------------------------------------------------------------- */
#campuslife #student-apartment{margin-bottom: 90px;}
#campuslife #student-apartment .image-right{}
#campuslife #student-apartment .image-right .note{text-align: right;}
#campuslife #student-apartment .image-right .text .text-lead{margin-bottom:12px;}
#campuslife #student-apartment .disc-list{margin:0 0 30px 24px;}
#campuslife #student-apartment .disc-list + .text-lead{font-size:1.6rem;}
#campuslife #student-apartment .disc-list li{
	position: relative;
	margin-bottom:6px;
	padding-left:20px;
}
#campuslife #student-apartment .disc-list li::before{
	content:'';
	display: inline-block;
	position: absolute;
	top:4px;
	left:0;
	width: 16px;
	height: 16px;
	background: #FF88BF;
	border-radius:50%;
}
#campuslife #student-apartment hr{
	height:0;
	margin:40px 0 40px 0 ;
	background: none;
	border:none;
	border-top:1px dashed #FF88BF;
}

#campuslife #student-apartment .text-lead + small{
	color:#FF88BF;
	font-size:1.4rem;
}

#campuslife #student-apartment #birthplace-box{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin:20px 0 60px 0;
}
#campuslife #student-apartment #birthplace-box dl{width: 32%;}
#campuslife #student-apartment #birthplace-box dl dt{
	clear:left;
	float:left;
	width: 7em;
}

#campuslife #student-apartment #birthplace-box dl dd{float:left;}
#campuslife #student-apartment #birthplace-box dl dd::before{
	content:'\2026\2026\2026';
	margin-right:1em;
}

/*
- おすすめマンションのご紹介
--------------------------------------------------------------------------------------------------------------------- */
#campuslife #introduction{}
#campuslife #introduction{margin-bottom: 90px;}
#campuslife #introduction .intro-wrap, #campuslife #introduction .wrap-B, #campuslife .flex{
    display: flex;
}
#campuslife #introduction .intro-wrap{
    width: 100%;
}
#campuslife #introduction .wrap-A-left{
    flex: 1 0 300px;
}
#campuslife #introduction .wrap-A-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 0 auto;
    margin-left: 24px;
}
#campuslife #introduction .wrap-B{
    height: auto;
    max-height: 250px;
}
#campuslife #introduction .wrap-B .txt{
    display: block;
    width: 339px;
}
#campuslife #introduction .disc-list p{
    letter-spacing: 0px;
}
#campuslife #introduction .wrap-B dt{
    margin: 12px 0;
}
#campuslife #introduction .disc-list p, #campuslife #introduction .disc-list dd{
	position: relative;
	padding-left:20px;
}
#campuslife #introduction .disc-list p::before, #campuslife #introduction .disc-list dd::before{
	content:'';
	display: inline-block;
	position: absolute;
	top:4px;
	left:0;
	width: 16px;
	height: 16px;
	background: #FF88BF;
	border-radius:50%;
}
#campuslife #introduction .disc-list dd::before{
	background: #666464;
}

#campuslife #introduction .wrap-B .txt + .intro{
    width: 300px;
    height: auto;
    max-height: 250px;
}
#campuslife #introduction #nakatsu .top .flex{
    justify-content: space-between;
}
#campuslife #introduction .flex div{
    position: relative;
    width: 46%;
    height: auto;
}
#campuslife #introduction #tenma .flex div{
    width: 50%;
}
#campuslife #introduction .right-arrow:after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -17px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 9px 9px;
    border-color: transparent transparent transparent #FF88BF;
}
#campuslife #introduction .intro.bottom{
    width: 100%;
    max-width: 639px;
    height: auto;
    max-height: 223px;
}
#campuslife #introduction .intro.bottom .flex{
    justify-content: space-between;
    align-items: flex-end;
}
#campuslife #introduction #shin-osaka .intro.bottom, #campuslife #introduction #tenma .intro.bottom{
    text-align: right;
}
#campuslife #introduction #shin-osaka .intro.bottom img{
    width: 349px;
    height: auto;
}
#campuslife #introduction #tenma .intro.bottom img{
    width: 380px;
    height: auto;
}
#campuslife #exp-accom{
    margin-bottom: 88px;
}
#campuslife #exp-accom .text-lead{
    margin-bottom: 8px;
}
#campuslife #exp-accom .ac-schedule{
    margin-top: 48px;
}
#campuslife #exp-accom .ac-schedule ul{
    display: flex;
    justify-content: space-between;
}
#campuslife #exp-accom .ac-schedule li{
    width: 24%;
}
#campuslife #exp-accom .ac-schedule li p{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 182px;
    color: #FF88BF;
    border: 1px solid #FF88BF;
    text-align: center;
}
#campuslife #exp-accom .ac-schedule li:not(:last-of-type) p:after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #FF88BF;
}
#campuslife #exp-accom .ac-schedule + .ac-schedule li:nth-of-type(3) p:after{
    display: none;
}
#campuslife #exp-accom .far-students dt{
    color: #FF88BF;
    font-weight: bold;
}
#campuslife #exp-accom .far-students dd{
    display: flex;
    justify-content: space-between;
}
#campuslife #exp-accom .far-students ul{
    width: 33%;
}
#campuslife #exp-accom .far-students li{
    display: inline-block;
}
#campuslife #exp-accom .far-students span{
    display: inline-block;
    width: 106px;
}
#campuslife #student-voice{
    margin-bottom: 98px;
    background: #FFF3F9;
}
#campuslife #student-voice .content-inner{
    padding-top: 28px;
    display: flex;
}
#campuslife #student-voice .photo{
    display: block;
    width: 301px;
    height: auto;
}
#campuslife #student-voice .photo img{
    height: auto;
}
#campuslife #student-voice .txt-wrap{
    display: block;
    flex: 1 0 663px;    
}
#campuslife #student-voice .ttl-voice{
    margin-bottom: 28px;
    width: 243px;
}
#campuslife #student-voice dt{
    margin-bottom: 10px;
}


/*
- media query (tablet)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:963px){/*-add190605-*/
#campuslife #introduction .wrap-A-left{
    flex: 1 0 30%;
}
#campuslife #introduction .wrap-A-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 0 65%;
    margin-left: 24px;
}
	
#campuslife #introduction .wrap-B{
    height: auto;
    max-height: none;
}
#campuslife #introduction .wrap-B .txt{
    display: block;
    width: auto;
}
	#campuslife #student-voice .content-inner{
		align-items: flex-end;
	}
#campuslife #student-voice .txt-wrap{
    display: block;
    flex: 1 0 360px;    
}
	
}/*-tablet END-*/

/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
    #campuslife .text-lead{
        font-size: 2rem;
        letter-spacing: -1px;
    }
    #campuslife .headline-2, #campuslife .headline-3{
        margin-bottom: 16px;
        font-size: 1.6rem;
    }

	/*
	- added at 2018.08.01 学生マンションの紹介
	----------------------------------------------------------------------------------------------------------------- */
	#campuslife #student-apartment{margin-bottom: 48px;}
	#campuslife #student-apartment .image-right{
        flex-direction: column-reverse;
    }
	#campuslife #student-apartment .image-right .note{}
	#campuslife #student-apartment .image-right .text .text-lead{
		font-size:1.7rem;
		margin-bottom:6px;
	}
    #campuslife #student-apartment .image-right .image{
        margin-top: 12px;
    }
	#campuslife #student-apartment .disc-list{margin:0 0 20px 0%;}
	#campuslife #student-apartment .disc-list + .text-lead{font-size:1.4rem;}
	#campuslife #student-apartment .disc-list li{
		padding-left:18px;
		font-size:1.2rem;
		line-height: 1.2;
	}
	#campuslife #student-apartment .disc-list li::before{
		top:1px;
		width: 12px;
		height: 12px;
	}
	#campuslife #student-apartment hr{
		margin:20px 0 20px 0 ;
	}

	#campuslife #student-apartment .text-lead + small{
		font-size:1.4rem;
	}

	#campuslife #student-apartment #birthplace-box{
		flex-flow: column wrap;
		margin:20px 0 20px 0;
	}
	#campuslife #student-apartment #birthplace-box dl{
		width: 100%;
		margin-bottom:5px;
	}
	#campuslife #student-apartment #birthplace-box dl dt{
		width: 7em;
	}

	#campuslife #student-apartment #birthplace-box dl dd{}
	#campuslife #student-apartment #birthplace-box dl dd::before{}

/*
- おすすめマンションのご紹介
        --------------------------------------------------------------------------------------------------------------------- */
    #campuslife #introduction{}
    #campuslife #introduction{margin-bottom: 48px;}
    #campuslife #introduction .intro-wrap, #campuslife #introduction .wrap-B, #campuslife .flex{
        display: block;
    }
    #campuslife #introduction .wrap-A-left{
        flex: 0;
        margin: 0 0 12px;
        width: 100%;
    }
    #campuslife #introduction .wrap-A-right{
        padding: 0;
        margin: 0;
    }
    #campuslife #introduction .wrap-B .txt{
        width: 100%;
    }
    #campuslife #introduction .wrap-B dl{
        margin-bottom: 12px;
    }
    #campuslife #introduction .wrap-B dt{
        line-height: 2.4rem;
    }
    #campuslife #introduction .disc-list p, #campuslife #introduction .disc-list dd{
        line-height: 1.6rem;
    }
    #campuslife #introduction .disc-list p::before, #campuslife #introduction .disc-list dd::before{
    	top:2px;
    	width: 12px;
    	height: 12px;
    }
    #campuslife #introduction .wrap-B{
        margin-bottom: 28px;
        max-height: inherit;
    }
    #campuslife #introduction .wrap-B .txt{
        font-size: 1.2rem;
    }
    #campuslife #introduction .wrap-B .txt + .intro{
        display: block;
        width: 100%;
        max-height: none;
    }
    #campuslife #introduction #tenma .wrap-B .txt + .intro{
        display: flex;
    }
    #campuslife #introduction .wrap-B .hosoku{
        font-size: 1.2rem;
    }
    #campuslife #introduction #shin-osaka .wrap-B .hosoku{
        text-align: right;
    }
    #campuslife #introduction #nakatsu .top .flex{
        display: flex;
    }
    #campuslife #introduction .flex div{
        width: 47%;
    }
    #campuslife #introduction .flex.madori div{
        width: 100%;
    }
    #campuslife #introduction #tenma .flex div{
        width: 50%;
    }
    #campuslife #introduction .intro.bottom{
        max-height:inherit;
    }
    #campuslife #introduction .intro.bottom .madori div + div{
        margin-top: 12px;
    }
    #campuslife #introduction #shin-osaka .intro.bottom, #campuslife #introduction #tenma .intro.bottom{
        text-align: right;
    }
    #campuslife #introduction #shin-osaka .intro.bottom img, #campuslife #introduction #tenma .intro.bottom img{
        width: 100%;
    }
    #campuslife #exp-accom{
        margin-bottom: 54px;
    }
    #campuslife #exp-accom .ac-schedule ul{
        display: block;
    }
    #campuslife #exp-accom .ac-schedule li{
        width: 100%;
    }
    #campuslife #exp-accom .ac-schedule li:not(:last-of-type){
        margin-bottom: 24px;
    }
    #campuslife #exp-accom .ac-schedule li p{
        padding: 8px 0;
        width: 100%;
        height: auto;
        letter-spacing: -0.2rem;
    }
    #campuslife #exp-accom .ac-schedule li:not(:last-of-type) p:after{
        top: auto;
        bottom: -17px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        border-width: 10px 10px 0 10px;
        border-color: #ff88bf transparent transparent transparent;
    }
    #campuslife #exp-accom .far-students{
        font-size: 1.2rem;
    }
    #campuslife #exp-accom .far-students ul{
        width: 50%;
    }
    #campuslife #exp-accom .far-students span{
        width: 80px;
    }
    #campuslife #student-voice{
        margin-bottom: 68px;
    }
    #campuslife #student-voice .txt-wrap{
        width: 100%;
        flex: auto;
    }
    #campuslife #student-voice .ttl-voice{
        margin: 0 auto 28px auto;
        width: 60%;
    }
    #campuslife #student-voice dd{
        display: flex;
    }
    #campuslife #student-voice dd .photo-wrap{
        width: 38%;
        position: relative;
    }
    #campuslife #student-voice dd .photo-wrap:before{
        content: "";
        display: block;
        padding-top: 200%;
    }
    #campuslife #student-voice dd .photo-sp{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("/_assets/img/pc/campuslife/apartment/pic_05_sp.png") no-repeat bottom;
        background-size: contain;
    }
    #campuslife #student-voice dd .photo-sp img{
        position: absolute;
        bottom: 0;
    }
    #campuslife #student-voice dd .txt{
        width: 62%;
        padding: 0 0 12px 12px;
        font-size: 1.3rem;
        letter-spacing: -1px;
        text-align: justify;
    }
    #campuslife a.button{
        width: 260px;
        font-size: 1.4rem;
    }
    #campuslife a.button:before{
        top: 55%;
        right: 19px;
        border-width: 5px 0 5px 8px;
    }
    #campuslife a.button:after{
        top: 60%;
        width: 28px;
        height: 28px;
    }


}