@charset "UTF-8";

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

  /* ==========================================================================
  ベース設定
  =========================================================================== */
  :root {
    /* カラー */
    --Text: #000;
    --Text_link: #1A0DAB;
    --Text_grey: #494949;
    --Main: #199184;
    --Sub: #0092BB;
    --Accent: #FF3C3F;
    --Back: #D5EBE8;
    --Back_yellow: #FFFEED;
    --Back_grey: #F5F5F5;
    --CTA01: #FF6200;
    --CTA02: #F30002;
    --CTA_shadow: rgba(58, 65, 111, 0.5);
    --yellow: #ECD443;
    --grey: #CACACA;

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

  .html {
    font-size: 16px;
  }

  .body {
  }

  .body a:hover {
    opacity: 0.6;
  }

  .container {
    /* width: 50rem; */
    width: auto;
    max-width: 100%;
  }

  .forPC {
    display: block;
  }

  .forPC-inline {
    display: inline;
  }  

  .forSP {
    display: none;
  }

  .forSP-inline {
    display: none;
  }


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

  .table th,
  .table td {
    font-size: 0.875rem;
  }


  /* ==========================================================================
  ヘッダー
  =========================================================================== */
  .header {
    width: 50rem;
    padding: 1.25rem 0 1.375rem;
    margin: 0 auto;
  }


  /* ==========================================================================
  トップページ
  =========================================================================== */
  /* MV */
  .mv {
    width: 50rem;
    margin: 0 auto;
  }

  .mv__area {
    font-size: 2.25rem;
    top: 7rem;
    left: 21.125rem;
  }

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

  .comparison__inner {
    padding: 0;
  }

  .comparison__content {
    padding-top: 4.6875rem;
  }

  .comparison__rank {
    width: 5rem;
    top: 0.4375rem;
  }

  .comparison__rank01 {
    left: 12.25rem;
  }

  .comparison__rank02 {
    left: 26.375rem;
  }

  .comparison__rank03 {
    left: 40.375rem;
  }

  .comparison__table th {
    font-size: 0.875rem;
    width: 7.625rem;
  }

  .comparison__table tr:first-child td {
    padding: 1.125rem;
  }

  a.comparison__table-btn {
    width: 5.5rem;
    margin: 0 auto;
  }

  /* コンテンツ */
  .intro__top {
    width: 50rem;
    padding: 1.5rem 0 0;
    margin-right: auto;
    margin-bottom: 4rem;
    margin-left: auto;
  }

  .intro__top::after {
    border-top: 3rem solid var(--Back_grey);
    border-right: 25rem solid transparent;
    border-left: 25rem solid transparent;
  }

  .intro__top-img {
    width: 31.5rem;
    margin: 0 auto;
  }

  .intro__difference-ttl {
    width: 50rem;
    margin: 0 auto;
  }

  .intro__difference-inner {
    padding: 0;
  }

  .intro__difference-list {
    grid-template-columns: repeat(3, 16.25rem);
    gap: 0.625rem;
  }

  .intro__difference-list-item {
    padding: 1rem 1.25rem;
  }

  .intro__difference-list-item-head {
    gap: 1.25rem;
  }

  .intro__difference-list-item-head::before {
    width: 1.5625rem;
    transform: translateY(-0.125rem);
  }

  .intro__difference-list-item-img {
    width: 13.75rem;
    margin-top: 0.375rem;
  }

  .intro__conclusion {
    padding-right: 3.75rem;
    padding-left: 3.75rem;
  }

  .intro__conclusion-head-ttl::before {
    width: 3.5625rem;
    top: -0.875rem;
    left: -3.75rem;
  }

  /* ミニランキング */
  .miniRanking {
    padding: 0 0 1rem;
  }

  .miniRanking__inner {
    padding: 0;
  }

  .miniRanking__sectionTtl {
    width: 22.0625rem;
  }

  .miniRanking__box {
    display: grid;
    grid-template-columns: 27rem 1fr;
  }

  .miniRanking__box-head {
    grid-row: 1;
    grid-column: 1 / 3;
    justify-content: flex-start;
    padding-left: 20.5rem;
  }

  .miniRanking__box-head::before {
    left: 16rem;
  }

  .miniRanking__box--draga .miniRanking__box-head-link,
  .miniRanking__box--agaskin .miniRanking__box-head-link {
    margin: 0;
  }

  .miniRanking__box-list {
    grid-row: 2;
    grid-column: 1;
    border-bottom: none;
  }

  .miniRanking__box-cta {
    grid-row: 2;
    grid-column: 2;
    border-top: 0.0625rem solid var(--Main);
    border-left: 0.0625rem dashed var(--Main);
    padding-top: 2rem;
  }

  /* コンテンツ02 */
  .treatment__combination-img {
    width: 30rem;
    margin: 0 auto;
  }

  .treatment__effect {
    padding: 3rem 0 3.75rem;
  }

  .treatment__effect-inner {
    width: 65rem;
    padding: 0;
  }

  .treatment__effect-box {
    padding-bottom: 2rem;
  }

  .treatment__effect-box::before {
    left: 10rem;
  }

  .treatment__effect-box-head {
    width: 18.9375rem;
    padding: 0;
    margin: 0 auto;
  }

  .effectSlider .splide__list {
    display: flex!important;
    justify-content: center;
    gap: 0.5rem;
  }

  .effectSlider .splide__slide {
    width: 19.5625rem;
  }

  .treatment__effect-box-slider-table th,
  .treatment__effect-box-slider-table td {
    font-size: 0.75rem;
  }

  .treatment__effect-box-notes {
    text-align: center;
    padding: 0;
  }

  .treatment__effect-img {
    width: 26.25rem;
    margin: 1rem auto 0;
  }

  /* ランキング */
  .ranking__ttl {
    width: 24.5625rem;
  }

  .ranking__box-head {
    padding-left: 6rem;
  }

  .ranking__box-head::before {
    left: 0;
  }

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

  .ranking__box-eval {
    position: absolute;
    top: 1.75rem;
    right: 0;
  }

  .ranking__box-bnr {
    margin-top: 1.4375rem;
  }

  .ranking__box-grid {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1.5rem;
  }

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

  .ranking__box-point {
    width: 40rem;
    margin: 1rem auto 0;
  }

  .ranking__box-point-list-item-content {
    padding-right: 0;
    padding-left: 0;
  }

  .ranking__box-point-list-item:nth-of-type(n+2)::before {
    background: url(../img/ranking_point_line_pc.svg) no-repeat center / contain;
    width: 100%;
    aspect-ratio: 600 / 1;
  }

  .ranking__box-cta {
    width: 40rem;
    padding: 1.5rem 2rem;
    margin: 1rem auto 0;
  }

  .ranking__box-cta-box-btn::after {
    right: 1.6875rem;
  }

  .ttl {
    justify-content: center;
    padding: 0;
  }

  .ranking__box-area {
    width: 40rem;
    margin: 0 auto;
  }

  .ranking__box-area-content {
    width: 22.0625rem;
    margin: 0 auto;
  }

  .ranking__box-review {
    width: 40rem;
    margin: 1rem auto 0;
  }

  .ranking__box-review-box {
    padding-right: 1.875rem;
    padding-left: 3.375rem;
  }

  a.ranking__box-review-cta-btn {
    width: 32.875rem;
    margin: 0.25rem auto 0;
  }

  a.ranking__box-review-cta-btn::after {
    position: absolute;
    right: 1.625rem;
    transform: translateY(-50%);
  }

  /* 絞り込み検索フォーム */
  .search {
    width: 50rem;
    padding-bottom: 2.75rem;
    margin: 0 auto;
  }

  .search__content-inner {
    width: 22.0625rem;
    padding: 0;
    margin: 0 auto;
  }


  /* ==========================================================================
  検索結果ページ
  =========================================================================== */
  .search-result .header {
    height: 5rem;
    padding: 1.25rem 0 2.5rem;
  }
  
  .search-result {
    width: 50rem;
  }

  .search-result__ttl {
    width: 24.5625rem;
    margin: 0 auto;
  }

  .search-result__conditions-inner {
    padding: 0;
  }

  .search-result__conditions-box-ttl {
    width: 24.375rem;
  }

  .search-result__txt {
    padding: 0;
  }

  .search-result__scrollTable {
    padding-bottom: 1rem;
    padding-left: 0;
  }

  .search-result__table {
    width: 100%;
  }

  .search-result__table::after {
    display: none;
  }

  .search-result__table-txtLink {
    font-size: 0.75rem;
  }

  .search-result__reSearch-inner {
    width: 22.0625rem;
    padding: 0;
    margin: 0 auto;
  }


  /* ==========================================================================
  コラム
  =========================================================================== */
  .breadcrumbs__inner {
    padding: 0;
  }

  .page {
    width: 50rem;
    margin: 0 auto;
  }

  .column .inner {
    padding: 0;
  }


  /* ==========================================================================
  フッター
  =========================================================================== */
  .footer {
    width: 50rem;
    margin: 0 auto;
  }

}