@charset "UTF-8";

.ptc{
  --blue:#00a6de;
  --green:#74cf3b;
  --ink:#222;
  --paper:#fff;
  max-width:1200px;
  margin:0 auto;
  padding:58px;
  background:#d8d1c3;
  background-image:linear-gradient(#747474 1px,transparent 1px),linear-gradient(90deg,#747474 1px,transparent 1px);
  background-size:35px 35px;
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ptc *{box-sizing:border-box}

/* 初期表示対策：WordPress上でも hidden 属性の要素は必ず非表示にする */
.ptc [hidden]{display:none!important}
.ptc button,
.ptc__link,
.ptc__bnr,
.ptc__product{
  appearance:none;
  border:0;
  text-decoration:none;
  transition:.2s ease;
  cursor:pointer;
}
.ptc__paper{
  min-height:760px;
  margin:0 auto;
  padding:58px 76px 0;
  border-radius:16px;
  background:var(--paper);
  text-align:center;
  overflow:hidden;
}
.ptc__header{margin:0 auto 64px}
.ptc__logo{
  display:block;
  width:min(100%,600px);
  height:auto;
  margin:0 auto;
}
.ptc__intro,
.ptc__question,
.ptc__result{text-align:center}

.ptc__lead{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:0 auto 90px;
  text-align:left;
  font-size:26px;
  font-weight:800;
  line-height:1.75;
  letter-spacing:.03em;
}
.ptc__start,
.ptc__restart,
.ptc__back,
.ptc__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:850;
  line-height:1.25;
}
.ptc__start{
  min-width:290px;
  padding:15px 34px;
  background:var(--green);
  color:#fff;
  font-size:20px;
  box-shadow:none;
}
.ptc__q{
  max-width:590px;
  margin:0 auto 70px;
  text-align:left;
  white-space:normal;
  font-size:26px;
  font-weight:850;
  line-height:1.75;
  letter-spacing:.03em;
}
.ptc__q br{display:block}
.ptc__answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  max-width:600px;
  margin:0 auto 36px;
}
.ptc__answer{
  min-height:48px;
  padding:11px 22px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:18px;
  font-weight:850;
  line-height:1.35;
  box-shadow:none;
}
.ptc__answer:first-child{background:var(--green)}
.ptc__back,
.ptc__restart,
.ptc__action-btn.is-restart{
  border:1px solid #b7b7b7;
  background:#fff;
  color:#777;
  box-shadow:none;
}
.ptc__back{
  min-width:260px;
  min-height:38px;
  padding:10px 24px;
  font-size:16px;
  text-decoration:none;
}
.ptc__restart{
  min-width:260px;
  margin:6px auto 20px;
  padding:12px 24px;
  font-size:15px;
}
.ptc__start:hover,
.ptc__link:hover,
.ptc__answer:hover,
.ptc__restart:hover,
.ptc__back:hover,
.ptc__product:hover,
.ptc__bnr:hover,
.ptc__action-btn:hover{
  transform:translateY(-2px);
  filter:brightness(.98);
  box-shadow:none;
}
.ptc__result-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:-12px 0 34px;
  color:#888;
  font-size:20px;
  font-weight:800;
  letter-spacing:.08em;
}
.ptc__result-label span{
  display:block;
  width:70px;
  height:1px;
  background:#aaa;
}
.ptc__result-label em{font-style:normal}
.ptc__result-copy{
  margin:0 0 36px;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.04em;
}

.ptc__result-copy-sp-br{display:none}
.ptc__all-results{
  display:grid;
  gap:54px;
  margin:0 auto 34px;
}
.ptc__result-block{scroll-margin-top:0}
.ptc__current-product{
  max-width:820px;
  margin:0 auto 40px;
}
.ptc__current-product .ptc__product-name{display:none!important}
.ptc__result-title{display:none!important}
.ptc__badges{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-end;
  gap:14px 18px;
  max-width:1040px;
  margin:0 auto 34px;
  padding:0;
  list-style:none;
}
.ptc__badges li{
  width:116px;
  line-height:0;
}
.ptc__badges img{
  display:block;
  width:100%;
  height:auto;
}
.ptc__badges li:nth-child(3),
.ptc__badges li:nth-child(5){
  margin-left:34px;
}
.ptc__badge-text{
  display:flex;
  align-items:center;
  justify-content:center;
  width:116px;
  height:116px;
  padding:12px 10px;
  color:#fff;
  background:#b8c5d5;
  font-size:12px;
  font-weight:900;
  line-height:1.22;
  text-align:center;
  letter-spacing:.02em;
  clip-path:polygon(50% 0%,61% 17%,80% 11%,83% 31%,100% 39%,86% 53%,94% 72%,73% 74%,65% 94%,50% 82%,35% 94%,27% 74%,6% 72%,14% 53%,0% 39%,17% 31%,20% 11%,39% 17%);
}
.ptc__badge-text.is-disabled{
  background:#b8c5d5;
}
.ptc__badge-text.is-pro{
  background:#9fb1c6;
}
.ptc__badge-text.is-debut{
  background:#c21491;
}
.ptc__features{
  display:grid;
  gap:10px;
  max-width:540px;
  margin:0 auto 20px;
  padding:0;
  list-style:none;
  text-align:left;
}
.ptc__features li{
  position:relative;
  padding-left:36px;
  font-size:15px;
  font-weight:800;
  line-height:1.55;
}
.ptc__features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  width:18px;
  height:18px;
  border:1px solid #000;
  background:#fff;
}
.ptc__features li::after{
  content:"";
  position:absolute;
  left:4px;
  top:.42em;
  width:10px;
  height:6px;
  border-left:3px solid #5f9b37;
  border-bottom:3px solid #5f9b37;
  transform:rotate(-45deg);
}
.ptc__links,
.ptc__result > .ptc__restart{display:none}
.ptc__link{
  min-height:34px;
  padding:9px 18px;
  background:var(--blue);
  color:#fff;
  font-size:15px;
}
.ptc__link.is-sub{background:var(--green)}
.ptc__result-actions{
  display:grid;
  grid-template-columns:minmax(220px,340px);
  justify-content:center;
  gap:10px;
  margin:44px auto 48px;
}
.ptc__action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:10px 24px;
  border-radius:999px;
  font-size:16px;
  font-weight:850;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease;
}
.ptc__action-btn.is-store{background:var(--blue);color:#fff}
.ptc__action-btn.is-other{background:var(--green);color:#fff}
.ptc__articles{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:14px;
  max-width:490px;
  margin:0 auto 42px;
}
.ptc__article{
  display:block;
  overflow:hidden;
  width:150px;
  border:1px solid #ddd;
  line-height:0;
  text-decoration:none;
  transition:.2s ease;
}
.ptc__article:hover{
  transform:translateY(-2px);
  filter:brightness(.98);
}
.ptc__article img{
  display:block;
  width:100%;
  height:auto;
}
.ptc__bnrs{
  display:grid;
  grid-template-columns:repeat(3,180px);
  justify-content:center;
  gap:12px;
  max-width:none;
  margin:0 auto 60px;
}
.ptc__bnr{
  display:block;
  overflow:hidden;
  width:180px;
  background:var(--blue);
  line-height:0;
}
.ptc__bnr img{
  display:block;
  width:100%;
  height:auto;
}
.ptc__anchor-nav{
  width:calc(100% + 152px);
  margin:40px -76px 0;
  padding:30px 76px;
  background:#f1f1f1;
}
.ptc__anchor-title{
  margin:0 0 18px;
  color:#777;
  font-weight:850;
}
.ptc__anchor-nav .ptc__product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px 38px;
  max-width:860px;
  margin:0 auto;
}
.ptc__product{
  display:block;
  color:#222;
}
.ptc__product.is-current{
  cursor:default;
}
.ptc__product.is-current:hover{
  transform:none;
  filter:none;
}
.ptc__product-image{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:2.25/1;
  margin:0 auto 8px;
  line-height:0;
}
.ptc__product-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.ptc__product-image span{
  display:block;
  padding:6px;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}
.ptc__product.is-current .ptc__product-image{
  width:700px;
  max-width:700px;
  height:auto;
  aspect-ratio:auto;
  margin-right:auto;
  margin-left:auto;
}
.ptc__product.is-current .ptc__product-image img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.ptc__product.is-current .ptc__product-name,
.ptc__anchor-nav .ptc__product-name{display:none}
.ptc__anchor-nav .ptc__product-image{
  overflow:visible;
  aspect-ratio:2.05/1;
  margin-bottom:0;
}
.ptc__anchor-nav .ptc__product-image img{
  width:122%;
  max-width:122%;
  height:auto;
  transform:scale(1.1);
  transform-origin:center center;
}
.ptc__product-name{
  font-size:12px;
  font-weight:800;
  line-height:1.3;
}
.ptc__other{
  max-width:640px;
  margin:24px auto 0;
  padding:30px 38px;
  border:3px dashed #e64d65;
  border-radius:18px;
  background:#f7f7f7;
}
.ptc__other-title{
  margin:0 0 22px;
  color:#777;
  font-weight:850;
}
.ptc__other .ptc__product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px 30px;
}

/* 質問ページの戻るボタン：診断結果ページの「診断の最初に戻る」と同系統 */
.ptc__question .ptc__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:260px;
  min-height:38px;
  padding:10px 24px;
  border:1px solid #b7b7b7;
  border-radius:999px;
  background:#fff;
  color:#777;
  font-size:16px;
  font-weight:850;
  line-height:1.25;
  text-decoration:none;
  box-shadow:none;
}

/* 診断結果ブロック間の区切り線 */
.ptc__result-block + .ptc__result-block{
  padding-top:54px;
  border-top:1px solid #d7d7d7;
}


@media (max-width:767px){
  .ptc{
    padding:16px;
    background-size:26px 26px;
  }
  .ptc__paper{
    min-height:auto;
    padding:32px 20px;
    border-radius:12px;
  }
  .ptc__header{margin-bottom:42px}
  .ptc__lead{
    width:auto;
    max-width:100%;
    margin-bottom:90px;
    text-align:left;
    font-size:21px;
  }
  .ptc__lead br{display:none}
  .ptc__start{
    min-width:240px;
    font-size:17px;
  }
  .ptc__q{
    margin-bottom:34px;
    font-size:21px;
    white-space:normal;
  }
  .ptc__q br{display:none}
  .ptc__answers{
    grid-template-columns:1fr;
    gap:14px;
  }
  .ptc__back{
    min-width:240px;
    min-height:36px;
    font-size:14px;
  }

  .ptc__question .ptc__back{
    min-width:220px;
    min-height:36px;
    padding:10px 22px;
    font-size:14px;
  }
  .ptc__result-label{
    font-size:18px;
  }
  .ptc__result-copy{
    margin-bottom:36px;
    font-size:20px;
  }
  .ptc__result-copy-sp-br{display:block}
  .ptc__current-product{
    margin-bottom:24px;
  }
  .ptc__badges{
    display:grid;
    grid-template-columns:repeat(2,88px);
    justify-content:center;
    justify-items:center;
    gap:0 22px;
    margin-bottom:28px;
  }
  .ptc__badges li{
    width:88px;
  }
  .ptc__badges li:nth-child(3),
  .ptc__badges li:nth-child(5){
    margin-left:0;
  }
  .ptc__badge-text{
    width:88px;
    height:88px;
    padding:9px 8px;
    font-size:11px;
    line-height:1.15;
  }
  .ptc__articles{
    gap:8px;
    max-width:100%;
    margin-bottom:34px;
  }
  .ptc__article{
    width:calc((100% - 16px) / 3);
    max-width:150px;
  }
  .ptc__result-actions{
    grid-template-columns:minmax(220px,290px);
    gap:9px;
    margin:40px auto 44px;
  }
  .ptc__action-btn{
    min-height:36px;
    font-size:14px;
  }
.ptc__bnrs{
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    max-width:100%;
    margin-bottom:44px;
  }
  .ptc__bnr{width:100%}
  .ptc__anchor-nav{
    width:calc(100% + 40px);
    margin-top:32px;
    margin-right:-20px;
    margin-bottom:0;
    margin-left:-20px;
    padding:28px 20px;
  }
  .ptc__anchor-nav .ptc__product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 16px;
    max-width:100%;
  }
  .ptc__anchor-nav .ptc__product-image img{
    width:112%;
    max-width:112%;
    transform:scale(1.04);
  }
  .ptc__product.is-current .ptc__product-image{
    width:100%;
    max-width:100%;
  }
  .ptc__other{padding:24px 16px}
  .ptc__other .ptc__product-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px 16px;
  }
}


/* 現在の診断結果直下だけ区切り線を非表示 */
.ptc__result-block:first-child + .ptc__result-block{
  border-top:none;
}