.group-650-1 {
  position: relative;
  height: 80vh;
}
.tritype {
  position: absolute;
  top: 2%;
  left: 39%;
  font-size: 2vh;
  font-family: var(--font-jost);
  color: white;
  font-weight: 900;
  letter-spacing: 1.8vh;
}
.top {
  align-self: stretch;
  height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 39.533287048339844px 0;
  box-sizing: border-box;
  background-image: url(/templates/eneergram-result/public/top@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.b {
  position: relative;
}
.wrapper {
  width: 339.5px;
  height: 30px;
  background-image: url(/templates/eneergram-result/public/frame.png);
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.clip-path-group,
.group-icon {
  position: absolute;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.clip-path-group {
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}
.group-icon {
  height: 62.85%;
  width: 63%;
  top: 18.58%;
  right: 18.5%;
  bottom: 18.58%;
  left: 18.5%;
}
.group {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  width: 42.7px;
  position: relative;
  height: 39.3px;
}
.vector-icon,
.vector-icon1 {
  position: absolute;
  height: 99.24%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0.76%;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.vector-icon1 {
  height: 80.41%;
  width: 42.86%;
  top: 19.59%;
  right: 27.63%;
  bottom: 0;
  left: 29.51%;
}
.sl-z-072523-61700-01-1-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 42.7px;
  height: 42.7px;
  object-fit: cover;
}
.mask-group,
.mask-group-icon {
  width: 42.7px;
  position: relative;
}
.mask-group {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
}
.mask-group-icon {
  object-fit: cover;
}
.group-parent,
.share {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 37.06px;
}
.share {
  align-self: stretch;
  height: 15vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  text-align: left;
  font-size: 13.8px;
  color: var(--color-white);
  font-family: var(--font-noto-sans-jp);
}
.diagnosis-report {
  height: 144px;
  flex: 1;
  position: relative;
  font-weight: 300;
  display: inline-block;
  color: #5a5a5a;
  z-index: 0;
}
.b1 {
  width: 375.3px;
  position: absolute;
  margin: 0 !important;
  top: 127.7px;
  left: 17.2px;
  font-size: 23.3px;
  letter-spacing: 0.1em;
  display: inline-block;
  font-family: var(--font-noto-sans-jp);
  color: var(--color-white);
  z-index: 1;
}
.report-child {
  width: 228.4px;
  height: 228.4px;
  z-index: 2;
  margin-left: -62px;
}
.b2,
.report,
.report-child {
  position: relative;
}
.report {
  width: 911.4px;
  height: 219.4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 15.53125px var(--padding-5xl);
  box-sizing: border-box;
}
.b2 {
  letter-spacing: 0.05em;
}
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.b3 {
  height: 87px;
  position: relative;
  font-size: var(--font-size-41xl);
  letter-spacing: 0.05em;
  display: inline-block;
}
.frame-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 19.77px;
}
.b4,
.frame {
  flex-shrink: 0;
}
.b4 {
  position: relative;
  letter-spacing: 0.05em;
  display: inline-block;
}
.frame {
  border-radius: 49.42px;
  background-color: var(--color-white);
  height: 36.1px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}
.div {
  align-self: stretch;
  position: relative;
  font-size: var(--font-size-base);
  letter-spacing: 0.1em;
  line-height: 24.71px;
  font-weight: 500;
  color: var(--color-white);
  text-align: left;
}
.frame-container,
.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-container {
  gap: 11.86px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-darkslateblue-100);
}
.frame-parent {
  gap: 31.63px;
}
.layer-1-icon {
  width: 50vw;
  height: auto;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  mix-blend-mode: overlay;
}
.main1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  gap: 77.09px;
}
.b8,
.main {
  font-family: var(--font-noto-sans-jp);
}
.main {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 25%;
  text-align: left;
  font-size: var(--font-size-15xl);
  color: var(--color-white);
}
.b8 {
  width: 130px;
  position: relative;
  font-size: 18px;
  letter-spacing: 0.1em;
  display: inline-block;
  color: #000;
  text-align: center;
  flex-shrink: 0;
}
.frame-button,
.pc,
.pc-inner {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.frame-button {
  cursor: pointer;
  border: 0;
  padding: 0 40px;
  background-color: var(--color-white);
  border-radius: 36.07px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  height: 60.3px;
  flex-shrink: 0;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
}
.pc,
.pc-inner {
  flex-direction: column;
}
.pc-inner {
  align-self: stretch;
  height: 308.4px;
  flex-shrink: 0;
  justify-content: center;
  padding: 0 158.13314819335938px 75.11324310302734px;
  box-sizing: border-box;
}
.pc {
  width: 100%;
  position: relative;
  background-color: #2d2d6b;
  justify-content: flex-start;
  text-align: left;
  font-size: 99.7px;
  color: #5a5a5a;
  font-family: var(--font-jost);
}
@media screen and (max-width: 960px) {
  .report {
    height: 219px;
    transform: scale(0.7);
  }
  .b2 {
    font-size: var(--font-size-5xl);
  }
  .b3 {
    font-size: var(--font-size-31xl);
  }
  .div {
    font-size: var(--font-size-sm);
  }
  .layer-1-icon {
    width: 80vw;
    height: auto;
  }
  .main {
    padding: 0 120px;
    box-sizing: border-box;
  }
  .main1 {
    padding: 10vw 0;
  }
}
@media screen and (max-width: 760px) {
  .report {
    transform: scale(0.4);
  }
}
@media screen and (max-width: 570px) {
  .b2 {
    font-size: var(--font-size-base);
  }
  .b3 {
    font-size: var(--font-size-15xl);
  }
  .b4 {
    font-size: var(--font-size-xs);
  }
  .div {
    font-size: var(--font-size-3xs);
  }
  .main {
    padding: 0 var(--padding-5xl);
    box-sizing: border-box;
  }
  .b8 {
    font-size: var(--font-size-sm);
  }
}

@media screen and (max-width: 580px) {
  .group-650-1 {
    height: auto;
    width: 95%;
  }
  .tritype {
    top: 3.2vw;
    left: 36vw;
    font-size: 5vw;
    letter-spacing: 3vw;
  }
  .imagecontainer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.buttonparent {
  cursor: pointer;
  border-radius: 25px;
  background-color: white;
  color: black;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px 100px;
  box-sizing: border-box;
  text-align: left;
  font-size: 22px;
  font-family: "Noto Sans JP";
  border: black;
  margin: 40px 0;
}
.buttonparent2 {
  cursor: pointer;
  border-radius: 25px;
  background-color: white;
  color: black;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 40px;
  box-sizing: border-box;
  text-align: left;
  font-size: 16px;
  font-family: "Noto Sans JP";
  border: black;
  margin: 40px 0 80px 0;
}

@media screen and (max-width: 620px) {
  .sns-button-container {
    transform: scale(0.8);
  }
}

.sns-btn {
  display: flex;
  margin-top: 20px;
  flex-direction: row;
}

.btn-icon-li {
  width: 40px;
}
.btn-icon-link {
  width: 34px;
}
.btn-icon-bird {
  width: 85px;
}
.btn-icon-tw {
  width: 45px;
  transform: translateX(-10px);
}
.btn-icon-fb {
  width: 39px;
  transform: translateY(-1px);
}

.btn-icon-tw {
  background-color: black;
}
.btn-icon-li {
  background-color: #06c755;
}
.btn-icon-link {
  background-color: orange;
  border: none;
}

.icon-container-tw {
  width: 470px;
  height: 80px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  gap: 10px;
}
.icon-container-li {
  width: 150px;
  height: 60px;
  background-color: #06c755;
  display: flex;
  cursor: pointer;
  border: none;
  align-items: center;
  justify-content: center;
}
.icon-container-fb {
  width: 150px;
  height: 60px;
  background-color: #086ff0;
  display: flex;
  cursor: pointer;
  border: none;
  align-items: center;
  justify-content: center;
}
.icon-container-link {
  width: 150px;
  cursor: pointer;
  height: 60px;
  background-color: orange;
  overflow: hidden; /*はみ出た部分を隠す*/
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.button-text-x {
  color: white;
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif; /* セーフフォントとしてsans-serifを追加 */
  font-weight: 700;
  letter-spacing: 2.3px;
}

.share-text {
  width: 470px;
  height: auto;
  background-color: #fffaf4;
  border: solid 1px rgb(103, 103, 103);
  border-radius: 20px;
  padding: 10px;
  box-sizing: border-box;
  color: black;
  font-size: 14px;
  font-family: "Noto Sans JP";
}
#text-copy-button {
  background-color: white; /* テキスト色を継承する */
  margin: 0; /* マージンを取り除く */
  font: inherit; /* フォントスタイルを継承する */
  cursor: pointer; /* カーソルをポインターにする */
  outline: inherit;
  overflow: hidden;
  padding: 10px 40px;
  border: solid 1px rgb(103, 103, 103);
  border-radius: 10px;
  color: black;
  font-size: 14px;
  font-family: "Noto Sans JP";
  font-weight: 900;
}