@charset "utf-8";



/* --------------------------------------------------------------------------------
essential
-------------------------------------------------------------------------------- */

@media (max-width:375px) {
html {
	font-size: 15px;
}
}



/* --------------------------------------------------------------------------------
misc
-------------------------------------------------------------------------------- */

br.large {
	display: none;
}
br.small {
	display: inline;
}
img.large {
	display: none;
}
img.small {
	display: block;
}



/* --------------------------------------------------------------------------------
page
-------------------------------------------------------------------------------- */

div#page {
	padding-top: 60px;
}
p.button-default {
	font-size: 1.125rem;
}
p.button-default a {
	height: 70px;
}
p.button-default i.icon {
	font-size: 1.75rem;
}
*.scroll.fade-slide-left,
*.scroll.fade-slide-right,
*.scroll.fade-slide-up {
	transform: translate(0px, 0px);
}



/* --------------------------------------------------------------------------------
splash
-------------------------------------------------------------------------------- */

div#splash {
	padding-bottom: 20px;
}
div#splash p.logo img {
	height: calc(371px * 0.625);
}



/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */

header#header {
	position: relative;
	width: auto;
	height: auto;
	left: auto;
	top: auto;
	background-color: transparent;
}
header#header h1#logo {
	position: fixed;
	width: 100%;
	height: 60px;
	left: 0px;
	top: 0px;
	z-index: 10;
	background-color: #ffffff;
}
header#header h1#logo img {
	position: absolute;
	height: calc(126px * 0.5);
	left: 12.5px;
	top: 12.5px;
}
header#header p#button-menu {
	position: fixed;
	width: 60px;
	height: 60px;
	right: 0px;
	top: 0px;
	z-index: 30;
  cursor: pointer;
}
header#header p#button-menu i {
  display: block;
  position: absolute;
  width: 24px;
  height: 0px;
  left: calc(50% - 12px);
  top: calc(50% - 0.5px);
	border-bottom: 1px solid #000000;
  transition: 0.25s all ease;
}
header#header p#button-menu i:nth-child(1) {
	transform: translateY(-8px);
}
header#header p#button-menu i:nth-child(2) {
	transform: translateY(8px);
}
body.menu-header header#header p#button-menu i:nth-child(1),
body.menu-header header#header p#button-menu i:nth-child(2),
body.menu-header header#header p#button-menu i:nth-child(3) {
  width: 0px;
  left: 50%;
  opacity: 0;
	transform: translateY(0px);
}
body.menu-header header#header p#button-menu i:nth-child(4) {
	transform: rotate(45deg);
}
body.menu-header header#header p#button-menu i:nth-child(5) {
	transform: rotate(-45deg);
}
header#header div#menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	right: 0px;
	top: 0px;
	overflow: auto;
	z-index: 20;
	background-color: #ffffff;
	transform: translateX(100%);
	transition: 0.25s transform ease;
	-webkit-overflow-scrolling: touch;
}
body.menu-header header#header div#menu {
	transform: translateX(0%);
}
header#header div#menu div.inner-menu {
	padding: 40px 0px;
}
header#header nav#navi,
header#header p.instagram {
	position: static;
	top: auto;
}
header#header nav#navi {
	right: auto;
	margin-bottom: 40px;
}
header#header nav#navi ul {
	display: block;
}
header#header nav#navi ul li {
	text-align: center;
}
header#header nav#navi ul li:not(:last-child) {
	margin: 0px 0px 20px 0px;
}
header#header p.instagram {
	right: auto;
	text-align: center;
}



/* --------------------------------------------------------------------------------
cover
-------------------------------------------------------------------------------- */

div#cover {
	height: auto;
}
div#cover p.video {
	position: static;
	aspect-ratio: 1.625;
	width: auto;
	height: auto;
	right: auto;
	top: auto;
}
div#cover p.button-sound {
	width: 120px;
	height: 30px;
	left: auto;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	font-size: 0.75rem;
	color: #ffffff;
	border-color: #ffffff;
	border-radius: 15px;
}
div#cover p.button-sound:hover {
	color: #ffffff;
	background-color: transparent;
}
div#cover p.button-sound span {
	width: 100%;
	height: auto;
	writing-mode: horizontal-tb;
	padding: 0px 0px 0px 10px;
}
div#cover p.button-sound i.icon {
	left: auto;
	right: 5px;
	top: calc(50% - 10px);
	bottom: auto;
	font-size: 1.125rem;
	transform: rotate(0deg);
}



/* --------------------------------------------------------------------------------
main
-------------------------------------------------------------------------------- */

main section div.inner-section {
	width: auto;
	padding-left: 30px;
	padding-right: 30px;
}
main section.common div.inner-section {
	padding-top: 120px;
}
main section.common header {
	left: 10px;
	top: 80px;
}
main section.common header h2 {
	font-size: 1.75rem;
	line-height: 1.75rem;
}
main section.common header h2::after {
	height: 100px;
}
main section#concept div.inner-section {
	padding-left: 60px;
	padding-top: 80px;
	padding-bottom: 120px;
}
main section#concept header {
	top: 40px;
}
main section#concept div.illust-text {
	display: block;
}
main section#concept div.illust-text p.illust {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: auto;
	margin-bottom: 10px;
	padding-right: 10px;
}
main section#concept div.illust-text p.illust img {
	width: auto;
	height: calc(416px * 0.625);
}
main section#concept div.illust-text div.text {
	width: auto;
	margin-right: -30px;
	padding-left: 0px;
}
main section#concept div.illust-text div.text div.description p.row {
	line-height: 1.875rem;
}
main section#concept div.illust-text div.text div.description p.row:not(:last-child) {
	margin-bottom: 30px;
}
main p#image-fixed {
	aspect-ratio: 2;
	height: auto;
	background-attachment: scroll;
	opacity: 0;
	transition: 1s opacity ease-in-out;
}
main p#image-fixed.active {
	opacity: 1;
}
main section#menu-alternate div.list,
main section#menu-alternate div.list div.row:not(:last-child) {
	margin-bottom: 80px;
}
main section#menu-alternate div.list div.row p.video {
	width: auto;
	margin-bottom: 20px;
}
main section#menu-alternate div.list div.row:nth-child(2n+1) p.video,
main section#menu-alternate div.list div.row:nth-child(2n+1) div.text {
	transform: translateX(30px);
}
main section#menu-alternate div.list div.row:nth-child(2n) p.video {
	transform: translateX(-30px);
}
main section#menu-alternate div.list div.row div.text {
	display: block;
	padding-right: 30px;
}
main section#menu-alternate div.list div.row div.text h3 {
	width: auto;
	font-size: 1.5rem;
	line-height: 1.875rem;
	margin-bottom: 10px;
}
main section#menu-alternate div.list div.row:nth-child(2n+1) div.text h3 {
	text-align: justify;
	padding-right: 0px;
}
main section#menu-alternate div.list div.row:nth-child(2n) div.text h3 {
	padding-left: 0px;
}
main section#menu-alternate div.list div.row div.text p.description {
	width: auto;
}
main section#menu-alternate div.o-edo-bake p.description {
	margin-bottom: 10px;
}
main section#menu-alternate div.o-edo-bake div.banner {
	width: auto;
}
main section#menu-alternate div.o-edo-bake div.banner h3 {
	width: calc(150px * 0.75);
	height: calc(58px * 0.75);
	left: calc(50% - calc(75px * 0.75));
	top: calc(50% - calc(29px * 0.75));
}
main section#access div.information {
	width: auto;
	margin-bottom: 60px;
}
main section#access div.information p.logo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: static;
	right: auto;
	bottom: auto;
	margin-bottom: 30px;
}
main section#access div.information p.logo img {
	height: calc(371px * 0.625);
}
main section#access div.information p.image,
main section#access div.information div.text p.tel {
	margin-bottom: 20px;
}
main section#access div.information p.image {
	width: auto;
	transform: translateX(30px);
}
main section#access div.information div.text {
	width: auto;
	padding-left: 30px;
}
main section#access div.information div.text p.address {
	margin-right: -30px;
}
main section#access div.information div.text div.list {
	margin-bottom: 40px;
}
main section#access div.information div.text div.list div.row {
	display: block;
}
main section#access div.information div.text div.list div.row:not(:last-child) {
	margin-bottom: 40px;
}
main section#access div.information div.text div.list div.row p.label {
	display: flex;
	flex-wrap: wrap;
	width: auto;
	margin-bottom: 5px;
}
main section#access div.information div.text div.list div.row p.label span {
	display: block;
	border-bottom: 1px solid #000000;
}
main section#access div.information div.text div.list div.row p.body {
	width: auto;
	border-left: none;
	padding-left: 0px;
}
main section#access div.map {
	height: 240px;
	margin: 0px -30px 60px -30px;
}
main section#access div.image {
	margin: 0px -30px;
}
main section#access div.image p.row {
	width: calc(100% - 30px);
}
main section#access div.image p.row:not(:last-child) {
	margin-bottom: 20px;
}
main section#movie div.inner-section {
	padding-left: 60px;
	padding-right: 0px;
	padding-bottom: 120px;
}
main section#movie p.button-video {
	width: auto;
}
main section#movie p.button-video i.icon {
	width: 60px;
	height: 60px;
	left: calc(50% - 30px);
	top: calc(50% - 30px);
	font-size: 1.5rem;
	line-height: 1.5rem;
}
main div#instagram {
	margin-bottom: 80px;
	padding: 0px 30px;
}
main div#instagram p.label {
	font-size: 1.25rem;
	margin-bottom: 20px;
}
main div#instagram p.button {
	display: block;
	font-size: 1.125rem;
}
main div#instagram p.button a {
	width: auto;
	height: 70px;
}
main div#instagram p.button a::before {
	width: 20px;
	height: 20px;
	right: 5px;
	bottom: 5px;
}
main div#instagram p.button i.icon {
	font-size: 1.75rem;
}
main section#group div.inner-section {
	width: auto;
	padding: 40px 30px;
}
main section#group h2 {
	font-size: 1.25rem;
	line-height: 1.875rem;
	margin-bottom: 20px;
}
main section#group ul {
	margin-right: -10px;
}
main section#group ul li {
	width: calc(33.33% - 10px);
	margin-right: 10px;
}



/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */

footer#footer {
	text-align: center;
	padding: 40px 0px 20px 0px;
}
footer#footer p.logo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: static;
	left: auto;
	top: auto;
	margin-bottom: 20px;
}
footer#footer p.logo img {
	width: auto;
	height: calc(371px * 0.625);
}
footer#footer div.information {
	border-bottom: none;
	margin-bottom: 20px;
	padding: 0px;
}
footer#footer div.information h3 {
	margin-bottom: 10px;
}
footer#footer div.misc {
	display: block;
	padding-left: 0px;
}
footer#footer div.misc nav#navi-footer {
	display: none;
}
footer#footer div.misc p.button-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-family: AvenirNextLTPro-Regular, sans-serif;
	margin-bottom: 20px;
}
footer#footer div.misc p.button-contact a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 260px;
	height: 45px;
	border: 1px solid #000000;
	transition: 0.25s color ease, 0.25s background-color ease;
}
footer#footer div.misc p.button-contact a:hover {
	color: #ffffff;
	background-color: #000000;
}
footer#footer p.copyright {
	position: static;
	right: auto;
	top: auto;
}