body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, td, th {
  font-family: "Noto Sans JP Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "Helvetica Neue", "Helvetica", sans-serif !important;
}
/* @media only screen and (min-width: 980px) {
  .bp-slide-zoom-out .et_pb_slide {
    background-size: 150%;
    animation: zoomOut 20s ease-in-out infinite;
  }
}
@keyframes zoomOut {
  0% {
    background-size: 150%;
  }
  100% {
    background-size: 100%;
  }
} */

/* 投稿のメタ情報 */
.et_pb_title_meta_container {
    padding-bottom: 1em !important;
}
/* Default Editor */
#wb-content h2:not(:first-of-type).wp-block-heading {
  margin-top: 2rem;
}
#wb-content h2.wp-block-heading {
  margin-bottom: 1rem;
  padding: 1rem;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#ff9900), to(#ffcc00));
  background-image: -webkit-linear-gradient(left, #ff9900 0%, #ffcc00 100%);
  background-image: linear-gradient(to right, #ff9900 0%, #ffcc00 100%);
}
#wb-content h3 {
  margin: 1rem 0;
  padding: 0;
}

/* Default Editor Simple Content */
#wb-content-simple h2,
#wb-content-simple h3 {
  padding-bottom: 1rem;
}
#wb-content-simple ul,
#wb-content-simple ol {
    list-style-position: outside;
    margin-left: 1em;
    padding-left: 1em;
}

/*　Table of Content */
.wp-block-rank-math-toc-block,
.wp-block-uagb-table-of-contents .uagb-toc__wrap {
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 1em 1em 1em 2em;
  border: 1px solid #999;
  border-radius: 0;
  background-color: #f7f7f7;
  color: #333333;
}

.wp-block-rank-math-toc-block h2,
.wp-block-uagb-table-of-contents .uagb-toc__wrap .uagb-toc__title  {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 5px 0;
  font-size: 1.2rem;
}

.wp-block-rank-math-toc-block h2::before,
.wp-block-uagb-table-of-contents .uagb-toc__wrap .uagb-toc__title::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23333'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}

.wp-block-rank-math-toc-block ul,
.wp-block-uagb-table-of-contents .uagb-toc__wrap ul {
  list-style-type: disc;
  margin: 0;
  padding: 0 1.2em;
  overflow: hidden;
}

.wp-block-rank-math-toc-block ul ul,
.wp-block-uagb-table-of-contents .uagb-toc__wrap ul ul {
  margin-top: 5px;
}

.wp-block-rank-math-toc-block li,
.wp-block-uagb-table-of-contents .uagb-toc__wrap li {
  padding: 5px 0;
}

.wp-block-rank-math-toc-block a,
.wp-block-uagb-table-of-contents .uagb-toc__wrap a {
  color: #166c9d !important;
  text-decoration: none !important;
}

/* text module */
.et_pb_text_inner code {
    display: inline-block;
    margin: 0;
    padding: 0 3px;
    border-radius: 3px;
    font-family: monospace;
    background-color: lightgoldenrodyellow;
}
/* ------------------------------
 * Simple box
 * ------------------------------*/
/* タイトル（枠外）
 <div class="wb-box-011">
     <span>タイトル</span>
     <p>枠外にタイトルを付けたボックス。タイトルが枠外にあるかつ単色なので、スッキリしたデザインになっています。</p>
 </div>
 */
.wb-box-011 {
    position: relative;
    margin: 1.9em auto 0;
    padding: 1em 1.5em;
    border: 1px solid #ff9900;
    border-radius: 3px;
}

.wb-box-011 span.wb-box-inner-item {
    position: absolute;
    top: -1.9em;
    left: -2px;
    padding: .2em .8em;
    border-radius: 5px 5px 0 0;
    background-color: #ff9900;
    color: #fff;
}

.wb-box-011 p {
    margin: 0;
    color: #333;
}
/* タイトル（上部中心）
<div class="wb-box-013">
    <span class="wb-box-inner-item">タイトル</span>
    <p>枠内の上中心にタイトルを付けたボックス。タイトルをより目立たせたい場合や文字数が長くなる場合におすすめです。</p>
</div> */
.wb-box-013 {
    margin: 0 auto;
    border: 2px solid #ff9900;
    border-radius: 3px;
}
.wb-box-013 span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 0;
    background-color: #ff9900;
    color: #fff;
    font-weight: 600;
}
.wb-box-013 p {
    margin: 0;
    padding: 1em 1.5em;
    color: #333;
}
/* Simple box 番号あり
<div class="box-021" data-number="1">
    左上に番号を添えたボックス。ステップに沿って何かを説明・補足したい時におすすめのデザインです。
</div>
 */
.wb-box-021 {
    position: relative;
    margin: 1em auto;
    padding: 1em 1.5em;
    border: 1px solid #ff9900;
    border-radius: 3px;
    color: #333;
}
.wb-box-021::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1em;
    left: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #ff9900;
    color: #fff;
    font-weight: 600;
    content: attr(data-number);
}

/* ------------------------------
 * Blog box
 * ------------------------------*/
/* メモアイコン（小）
<div class="wb-box-006">
    <p>メモアイコン付きの小さいボックスです。</p>
</div> */
.wb-box-006 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #fff9e5;
    color: #333333;
}
.wb-box-006::before {
    width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ff9900'%3E%3C/path%3E%3C/svg%3E");
}
.wb-box-006 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #ff9900;
}
/* メモアイコン（小）
<div class="wb-box-006 wb-blue-lightgray">
    <p>メモアイコン付きの小さいボックスです。</p>
</div> */
.wb-box-006.wb-blue-lightgray {
    background-color: #f5f5f5;
}
.wb-box-006.wb-blue-lightgray::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23393eaa'%3E%3C/path%3E%3C/svg%3E");
}
.wb-box-006.wb-blue-lightgray p {
    border-left: 1px solid #393eaa;
}
/* チェックアイコン（大）
<div class="box-009">
    <div>
        タイトル
    </div>
    <p>メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。</p>
</div> */
.wb-box-009 {
    margin: 0 auto;
    border: 1px solid #ff9900;
    border-radius: 5px;
    color: #333333;
}
.wb-box-009 div.wb-box-inner-item {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #ff9900;
    font-weight: 600;
    vertical-align: top;
}
.wb-box-009 div.wb-box-inner-item::before {
    width: 15px;
    height: 7.5px;
    border-bottom: 3px solid #ff9900;
    border-left: 3px solid #ff9900;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}
.wb-box-009 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

/* ------------------------------
 * Table
 * ------------------------------*/
/* シンプル
<table class="wb-table-simple">
  <thead>
    <tr>
      <th>支社名</th>
      <th>所在地</th>
      <th>社員数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A支社</th>
      <td data-label="所在地">東京都</td>
      <td data-label="社員数">150人</td>
    </tr>
    <tr>
      <th>B支社</th>
      <td data-label="所在地">大阪府</td>
      <td data-label="社員数">30人</td>
    </tr>
    <tr>
      <th>C支社</th>
      <td data-label="所在地">沖縄県</td>
      <td data-label="社員数">50人</td>
    </tr>
  </tbody>
</table> */
.wb-table-simple {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    text-align: center;
}
.wb-table-simple th, .wb-table-simple td {
    border: 1px solid rgb(85 79 57 / 50%);
    padding: 1em;
}
.wb-table-simple thead th {
    background-color: #554F39;
    color: #fff;
    border: 1px solid #554F39;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.wb-table-simple thead th:last-of-type {
    border-right: 1px solid #554F39;
}
.wb-table-simple tbody th {
    color: #554F39;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 787px) {
    .wb-table-simple {
        text-align: left;
    }
    .wb-table-simple thead {
        display:none;
    }
    .wb-table-simple th, .wb-table-simple td {
        display: block;
        border: 0;
        border-bottom: 1px solid rgb(85 79 57 / 50%);
    }
    .wb-table-simple tbody th{
        background: #554F39;
        color:#fff;
    }
    .wb-table-simple td::before{
        content: attr(data-label);
        color: #554F39;
        font-weight: bold;
        font-size: 90%;
        display: inline-block;
        min-width: 4em;
        margin-right: 1em;
    }
    /*--- パンくずリスト(最後から２つのliは非表示) ---*/
    .dsm_breadcrumbs li:nth-last-child(-n+2) {
        display: none;
    }
}
/* タイル
<div class="wb-table-scroll">
  <table class="wb-table-tile">
    <thead>
      <tr>
        <th></th>
        <th>Free</th>
        <th>3,000<span>円<span></th>
        <th>5,000<span>円<span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>プラン1</th>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <th>プラン2</th>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <th>プラン3</th>
        <td></td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <th>プラン4</th>
        <td></td>
        <td></td>
        <td>●</td>
      </tr>
    </tbody>
  </table>
</div> */
.wb-table-tile {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 700px;
    font-weight: bold;
    text-align: center;
}
.wb-table-tile thead th {
    padding: 1em .8em;
    border-right: 2px solid#fff;
}
.wb-table-tile td {
    color: #4d9bc1;
    padding: 1em;
}
.wb-table-tile thead th:not(:first-child) {
    background: #4d9bc1;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.5em;
}
.wb-table-tile thead th span {
    font-size: .8rem;
}
.wb-table-tile thead th:nth-child(3) {
    background-color: #f88400;
    position: relative;
}
.wb-table-tile thead th:nth-child(3)::before {
    content: '';
    width: 100%;
    height: 10px;
    position: absolute;
    background-color: #f88400;
    left: 0;
    bottom: 100%;
}
.wb-table-tile thead th:nth-child(3)::after {
    content: 'おすすめプラン';
    width: max-content;
    color: #f88400;
    font-size: .8rem;
    padding: 0.3em 1em;
    background: #fff;
    border: 2px solid #f88400;
    border-radius: 100vh;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}
.wb-table-tile tbody th, .wb-table-tile tbody td {
    border: 2px solid #fff;
}
.wb-table-tile tbody th {
    background-color: #4d9bc1;
    color: #fff;
}
.wb-table-tile tbody td {
    background-color: #e6f1f6;
}
.wb-table-tile td:nth-child(3) {
    color: #f88400;
    background: #fef1e3;
}
.wb-table-tile td:hover {
    transform: scale(1.05);
    outline: 2px solid #4d9bc1;
}
.wb-table-tile td:nth-child(3):hover {
    transform: scale(1.05);
    outline: 2px solid #f88400;
}
@media screen and (max-width: 787px) {
    .wb-table-scroll {
        overflow-x: auto;
    }
}