@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　unv-facility
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.floor h2.ttl-lead,
.sec h2.ttl-lead{
	font-size:min(2.28vw,3.5rem);
}
.nav-course-middle > ul > li {
    width: 20%;
}
.nav-course-middle .btn-highlight {
	padding-inline: min(2.6vw, 30px);
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* intro
-----------------------------------------------------------------*/
.intro{
	padding: 90px 0 0;
}
.intro h2{
	margin-bottom: 110px;
}
.intro .pic-main{
	position: relative;
	margin-bottom: 80px;
}
.intro .pic-main .caption{
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--light);
}
.intro .pic-main + .txt{
	margin-bottom: 120px;
	text-align: center;
}
.page-nav{
	justify-content: space-between;
	max-width: 1030px;
	margin-inline: auto;
}
.page-nav li{
	max-width: 235px;
	width: calc((100% - 30px)/4);
}

/* 宝塚 */
.p-facility._takarazuka .page-nav{
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1060px;
	margin-inline: auto;
}
.p-facility._takarazuka .page-nav li{
	width: calc((100% - 120px)/4);
	margin: 0 15px;
}
.p-facility._takarazuka .page-nav li:nth-child(n+5){
	margin-top: 30px;
}


/* floor
-----------------------------------------------------------------*/
.floor{
	padding: 160px 0;
}
.floor h2{
	margin-bottom: 50px;
	text-align: left;
}
.floor02{
	background: var(--beige);
}

.features-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.features-list li{
	max-width: 620px;
	width: calc(50% - 10px);
}
.features-list .pic{
	margin-bottom: 40px;
}
.features-list .txt-area{
	max-width: 290px;
	width: 48.4%;
}
.features-list .txt-area h3{
	margin-bottom: 20px;
	font-size:min(1.76vw,2.7rem);
	line-height: 1.4;	
}
.features-list .txt-area .txt{
	font-size:min(1.04vw,1.6rem);
	text-align: justify;	
}
.features-list .pic-sub{
	max-width: 300px;
	width: 48.4%;
}

.features-list02 li:nth-child(n+2){
	margin-top: 120px;
}
.features-list02 .pic-main{
	max-width: 894px;
	width: 68.8%;
}
.features-list02 .pic-main h3{
	margin: 15px 0 5px;
	line-height: 1.5;
}
.features-list02 .pic-sub{
	max-width: 365px;
	width: 28.08%;
}
.features-list02 .pic-sub h3{
	margin: 15px 0 25px;
}
.features-list02 h3{	
	font-size:min(1.3vw,2rem);
	line-height: 1.4;
}
.features-list02 .txt{
	font-size:min(1.04vw,1.6rem);	
}

.features-list03{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.features-list03 li{
	max-width: 620px;
	width: calc(50% - 10px);
}
.features-list03 li:nth-child(n+3){
	margin-top: 80px;
}
.features-list03 .pic{
	margin-bottom: 35px;
}
.features-list03 h3{
	margin-bottom: 15px;
	font-size:min(1.76vw,2.7rem);
	line-height: 1.4;	
}
.features-list03 .txt{
	font-size:min(1.04vw,1.6rem);
	text-align: justify;	
}

/* 中津 */
.p-facility._nakatsu .other{
	display: none;
}
.p-facility._nakatsu .floor04{
	padding: 0 0 160px;
}

/* 和歌山 */
.p-facility._wakayama .tab-nav{
	display: flex;
	justify-content: center;
	margin-bottom: 80px;
}
.p-facility._wakayama .tab-nav li{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 190px;
	width: calc(50% - 14px);
	height: 46px;
	margin: 0 7px;
	border: 1px solid var(--dark);
	border-radius: 100vmax;
	background:  var(--light);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
	cursor: pointer;
	transition: .3s;
}
.p-facility._wakayama .tab-nav li.current,
.p-facility._wakayama .tab-nav li:hover{
	background: var(--dark);
	color:  var(--light);	
}
.campus-tab-cont + .campus-tab-cont{
	display: none;
}
.p-facility._wakayama .floor-nishinosho{
	padding: 140px 0 0;
}
.p-facility._wakayama .floor02 .features-list03 li:nth-child(n+3){
	max-width: 406px;
	width: calc((100% - 20px)/3);
}
.p-facility._wakayama .floor04{
	padding: 0;
}
.p-facility._wakayama .floor04 .features-list li{
	max-width: none;
	width: 100%;
}
.p-facility._wakayama .floor04 .features-list .txt-area {
    max-width: 875px;
    width: 67.3%;
}
.p-facility._wakayama .floor04 .features-list .pic-sub {
    max-width: 365px;
    width: 28.08%;
}
.p-facility._wakayama .floor04 .layout-box{
	flex-direction: row-reverse;
}

/* 宮古島 */
.p-facility._miyakojima .page-nav{
	max-width: 500px;
}
.p-facility._miyakojima .page-nav li{
	width: calc(50% - 5px);
}
.p-facility._miyakojima .floor.spot{
	background: var(--beige);
}

/* sec
-----------------------------------------------------------------*/
.sec{
	padding: 160px 0;
}
.sec h2{
	margin-bottom: 50px;
	text-align: left;
}
.sec .features-list02 h3 small,
.sec .features-list03 h3 small,
.sec .features-list04 h3 small{
	transform: unset;
    text-shadow: none;
	font-size:min(0.91vw,1.4rem);
	font-family: "YakuHanJP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}
.sec02,
.sec04,
.sec05{
	background: var(--beige);
}
.features-list04{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.features-list04 li{
	max-width: 330px;
	width: calc((100% - 20px)/3);
}
.features-list04 li:nth-child(n+4){
	margin-top: 40px;
}
.features-list04 .pic{
	margin-bottom: 20px;
}
.features-list04 h3{
	font-size:min(1.3vw,2rem);
	line-height: 1.5;
}

/* 宝塚 */
.p-facility._takarazuka .sec04,
.p-facility._takarazuka .sec06{
	padding-bottom: 0;
}
.p-facility._takarazuka .sec03 h2{
	flex-shrink: 0;
	width: fit-content;
	margin-right: 20px;
}
.p-facility._takarazuka .sec03 .features-list04{
	max-width: 1050px;
	width: 80.8%;	
}
.p-facility._takarazuka .sec05 .features-list02 .layout-box{
	flex-wrap: wrap;
}
.p-facility._takarazuka .sec05 .features-list02 .layout-box > div:nth-child(n+3){
	max-width: 620px;
	width: calc(50% - 10px);
	margin-top: 60px;
}
.p-facility._takarazuka .sec05 .features-list02 .layout-box > div:nth-child(n+3) h3{
	margin-top: 15px;
}
.p-facility._takarazuka .sec06 .layout-box > div{
	max-width: 620px;
	width: calc(50% - 10px);	
}


/* other
-----------------------------------------------------------------*/
.other{
	padding: 160px 0;
	overflow: hidden;
}
.other .slider-box ul{
	width: 1680px;
}
.other .slider-box .slider-item{
	margin-right: 30px;
}
.other .slider-box .slider-item a{
	display: flex;
	flex-direction: row-reverse;
	overflow: hidden;
}
.other .slider-box .slider-item a.comingsoon{
	opacity: .3;
	pointer-events: none;
}
.other .slider-box .slider-item a.bg01{
	background: var(--beige);
}
.other .slider-box .slider-item a.bg02{
	background: var(--green);
}
.other .slider-box .slider-item .pic{
	width: 51.85%;
}
.other .slider-box .slider-item .pic.zoom-img{
	border-radius: 0;
}
.other .slider-box .slider-item .ttl-area{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48.15%;
	line-height: 1;
	text-align: center;
}
.other .slider-box .slider-item .ttl-area h3{
	margin-bottom: 8px;
}
.other .slider-box .slider-item .ttl-area h3 small{
	display: block;
	font-size: 1.4rem;
}
.other .slider-box .slider-item .ttl-area h3 span{
	display: block;
	font-size: 5.2rem;
	text-transform: uppercase;
}
.other .slider-box .slider-item .ttl-area .txt{
	margin-bottom: 25px;
	font-size: 2.3rem;
}
.other .slider-box .slider-item .ttl-area .ico img{
	display: inline;
}




 

















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

	.floor h2.ttl-lead,
	.sec h2.ttl-lead{
		font-size: 2.5rem;
	}
	.nav-course-middle > ul > li {
			width: 100%;
	}

/* intro
-----------------------------------------------------------------*/
	.intro{
		padding: 20px 0 0;
	}
	.intro h2{
		margin-bottom: 60px;
	}
	.intro .pic-main{
		width: 100vw;
  	margin: 0 calc(50% - 50vw) 50px;
	}
	.intro .pic-main .caption{
		right: 10px;
		bottom: 10px;
		font-size: 1rem;
	}
	.intro .pic-main img{
		border-radius: 0;
	}
	.intro .pic-main + .txt{
		margin-bottom: 60px;
		text-align: justify;
	}
	.page-nav{
		flex-wrap: wrap;
	}
	.page-nav li{
		max-width: none;
		width: calc(50% - 10px);
	}
	.page-nav li:nth-child(n+3){
		margin-top: 20px;
	}

/* 宝塚 */
	.p-facility._takarazuka .page-nav{
		justify-content: space-between;
		max-width: none;
	}
	.p-facility._takarazuka .page-nav li{
		width: calc(50% - 10px);
		margin: 0;
	}
	.p-facility._takarazuka .page-nav li:nth-child(n+3){
		margin-top: 20px;
	}


/* floor
-----------------------------------------------------------------*/
	.floor{
		padding: 110px 0;
	}
	.floor h2{
		margin-bottom: 40px;
	}
	
	.features-list{
		display: block;
	}
	.features-list li{
		max-width: none;
		width: 100%;
	}
	.features-list li:nth-child(n+2){
		margin-top: 60px;
	}
	.features-list .pic{
		margin-bottom: 25px;
	}
	.features-list .layout-box{
		display: block;
	}
	.features-list .txt-area{
		max-width: none;
		width: 100%;
	}
	.features-list .txt-area h3{
		margin-bottom: 15px;
		font-size: 2rem;	
	}
	.features-list .txt-area .txt{
		font-size: 1.4rem;
	}
	.features-list .pic-sub{
		max-width: none;
		width: 100%;
		margin: 25px 0 20px;
	}
	
	.features-list02 li:nth-child(n+2){
		margin-top: 60px;
	}
	.features-list02 .layout-box{
		display: block;
	}
	.features-list02 .pic-main{
		max-width: none;
		width: 100%;
	}
	.features-list02 .pic-main h3{
		margin: 15px 0 5px;
	}
	.features-list02 .pic-sub{
		display: flex;
		justify-content: space-between;
		max-width: none;
		width: 100%;
		margin-top: 25px;
	}
	.features-list02 .pic-sub > div{
		width: calc(50% - 5px);
	}
	.features-list02 .pic-sub h3{
		margin: 10px 0 0;
	}
	.features-list02 .pic-main h3{
		font-size: 2rem;
	}
	.features-list02 h3{	
		font-size: 1.6rem;
	}
	.features-list02 .txt{
		font-size: 1.4rem;	
	}
	
	.features-list03 li{
		max-width: none;
		width: 100%;
	}
	.features-list03 li:nth-child(n+2){
		margin-top: 60px;
	}
	.features-list03 .pic{
		margin-bottom: 25px;
	}
	.features-list03 h3{
		font-size: 2rem;
	}
	.features-list03 .txt{
		font-size: 1.4rem;
	}
	
	
	/* 中津 */
	.p-facility._nakatsu .floor04{
		padding: 0 0 110px;
	}

	/* 和歌山 */
	.p-facility._wakayama .tab-nav{
		margin-bottom: 40px;
	}
	.p-facility._wakayama .tab-nav li:hover{
		background: var(--light);
		color:  var(--dark);	
	}
	.p-facility._wakayama .tab-nav li.current{
		background: var(--dark);
		color:  var(--light);	
	}
	.p-facility._wakayama .floor-nishinosho{
		padding: 80px 0 0;
	}
	.p-facility._wakayama .floor02 .features-list03 li:nth-child(n+3){
		max-width: none;
		width: 100%;
	}
	.p-facility._wakayama .floor04 .features-list li{
		max-width: none;
		width: 100%;
	}
	.p-facility._wakayama .floor04 .features-list .txt-area {
			max-width: none;
			width: 100%;
	}
	.p-facility._wakayama .floor04 .features-list .pic-sub {
			max-width: none;
			width: 100%;
			margin-top: 25px;
	}



/* sec
-----------------------------------------------------------------*/
	.sec{
		padding: 110px 0;
	}
	.sec h2{
		margin-bottom: 40px;
	}
	.sec .features-list02 h3 small,	
	.sec .features-list03 h3 small,
	.sec .features-list04 h3 small{
		font-size: 1rem;
	}
	.features-list04 li{
		max-width: none;
		width: calc(50% - 5px);
	}
	.features-list04 li:nth-child(n+3){
		margin-top: 30px;
	}
	.features-list04 .pic{
		margin-bottom: 10px;
	}
	.features-list04 h3{
		font-size: 1.4rem;
	}

/* 宝塚 */
	.p-facility._takarazuka .sec03 .layout-box{
		display: block;
	}
	.p-facility._takarazuka .sec03 h2{
		width: 100%;
		margin: 0 0 40px 0;
	}
	.p-facility._takarazuka .sec03 .features-list04{
		max-width: none;
		width: 100%;	
	}
	.p-facility._takarazuka .sec05 .features-list02 .layout-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.p-facility._takarazuka .sec05 .features-list02 .layout-box > div:nth-child(n+3){
		max-width: none;
		width: calc(50% - 5px);	
		margin-top: 25px;
	}
	.p-facility._takarazuka .sec05 .features-list02 .layout-box > div:nth-child(n+3) h3{
		margin-top: 10px;
	}
	.p-facility._takarazuka .sec06 .layout-box{
		display: block;
	}
	.p-facility._takarazuka .sec06 .layout-box > div{
		max-width: none;
		width: 100%;	
	}
	.p-facility._takarazuka .sec06 .layout-box > div:nth-child(n+2){
		margin-top: 110px;
	}


/* other
-----------------------------------------------------------------*/
	.other{
		padding: 110px 0 180px;
		overflow: hidden;
	}
	.other .slider-box ul{
		width: 630px;
	}
	.other .slider-box .slider-item{
		margin-right: 15px;
	}
	.other .slider-box .slider-item .ttl-area{
		width: 52%;
		padding: 30px 5px;
	}
	.other .slider-box .slider-item .ttl-area h3{
		margin-bottom: 3px;
	}
	.other .slider-box .slider-item .ttl-area h3 small{
		margin-bottom: 2px;
		font-size: 1rem;
	}
	.other .slider-box .slider-item .ttl-area h3 span{
		font-size: 1.8rem;
	}
	.other .slider-box .slider-item .ttl-area .txt{
		margin-bottom: 7px;
		font-size: 1.1rem;
		letter-spacing: .05em;
	}
	.other .slider-box .slider-item .ttl-area .ico img{
		width: 14px;
	}
	.other .slider-box .slider-item .pic {
    width: 48%;
	}
	.other .slider-box .slider-item .pic img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


}