@charset "utf-8";

/* ==========================================================================
   エンターページ（enter.php） — T-0027 / 2026-08-05
   「/」として表示される入口ページ専用。すべて body#enter 配下に閉じているため、
   他ページ（top.php / 下層ページ）には一切影響しない。
   ========================================================================== */

/* 背景：トップのメインビジュアルと同じ画像を使う（.mainvisual-bg:before に倣う） */
#enter .enter-bg {
  background: url("../img/mainvisual.jpeg") no-repeat right center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

#enter .enter-wrap {
  min-height: 100vh;
  padding: 6vh 5% 5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ロゴ（img/logo.png = 新ロゴ「第二の家 ～セカンドハウス～」） */
#enter .enter-logo {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 5vh;
}
#enter .enter-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ENTER / 18禁 / LEAVE */
#enter .enter-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 5vh;
}
#enter .enter-nav li {
  margin: 0 0 1.25rem;
  list-style: none;
}
#enter .enter-nav a {
  display: block;
  width: 240px;
  padding: 0.9rem 0;
  border: 1px solid #3d8fc4;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.75);
  color: #1d6a9c;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
#enter .enter-nav a:hover {
  background: #1d6a9c;
  color: #fff;
}
#enter .enter-nav a span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
/* 18禁バッジ（img/r18.svg = viewBox のみで width/height 属性を持たないSVG。
   height:auto で viewBox の比率 872.17:847.89 が使われる） */
#enter .enter-nav .enter-age img {
  width: 110px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 相互リンク（mutual_link() の出力）
   並びと画像サイズは main.css の .bottom-link-wrap がそのまま効くので何も足さない。
   ただし .enter-wrap が align-items:center の縦フレックスなので、
   .container が内容幅（1168px）のままになり SP で横スクロールが出る。それだけを抑える。 */
#enter .container {
  width: 100%;
  max-width: 1168px;
}

@media screen and (min-width: 769px) {
  #enter .enter-logo {
    max-width: 620px;
  }
  #enter .enter-nav {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #enter .enter-nav li {
    margin: 0 1.5rem;
  }
}