/* ===========================================================
   囲みブロック（accept/plainbox）
   turicco.com/box/ のコピペ可デザインをもとにブロック用へ整形。
   元は単体クラス指定だが、スタイル切替で使えるよう
   .acp-box.is-style-xxx へ置き換えた。
   max-width と外側marginは本文の流れに合わせるため除いている。
   =========================================================== */

.acp-box { margin: 24px 0; }
.acp-box > :first-child { margin-top: 0; }
.acp-box > :last-child { margin-bottom: 0; }

/* シンプルな実線枠（solid） */
/* 枠付きボックス */
.acp-box.is-style-solid {
  padding: 2em; /* 内側余白 */
  border: 2px solid #333; /* 実線 */
}

/* ボックス内の段落 */
.acp-box.is-style-solid p { margin: 0;}

/* ダブルラインで強調（double） */
/* 二重線 */
.acp-box.is-style-double {
  padding: 1em 2em; /* 内側余白 */
  border:5px double #CCCFD6; /* 線の種類・太さ・色 */
}

/* ボックス内の段落（余白なし） */
.acp-box.is-style-double p { margin: 0;}

/* 軽やかな破線枠（dashed） */
/* 破線 */
.acp-box.is-style-dashed {
  padding: 2em; /* 内側余白 */
  border: dashed 2px #b3ada4; /* 線の種類・太さ・色 */
}

/* ボックス内の段落 */
.acp-box.is-style-dashed p {
  margin: 0;
}

/* ドット柄の点線（dotted） */
/* 点線（ドット） */
.acp-box.is-style-dotted {
  padding: 2em; /* 内側余白 */
  border: 2px dotted #CCA99D; /* 点線 */
}

/* ボックス内の段落 */
.acp-box.is-style-dotted p {
  margin: 0;
}

/* 背景色で目立つ（bg） */
/* 背景色 */
.acp-box.is-style-bg {
  padding: 2em; /* 内側余白 */
  background-color: #E5F2F1; /* 背景色 */
}

/* ボックス内の段落 */
.acp-box.is-style-bg p {
  margin: 0;
}

/* 紙風デザイン（paper） */
/* 紙風 */
.acp-box.is-style-paper {
  padding: 2em; /* 内側余白 */
  background-color: #f2f3f4; /* 背景色（薄いグレー） */
  position: relative; /* 相対位置指定 */
}

.acp-box.is-style-paper::after {
  position: absolute; /* 絶対位置指定 */
  content: ''; /* 擬似要素 */
  right: 0; /* 右端 */
  top: 0; /* 上端 */
  border-width: 0 25px 25px 0; /* 折れ形状 */
  border-style: solid; /* 線の種類 */
  border-color: #ccc #fff #ccc; /* 色 */
  box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影 */
}

/* ボックス内の段落 */
.acp-box.is-style-paper p {
  margin: 0;
}

/* モダンなストライプ（stripe） */
/* ストライプ */
.acp-box.is-style-stripe {
  padding: 2em; /* 内側余白 */
  background-image: repeating-linear-gradient(
    -45deg, /* ストライプの角度 */
    #f2f3f7 0, /* ストライプの色（薄いグレー） */
    #f2f3f7 3px, /* ストライプの太さ（3pxの間隔） */
    transparent 3px, /* 透明部分 */
    transparent 6px /* 透明部分（3pxから6pxまで） */
  );
}

/* ボックス内の段落 */
.acp-box.is-style-stripe p {
  margin: 0;
}

/* カジュアルなふせん（sticky） */
/* ふせん風 */
.acp-box.is-style-sticky {
  padding: 1.5em; /* 内側余白 */
  border-left: solid 4px #9dace1; /* 左側の線 */
  background-color: #f5f7ff; /* 背景色 */
}

/* ボックス内の段落 */
.acp-box.is-style-sticky p {
  margin: 0;
}

/* 上部に太線アクセント（topline） */
/* 上にだけ太線 */
.acp-box.is-style-topline {
   padding: 2em; /* 内側余白 */
   border-top:3px solid #F7C16E; /* 上辺に太い線 */
   background-color: #FDFBF6;   /* 背景色 */
   box-shadow: 3px 1px 4px rgb(0 0 0 / .2); /* 影の効果: 右3px、下1px、ぼかし4px */
}

/* ボックス内の段落 */
.acp-box.is-style-topline p { margin:0; }

/* 上下の太線でバランス（topbottom） */
/* 上下に太線 */
.acp-box.is-style-topbottom {
   padding: 2em;   /* 内側余白 */
   border-top: 3px solid #8FAAAD;  /* 上辺に太い線 */
   border-bottom: 3px solid #8FAAAD; /* 下辺に太い線 */
   background-color: #FBFBFB;   /* 背景色 */
}

/* ボックス内の段落 */
.acp-box.is-style-topbottom p { margin:0; }

/* ずらした重ねデザイン（offset） */
/* ずらし＆重ねボックス */
.acp-box.is-style-offset {
  padding: 2em;  /* 内側余白 */
  background: none;  /* 元のボックス背景色なし */
  border: 1px solid #ccc;  /* 枠線 */
  position: relative;  /* 配置の基準 */
}

.acp-box.is-style-offset::after {
  background-color: #eee;  /* ずらした背景色 */
  border: none;  /* 枠線なし */
  content: '';  /* 擬似要素 */
  position: absolute;  /* 位置指定 */
  top: 7px;  /* 上にずらす */
  left: 7px;  /* 左にずらす */
  width: 100%;  /* 幅100% */
  height: 100%;  /* 高さ100% */
  z-index: -1;  /* 背面表示 */
}

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

/* アクセントカラー（corner-accent） */
/* アクセントカラー */
.acp-box.is-style-corner-accent {
  padding: 2em; /* 内側余白 */
  border: 3px solid #eee; /* ベース枠線 */
  position: relative; /* 配置の基準 */
  z-index: 0; /* 重なり順 */
}

.acp-box.is-style-corner-accent::before {
  border-top: 3px solid #8293AA; /* 上辺アクセント */
  border-left: 3px solid #8293AA; /* 左辺アクセント */
  content: ''; /* 擬似要素 */
  display: block; /* ブロック表示 */
  position: absolute; /* 位置指定 */
  top: -3px; /* 上にずらす */
  left: -3px; /* 左にずらす */
  width: 20px; /* 幅 */
  height: 20px; /* 高さ */
  z-index: 1; /* 前面表示 */
}

/* ボックス内の段落 */
.acp-box.is-style-corner-accent p {
  margin: 0;
}

/* レトロな方眼紙（grid） */
/* 方眼紙風 */
.acp-box.is-style-grid {
   padding: 2em; /* 内側余白 */
   background-image: 
   linear-gradient(0deg, transparent 19px, #d3d3d3 20px), /* 横のグラデーション */
   linear-gradient(90deg, transparent 19px, #d3d3d3 20px); /* 縦のグラデーション */
   background-size: 20px 20px; /* 方眼のサイズ */
}

/* ボックス内の段落 */
.acp-box.is-style-grid p { margin:0; }

/* SWELLの目次風（swell） */
/* SWELL目次風ボックス */
.acp-box.is-style-swell {
  --border-color-1: #f8f8f8; /* ストライプ背景の色 */
  --border-color-2: #ddd; /* 上下枠線の色 */

  padding: 2em; /* 内側余白 */
  background: linear-gradient(
    -45deg,
    transparent 25%,
    var(--border-color-1) 25%,
    var(--border-color-1) 50%,
    transparent 50%,
    transparent 75%,
    var(--border-color-1) 75%,
    var(--border-color-1)
  ); /* ストライプ模様 */
  background-size: 4px 4px;   /* ストライプのサイズ */
  border-top: 4px double var(--border-color-2); /* 上枠線 */
  border-bottom: 4px double var(--border-color-2); /* 下枠線 */
  background-clip: padding-box; /* 背景をパディング領域まで表示 */
}

/* ボックス内の段落：余白なし */
.acp-box.is-style-swell p { margin: 0;}

/* 角丸・背景色（rounded-bg） */
/* 背景色をつけて角を丸くする */
.acp-box.is-style-rounded-bg {
   padding: 2em;   /* 内側余白 */
   border-radius:20px; /*丸みを調整 */
   background-color:#f9e8e2;
}

/* ボックス内の段落 */
.acp-box.is-style-rounded-bg p { margin:0; }

/* ふわふわな枠線（fluffy） */
/* ふわふわな枠線 */
.acp-box.is-style-fluffy {
   padding: 2em;   /* 内側余白 */
   background-color:#fff; /* 背景色 */
   box-shadow: 0 0 6px 1px #c2d0e0, 0 0 6px 1px #c2d0e0 inset; /*ふわりとした影*/
   border-radius: 20px;
}

/* ボックス内の段落 */
.acp-box.is-style-fluffy p { margin:0; }

/* 茶色のステッチ（stitch-brown） */
/* 茶ステッチ */
.acp-box.is-style-stitch-brown {
  padding: 2em; /* 内側余白 */
  background-color: #f4f3f1; /* 薄いベージュ */
  outline: 1px dashed #A7A297; /* 点線アウトライン */
  outline-offset: -5px; /* 内側に5pxずらす */
}

/* ボックス内の段落 */
.acp-box.is-style-stitch-brown p { margin: 0;}

/* 白ステッチ（stitch-white） */
/* 白ステッチ */
.acp-box.is-style-stitch-white {
  padding: 2em; /* 内側余白 */
  background-color: #d6e0ea; /* 淡いブルーグレー */
  outline: 1px dashed #fff; /* 点線アウトライン */
  outline-offset: -5px; /* 内側に5pxずらす */
}

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

/* ラフな手書き風（handdrawn） */
/* 手書き風 */
.acp-box.is-style-handdrawn {
   padding: 2em;   /* 内側余白 */
   border-radius: 30px 60px / 60px 30px;  /* 角をランダムに丸めて手書き風に */
   border: solid 5px #e9e5de;   /* 太めの枠線（8px、色: #ccc7be） */
}

/* ボックス内の段落 */
.acp-box.is-style-handdrawn p { margin:0; }

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

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

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

/* ポップなチェック柄（checkered） */
/* 背景チェック */
.acp-box.is-style-checkered {
  padding: 2em; /* 内側余白 */

  background-image: 
    linear-gradient(90deg, rgba(204, 204, 204, 0.1) 50%, transparent 50%), 
    linear-gradient(rgba(204, 204, 204, 0.2) 50%, transparent 50%);
  background-size: 15px 15px; /* チェックのサイズ */
}

/* ボックス内の段落 */
.acp-box.is-style-checkered p {
  margin: 0;
}

/* 幅広ストライプ（stripe-wide） */
/* 背景ストライプ */
.acp-box.is-style-stripe-wide {
  padding: 2em; /* 内側余白 */
  background: repeating-linear-gradient(
    -45deg, /* ストライプの角度 */
    #f8f8f8 0 6px, /* 薄いグレー、幅6px */
    #fff 6px 12px /* 白（#fff）、幅6px */
  );
}

/* ボックス内の段落 */
.acp-box.is-style-stripe-wide p {
  margin: 0;
}

/* ノート風（notebook） */
/* ノート風ボックス */
.acp-box.is-style-notebook {
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #f4f3f2; /* 背景色 */
}

/* 上部のドット罫線 */
.acp-box.is-style-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #fff; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/* 内側テキスト */
.acp-box.is-style-notebook p {
  margin: 0; /* 余白リセット */
}

/* かぎ括弧で囲む（bracket） */
/* かぎ括弧風ボックス */
.acp-box.is-style-bracket {
  padding: 1.5em; /* 内側余白 */
  position: relative; /* 配置基準 */

  color: #111; /* 文字色（＝装飾色の基準） */
}

.acp-box.is-style-bracket::before,
.acp-box.is-style-bracket::after {
  content: ''; /* 擬似要素 */
  width: 20px; /* カッコ幅 */
  height: 30px; /* カッコ高さ */
  position: absolute; /* 位置指定 */
}

.acp-box.is-style-bracket::before {
  top: 0;
  left: 0;
  border-left: 2px solid currentColor; /* 左線 */
  border-top: 2px solid currentColor; /* 上線 */
}

.acp-box.is-style-bracket::after {
  bottom: 0;
  right: 0;
  border-right: 2px solid currentColor; /* 右線 */
  border-bottom: 2px solid currentColor; /* 下線 */
}

/* ボックス内の段落 */
.acp-box.is-style-bracket p {
  margin: 0;
}

/* 角括弧で囲む（angle-bracket） */
/* 角括弧風ボックス */
.acp-box.is-style-angle-bracket {
  padding: 2em; /* 内側余白 */
  position: relative; /* 配置基準 */

  color: #111; /* 文字色（＝装飾色の基準） */
}

.acp-box.is-style-angle-bracket::before,
.acp-box.is-style-angle-bracket::after {
  content: ""; /* 擬似要素 */
  height: 100%; /* ボックス高 */
  width: 0.75em; /* カッコ幅 */
  position: absolute; /* 位置指定 */
  bottom: 0; /* 下端揃え */
  border-top: 2px solid currentColor; /* 上線 */
  border-bottom: 2px solid currentColor; /* 下線 */
}

.acp-box.is-style-angle-bracket::before {
  left: 0; /* 左配置 */
  border-left: 2px solid currentColor; /* 左カッコ */
}

.acp-box.is-style-angle-bracket::after {
  right: 0; /* 右配置 */
  border-right: 2px solid currentColor; /* 右カッコ */
}

/* ボックス内の段落 */
.acp-box.is-style-angle-bracket p {
  margin: 0;
}