@charset "utf-8";
/*
 Theme Name:   Diner
 Theme URI:    -
 Description:  Original Theme
 Template:     twentynineteen
*/
/* -------------------------------------------------------------------------------------- */
@media screen and (orientation: portrait) {

}
@media screen and (orientation: landscape) {

}

h1:before,
h2:before,
h2:before,
h2:before{
	background: unset;
    content: unset;
    display: unset;
    height: unset;
    margin: unset;
    width: unset;
}

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

html {
    font-family: 'Noto Serif JP', serif;
}

a,
a:active,
a:visited{
    outline:none;
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
button,
input[type=search]
{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
*:focus {
    outline: none;
}
img{
    width: 100%;
    height: auto;
}
/* -------------------------------------------------------------------------------------- */
@charset "utf-8";

/* ==========================================================================
   Splash Page - リッチアニメーション高速＆隙間ゼロ版CSS
   ========================================================================== */

/* 1. 外枠：画面最前面に固定 */
.Splash_Page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0d0d0d;
  z-index: 9999;
  perspective: 1000px;
  
  /* 画面全体のフェードアウトも少し速めに（1秒） */
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), visibility 1s;
  opacity: 1;
  visibility: visible;
}

/* 全体が消えるときのクラス */
.Splash_Page.is-fadeout {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 2. タイルを敷き詰めるグリッドコンテナ */
.Splash_Page_Img_Wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20vh);
  grid-template-rows: repeat(7, 20vh);
  width: 140vw; 
  height: 140vh;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  place-content: center;
  transform-style: preserve-3d;
}

/* 3. タイル1枚ずつの初期設定（高速化＆隙間対策） */
.Splash_Page_Img {
  /* 【解決策】100%よりほんの少しだけ大きくして、隣のタイルと微小に重ねることで隙間を消滅させます */
  width: 100.5%;
  height: 100.5%;
  max-width: 20vh;
  max-height: 20vh;
  box-sizing: border-box;
  
  /* アニメーション初期状態：よりキレのある動きにするため縮小率を調整 */
  opacity: 0;
  filter: blur(6px) brightness(0.2);
  transform: scale(0.7) rotateX(-45deg) translateZ(-100px);
  
  /* 【高速化】transitionの時間を 0.8s から 0.45s へ大幅にスピードアップ */
  transition: 
    opacity 0.45s cubic-bezier(0.215, 0.610, 0.355, 1),
    filter 0.45s ease-out,
    transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 小気味よく弾むイージング */
}

/* 4. 表示用クラス */
.Splash_Page_Img.is-visible {
  opacity: 1;
  filter: blur(0px) brightness(1);
  transform: scale(1) rotateX(0deg) translateZ(0);
}

/* 5. タイルの中の画像設定 */
.Splash_Page_Img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block; 
}

/* ==========================================================================
   縦長画面（スマホ・タブレット縦持ち）用の最適化
   ========================================================================== */
@media screen and (orientation: portrait) {
  .Splash_Page_Img_Wrap {
    grid-template-columns: repeat(auto-fill, 13vh);
    grid-template-rows: repeat(11, 13vh);
    width: 140vw;
    height: 150vh;
  }

  .Splash_Page_Img {
    /* スマホ時も同様に、微小なオーバーラップで隙間を徹底防止 */
    width: 100.5%;
    height: 100.5%;
    max-width: 13vh;
    max-height: 13vh;
  }
}
/*-----------------------------------------------------------------------------------*/
.Main_Section{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color:darkgrey;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.Main_Section_Logo{
    width: 50%;
    max-width: 640px;
    opacity: 0;
}