/*【「1dp」を「px」に変換したの場合の例】*/
@media screen and (-webkit-min-device-pixel-ratio: 3.0) {
  :root {
    /* ピクセル密度2.0以上 =【xxdpi（超超高解像度）】の指定 */
    --dp: 3px;
  }
  :root.android {
    --vh: calc(100vh - var(--dp)*8 - var(--dp)*16 - 48px - 56px);
  }
}
@media screen and (-webkit-max-device-pixel-ratio: 2.0) {
  :root {
    /* ピクセル密度2.0以下 =【xdpi（超高解像度）】の指定 */
    --dp: 2px;
  }
  :root.android {
    --vh: calc(100vh - var(--dp)*12 - var(--dp)*24 - 48px - 56px);
  }
}
@media screen and (-webkit-max-device-pixel-ratio: 1.5) {
  :root {
    /* ピクセル密度1.5以下 =【hdpi（高解像度）】の指定 */
    --dp: 1.5px;
  }
  :root.android {
    --vh: calc(100vh - var(--dp)*16 - var(--dp)*32 - 48px - 56px);
  }
}
@media screen and (-webkit-max-device-pixel-ratio: 1.0) {
  :root {
    /* ピクセル密度1.0以下 =【mdpi（中解像度）】の指定 */
    --dp: 1px;
  }
  :root.android {
    --vh: calc(100vh - var(--dp)*24 - var(--dp)*48 - 48px - 56px);
  }
}
@media screen and (-webkit-max-device-pixel-ratio: 0.75) {
  :root {
    /* ピクセル密度0.75以下 =【ldpi（低解像度）】の指定 */
    --dp: .75px;
  }
  :root.android {
    --vh: calc(100vh - var(--dp)*32 - var(--dp)*64 - 48px - 56px);
  }
}

:root.ios {
  --vh: calc(100vh - 20pt - 44pt - 48px - 56px);
  --offsetTop: calc(20pt + 48px);
  --offsetBottom: calc(44pt + 56px);
}

@media (orientation: portrait) {
  :root.ios.iphoneX {
    --vh: calc(100vh - 20pt - 44pt - 48px - 48px - 32px);
  }
}

@media (orientation: landscape) {
  :root.ios.iphoneX {
    --vh: calc(100vh - 20pt - 44pt - 48px - 48px - env(safe-area-inset-bottom));
  }
}

:root.sp.android {
  --vh: calc(100vh - 16px - 48px - 48px - 48px);
  --offsetTop: calc(24px + 48px);
  --offsetBottom: calc(48px + 48px);
}

@media screen and (display-mode: standalone) {
  :root.sp.android {
    --vh: calc(100vh - 72px - 48px);
  }
}

:root.tb.android {
  --vh: calc(100vh - 112px - 48px - 48px);
  --offsetTop: calc(40px + 24px + 48px);
  --offsetBottom: calc(48px + 48px);
}

:root {
  --mdc-theme-primary: #211F6D;
  --mdc-theme-secondary: #000;
}

body {
  color: #fff;
  background-color: var(--mdc-theme-secondary, #000);  
}

h1, h2, h3, h4, h5, h6, p {
  color: #fff;
}

/* Material Design Component for Web */
/* --------------------------------------------------------------- */

.mdc-drawer__drawer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mdc-drawer__toolbar-spacer:first-of-type {
  line-height: 48px;
  height:48px;
  position:relative;
  top: 0px;
}

.mdc-drawer__toolbar-spacer:last-of-type {
  line-height: 56px;
  height:56px;
  position:relative;
  top: 0px;
}

.mdc-drawer__toolbar-spacer a:hover {
  outline: none;
}

.mdc-drawer__content {
  flex: 1;
}

/* Floating Action Button */ 
.mdc-fab .mdc-fab__icon {
  transform: scale(2);
}

/* Bottom Apps Bar */ 
.mdc-bottom-app-bar {
  color: white;
  display: flex;
  position: fixed;
  bottom: -2px;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 1000;
  transform: translate3d(0, 0, 0);
  /*width: 70%;*/
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mdc-bottom-app-bar__row {
  display: flex;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  overflow: hidden;
}

.mdc-bottom-app-bar__row:before {
  content: '';
  position: absolute;
  box-shadow: 0px 0px 0px 9999px #6200ee;
  box-shadow: 0px 0px 0px 9999px var(--mdc-theme-primary, #6200ee);
}

.mdc-bottom-app-bar__fab {
  position: absolute;
  display: block;
  top: -50%;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.mdc-bottom-app-bar__fab--end {
  margin: 0;
  left: calc(100% - 56px - 16px);
}

.mdc-bottom-app-bar__fab--center-cut + .mdc-bottom-app-bar__row:before {
  top: -36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  z-index: -1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.mdc-bottom-app-bar__section {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  z-index: 1;
}

.mdc-bottom-app-bar__section--align-start {
  justify-content: flex-start;
  order: -1;
}

.mdc-bottom-app-bar__section--align-end {
  justify-content: flex-end;
  order: 1;
}
/*
.mdc-bottom-app-bar__section--align-end .mdc-bottom-app-bar__action-item {
  width: 48px;
  padding-left: 8px;
}
*/
.mdc-bottom-app-bar__action-item,
.mdc-bottom-app-bar__navigation-icon {
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 16px;
  margin: 0 8px;
  border: none;
  outline: none;
  background-color: transparent;
  fill: currentColor;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mdc-ripple-surface::before, 
.mdc-ripple-surface::after {
    background-color: #fff!important;
}

/* Swiper.js */
/* --------------------------------------------------------------- */

.dt .swiper-container { /* important! */
  margin: 0;
}

.sp .swiper-container,
.tb .swiper-container {
  width: 100%;
  height: 100vh;
}

.sp .swiper-wrapper,
.tb .swiper-wrapper {
}

.sp .swiper-slide,
.tb .swiper-slide {
}

.sp .swiper-slide > *,
.tb .swiper-slide > * {
}

/* FullPage.js */
/* --------------------------------------------------------------- */

.fp-section.fp-table, 
.fp-slide.fp-table {
  display: block;
  table-layout: auto;
  width: 100%;
}

.fp-enabled .fp-tableCell {
  display: flex;
  flex-direction: column;
  /*flex-wrap: wrap;*/
  /*padding: 56px 0 0;*/
  padding: 48px 0 0;
}

.fp-enabled .fp-tableCell .fp-scroller > *:last-child {
  padding: 0 0 50vh;
}

@media (orientation: landscape) {
  .fp-enabled .fp-tableCell {
    padding: 48px 0 0;
  }
  
  .fp-enabled .fp-tableCell .fp-scroller > *:last-child {
    padding: 0 0 56px;
  }
}

.fp-controlArrow {
  top: auto;
  bottom: 60px;
  transform: scale(.5);
}

/* Common Style */
/* --------------------------------------------------------------- */
h1 {
  font-family: "隷書101", "Reisho 101", "リュウミン R-KL", "Ryumin Regular KL" , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 24pt;
}

h2 {
  font-family: "シネマレター", "Cinema Letter", "リュウミン R-KL", "Ryumin Regular KL" , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 24pt;
  text-align: center;
  line-height: 2;
  padding: 0;
  margin: 0;
  /*padding-bottom: .5em;*/
}

img.cover {
  max-height: var(--vh);
  padding: 0;
  object-fit: cover;
}

img.contain {
  max-height: var(--vh);
  padding: 0;
  object-fit: contain;
}

@media (orientation: landscape) {
  img.cover {
    width: 100vw;
    max-width: none;
    max-height: none;
    margin-right: calc(0px - env(safe-area-inset-right));
    margin-left: calc(0px - env(safe-area-inset-left));
  }

  img.contain {
    width: 100vw;
    max-width: none;
    max-height: none;
    margin-right: calc(0px - env(safe-area-inset-right));
    margin-left: calc(0px - env(safe-area-inset-left));
  }  
}

/* Page Section */
/* --------------------------------------------------------------- */
/* トップページ */
#index #fullpage > .section {
  /*background: url('/images/about/gaikan2.jpg') no-repeat bottom center;
  background-size: cover;
  background-attachment: initial;*/
}

#index #hero {
  background-color: #fff;
  text-align: center;
  height: var(--vh);
  min-height: auto;
  padding: 4px;
  position: relative;
  overflow: hidden;
}

#index #hero img {
  height: var(--vh);
  padding: 16px;
  /*position: relative;*/
}

#index #hero #rakkan {
  background-color: white;
  /* width: 100%; */
  padding: 4px;
  position: absolute;
  /* right: 0px; */
  /* bottom: 56px; */
  /* transform: scale(0, 0) rotateZ(360deg); */
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 400;
} 

#index #hero #wave {
  max-width: none;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -50%);
  transform: scale(3);
}

#index #hero .mask {
  max-width: none;
  padding: 0;
  position: absolute;
  border-radius: 50%;
}

#index #hero #mask-top {
  background-color: var(--mask);
  width: 100vmax;
  height: 100vmax;
  top: 0;
  right: 0;
  z-index: 100;
}

#index #hero #mask-bottom {
  width: 0;
  height: 0;
  padding: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  border: solid 100vmax var(--mask);
}

#index #hero #kanban {
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 200;
}

#index #hero #sake {
  width: 70vw;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 200;
}

#index h1.headline {
  font-size: calc(100vw /9);
  background-color: rgba(0, 0, 0, .75);
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

#index h3 {
  color: #333;
  font-family: "すずむし", "Suzumushi", "はるひ学園", "Haruhi Gakuen", "リュウミン R-KL", "Ryumin Regular KL" , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 18pt;
  font-size: 16pt;
  line-height: 2;
  background-color: #fff;
  margin-bottom: .5em;
  border-radius: 1em;
}

#index p {
  font-family: "はるひ学園", "Haruhi Gakuen", "すずむし", "Suzumushi", "リュウミン R-KL", "Ryumin Regular KL" , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 14pt;
  letter-spacing: 3px;
  padding-right: 8px;
  padding-left: 8px;
  text-shadow: 1px 1px;
}

#index #gaikan::before {
  content: '';
  background-image: url('/images/about/gaikan2.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  display: block;
  height: var(--vh);
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 54px;
  left: 0;
  z-index: -1; /* important!!!! */
  filter: grayscale(100%);
}

#index #gaikan img.cover {
  opacity: 0;
}

#index #kodawari {
  /*
  background-image: url('/images/about/gaikan2.jpg');
  background-repeat: no-repeat;
  background-position: top 48px center;
  background-size: cover;
  */
}

#index #kodawari::before {
  content: '';
  background-image: url('/images/about/gaikan2.jpg');
  background-repeat: no-repeat;
  background-position: top 48px center;
  background-size: cover;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  filter: blur(3px);
}

#index #kodawari .column {
  background-color: rgba(0, 0, 0, .75);
}

/* --------------------------------------------------------------- */

/* お品書き */
@media (orientation: landscape) {
  .fp-enabled #menu .fp-tableCell {
    display: block;
  }
}

#menu .headline {
  line-height: 32px;
  margin: 0;
}

#menu .catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

#menu .grid-item {
  height: 0;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

#menu .grid-item.active {
  width: 100%;
  height: calc(var(--vh) - 48px); /* タイトル(h2)の高さを引く */
  position: absolute;
  top: 0;
  left: 0!important;
}

#menu .catalog img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  padding: 8px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: width .5s ease-in-out .5s, height .5s ease-in-out .5s;
}

#menu .grid-item.active img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
 
  transition: width .5s ease-in-out .5s, height .5s ease-in-out .5s;
}

#menu .img-container {
  height: calc((100vw - 16px) / 660 * 370) ;
  transition: height .5s ease-in-out .3s;
}

#menu .img-container.shrink {
  height: calc(var(--vh) - 32px);
}

#menu .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#menu #modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

#menu #modal.active {
  /*background-color: rgba(0, 0, 0, .75);*/
  text-align: center;
  display: block;
  height: 100%;
  position: absolute;
  top: calc(48px + 8px);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll!important;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  /*-webkit-overflow-scrolling: touch;*/
  pointer-events: auto;
}

#menu #modal.active img {
  width: calc(var(--vh) * 660 / 370 - 32px);
  max-width: none;
  height: calc(var(--vh) - 32px);
  margin: 32px auto 0;
  transform: translate3d(0, 0, 0);
}

.menu--section__topview {
  background-color: #F2E579;
  background-image: url("/images/about/menu_titleback.svg");
  background-repeat:  no-repeat;
  background-position: bottom 54px right;
  background-size: contain;
  position: relative;
}

.menu--section__topview-oshinagaki {
  width: 90vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.buruburu {
  animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

/* --------------------------------------------------------------- */

/* 店舗のご案内 */
/*
#about article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: normal;
  flex-wrap: wrap;
  padding: 56px 8px 130px;
  box-sizing: border-box;
}
*/

#about .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#about .ath {
  height: var(--vh);
  min-height: auto;
  position: relative;
  overflow: hidden;
  perspective: 3000px;
  transform-style: preserve-3d;
}

#about .ath img {
  max-width: none;
  position: absolute;
}

#about .ath img:first-child {
  width: auto;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-64%, -59%) scale(1);

}

#about .ath img:nth-child(2) {
  width: 60vw;
  height: auto;
  bottom: 16px;
  left: 16px;
  transform-origin: bottom;
  transform: rotateX(90deg);
}

#about .ath img:last-child {
  width: 75vw;
  height: auto;
  top: 8px;
  right: 8PX;
}

/*
#about .img-container.ath img {
  width: calc(var(--vh) * 800 / 500);
  max-width: none;
  height: var(--vh);
  object-fit: contain;
  transform: translateX(-55%) scale(1.1);
}
*/

#about .hero {
  background-color: #fff;
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: var(--vh);
  padding: 8px;
}

@media (orientation: landscape) {
  #about .hero {
    height: calc(100% - 54px);
  }
}

#about .hero img {
  width: auto; /* important!!!! */
  height: 90%;
  object-fit: contain;
  flex: 1 1 auto;
}

@media (orientation: landscape) {
  #about .img-container img {
    width: 100vw;
    max-width: none;
    margin-right: calc(0px - env(safe-area-inset-right));
    margin-left: calc(0px - env(safe-area-inset-left));
  }
}

#map {
  width: 100%;
  height: calc(100vh - 48px - 56px - 56px - 8px);
  height: var(--vh);
  padding: 8px 0;
  margin: 0;
}

@media (orientation: landscape) {
  #about #map {
    height: calc(100% - 54px);
  }
}

#map-canvas {
  width: 100%;
  height: 100%;
}

#about .hero2 {
  background-color: #fff;
  width: 100%;
  height: var(--vh);
  padding: 0;
  position: relative;
}

@media (orientation: landscape) {
  #about .hero2 {
    height: calc(100% - 54px);
  }
}

#about .hero2 img {
  background-color: #fff;
  height: var(--vh);
  padding: 8px;
  object-fit: cover;
  position: absolute;
}

#about .hero2 img:first-of-type {
  padding: 16px;
  object-fit: contain;
}

#about .hero2 #mask1 {
  padding: 0;
  object-fit: cover;
}

#about .hero2 #mask2 {
  object-fit: cover;
}

#about .hero2 #mask3 {
  object-fit: contain;
}

#about .hero2 #mask4 {
  padding: 0;
  object-fit: cover;
}

#about .hero2 #mask5 {
  object-fit: contain;
}

/* Last Page Contents Animation */
#about #mask1 {
  -webkit-clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
  clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
}

#about #mask1.active {
  animation: cutIn 1s cubic-bezier(0, 0.94, 0.01, 0.99) 1s forwards;
}

/*  */
#about #mask2 {
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
}

#about #mask2.active {
  animation: wipeCircle 1s cubic-bezier(0.99,-0.21, 0.38, 1.43) 2s forwards;
}

/*  */
#about #mask3 {
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
}

#about #mask3.active {
  animation: wipeCircle 1s cubic-bezier(0.99,-0.21, 0.38, 1.43) 4s forwards;
}

/*  */
#about #mask4 {
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
}

#about #mask4.active {
  animation: wipeCircle 1s cubic-bezier(0.99,-0.21, 0.38, 1.43) 6s forwards;
}

#about #mask4.reverse {
  -webkit-clip-path: circle(200% at 50% 50%);
  clip-path: circle(200% at 50% 50%);
  animation: wipeReverse 1s ease-in-out 1s forwards;
}

/*  */
#about #mask5 {
  display: none;
}

/* Animation Keyframe */
@keyframes cutIn {
  0% {
    -webkit-clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
    clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
  }
  
  100% {
    -webkit-clip-path: polygon(0% 100%, 0% -100%, 200% 100%);
    clip-path: polygon(0% 100%, 0% -100%, 200% 100%);
  }
}

@keyframes wipeCircle {
  0% {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
  }
  
  100% {
    -webkit-clip-path: circle(200% at 50% 50%);
    clip-path: circle(200% at 50% 50%);
  }
}

@keyframes wipeReverse {
  0% {
    -webkit-clip-path: circle(200% at 50% 50%);
    clip-path: circle(200% at 50% 50%);
  }
  
  100% {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
  }
}

@keyframes wipeDia {
  0% {
    -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  
  100% {
    -webkit-clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
    clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
  }
}