@charset "UTF-8";
/* CSS Document */

/* ============================================ 

NOWLS レイアウト指定

ver:2.0.0
更新日:2023/03/31
担当:清水優

============================================ */


/* ============================================ */
/* 基本ページ指定 */
	body{
		display: flex;
		flex-direction: row;
	}
	main{
		min-height: 100vh;
		margin-bottom: -20px;
	}
	.panel-wrapper{
		padding-left: 10px;
		padding-right: 10px;
	}
	.btn{
		padding: 8px 15px;
		border-radius: 32px;
		font-size: 16px;
		font-weight: 600;
	}
	.attention-note{
		font-size: 14px;
		line-height: 21px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.dissapper{
		display: none !important;
	}
	/**
	*重ね順管理
	*/
	#bg{
		z-index: 0;
	}
	main{
		z-index: 1;
	}
	.panel-wrapper{
		z-index: 2;
	}
	.nav-hamburger-cover{
		z-index: 3;
	}
	.nav-hamburger{
		z-index: 4;
	}
	.menu-wrapper{
		z-index: 5;
	}
	/**
	*スクロールバーのスタイル
	*/
    ::-webkit-scrollbar {
        width: 16px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
/**
 *レスポンシブスタイル
 */
    @media screen and (max-width:730px){     
		body{
			width:100%;
			flex-direction: column;
		}   
		main{
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
		}
		::-webkit-scrollbar {
            width: 0px;
        }
		.panel-wrapper{
			padding-left: 0px;
			padding-right: 0px;
		}
    }
    @media screen and (min-width:1500px){
		.panel-wrapper{
			padding-left: 10px;
			padding-right: 0;
			display: flex;
		}
    }
    @media (hover: hover){

    }
    @media (hover: none){

    }
/* ============================================ */



/* メニューなど */
/* ============================================ */

	.isfixed{
		overflow: hidden;
	}
	.menu-wrapper{
		position: fixed;
		top: 0;
		right: 0;
	}
	.nav-hamburger{
		position: fixed;
		top: 0;
		bottom: 0;
		right: -80%;
		width: 80%;
		height: 100%;
		transition: .4s;
		-webkit-transition: .4s;
		-moz-transition: .4s;
		-ms-transition: .4s;
		-o-transition: .4s;
	}
	.nav-hamburger-cover{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
		transition: .4s;
		-webkit-transition: .4s;
		-moz-transition: .4s;
		-ms-transition: .4s;
		-o-transition: .4s;
	}
	.nav-hamburger-open {
		transform: translateX(-60vw);
		-webkit-transform: translateX(-60vw);
		-moz-transform: translateX(-60vw);
		-ms-transform: translateX(-60vw);
		-o-transform: translateX(-60vw);
	}
	.nav-hamburger-cover-open {
		opacity: 100;
		pointer-events: auto;
	}
	.nav-hamburger > p{
		font-size: 30px;
		font-weight: 600;
		line-height: 18px;
		display: inline-block;
		width: 56vw;
		margin: 2vw;
		padding-top: 40px;
		padding-bottom: 30px;
		padding-left: 30px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
	}
	.nav-hamburger > p > span{
		font-size: 18px;
		font-weight: 600;
	}
	.nav-hamburger > a{
		display: inline-block;
		width: 56vw;
		padding: 10px;
	}
	.nav-hamburger > a > p{
		font-size: 16px;
		margin-left: 2vw;
	}
	.nav-hamburger > a > p::before{
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-left: 16px;
		margin-right: 16px;
	}
	.nav-hamburger > a:nth-child(2) > p{
		padding-top: 24px;
	}
	.nav-hamburger > a:last-child > p{
		padding-bottom: 24px;
	}
	/**
	*ボタンのスタイル
	*/

	.menu-btn{
		position: relative;
		cursor: pointer;
		width: 80px;
		height: 80px;
		transition: .4s;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}
    .menu-btn span{
        display: inline-block;
        position: absolute;
        left: 20px;
        height: 5px;
        border-radius: 5px;
        width: 40px;
    }

    .menu-btn span:nth-of-type(1) {
        top:30px;
        transition: .4s;
    }

    .menu-btn span:nth-of-type(2) {
        top:40px;
        transition: .6s;
    }

    .menu-btn span:nth-of-type(3) {
        top:50px;
        transition: .4s;
    }
	/**
	*クリック時のスタイル
	*/

	.menu-open span:nth-of-type(1) {
		width: 40px;
		transform: translateY(10px) rotate(-225deg);
		-webkit-transform: translateY(10px) rotate(-225deg);
		-moz-transform: translateY(10px) rotate(-225deg);
		-ms-transform: translateY(10px) rotate(-225deg);
		-o-transform: translateY(10px) rotate(-225deg);
	}

	.menu-open span:nth-of-type(2) {
		transform: scaleX(0);
		opacity: 15%;
	}

	.menu-open span:nth-of-type(3){
		width: 40px;
		transform: translateY(-10px) rotate(225deg);
		-webkit-transform: translateY(-10px) rotate(225deg);
		-moz-transform: translateY(-10px) rotate(225deg);
		-ms-transform: translateY(-10px) rotate(225deg);
		-o-transform: translateY(-10px) rotate(225deg);
	}
	/**
	*ローディング
	*/
	#loading{
		width: 100vw;
		height: 100vh;
		transition: all 1s;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}
	.loaded {
		opacity: 0;
		visibility: hidden;
	}
/**
 *レスポンシブスタイル
 */
	@media screen and (max-width:730px){     
		.menu-btn{
			transform-origin: top right;
			transform: scale(0.9);
			-webkit-transform: scale(0.9);
			-moz-transform: scale(0.9);
			-ms-transform: scale(0.9);
			-o-transform: scale(0.9);
		}
		.nav-hamburger > p{
			width: 76vw;
			margin: 2vw;
		}
		.nav-hamburger > a{
			width: 76vw;
		}
		.nav-hamburger-open {
			transform: translateX(-80vw);
			-webkit-transform: translateX(-80vw);
			-moz-transform: translateX(-80vw);
			-ms-transform: translateX(-80vw);
			-o-transform: translateX(-80vw);
		}
	}
	@media screen and (min-width:1500px){

	}
	@media (hover: hover){

	}
	@media (hover: none){

	}
/* ============================================ */

/* 時計 */
/* ============================================ */

	.topClock{
		margin-top: 20px;
		margin-left: 40px;
	}
	#nowPeriod{
		width: 100px;
		height: 100px;
		padding-top: 49px;
		margin-bottom: 20px;
		text-align: center;
		font-size: 24px;
		font-weight: 600;
		background-image: url(../img/nowls-clock.svg);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.clockArea{
		padding-top: 50px;
		padding-left: 50px;
		padding-right: 50px;
		width: 980px;
	}
	.topClock > div > p:nth-child(1){
		margin-bottom: 10px;
	}
	.topClock > div > p:nth-child(1) > span:not(#sec){
		font-size: 80px;
		letter-spacing: -2px;
		font-weight: 600;
	}
	#sec{
		font-size: 16px;
		font-weight: 500;
		margin-left: 1px;
	}
	.topClock > div > p:nth-child(2),#sundayAlert{
		display: flex;
		margin-left: 5px;
		margin-bottom: 5px;
	}
	.topClock > div > p:nth-child(2)::after,#sundayAlert::after{
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		clip-path: polygon(0 0, 0% 100%, 70% 50%);
	}
	#nextPeriod,#sundayAlert > span{
		padding: 5px;
		font-weight: 500;
	}

	#logo{
		width: 100px;
		position: fixed;
		left: 50px;
		bottom: 50px;
	}
	#bg{
		position: absolute;
		width: 0px;
		margin-top: 20px;
		right: 420px;
		mix-blend-mode: lighten;
	}
	#bg svg{
		filter: opacity(50%);
	}
/**
 *レスポンシブスタイル
 */
	@media screen and (max-width:730px){        
		#logo, #bg{
			display: none;
		}
		.topClock{
			width: 100%;
			display: flex;
			margin: 50px auto !important;
		}
		.topClock > div{
			margin-top: 55.5px;
			margin-left: calc(45% - 147.655px);
		}
		.topClock > div > p:nth-child(1) > span:not(#sec){
			letter-spacing: 1px;
		}
		#nowPeriod{
			width: 150px;
			height: 150px;
			padding-top: 73.5px;
			margin-left: 5%;
			margin-bottom: 30px;
			font-size: 36px;
		}
	}
	@media screen and (max-width:1000px){
		.topClock{
			margin-top: 20px;
			margin-left: 20px;
		}
		.topClock > div > p:nth-child(1) > span:not(#sec){
			font-size: 40px;
		}
		#bg{
			margin-top: 60px;
			right: 460px;
		}
	}
	@media screen and (min-width:1500px){
		#nowPeriod{
			width: 180px;
			height: 180px;
			padding-top: 88.2px;
			font-size: 40px;
		}
		.clockArea{
			width: 50%;
			font-weight: 700;
		}
		#bg{
			right: 960px;
		}
	}
	@media (hover: hover){

	}
	@media (hover: none){

	}
/* ============================================ */

/* カード類 */
/* ============================================ */

	.platform, .meal, #aihara, #campus{
		width: 510px;
		padding-top: 20px;
		padding-left: 10px;
		padding-bottom: 20px;
		margin-bottom: 20px;
		overflow-x: hidden;
	}
	.platform, .meal, #aihara, #campus{
		margin-top: 20px;
		border-radius: 15px;
	}
	.meal h2, #aihara h2, #campus h2{
		font-size: 24px;
		font-weight: 500;
	}
	.platform h3, .meal h3, #aihara h3, #campus h3{
		text-align: center;
	}
	.meal h4, #aihara h4, #campus h4{
		font-size: 18px;
		letter-spacing: 2px;
	}
	.platform .btn, .platform-sp .btn, .meal .btn, #aihara .btn, #campus .btn{
		margin-top: 18px;
		margin-left: 30px;
		margin-right: 30px;
	}
	.card-title{
		margin-left: 80px;
		margin-bottom: 20px;
	}
	.card-title h1{
		margin-top: -10px;
		padding-left: 15px;
		font-size: 25px;
		font-weight: 700;
	}
	.card-title p{
		padding-left: 15px;
		font-size: 13px;
		letter-spacing: 2px;
	}
	.card-title::before{
		content: "";
		display: inline-block;
		width: 60px;
		height: 60px;
		margin-left: -60px;
		margin-bottom: -45px;
		background-color: #75BBDb;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 30px;
		background-position: center	center;
	}
	.platform-toUniv,.platform-toSta, .dot-box{
		padding: 30px 20px;
		margin-bottom: 10px;
		border-radius: 15px;
		font-size: 20px;
	}	
	.dot-box{
		width: 490px;
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
	}
	#specialAlert{
		display: flex;
		margin-left: 5px;
		margin-bottom: 5px;
	}
	#specialAlert::after{
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		clip-path: polygon(0 0, 0% 100%, 70% 50%);
	}
	#specialAlert > span{
		padding: 5px;
		font-weight: 500;
	}
	table{
		width: 490px;
	}
	td{
		text-align: center;
		white-space: nowrap;
	}
	.platform-title{
		text-align: left;
		padding-bottom: 15px;
		font-size: 1.2em;
	}
	.platform-title:after{
		margin-top: 10px;
		border-radius: 1px;
		content: "";
		display: block;
		height: 2px;
	}
	.platform-title span{
		margin-left: 10px;
		padding: 5px 8px;
		border-radius: 15px;
		font-size: .5em;
		font-weight: 800;
	}
	.box-title p{
		width: 100px;
		text-align: center;
		margin-bottom: 5px;
		padding: 3px 8px;
		border-radius: 50px;
		font-size: .8em;
		font-weight: 800;
	}
	.platform-hour{
		width: 55px;
		height: 55px;
		border-radius: 50%;
		white-space: nowrap;
	}
	.platform-hour span{
		font-size: .7em;
		margin-left: 2px;
	}
	.platform-toUniv td,.platform-toSta td{
		padding: 5px 3px;
		padding-left: 5px;
	}
	.platform-sp .platform-toUniv td,.platform-sp .platform-toSta td{
		padding: 5px 3px;
	}
	.onhour td{
		font-weight: 800;
	}
	.shokudoh-menu a{
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
}
	.shokudoh-menu > a:not(#cafeURL) > p{
		margin-left: 5px;
		margin-bottom: 8px;
		padding: 10px 10px 10px 15px;
		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-ms-border-radius: 30px;
		-o-border-radius: 30px;
	}
	#cafeURL > p{
		margin-top: 20px;
		margin-bottom: 8px;
		padding: 20px 10px 20px 20px;
		font-weight: 500;
		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-ms-border-radius: 30px;
		-o-border-radius: 30px;
	}
	.shokudoh-menu a p::before{
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 10px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
	#aihara .box-title h4::before,#campus .box-title h4::before{
		content: "";
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-right: 2px;
		transform: translateY(4px);
	}
/**
 *レスポンシブスタイル
 */
	@media screen and (max-width:730px){     
		table,.dot-box{
			width:calc(100% - 24px);
			margin-left:12px;
		}
		.platform{
			width: 100%;
			margin-top: -30px;
			margin-bottom: 10px;
			padding-left: 0;
		}
		.meal, #aihara, #campus{
			width: 100%;
			margin-top: 10px;
			margin-bottom: 10px;
			padding-left: 0;
		}
		.card-title p{
			padding-left: 8px;
		}
		.platform h1, .platform-sp h1, .meal h1, #aihara h1, #campus h1{
			padding-left: 7px;
		}
		.platform .btn, .meal .btn, #aihara .btn, #campus .btn{
			font-size: 12px;
			margin-left: 8px;
			margin-right: 8px;
		}
		.platform-toUniv,.platform-toSta{
			padding: 20px 12px;
			border-radius: 15px;
			font-size: 20px;
		}
		.platform-toUniv td,.platform-toSta td{
			padding: 3px 1px;
			padding-left: 5px;
		}
	}
	@media screen and (min-width:1500px){
		.platform, .meal, #aihara, #campus{
			margin-right: 15px;
		}
	}
	@media (hover: hover){
		.shokudoh-menu a:hover{
			opacity: 0.8;
		}
		#aihara .dot-box:hover,#campus .dot-box:hover{
			transform: translateY(3px);
			-webkit-transform: translateY(3px);
			-moz-transform: translateY(3px);
			-ms-transform: translateY(3px);
			-o-transform: translateY(3px);
		}
	}
	@media (hover: none){
		.shokudoh-menu a:active{
			opacity: 0.8;
		}
		#aihara .dot-box:active,#campus .dot-box:active{
			transform: translateY(3px);
			-webkit-transform: translateY(3px);
			-moz-transform: translateY(3px);
			-ms-transform: translateY(3px);
			-o-transform: translateY(3px);
		}
	}

/* ============================================ */

/* フッター,ポスターなど */
/* ============================================ */

	.btm-info{
		display: flex;
		width: 530px;
		margin-top: 30px;
		padding-left: 30px;
		padding-right: 30px;
		justify-content: space-between;
	}
	.btm-info a{
		padding-top: 60px;
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
	}
	.adcard{
		width: 500px;
		height: 300px;
		border-radius: 15px;
		padding-top: 20px;
		padding-left: 10px;
		padding-bottom: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 15px;
		margin-right: 15px;
		overflow-x: hidden;
	}
	footer{
		width: 530px;
	}
	footer > p{
		text-align: right;
		font-size: 12px;
		letter-spacing: 2px;
		padding-right: 10px;
		padding-bottom: 10px;
	}
	#magic{
		cursor: pointer;
	}
/**
 *レスポンシブスタイル
 */
	@media screen and (max-width:730px){   
		
		.adcard{
			width: 100%;
			height: 60vw;
			margin-top: 10px;
			margin-bottom: 10px;
			padding-left: 0;
			margin-left: 0;
			margin-right: 0;
		}  
		.btm-info{
			width: 100%;
		}
		footer{
			width: 100%;
		}
	}
	@media screen and (min-width:1500px){
		.adcard{
			width: 1000px;
			margin-left: 40px;
		}
		.btm-info{
			width: 860px;
			margin-left: 100px;
		}
		footer{
			width: 1060px;
		}
		footer > p{
			font-size: 14px;
		}
	}
	@media (hover: hover){
		.btm-info a:hover{
			opacity: 0.7;
		}
	}
	@media (hover: none){
		.btm-info a:active{
			opacity: 0.7;
		}
	}
/* ============================================ */