@charset "UTF-8";

/*
Date   : 2023.03
Author : ISMR/h.tabira
*/

/*
font-family: 'Klee One', cursive;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
*/

/* ---------------------------------------- */
/* Pages */

.whitebox{
    width: 1000px;
    max-width: 100%;
    margin: auto auto;
    background-color: white;
    padding: 1em;
    margin: 50px auto;
    box-sizing:border-box;
}

.pinkbox {
    padding: 0.2em 0.5em;
    margin: 1.5em 2rem;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}

/* マスキングテープ風ボックス */
.cstm-box-masking {
  position: relative; /* タイトル配置の基準 */
  margin: 2em auto; /* 外側余白 */
  background-color: #f3dbd4; /* ボックス背景色 */
  max-width: 880px; /* 最大幅 */
}

/* タイトル（テープ風） */
.cstm-box-masking .box-title {
  background-image: repeating-linear-gradient(
    -45deg,
    #f3dbd4 0,
    #f3dbd4 3px,
    #fafafa 3px,
    #fafafa 6px
  ); /* ストライプ模様 */
  transform: rotate(-2deg); /* テープの傾き */
  box-shadow: 0 1px 2px rgb(0 0 0 / .1); /* テープの影 */
  padding: .5em 1em; /* 内側余白 */
  line-height: 1; /* 行の高さ */
  position: absolute; /* 親の左上に固定 */
  top: -1em; /* 上位置 */
  left: 1em; /* 左位置 */
  display: inline-block; /* 内容幅に合わせる */
  font-size: 0.9em; /* フォントサイズ */
  width: auto; /* 幅自動調整 */
  max-width: calc(100% - 2em); /* 最大幅調整 */
  white-space: nowrap; /* 折り返さない */
  overflow: hidden; /* はみ出し非表示 */
  text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツ部分の余白 */
.cstm-box-masking .box-content {
  padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-masking p {
  margin: 0;
}



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

}