@charset "UTF-8";

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

目次

  0.root CSS

  1.基本リセット＆ベーススタイル

  2.ヘッダー

  3.スクロールパネル

  4.フッター

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

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

  0.root CSS

-------------------------------------------------------*/
:root {
  /* color */
  --color-text-base: #010036;
  --color-text-sub: #ffffff;
  /* font */
  --font-mincho: "dnp-shuei-mincho-pr6n", sans-serif;
  --fw-l: 400;
  --fw-m: 500;
  --fw-b: 600;
  /* montecarlo */
  --font-montecarlo: "montecarlo", sans-serif;
  --fw-montecarlo: 400;
  --fst-montecarlo: normal;
}

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

  1.基本リセット＆ベーススタイル

-------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

section {
  margin-bottom: 40px;
}

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

  3.スクロールパネル

-------------------------------------------------------*/
.horizontal-wrapper {
  display: flex;
  width: 400vw; /* セクション数×100vw */
  height: 100vh;
  position: relative;
}

.horizontal-scroll {
  display: flex;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
  touch-action: pan-x; /* 横スクロールのみに制限 */
}

.panel {
  width: 100vw;
  /*height: 100vh;*/
  height: 100dvh; /* Safariの下ツールバーを考慮した高さ */
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-right: 1px solid #fff;
}

/* 表紙
-------------------------------------------------------*/
.panel1 {
  position: relative;
  background-color: var(--color-text-sub);
  align-items: flex-start;
  z-index: 5;
}

.panel1 .front-cover p {
  text-align: center;
}

.panel1 .front-cover .maincopy {
  font-family: var(--font-mincho);
  font-weight: var(--fw-l);
  color: var(--color-text-base);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.panel1 .front-cover .maincopy .maincopy_txt {
    font-size: 1.25rem;
}

@media only screen and (max-device-width: 768px) {
  .panel1 .front-cover .maincopy {
    width: 100%;
  }
  .panel1 .front-cover .maincopy .maincopy_txt {
    font-size: 1rem;
  }
}