/*
 * pickup.css — pickup記事（.pkA独自ページデザイン）専用スタイル
 * 適用範囲: single-column.php の pickupモード（meta design=pickup）でのみ読み込む
 * 確立: 2026-09-26・記事010で確立（2026-09-26 v3: ヘッダー/フッター付き構成・記事下セクション追加）
 * 編集時はこのファイルを修正し、バスター更新（single-column.php内の?ver=）を忘れない
 */

.pkA{
  font-family:"Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color:#000;font-weight:500;font-feature-settings:"palt";-webkit-font-feature-settings:"palt";
  font-size:16px;line-height:1.6;word-break:break-all;text-align:center;background:#fff;
}
.pkA *{letter-spacing:.07em;box-sizing:border-box}

/* ---- KVヘッダー ---- */
.pkA .pkKV{aspect-ratio:360/167;position:relative;isolation:isolate;width:100%;max-height:min(45.833vw,660px);margin-top:0;padding:0 20px 80px}
.pkA .pkKVImg{transform:translateX(-50%);z-index:-10;position:absolute;top:0;left:50%;width:100%;height:100%}
.pkA .pkKVImg::before{transform:translateX(-50%);display:block;z-index:10;position:absolute;top:0;left:50%;width:100%;height:100%;background:rgba(0,0,0,0.5);content:""}
.pkA .pkKVImg img{width:100%;height:100%;object-fit:cover}
.pkA .pkInner1000{margin-inline:auto;width:min(100%,1000px)}
.pkA .pkKVContent{display:flex;position:absolute;bottom:min(5.556vw,80px);left:50%;transform:translateX(-50%);flex-direction:column;justify-content:flex-end;width:calc(100% - 40px);max-width:1000px;text-align:left}
.pkA .pkKVTime{color:#fff;letter-spacing:.07em;font-size:16px;line-height:1.6;margin:0}
.pkA .pkKVTtl{margin:0;margin-top:min(2.431vw,35px);color:#fff;font-size:min(2.639vw,38px);font-weight:700;letter-spacing:.07em;line-height:1.5;text-align:left}
.pkA .pkKVTtl::before{display:block;width:0;height:0;margin-top:calc((1 - 1.5) * .5em);content:''}
.pkA .pkKVTtl::after{display:block;width:0;height:0;margin-bottom:calc((1 - 1.5) * .5em);content:''}
.pkA .pkPost{display:flex;align-items:center;gap:16px;margin-top:min(2.083vw,30px)}
.pkA .pkAvatar{width:25px;height:25px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#000;color:#fff;font-family:"Outfit","Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:700;overflow:hidden}
.pkA .pkName{color:#fff;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.pkA .pkTags{display:flex;flex-wrap:wrap;gap:4px;margin:20px 0 0;padding:0;list-style:none;text-align:left}
.pkA .pkTags li a{display:block;padding:0 10px;border-radius:12px;background-color:#f0f0f0;color:#000;font-size:12px;letter-spacing:.07em;line-height:24px;text-align:center;text-decoration:none}

/* ---- 本文コンテナ ---- */
.pkA .pkContentWrap{padding:120px 20px 300px}
.pkA .pkContent{margin-inline:auto;width:min(100%,850px);text-align:left}
.pkA .pkContent *{letter-spacing:.07em}
.pkA .pkContent p{font-size:18px;line-height:2;margin:0}
.pkA .pkContent p:not(:has(img))::before{display:block;width:0;height:0;margin-top:calc((1 - 2) * .5em);content:''}
.pkA .pkContent p:not(:has(img))::after{display:block;width:0;height:0;margin-bottom:calc((1 - 2) * .5em);content:''}
.pkA .pkContent *+p{margin-top:50px}
.pkA .pkContent h2{margin:120px 0 80px;padding:120px 0 0;border-top:1px solid #000;font-size:32px;font-weight:700;letter-spacing:.07em;line-height:1.5}
.pkA .pkContent h2::before{display:block;width:0;height:0;margin-top:calc((1 - 1.5) * .5em);content:''}
.pkA .pkContent h2::after{display:block;width:0;height:0;margin-bottom:calc((1 - 1.5) * .5em);content:''}
.pkA .pkContent h3{margin:80px 0 40px;font-size:26px;font-weight:700;letter-spacing:.07em;line-height:1.5}
.pkA .pkContent h3::before{display:block;width:0;height:0;margin-top:calc((1 - 1.5) * .5em);content:''}
.pkA .pkContent h3::after{display:block;width:0;height:0;margin-bottom:calc((1 - 1.5) * .5em);content:''}
.pkA .pkContent h4{margin:80px 0 40px;font-size:20px;font-weight:700;letter-spacing:.07em;line-height:1.5}
.pkA .pkContent a{color:#000;text-decoration:none;background:linear-gradient(#000,#000) no-repeat;background-position:right bottom;background-size:100% 1px;line-height:2;transition:background .5s}
@media (hover:hover){.pkA .pkContent a:hover{background-size:0 1px}}
.pkA .pkContent a[target="_blank"]{position:relative;margin-right:30px}
.pkA .pkContent a[target="_blank"]::after{display:inline-block;position:relative;left:calc(100% + 10px);transform:translateY(-50%);margin-left:-20px;width:16px;height:11px;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2LjA0IDEwLjU4Ij48ZGVmcz48c3R5bGU+IC5jbHMtMSB7IGZpbGw6IG5vbmU7IHN0cm9rZTogIzAwMDsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBzdHJva2Utd2lkdGg6IDEuMzRweDsgfSA8L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iNS42NyIgeT0iLjY3IiB3aWR0aD0iOS43IiBoZWlnaHQ9IjUuMzgiLz48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9IjEwLjM3IDcuOTggMTAuMzcgOS45MSAuNjcgOS45MSAuNjcgNC42MSAzLjI3IDQuNjEiLz48L2c+PC9zdmc+");background-position:center;background-repeat:no-repeat;background-size:contain;content:""}
.pkA .pkContent figure{margin:40px 0 0;text-align:center}
.pkA figure img{max-width:100%;height:auto;border:none;border-radius:0}
.pkA .pkContent figure figcaption{margin-top:20px;margin-bottom:0;line-height:1.5;font-size:16px;color:#000;text-align:center}
.pkA .pkContent ul{margin:50px 0 0;padding:0;list-style:none}
.pkA .pkContent ul li{line-height:2}
.pkA .pkContent ul li:not(:first-child){margin-top:20px}
.pkA .pkContent ul li::before{content:"・"}

/* ---- 目次 ---- */
.pkA .pkContent ol.pkToc{background-color:#f0f0f0;position:relative;padding:40px;counter-reset:num;margin:50px 0 0;list-style:none}
.pkA .pkContent ol.pkToc::before{content:"目次";font-size:20px;padding-bottom:30px;display:block;letter-spacing:.07em}
.pkA .pkContent ol.pkToc li{font-size:18px;letter-spacing:.07em;line-height:calc(30/18);position:relative}
.pkA .pkContent ol.pkToc li:not(:first-child){margin-top:30px}
.pkA .pkContent ol.pkToc li::before{position:absolute;counter-increment:num;content:counter(num);display:inline-block;color:#fff;background-color:#000;font-family:"acumin-pro","Helvetica Neue",Arial,sans-serif;font-size:16px;border-radius:50%;left:0;width:30px;height:30px;line-height:30px;letter-spacing:0;text-align:center;top:5px;z-index:0;padding-left:1px}
.pkA .pkContent ol.pkToc li a{transition:background .3s;padding-left:50px;background:none;position:relative;display:inline-block;line-height:inherit;color:#000;text-decoration:none}
.pkA .pkContent ol.pkToc li a span{transition:background .3s;background:linear-gradient(#000,#000) no-repeat;background-position:right bottom;background-size:100% 1px}
@media (hover:hover){.pkA .pkContent ol.pkToc li a:hover span{background-size:0 1px}}

/* ---- box・btn ---- */
.pkA .pkBox{background-color:#f0f0f0;padding:40px;margin-top:80px;text-align:left}
.pkA .pkBox p{font-size:16px;line-height:1.9}
.pkA .pkBox p+p{margin-top:24px}
.pkA .pkBox .pkBoxT{font-size:20px;font-weight:700;margin:0 0 20px;line-height:1.5}
.pkA .pkBtnWrap{background-color:#f0f0f0;padding:40px;margin-top:80px;text-align:center}
.pkA .pkBtnWrap .pkBtnNote{font-size:13px;line-height:1.7;margin:0 0 20px;text-align:left}
.pkA .pkBtn{display:block;margin-inline:auto;width:400px;max-width:100%;text-align:center;background-color:#000;overflow:hidden;color:#fff;border-radius:30px;position:relative;transition:background .3s cubic-bezier(0.47,0,0.745,0.715),color .3s cubic-bezier(0.47,0,0.745,0.715)}
.pkA .pkBtn a{background:none;display:block;text-align:center;padding:12px 0;color:#fff;font-weight:700}
@media (hover:hover){.pkA .pkBtn:hover{color:#000;background-color:#fff}.pkA .pkBtn:hover a{color:#000}}

/* ---- 表 ---- */
.pkA .pkContent table.pkTbl{width:100%;border-collapse:collapse;margin:40px 0 0;font-size:14px;line-height:1.7}
.pkA .pkContent table.pkTbl th,.pkA .pkContent table.pkTbl td{border:1px solid #d1d1d1;padding:10px 12px;text-align:left;vertical-align:top}
.pkA .pkContent table.pkTbl thead th{background-color:#f0f0f0;font-weight:700;white-space:nowrap}
.pkA .pkTblNote{font-size:16px;line-height:1.5;margin-top:20px;color:#000}
.pkA .pkTblWrap{overflow-x:auto}
.pkA .pkTblWrap table.pkTbl{min-width:640px}

/* ---- サービスロゴ ---- */
.pkA .pkSvc{margin:40px 0 0;text-align:left}
.pkA .pkSvc img{height:88px;width:auto;max-width:70%;object-fit:contain}

/* ---- 商品カード ---- */
.pkA .pkContent .pkItem{overflow:hidden;background-color:#f0f0f0;color:#000;line-height:1;margin-top:30px}
.pkA .pkContent .pkItem:first-of-type{margin-top:40px}
.pkA .pkItemBody[class]{display:flex;margin:0;background:none;color:#000;padding:0}
.pkA .pkItemThumb{aspect-ratio:1;width:120px;overflow:hidden;border:1px solid #f0f0f0;flex:none}
.pkA .pkItemThumb img{width:100%;height:100%;object-fit:cover;border:none}
.pkA .pkItemContent{display:flex;flex:1;flex-direction:column;justify-content:center;padding:0 20px;overflow:hidden;text-align:left}
.pkA .pkItemTitle{overflow:hidden;font-size:16px;font-weight:700;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.pkA .pkItemExcerpt{margin-top:7.5px;overflow:hidden;font-size:12px;font-weight:300;line-height:1.6;white-space:normal}
.pkA .pkItemLink{margin-top:5px;overflow:hidden;font-size:10px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.pkA .pkItem:has(:hover){border-radius:20px}.pkA .pkItemBody[class]:hover .pkItemThumb img{transform:scale(1.1)}}
.pkA .pkSmall{font-size:16px;line-height:1.5;margin-top:20px}
.pkA .pkPRline{font-size:12px;color:#767676;line-height:1.7;margin:24px 0 0}

/* ---- 記事下セクション（関連記事・関連ツール・最新ツール） ---- */
.pkA.pkRelArea{padding:0 20px 140px;text-align:left}
.pkA.pkRelArea .pkRel{margin:0 auto;width:min(100%,850px)}
.pkA.pkRelArea .pkRel+.pkRel{margin-top:100px}
.pkA .pkRelT{margin:0;padding:24px 0 0;border-top:1px solid #000;font-size:24px;font-weight:700;letter-spacing:.07em;line-height:1.5}
.pkA .pkRelT::before,.pkA .pkRelT::after{content:none;display:none}
.pkA .pkRelGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px;margin-top:30px}
.pkA .pkRelCard{display:block;color:#000;background:none;text-decoration:none}
.pkA .pkRelThumb{display:block;aspect-ratio:16/9;overflow:hidden;background-color:#f0f0f0}
.pkA .pkRelThumb img{width:100%;height:100%;object-fit:cover;border:none;border-radius:0;transition:transform .4s}
.pkA .pkRelDate{display:block;margin-top:10px;font-size:11px;color:#767676;letter-spacing:.07em;line-height:1.5}
.pkA .pkRelTitle{display:block;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.07em;line-height:1.7}
@media (hover:hover){
  .pkA .pkRelCard:hover .pkRelThumb img{transform:scale(1.08)}
  .pkA .pkRelCard:hover .pkRelTitle{text-decoration:underline}
}

/* ---- SP ---- */
@media screen and (max-width:767px){
  .pkA .pkKV{aspect-ratio:1/1;max-height:101.33333vw;padding:0 0 40px}
  .pkA .pkKVContent{bottom:35px}
  .pkA .pkKVTime{font-size:10px}
  .pkA .pkKVTtl{margin-top:4vw;font-size:5.33333vw}
  .pkA .pkPost{gap:8px;margin-top:30px}
  .pkA .pkAvatar{width:30px;height:30px}
  .pkA .pkName{display:none}
  .pkA .pkTags li a{font-size:10px;line-height:20px}
  .pkA .pkContentWrap{padding:60px 0 200px}
  .pkA .pkContent{width:100%;padding:0 20px}
  .pkA .pkContent p{font-size:16px}
  .pkA .pkContent *+p{margin-top:45px}
  .pkA .pkContent h2{margin:80px 0 60px;padding:80px 0 0;font-size:28px}
  .pkA .pkContent h3{margin:60px 0 40px;font-size:23px}
  .pkA .pkContent h4{font-size:18px}
  .pkA .pkContent ol.pkToc{padding:30px 20px}
  .pkA .pkContent ol.pkToc::before{font-size:17px}
  .pkA .pkContent ol.pkToc li{font-size:16px}
  .pkA .pkBox{padding:30px 20px}
  .pkA .pkBtnWrap{padding:30px 20px}
  .pkA .pkBtn{padding:20px 27px;border-radius:39.75px;line-height:1.2}
  .pkA .pkContent figure{margin-top:30px}
  .pkA .pkItemThumb{width:110px}
  .pkA .pkItemContent{padding:10px 15px}
  .pkA .pkItemTitle{font-size:14px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pkA .pkItemExcerpt{font-size:10px;margin-top:5px}
  .pkA .pkTblWrap{overflow:visible}
  .pkA .pkTblWrap table.pkTbl{display:block;min-width:0;border:none}
  .pkA .pkContent table.pkTbl thead{display:none}
  .pkA .pkContent table.pkTbl tbody{display:block}
  .pkA .pkContent table.pkTbl tr{display:block;border:1px solid #d1d1d1;border-radius:10px;background:#fff;padding:12px 14px 10px;margin:0 0 10px}
  .pkA .pkContent table.pkTbl td{display:block;border:none;padding:0;font-size:14px;line-height:1.7}
  .pkA .pkContent table.pkTbl td.c-no{display:inline;font-weight:700;margin-right:.45em}
  .pkA .pkContent table.pkTbl td.c-name{display:inline;font-weight:700}
  .pkA .pkContent table.pkTbl td.c-head{display:inline;font-weight:700}
  .pkA .pkContent table.pkTbl td.pkLbl{margin-top:4px}
  .pkA .pkContent table.pkTbl td.pkLbl::before{content:attr(data-label) "：";display:inline-block;font-size:11px;color:#767676;margin-right:.4em}
  /* 記事下セクション（SP） */
  .pkA.pkRelArea{padding:0 0 100px}
  .pkA.pkRelArea .pkRel{width:100%;padding:0 20px}
  .pkA.pkRelArea .pkRel+.pkRel{margin-top:70px}
  .pkA .pkRelT{padding-top:20px;font-size:20px}
  .pkA .pkRelGrid{grid-template-columns:repeat(2,1fr);gap:20px 10px;margin-top:20px}
  .pkA .pkRelTitle{font-size:13px}
}

/* =====================================================================
   テーマページ内描画のオーバーライド（2026-09-26・header/footer付き構成）
   single-column.php の pickup分岐は get_header()/get_footer() 付きで出力する。
   テーマ側の .singleArea（白カード・青リンク等）が .pkA に
   漏れ込むため、ここで打ち消す。012スタイル末尾の定番ブロックと同源。
   ===================================================================== */
.pickupArea{max-width:none;width:96%;margin:0 auto;padding:0;border-radius:0;background:#fff}
.pickupColumn .pickupArea{margin-left:auto;margin-right:auto}
.singleArea .pkA p,.singleArea .pkA ul,.singleArea .pkA ol,.singleArea .pkA img,.singleArea .pkA a{margin-bottom:0}
.singleArea .pkA ul li{margin:0;padding:0;position:static}
.singleArea .pkA ul li::before{content:none;position:static;transform:none;left:auto;top:auto;width:auto;height:auto;border-radius:0;background:none}
.singleArea .pkA .pkContent ul li::before{content:"・"}
.singleArea .pkA .pkContent ul li:not(:first-child){margin-top:20px}
.singleArea .pkA .pkContent a{text-decoration:none}
.singleArea .pkA .pkItemBody[class]{text-decoration:none}
.singleArea .pkA .pkRelCard{text-decoration:none}