@charset "utf-8";

/* レイアウトA */
.layoutStyleA {
  width: 100%;
}
.layoutStyleA .imagePreview {
  width: 100%;
}

/* トップ */
.layoutStyleA .topScreen {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
} 
.layoutStyleA .topImage {
  width: 100%;
  max-width: 680px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}
.layoutStyleA .topScreen img {
  height: 100%;
  object-fit: cover;
}

/* メインコンテンツ */
.layoutStyleA .mainContents {
  width: 100%;
  margin-top: calc(var(--dvh, 1vh)* 100 - 230px);
  position: relative;
  transition: margin-top 0.5s;
}
.layoutStyleA .titleText {
  display: block;
  width: 100%;
  height: 230px;
  padding: 20px 10px 0;
  background-color: #fff;
  position: relative; /* 画像設定ボタン用 */
}
.layoutStyleA.publicView .titleText {
  position: sticky;
  top: 0;
  z-index: 1;
  transition: height 0.5s, background-color 0.5s 0.5s;
} 
.layoutStyleA .titleText .title {
  display: inline-block;
  text-shadow: 7px 20px 2px rgb(52, 49, 76, 0.1);
  white-space: nowrap;
  font-size: 24px;
  font-weight: 700;
}
.layoutStyleA .titleText .subtitle {
  padding-top: 25px;
  white-space: nowrap;
  overflow: auto;
  transition: padding-top 0.5s;
}
/* パブリック用 */ 
.layoutStyleA.publicView #transformHeader {
  height: 100px;
}
.layoutStyleA.publicView #transformHeader .subtitle {
  padding-top: 10px;
}
.layoutStyleA.publicView .titleText {
  overflow: auto;
}
/* ファーストビュー */
.layoutStyleA.firstView .mainContents {
  margin-top: 0;
}
.layoutStyleA.firstView .titleText {
  height: calc(var(--dvh, 1vh)* 100);
}

/* ナビゲーションを開くボタン */
.layoutStyleA .navigationOpenBtn {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 10;
  width: 65px;
  height: 65px;
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(52, 49, 76, 0.6);
  border-radius: 100px;
}
.layoutStyleA .navigationOpenBtn span {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 2px;
  background-color: #34314c;
  opacity: 1;
  transition: top 0.3s, transform 0.3s, opacity 0.3s;
}
.layoutStyleA #navigationClose span:nth-child(1) {
  top: 35%;
}
.layoutStyleA #navigationClose span:nth-child(2) {
  top: 50%;
}
.layoutStyleA #navigationClose span:nth-child(3) {
  top: 65%;
}
.layoutStyleA #navigationOpen span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(40deg);
}
.layoutStyleA #navigationOpen span:nth-child(2) {
  top: 50%;
  opacity: 0;
}
.layoutStyleA #navigationOpen span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-40deg);
}

/* ナビゲーション (内部リンク) */
.layoutStyleA .pageNavigation {
  padding: 50px 0;
}
.layoutStyleA .internalLinkBlock {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
  overflow: auto;
}
.layoutStyleA .internalLinkBlock#navigationDisplay {
  opacity: 0.8;
  visibility: visible;
  transition: height 0.5s 0.1s, opacity 0.5s 0.1s, visibility 0.1s;
}
.layoutStyleA .internalLinkBlock#navigationHidden {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height 0.5s, opacity 0.5s, visibility 0.1s 0.5s;
}
.layoutStyleA .internalLink li {
  height: 80px;
  margin-top: 30px;
  border-bottom: 1px solid rgb(255, 255, 255, 0.2);
  font-weight: 700;
}
.layoutStyleA .internalLink a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* 差し込み画像 */
.layoutStyleA .middleImage {
  min-height: 100px;
  background-color: #fff;
  position: relative; /* 画像設定ボタン用 */
}
.layoutStyleA .middleImage .imagePreview {
  object-fit: contain;
}

/* 外部リンクリスト */
.layoutStyleA .externalLink {
  min-height: 360px;
  padding: 50px 10px;
  background-color: #fff;
  position: relative; /* 画像設定ボタン用 */
}
.layoutStyleA .externalLink .linkRow {
  height: 80px;
  position: relative;  /* 削除ボタン用 */
}
.layoutStyleA .externalLink a {
  display: flex;
  justify-content: start;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.layoutStyleA .externalLink .linkMark {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  border-radius: 100%;
  position: sticky;
  left: 0;
}

/* 差し込み画像 */
.layoutStyleA .backgroundImage {
  position: sticky;
  top: 0;
  z-index: -1;
  min-height: 100px;
  background-color: #fff;
}
.layoutStyleA .backgroundImage .imagePreview {
  object-fit: contain;
}

/* コンテンツ */
.layoutStyleA .contentData {
  min-height: 520px;
  padding: 50px 10px;
  background-color: #fff;
}
.layoutStyleA .contentList {
  margin-top: 10vh;
}
.layoutStyleA .contentData .contentRow {
  min-height: 500px;
  padding-top: 110px;
  position: relative;  /* 削除ボタン用 */
}
.layoutStyleA .contentData h2 {
  font-size: 20px;
}
.layoutStyleA .contentData p {
  padding-top: 20px;
  line-height: 1.5;
  white-space: pre-line;
}

/* 削除ボタン */
.layoutStyleA .deleteBtn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  background-color: #fff;
  box-shadow: 2px 2px 5px -2px rgb(52, 49, 76, 0.6);
  border-radius: 100px;
}


/* フッター */
.layoutStyleA .lastContentsBlock {
  width: 100%;
  height: 300px;
  background-color: #fff;
  position: relative;
}
.layoutStyleA .lastContentsBlock .lastImage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.layoutStyleA .lastContentsBlock .filterElement {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.layoutStyleA .lastContentsBlock .lastImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layoutStyleA .lastContentsBlock .serviceLogo {
  position: absolute;
  top: 10px;
  left: 20px;
}
.layoutStyleA .lastContentsBlock .serviceLogo img {
  width: 60px;
}
.layoutStyleA .lastContentsBlock p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  padding-left: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 14px;
}