@charset "utf-8";
 

 /*--------------------------------------------------*/
 /* 少しずらしたボックス */
.cstm-box-offset {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background: none; /* 元のボックス背景色なし */
   border: 1px solid #ccc; /* 線の太さ（1px）、種類（実線）、色（#ccc） */
   position: relative; /* 配置（基準となる位置） */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-offset:after {
   background-color: #eee; /* ずらしたボックスの背景色 */
   border: none; /* 枠線なし */
   content: ''; /* 擬似要素にコンテンツなし */
   position: absolute; /* 配置（ここを動かす） */
   top: 7px; /* 上から7pxずらす */
   left: 7px; /* 左から7pxずらす */
   width: 100%; /* 幅100%（親要素に合わせる） */
   height: 100%; /* 高さ100%（親要素に合わせる） */
   z-index: -1; /* 背景として後ろに表示 */
}

/* ボックス内の段落 */
.cstm-box-offset p { margin:0; }



/* 白ステッチをつける */
.cstm-box-stitch-white {
   margin: 0em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   position: relative;
   z-index: 0;
   background-color: #d6e0ea; /* 淡いブルーグレー */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-stitch-white::before {
   content: '';
   position: absolute;
   inset: 0; /* top, right, bottom, left を一括指定 */
   margin: 5px;
   border: 2px dashed #fff;
   border-radius: 3px;
   z-index: -1;
   display: block;
}

/* ボックス内の段落 */
.cstm-box-stitch-white p { margin:0; }


/*--------------------------------------------------*/
/* ワンポイント付きボックス */
.cstm-box-pin {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   position: relative; /* 擬似要素配置の基準 */
   border: 8px solid #eee; /* 枠線（太さ・種類・色） */
   z-index: 0; /* 重なり順 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-pin::before {
   content: ''; /* 擬似要素にコンテンツなし */
   display: block; /* ブロック要素として表示 */
   position: absolute; /* 絶対位置指定 */
   top: -8px; /* 上に配置 */
   left: -8px; /* 左に配置 */
   width: 8px; /* サイズ（幅） */
   height: 8px; /* サイズ（高さ） */
   background-color: #cca497; /* ワンポイントの色 */
   z-index: 1; /* 前面に表示 */
}

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