@charset "utf-8";
/* CSS Document */

.dammytext-group {
    width: 100%;
    background-color: #F9F9F9;
    border: 1px solid #F9F9F9;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all .3s ease-in-out;
    padding: 30px 60px;
    line-height: 200%;
}
.dammytext-group:hover{
	border: 1px solid var(--p);
}
.dammytext-group:hover i.ri-file-copy-2-line{
	color: var(--p);
}
.dammytext-group i.ri-file-copy-2-line {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    font-weight: normal;
    font-size: 2.0rem;
    color: #c0c0c0;
    transition: all .3s ease-in-out;
}

/* <p>表示モードの時だけ、見た目としてタグ文字を出す */
.dammytext[data-p-tags="1"] p::before{
  content:"<p>";
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.4rem;
  margin-bottom: 4px;
  color: var(--p);
}

.dammytext[data-p-tags="1"] p::after{
  content:"</p>";
  display:inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.4rem;
  margin-top: 4px;
  color: var(--p);
}

/* 段落間の余白（必要なら） */
.dammytext p{
  margin: 0 0 12px 0;
}
.dammytext p:last-child{
	margin: 0;
}
.dammytext-group{
  cursor:pointer;
}


@media screen and (max-width: 768px) {

.dammytext-group {
    padding: 20px 30px;
}
/*---------------------------------------------------------------------------------------------------------------------------------------- 768px */
}