.title{font-size: calc(var(--font-base) * 2.1);}
.subtitle{font-size: calc(var(--font-base) * 1.5);}
.paragraph{font-size: calc(var(--font-base) * 1.2);}


.side-menu{
	display: block; position: fixed;
	width: 80vw; height: 100vw; top: 6%; left: calc(-80vw + var(--font-base) * -0.6);
	border-radius: 0 calc(var(--font-base) * 2.4) calc(var(--font-base) * 2.4) 0;
	border: calc(var(--font-base) * 0.3) solid rgb(245, 146, 64);
}
.side-open .side-menu{
	left: calc(var(--font-base) * -0.6);
}

.side-menu-btn-container{
	top: 8%;
	width: 18vw;
	height: 18vw;
}

.menu-table{
	font-size: calc(var(--font-base) * 1.1);
	width: 88%; left: 6%;
	margin-top: calc(var(--content-width) * 0.26);
}
.menu-table tr{width: 100%; border-top: 2px solid rgb(248, 167, 92); height: calc(var(--font-base) * 2.4);}

.menu-table p.category{font-size: calc(var(--font-base) * 1.2);}
.side-menu .title{font-size: calc(var(--font-base) * 1.8); top: 4%; left: 10%; white-space: nowrap; color: rgb(248, 167, 92); transition: all .5s ease;}

.mini-button{display: none;}
.mini-button-sp{
	display: block; cursor: pointer;
	width: 30%; height: calc(var(--content-width) * 0.30);
	border-radius: calc(var(--font-base) * 1.2);
	z-index: 30;
}
.mini-button1{top: auto; bottom: calc(var(--font-base) * -1.2); left: 1%;}
.mini-button2{top: auto; bottom: calc(var(--font-base) * -1.2); left: 34%;}
.mini-button3{top: auto; bottom: calc(var(--font-base) * -1.2); left: 67%;}
.mini-button-sp .image{width: 70%; left: 15%; top: 5%;}
.mini-button-sp p{width: 80%; top: 70%;}

.popup{
	width: 92vw; left: 4vw; top: 102%;
	border-radius: calc(var(--font-base) * 1.8) calc(var(--font-base) * 1.8) 0 0;
	transition: all .5s ease; z-index: 41;
}
.popup.enabled{left: 4vw;}
#popup-gift{height: calc(var(--content-width) * 0.64); background-color: rgba(221, 255, 225); border: calc(var(--font-base) * 0.2) solid rgb(40, 179, 40); color: rgb(49, 182, 49);}
#popup-gift.enabled{top: calc(102% - var(--content-width) * 0.64);}

#popup-service{height: calc(var(--content-width) * 0.36); background-color: rgba(255, 221, 235); border: calc(var(--font-base) * 0.2) solid rgb(233, 78, 104); color: rgb(233, 78, 104);}
#popup-service.enabled{top: calc(102% - var(--content-width) * 0.36);}

.popup .link-container{width: 96%; left: 2%; top: calc(var(--content-width) * 0.06);}
.popup .link-box{display: inline-block; position: relative; width: 32%; height: calc(var(--content-width) * 0.24); margin-right: 1%;}
.popup .link-box .image{width: 50%; left: 25%; height: calc(var(--content-width) * 0.14);}
.popup .link-box p{top: 80%; left: 50%; width: 96%; transform: translate(-50%, -50%); text-align: center;}

#home-header-area{height: calc(var(--content-width) * 0.20);}
#home-header-area .tel{font-size: calc(var(--font-base) * 2.4);}

#main-visual-area{height: calc(var(--content-width) * 1.60);}
.main-visual{width: 100%; height: calc(var(--content-width) * 1.60); background-color: white; overflow: hidden;}
#main-visual1{transform-origin: center; animation: main-visual1 linear 24s infinite;}
#main-visual2{opacity: 0; transform-origin: center; animation: main-visual2 linear 24s infinite;}
#main-visual3{opacity: 0; transform-origin: center; animation: main-visual3 linear 24s infinite;}
#main-visual4{opacity: 0; transform-origin: center; animation: main-visual4 linear 24s infinite;}
.main-visual .logo{width: 60%; left: 50%; top: 40%; transform: translate(-50%, -50%); opacity: 1;}
.main-visual .logo-text{top: 30%;}
.main-visual .copy{top: 55%; width: 80%; white-space: wrap; text-align: center;}

.movie-right{display: none;}

#header-area{height: calc(var(--content-width) * 0.50);}

#concept-area p.title{font-size: calc(var(--font-base) * 2.4);}
#concept-area p.paragraph{font-size: calc(var(--font-base) * 1.5);}

#news-area .news-block{width: 100%; height: calc(var(--content-width) * 1.32);}
#news-area .news-logo{width: 48%; left: 26%; height: calc(var(--content-width) * 0.36); top: calc(var(--content-width) * 0.10); border-radius: calc(var(--font-base) * 1.8);}
#news-area .news-logo .news-en{font-size: calc(var(--font-base) * 2.4);}
#news-area .news-logo .news-ja{font-size: calc(var(--font-base) * 1.6);}
#news-area table{
	position: relative;
	width: 80%; left: 10%; top: calc(var(--content-width) * 0.54);
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing:  calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 1.2);
}
#news-area table tr{
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#news-area table td{
	background-color: transparent;
	padding: calc(var(--font-base) * 0.5);
}
#news-area table td.news-date{
	width: calc(var(--content-width) * 0.12);
	padding-left: calc(var(--content-width) * 0.02);
	padding-right: calc(var(--content-width) * 0.08);
}
#news-area .news-container{display: flex; position: absolute; width: 80%; left: 10%; height: calc(var(--content-width) * 2.20); top: calc(var(--content-width) * 0.30); flex-wrap: wrap;}
#news-area .news-box{display: inline-block; position: relative; width: 100%; height: 30%; margin-right: 0; margin-bottom: 5%;}
#news-area .news-box .image-relative{width: 100%; height: calc(var(--content-width) * 0.48); border-radius: calc(var(--font-base) * 1.2);}
#news-area .link-button{width: 60%; left: 20%; height: calc(var(--content-width) * 0.10); top: calc(var(--content-width) * 1.12);}
#news-area .link-button p{font-size: calc(var(--font-base) * 1.2);}

.category-title{width: 50%;}
.category-caption{width: 80%;}
.two-column-images-long{width: 100%; height: calc(var(--content-width) * 0.60);}
.two-column-images-short{width: 100%; height: calc(var(--content-width) * 0.30);}
.two-column-image-left, .two-column-image-right{width: 45%; height: 100%;}
.two-column-image-left{right: 51%;}
.two-column-image-right{left: 51%;}
.two-column-caption-left, .two-column-caption-right{width: 45%;}
.two-column-caption-left{left: 26%;}
.two-column-caption-right{left: 74%;}
.wide-image{width: 92%; left: 4%;}

#access-area{height: calc(var(--content-width) * 1.20);}
#access-area .access-map{width: 60%; left: 20%; height: calc(var(--content-width) * 0.50); top: calc(var(--content-width) * 0.24); }
#access-area .centered{left: 50%;}
#access-area .profile{width: 80%; left: 10%; top: calc(var(--content-width) * 0.50);}

#rollback-area{height: calc(var(--content-width) * 0.20);}
#rollback-area .link-button{width: 60%; left: 50%; height: 50%; top: 50%; transform: translate(-50%,-50%);}
#rollback-area .link-button p{font-size: calc(var(--font-base) * 1.2);}

#footer-area{height: calc(var(--content-width) * 1.40); background-image: url(img/shaddy_sakuragaoka_photo13.jpg); background-size: cover;}
#footer-area .dark-screen{background-color: rgba(0,0,0,0.4);}
#footer-area .logo{width: calc(var(--content-width) * 0.60); height: calc(var(--content-width) * 0.30); left: 50%; top: 26%; transform: translate(-50%,-50%);}
#footer-area .logo-text{top: 30%;}
#footer-area .profile{width: 80%; right: 10%; top: 56%; transform: translate(0,-50%); text-align: right; z-index: 1;}
#footer-area a{transition: 0.4s;}
#footer-area a:hover{color: rgb(235, 128, 10);}

#news-list-area table{
	width: 90%; left: 5%;
}
#year-switch{right: 5%; top: calc(var(--content-width) * 0.04);}

.news-detail-date{right: 5%; text-align: right;}

#blog-title-area{margin-top: calc(var(--content-width) * 0.04); height: calc(var(--content-width) * 0.18);}
#blog-title-area .area-content{width: 92%; left: 4%;}

.area-content.blog .left-column{width: 90%; left: 5%; margin-right: 0;}
.area-content.blog .right-column{display: none;}

.area-content.dish .left-column{width: 90%; left: 5%;}

.blog-pager{width: 100%; height: calc(var(--content-width) * 0.08);}
.blog-pager p{top: 50%; text-align: center; transform: translate(-50%, -50%);}
.blog-pager .link-prev{left: 20%;}
.blog-pager .separator-prev{left: 35%;}
.blog-pager .link-top{left: 50%;}
.blog-pager .separator-next{left: 65%;}
.blog-pager .link-next{left: 80%;}

.blog-detail{width: 100%;}
.blog-detail .image-full{width: 100%; border-radius: 0;}
.blog-detail .heading{
	width: 100%;
	border-left: solid calc(var(--font-base) * 0.2) rgb(44, 151, 223);
	border-bottom: solid calc(var(--font-base) * 0.2) rgb(44, 151, 223);
}
.blog-detail .heading p{padding-left: 4%;}

.blog-list{width: 100%;}
.blog-list .small-paragraph{font-size: calc(var(--font-base) * 0.8);}