@charset "utf-8";

/* レイアウトD */
.outLineContents.layoutStyleD {
  height: auto;
  position: relative;
}
.outLineContents.layoutStyleD.publicView {
  height: calc(var(--dvh, 1vh)* 100);
}
.topScreen {
  width: 100%;
  position: relative;
  z-index: 10;
}

/* トップ画像 */
.topScreen #previewContainer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.topScreen #previewContainer .imagePreview {
  position: absolute;
  top: 45%;
  left: 0;
  transform: translate(0, -50%);
  width: 290px;
  height: 440px;
  object-fit: cover;
  transition: width 0.5s, object-position 0.5s, opacity 0.5s;
}

/* タイトル (ヘッダー) */
.publicView .topScreen .headerTitle {
  position: fixed;
}
.topScreen .headerTitle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  width: 100%;
  max-width: 680px;
  height: 70px;
  padding: 10px;
  border-bottom: 1px solid rgb(52, 49, 76, 0.1);
  opacity: 1;
  transition: opacity 0.5s;
}
.topScreen .headerTitle .subtitle {
  display: flex;
  justify-content: start;
  align-items: end;
  height: 20px;
  font-size: 10px;
}
.topScreen .headerTitle .title {
  display: flex;
  justify-content: start;
  align-items: start;
  height: 25px;
  margin-top: 5px;
  font-size: 20px;
}

/* トップタイトル */
.topScreen .topTitle {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: background-color 0.5s;
}
.topScreen .topTitle .title {
  position: absolute;
  top: 80px;
  right: 17px;
  width: 100%;
  opacity: 0.2;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
  font-size: 130px;
  transition: top 0.5s, right 0.5s;
}

/* ファーストビュー */
.firstView .topScreen #previewContainer .imagePreview {
  opacity: 0;
}
.firstView .headerTitle {
  opacity: 0;
} 
.firstView .topTitle .title {
  top: 0;
  right: 0;
}

/* メインコンテンツ */
.mainContents {
  width: 100%;
}

/* 削除ボタン ビルド用 */
.mainContents .deleteBtn {
  position: absolute;
  top: 0;
  right: 0;
}

/* 最初のコンテンツ */
.mainContents .topMessage {
  height: 640px;
  padding-top: 120px;
}
.mainContents .topMessage #previewContainer {
  width: 90%;
  height: 100%;
  margin: 0 auto 10vh;
  position: relative;
}
.mainContents .topMessage .imagePreview {
  width: 100%;
  height: 60%;
  object-fit: cover;
}
.mainContents .topMessage .contentList {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
}
.mainContents .topMessage .contentList .contentRow {
  display: none;
  height: 100%;
  margin-top: auto;
  overflow: unset;
}
.mainContents .topMessage .contentList .contentRow:nth-child(1) {
  display: block;
}
.mainContents .topMessage .contentList h2 {
  position: absolute;
  top: -40px;
  left: 10px;
  height: auto;
  font-size: 48px;
  /* filter: invert(1); */
}
.mainContents .topMessage .contentList p {
  height: 100%;
  min-height: auto;
  padding: 20px 0 5px;
  overflow: auto;
}

/* リンクリスト */
.outLineContents .linkList {
  width: 100%;
  padding-top: 10vh;
}
.outLineContents .linkList .linkRow {
  width: 100%;
  height: 80px;
  margin-top: 20px;
  padding: 0 10px;
  overflow: hidden;
  position: relative;
}
.outLineContents .linkList .linkMark {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  border-radius: 100px;
  position: sticky;
  left: 0;
  object-fit: cover;
}
.outLineContents .linkList a {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: auto;
}
.outLineContents .linkList .deleteBtn {
  position: absolute;
  top: 0;
  right: 10px;
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(52, 49, 76, 0.6);
  border-radius: 100px;
}

/* 中間画像 */
.middleImage {
  height: 800px;
  padding-top: 15vh;
  position: relative;
}
.middleImage img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.middleImage .backImage {
  width: 90%;
  height: 60%;
  filter: blur(1.5px) sepia(0.3);
}
.middleImage .frontImage {
  width: 80%;
  height: 55%;
}

/* コンテンツ */
.mainContents .middleContents {
  width: 100%;
  padding: 160px 0;
}
.mainContents .contentList .contentRow {
  width: 100%;
  margin-top: 20px;
  padding: 0 10px;
  overflow: hidden;
  position: relative;
}
.mainContents .contentList h2 {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 50px;
  white-space: nowrap;
  overflow: auto;
  font-size: 20px;
  font-weight: 700;
}
.mainContents .contentList p {
  min-height: 300px;
  line-height: 1.5;
  white-space: pre-line;
}
.mainContents .contentList .deleteBtn {
  position: absolute;
  top: 0;
  right: 10px;
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(52, 49, 76, 0.6);
  border-radius: 100px;
}

/* ラストコンテンツ（footer） */
.lastContentsBlock {
  height: 600px;
  position: relative;
  z-index: 1;
}
.lastContentsBlock .lastImage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.lastContentsBlock .lastImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lastContentsBlock .imageFilter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.lastContentsBlock .lasttext {
  padding-top: 50px;
  padding-bottom: 90px;
  text-align: center;
  line-height: 1.5;
}
.lastContentsBlock .title {
  font-size: 16px;
}
.lastContentsBlock .subtitle {
  margin-top: 5px;
  font-size: 12px;
}
.serviceLogo {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 60px;
}
.serviceLogo img {
  width: 100%;
  object-fit: contain;
}
.lastContentsBlock .footerCopyRight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  padding-left: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 14px;
}