*{
  margin:0;
  padding:0;
  }
*{
  font-family:sans-serif;
}
body {
  margin: 0;
  padding: 0;
  background-color: white;
  color: #8e8e8e;
}
.box {
      display: flex;
      margin: 0em 0em 0em 0em;
      /** overflow-x: scroll; snapしない場合 **/
      overflow: scroll /** autoでもOK（ブラウザに依存）**/;
      overflow-y: hidden;
      scroll-snap-type: x;
      scroll-behavior: smooth;
}   

.box div {
        width: 100%;
        margin: 0em 7em 0.5em 0em;
        padding: 0em;
}

/**.box div img{
  height: 69.2%;
}**/


.box div img{
  height: 94.5svh;
}

embed{

height: 100svh;
}

/**.box div p{
  margin: 0em 40em 0em 10em;
  padding: 0em;
}**/

.area {
  scroll-snap-align: center;
}

.bottom-fixed {
  font-size: 0.5em;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
  padding: 1em 0 0 2em;
  text-align:center;
  background: #fff;
  box-shadow: 0px 10px 10px 6px rgba(0, 0, 0, 0.3);

  /**border-top: 0.1em solid rgba(0, 0, 0, 0.3);**/
}
.bottom-mark-fixed {
  font-size: 0.65em;
  height: 3em;
  position: fixed;
  bottom: 1.6em;
  display: block;
  height: 1em;
  padding: 0em 0 0em 1.5em;
  text-align:left;
  z-index: 99;
}
.spacer01{
  margin-left:50em;
}

/* .box div:hover {
  overflow-x: scroll;
} */

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

.text-area {
  width: 60vw;  /* ← 左スペースの幅（調整可） */
  min-width: 400px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* background: #f7f7f7; ほんのり背景（任意） */
}

/* タイトル＋CONTENTS */

.intro-group {
  /* position: absolute;
  top: 45%;
  left: 20%; */
  transform: translate(20%, 3%);
  width: 320px;
  text-align: left;
  font-size: 12px;
  line-height: 1.6;
  z-index: 10;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.intro-group.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* タイトル */

.brochure-intro h1 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.brochure-intro p {
  font-size: 11px;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* CONTENTS */

.brochure-index {
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #8e8e8e;
  opacity: 1;
}

.brochure-index h2 {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 7px;
  letter-spacing: 0.12em;
  color: #8e8e8e;
  opacity: 1;
}

.brochure-index ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brochure-index li {
  margin-bottom: 0;
}

/* スマホ縦 */

@media screen and (max-width: 767px) and (orientation: portrait) {
  .intro-group {
    left: 67.5%;
    width: 220px;
  }
}

/* スマホ横

@media screen and (max-width: 767px) and (orientation: landscape) {
  .intro-group {
    display: none;
  }
} */

/* iPad横 */

@media screen and (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
  .intro-group {
    left: 23.5%;
    top: 46%;
    width: 280px;
  }

  .brochure-intro h1 {
    font-size: 14px;
  }

  .brochure-intro p {
    font-size: 11px;
  }
}

/* iPad縦 */

@media screen and (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  .intro-group {
    left: 44%;
    top: 42%;
    width: 240px;
  }

  .brochure-intro h1 {
    font-size: 13px;
  }

  .brochure-intro p {
    font-size: 10px;
  }
}

.scroll-hint {
  margin-top: 18px;

  font-size: 9px;
  letter-spacing: 0.15em;

  color: #8e8e8e;
  opacity: 1;

  text-align: right;
}

/* 巻末メッセージ */

.box > .end-text-area {
  flex: 0 0 620px;
  width: 620px;
  min-width: 620px;
  height: 94.5svh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  margin-right: 7em;
  scroll-snap-align: center;
}

.end-message {
  width: 360px;
  color: #8e8e8e;
  text-align: left;
  pointer-events: none;
}

.end-message h2 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-bottom: 28px;
}

.end-message p {
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

@media screen and (max-width: 767px) and (orientation: portrait) {

  /* 巻末ページ */

  .box > .end-text-area {
    flex: 0 0 100vw;
    width: 100vw;
    min-width: 100vw;
    height: 94.5svh;

    box-sizing: border-box;
    margin-right: 7em;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding-left: 10vw;
    padding-right: 4vw;
  }

  /* テキスト本体 */

  .box > .end-text-area .end-message {
    width: 88vw;
    margin: 0;
  }

  /* 見出し */

  .box > .end-text-area .end-message h2 {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;

    white-space: nowrap; /* ← 「わたしは、わたし。」を1行に */
  }

  /* 本文 */

  .box > .end-text-area .end-message p {
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {

  .box > .end-text-area {
    flex: 0 0 520px;
    width: 520px;
    min-width: 520px;
  }

  .end-message {
    width: 300px;
  }

  .end-message h2 {
    font-size: 16px;
    margin-bottom: 22px;
  }

  .end-message p {
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {

  .box > .end-text-area {
    flex: 0 0 600px;
    width: 600px;
    min-width: 600px;
  }

  .end-message {
    width: 340px;
  }

  .end-message h2 {
    font-size: 17px;
    margin-bottom: 26px;
  }

  .end-message p {
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 16px;
  }
}