/* ウェブ制作ページ（page-web-design.php）の料金プラン
   inc/enqueue.php から、このページでのみ読み込む */
.wdplans-badge {
  display: inline-block;
  padding: 0.3em 1.2em;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background-color: #D11179;
  border-radius: 2em;
}

.wdplans-price {
  font-family: "Oswald", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2;
}
.wdplans-price span {
  margin-left: 0.1em;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.wdplans-tax {
  display: block;
  font-size: 0.85rem;
}

/* 料金プラン */
section.webdesign-plans {
  padding: 6rem 0;
}
section.webdesign-plans div.webdesign-plans-inner {
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
section.webdesign-plans div.webdesign-plans-inner div.webdesign-plans-cont {
  margin: 3em 0;
}
section.webdesign-plans div.webdesign-plans-inner div.webdesign-plans-cont p.wdplans-lead {
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.8em;
  text-align: center;
}

/* 更新プランのセクション削除で背景色の交互が崩れたため、料金プラン以降を入れ替える */
section.webdesign-plans ~ section.fees-feeoption {
  background-color: #EEECE7;
}

section.webdesign-plans ~ section.fees-payment {
  background-color: transparent;
}

/* PC：比較表 */
div.wdplans-table-wrap {
  margin-top: 4rem;
}
div.wdplans-table-wrap table.wdplans-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
div.wdplans-table-wrap table.wdplans-table th, div.wdplans-table-wrap table.wdplans-table td {
  border: 0;
}
div.wdplans-table-wrap table.wdplans-table thead td {
  width: 22%;
  background-color: transparent;
}
div.wdplans-table-wrap table.wdplans-table thead th {
  position: relative;
  width: 26%;
  padding: 1.2rem 1rem;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  vertical-align: bottom;
  color: #fff;
  border-radius: 10px 10px 0 0;
}
div.wdplans-table-wrap table.wdplans-table thead th.is-standard {
  background-color: #8C8C8C;
}
div.wdplans-table-wrap table.wdplans-table thead th.is-premium {
  background-color: #3F3F48;
}
div.wdplans-table-wrap table.wdplans-table thead th.is-pro {
  padding: 2rem 1rem 1.4rem;
  font-size: 1.7rem;
  background-image: linear-gradient(to right, #2963D0, #9C00B2);
}
div.wdplans-table-wrap table.wdplans-table thead th.is-pro .wdplans-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
}
div.wdplans-table-wrap table.wdplans-table tbody th, div.wdplans-table-wrap table.wdplans-table tbody td {
  padding: 1.1rem 1.2rem;
  font-size: 1rem;
  line-height: 1.6;
  vertical-align: middle;
  border-bottom: 1px solid #CCCCCC;
}
div.wdplans-table-wrap table.wdplans-table tbody th {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 700;
  text-align: left;
  background-color: #F9F9F9;
}
div.wdplans-table-wrap table.wdplans-table tbody tr:first-child th {
  border-radius: 10px 0 0 0;
}
div.wdplans-table-wrap table.wdplans-table tbody td {
  background-color: #fff;
}
div.wdplans-table-wrap table.wdplans-table tbody td.is-pro {
  background-color: #EAF0FB;
  border-left: 3px solid #2963D0;
  border-right: 3px solid #2963D0;
}
div.wdplans-table-wrap table.wdplans-table tbody td ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
div.wdplans-table-wrap table.wdplans-table tbody td ul li {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}
div.wdplans-table-wrap table.wdplans-table tbody td ul li::before {
  content: "・";
}
div.wdplans-table-wrap table.wdplans-table tbody tr:last-child td.is-pro {
  border-bottom: 3px solid #2963D0;
}
div.wdplans-table-wrap table.wdplans-table tbody tr.is-prepare th, div.wdplans-table-wrap table.wdplans-table tbody tr.is-prepare td {
  font-weight: 700;
}
div.wdplans-table-wrap table.wdplans-table tbody tr.is-prepare td {
  text-align: center;
}
div.wdplans-table-wrap table.wdplans-table tbody tr.is-prepare td.is-standard {
  color: #D11179;
}
.wdplans-prepare-note {
  display: block;
  margin-top: 0.4em;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  color: #404040;
}
div.wdplans-table-wrap table.wdplans-table tbody tr.is-price td {
  text-align: center;
}
div.wdplans-table-wrap table.wdplans-table tbody tr.is-price td.is-pro .wdplans-price {
  color: #2963D0;
}

/* スマートフォン：プランごとのカード */
div.wdplans-cards {
  display: none;
}
div.wdplans-cards div.wdplans-card {
  margin: 2.5rem 0 0;
  background-color: #fff;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  overflow: hidden;
}
div.wdplans-cards div.wdplans-card h4.wdplans-card-title {
  margin: 0;
  padding: 1rem;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
}
div.wdplans-cards div.wdplans-card h4.wdplans-card-title .wdplans-badge {
  margin-right: 0.6em;
  vertical-align: middle;
}
div.wdplans-cards div.wdplans-card.is-standard h4.wdplans-card-title {
  background-color: #8C8C8C;
}
div.wdplans-cards div.wdplans-card.is-premium h4.wdplans-card-title {
  background-color: #3F3F48;
}
div.wdplans-cards div.wdplans-card.is-pro {
  border: 3px solid #2963D0;
  box-shadow: 0 6px 20px rgba(41, 99, 208, 0.25);
}
div.wdplans-cards div.wdplans-card.is-pro h4.wdplans-card-title {
  padding: 1.3rem 1rem;
  font-size: 1.6rem;
  background-image: linear-gradient(to right, #2963D0, #9C00B2);
}
div.wdplans-cards div.wdplans-card.is-pro dl {
  background-color: #EAF0FB;
}
div.wdplans-cards div.wdplans-card.is-pro .wdplans-price {
  color: #2963D0;
}
div.wdplans-cards div.wdplans-card dl {
  margin: 0;
}
div.wdplans-cards div.wdplans-card dl div {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid #CCCCCC;
}
div.wdplans-cards div.wdplans-card dl div:last-child {
  border-bottom: 0;
}
div.wdplans-cards div.wdplans-card dl dt {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #666;
}
div.wdplans-cards div.wdplans-card dl dd {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}
div.wdplans-cards div.wdplans-card dl dd ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
div.wdplans-cards div.wdplans-card dl dd ul li {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}
div.wdplans-cards div.wdplans-card dl dd ul li::before {
  content: "・";
}
div.wdplans-cards div.wdplans-card dl div.is-prepare dd {
  font-weight: 700;
}
div.wdplans-cards div.wdplans-card.is-standard dl div.is-prepare dd {
  color: #D11179;
}

/* 表の下：プロへの誘導・共通項目・注記 */
p.wdplans-pro-note {
  max-width: 900px;
  margin: 3rem auto 0;
  padding: 1.5rem 2rem;
  font-size: 1.2rem;
  line-height: 1.8em;
  text-align: center;
  background-color: #EAF0FB;
  border: 2px solid #2963D0;
  border-radius: 10px;
}
p.wdplans-pro-note strong {
  color: #2963D0;
}

div.wdplans-common {
  max-width: 1000px;
  margin: 3rem auto 0;
  padding: 2.5rem 3rem;
  background-color: #fff;
  border-radius: 10px;
}
div.wdplans-common h4 {
  margin: 0 0 1.5rem;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
}
div.wdplans-common ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
div.wdplans-common ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
div.wdplans-common ul li span {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: #2963D0;
}

ul.wdplans-notes {
  max-width: 1000px;
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
}
ul.wdplans-notes li {
  margin: 0;
  padding-left: 1em;
  font-size: 0.95rem;
  line-height: 1.8;
  text-indent: -1em;
}
ul.wdplans-notes li::before {
  content: "※";
}

@media only screen and (max-width: 768px) {
  section.webdesign-plans {
    padding: 3rem 0;
  }
  section.webdesign-plans div.webdesign-plans-inner div.webdesign-plans-cont {
    margin: 2em 0;
  }
  section.webdesign-plans div.webdesign-plans-inner div.webdesign-plans-cont p.wdplans-lead {
    font-size: 1rem;
    text-align: left;
  }
  div.wdplans-table-wrap {
    display: none;
  }
  div.wdplans-cards {
    display: block;
  }
  p.wdplans-pro-note {
    margin: 2.5rem 0 0;
    padding: 1.2rem;
    font-size: 1rem;
    text-align: left;
  }
  div.wdplans-common {
    margin: 2.5rem 0 0;
    padding: 1.5rem 1.2rem;
  }
  div.wdplans-common h4 {
    font-size: 1.1rem;
  }
  div.wdplans-common ul {
    grid-template-columns: 1fr;
  }
  ul.wdplans-notes li {
    font-size: 0.9rem;
  }
}