@charset "UTF-8";

@media screen and (min-width: 769px) {

  /* ==========================================================================
  ベース設定
  =========================================================================== */
  :root {
    /* カラー */
    --Text: #222;
    --Text_color: #321400;
    --Text_link: #1558D6;
    --Main01: #1AB860;
    --Main02: #8CDBAF;
    --Sub01: #FF9C27;
    --Sub02: #FCB765;
    --Accent: #FE5208;
    --Back: #D4F1E1;
    --Back_yellow: #FFF3BC;
    --CTA01: #FBA94B;
    --CTA02: #EC0F0F;
    --CTA03: #EC0E0E;
    --CTA_shadow: #FBA74A;
    --yellow: #FFF601;
    --grey: #CACACA;

    /* フォント */
    --Font_normal: "ZenKakuGothicNew", sans-serif;
  }

  .html {
    font-size: 16px;
  }

  .body {
    font-size: 1.125rem;
    padding-top: 0;
  }

  .body a:hover {
    opacity: 0.6;
  }

  .container {
    width: 43.75rem;
    box-shadow: 0px 0px 20px 0px rgba(83, 86, 99, 0.25);
    margin: 0 auto;
  }

  .forPC {
    display: block;
  }

  .forPC-inline {
    display: inline;
  }  

  .forSP {
    display: none;
  }

  .forSP-inline {
    display: none;
  }


  /* ==========================================================================
  共通パーツ
  =========================================================================== */
  .inner {
    padding: 0 2.5rem;
  }

  .btn,
  a.btn {
    font-size: 1.5rem;
    padding-top: 0.875rem;
    padding-bottom: 1rem;
  }

  .btn--sm,
  a.btn--sm {
    font-size: 1.125rem;
    min-height: 3.375rem;
  }

  .btn--arrow::after,
  a.btn--arrow::after {
    width: 1.875rem;
  }

  .btn--sm.btn--arrow::after,
  a.btn--sm.btn--arrow::after {
    width: 1.875rem;
    position: static;
    transform: translateY(0);
  }

  .sectionTtl {
    padding: 0;
  }

  .table thead th {
    font-size: 1rem;
  }

  .table tbody th {
    font-size: 1rem;
    line-height: 1.625rem;
    padding: 1rem;
  }

  .table tbody td {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }

  .table--noThead tbody th {
    line-height: 1.125rem;
    padding: 0.75rem 1rem;
  }

  .table--noThead tbody td {
    padding: 1rem;
  }


  /* ==========================================================================
  ヘッダー
  =========================================================================== */
  .header {
    position: sticky;
    height: 4.5rem;
  }

  .header__logo {
    width: 16.6875rem;
  }

  /* メニュー */
  .hamburgerCont {
    width: 43.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
  }

  .hamburgerCont.is-active {
    transform: translateX(-50%) translateY(0);
  }


  /* ==========================================================================
  トップページ
  =========================================================================== */
  /* スクロールボタン */
  a.scrollBtn {
    display: block;
    background: url(../img/scroll_btn.svg) no-repeat center / contain;
    width: 3.625rem;
    aspect-ratio: 1;
    position: fixed;
    right: 2.5rem;
    bottom: 2.5rem;
  }

  /* 導入 */
  .intro {
    padding: 2rem 0 4.125rem;
  }

  .intro__item {
    gap: 1.25rem;
  }

  .intro__item:nth-of-type(n+2) {
    margin-top: 1rem;
  }

  .intro__balloon {
    min-height: 5rem;
    padding: 0.875rem 2rem;
  }

  .intro__user {
    width: 5rem;
  }

  .intro__txt {
    line-height: 2rem;
    margin-top: 2rem;
  }

  .intro__txt .bold {
    font-size: 1.25rem;
  }

  .caseBox {
    margin-top: 3.375rem;
  }

  .caseBox__content {
    font-size: 1.125rem;
    padding: 1rem 2rem 2rem;
  }

  .intro__case-img {
    margin-top: 1rem;
  }

  .checkBox__head {
    font-size: 1.25rem;
    width: calc(100% - (1.5rem + 1.8125rem));
    padding: 0.3125rem 3.625rem 0.5625rem;
    left: 1.5rem;
  }

  .checkBox__content {
    padding: 2.3125rem 1.5rem 1rem;
  }

  .checkBox__list-item {
    font-size: 1.125rem;
    padding-left: 1.875rem;
  }

  .checkBox__list-item:nth-of-type(n+2)::after {
    background-image: url(../img/checkbox_line_pc.svg);
    aspect-ratio: 567 / 2;
  }

  /* BEST3 */
  .best3 {
    padding: 2.625rem 0 3rem;
  }

  .best3::before {
    width: 8.5rem;
    top: -2.125rem
  }

  .best3 .sectionTtl {
    padding: 0;
  }

  .best3__list {
    gap: 1.5rem;
    padding-top: 5.9375rem;
  }

  .best3__list-item::before {
    width: 4.875rem;
    top: -4.75rem;
  }

  .best3__list-item:nth-of-type(1)::before {
    width: 5.9375rem;
    top: -4.9375rem;
  }

  .best3__list-item:nth-of-type(1) .best3__list-box {
    outline: 0.25rem solid #FA503C;
    outline-offset: -0.25rem;
    width: 12.75rem;
  }

  .best3__list-box-name {
    font-size: 1.25rem;
    height: 3rem;
  }

  .best3__list-item:nth-of-type(2) .best3__list-box-name,
  .best3__list-item:nth-of-type(3) .best3__list-box-name {
    font-size: 1rem;
  }

  .best3__list-box-txt {
    font-size: 1.125rem;
    min-height: 8.4375rem;
    padding: 1rem;
  }

  .best3__list-item:nth-of-type(1) .best3__list-box-txt {
    min-height: 8.4375rem;
  }

  .best3__list-item:nth-of-type(n) a.btn {
    font-size: 1.5rem;
    min-height: 3.75rem;
    padding-right: 0;
    padding-left: 0.9375rem;
    margin-top: 1rem;
  }

  /* 比較表 */
  .comparison {
    padding: 2.5rem 0 2.5rem;
  }

  .comparison__content {
    margin-top: 1.5rem;
  }

  .comparison__table {
    width: 100%;
  }

  .comparison__table th {
    padding: 1rem;
  }

  .comparison__table tbody th {
    width: 5rem;
  }

  .comparison__table tbody td .bold {
    font-size: 1rem;
  }

  .comparison__table-link-logo {
    width: 8.125rem;
  }

  .comparison__table-link-name {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .comparison__table-txt {
    font-size: 0.875rem;
  }

  * + .comparison__table-txt {
    margin-top: 0.5rem;
  }

  .comparison__table-txt small {
    font-size: 0.6875rem;
    width: 100%;
    margin-top: 0;
    transform: scale(1);
  }

  .comparison__table td:has(a.btn) {
    height: 5.375rem;
  }

  /* ランキング */
  .ranking {
    padding: 2.5rem 0 3rem;
  }

  .ranking__box {
    padding: 1.5rem 2.5rem 2.5rem;
  }

  .ranking__box:nth-of-type(n+2) {
    margin-top: 2.5rem;
  }

  .ranking__box-head {
    height: 3.875rem;
    padding-left: 6.25rem;
  }

  .ranking__box-head::before {
    width: 5.25rem;
  }

  a.ranking__box-head-name {
    font-size: 1.75rem;
  }

  a.ranking__box-bnr {
    grid-row: span 2;
    margin-top: 0;
  }

  .ranking__box-list {
    gap: 0.5rem;
    margin-top: 0;
  }

  .ranking__box-list-item-head {
    font-size: 1.125rem;
    padding: 0.375rem;
  }

  .ranking__box-list-item-content {
    font-size: 1.125rem;
    padding: 0.375rem;
  }

  .ranking__box-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
  }

  a.ranking__box-top-bnr {
    display: block;
    width: 16.25rem;
    flex-shrink: 0;
  }

  .ranking__box-top-table {
    margin-top: 0;
  }

  .ranking__box-top-table th {
    height: 4rem;
  }

  .ranking__box-top-table tbody td {
    font-size: 1rem;
  }

  .ranking__box-list {
    margin-top: 1rem;
  }

  .ranking__box-list-item {
    font-size: 1.125rem;
    line-height: 1.375rem;
    gap: 1rem;
    height: 4.5rem;
  }

  .ranking__box-list-item:nth-of-type(n+2) {
    margin-top: 0.75rem;
  }

  .ranking__box-list-item::before {
    width: 2.5rem;
  }

  .ranking__box-txt {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  /* Q&A */
  .qa__content {
    margin-top: 1.5rem;
  }

  .qa__item:nth-of-type(n+2) {
    margin-top: 3rem;
  }

  .qa__item:nth-of-type(n+2)::before {
    width: 6.25rem;
    top: -1.5rem;
  }

  .qa__q {
    font-size: 1.125rem;
    padding-left: 1.5rem;
  }

  .qa__a-wrap {
    padding: 1rem 1.5rem 1.5rem;
    margin-top: 0.5rem;
  }

  .qa__a-txt {
    line-height: 1.625rem;
  }

  .qa__a-box-ol-item {
    font-size: 1.125rem;
  }

  .qa__a-box-ol-item:nth-of-type(n+2) {
    margin-top: 0.625rem;
  }

  .qa__a-box-checkList-item {
    font-size: 1.125rem;
  }

  .qa__a-box-checkList-item:nth-of-type(n+2) {
    margin-top: 0.75rem;
  }

  .qa__a-box-ul-item {
    font-size: 1.125rem;
  }

  .qa__a-box-ul-item:nth-of-type(n+2) {
    margin-top: 0.75rem;
  }

  .qa__a-table {
    width: 48.5rem;
  }

  .qa__a-table thead th:nth-of-type(1) {
    width: 128px;
  }

  .qa__a-table thead th:nth-of-type(2) {
    width: 174px;
  }

  .qa__a-table thead th:nth-of-type(3) {
    width: 216px;
  }

  .qa__a-table thead th:nth-of-type(4) {
    width: 258px;
  }

  .qa__a-table td small {
    font-size: 0.75rem;
    transform: scale(1);
  }

  /* まとめ */
  .summary {
    padding: 2.5rem 0 4.125rem;
  }

  .summary::before {
    background-image: url(../img/summary_line_pc.svg);
    width: calc(100% - 2.5rem * 2);
    aspect-ratio: 620 / 2;
    left: 2.5rem;
  }

  .summary__txt {
    margin-top: 2rem;
  }

  /* PICK UP */
  .pickup {
    padding: 2.5rem 0 2.5rem;
  }

  .pickup .sectionTtl {
    width: 36.25rem;
  }

  .pickup .ranking__box {
    margin-top: 2rem;
  }

  .pickup a.ranking__box-btn {
    margin-top: 1.5rem;
  }



  /* ==========================================================================
  フッター
  =========================================================================== */
  .footer {
    padding: 2rem 0;
  }

}