@charset "UTF-8";

@media screen and (max-width: 768px) {
  /* ==========================================================================
  ベース設定
  =========================================================================== */
  :root {
    /* カラー */
    --Text: #000000;
    --Back: #f5f5f5;
    --Main: #0353b0;
    --Sub: #fcdb0f;
    --Accent: #6ebe27;
    /* 文字サイズ */
    --FontSizeSP: 16px;
    /* 375px 〜 768px */
    --FontSizeSP2: 4.2666666667vw;
    /* 〜　374px */
  }

  html {
    font-size: var(--FontSizeSP);
    overflow-x: hidden;
  }

  /* ==========================================================================
    共通パーツ
    =========================================================================== */
  /* インナー幅 */
  .inner {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* PC/SP表示切り替え */
  .forSP {
    display: block;
  }

  .forPC {
    display: none;
  }

  /* 各セクション */
  .section {
    padding: 1.875rem 0 2rem;
  }

  .section__ttl--1 {
    width: 20.9375rem;
  }

  .section__ttl--2 {
    width: 20.5rem;
  }

  .section__ttl--3 {
    width: 20.9375rem;
  }

  .section__ttl--4 {
    width: 19.0625rem;
  }

  .section__ttl--5 {
    width: 19.0625rem;
  }

  .section__ttl--result {
    width: 18.4375rem;
  }

  /* ボタン大 */
  .btn-main {
    font-size: 1.25rem;
  }

  /* チェックマークのリスト */
  .check-list li {
    font-size: 1rem;
    line-height: 1.75;
  }

  /* フッター */
  .footer__links-inner {
    display: block;
  }

  .footer__links-inner dl {
    padding-right: 0;
  }

  .footer__links-inner dt:hover {
    opacity: 1;
  }

  .footer__links-inner dl:nth-child(n + 2) {
    margin-top: 2rem;
  }

  .footer__links-inner dd ul {
    grid-template-columns: 1fr;
    row-gap: 0.625rem;
  }

  .footer__links-inner dl:nth-child(2):last-child dd ul li {
    white-space: normal;
  }

  .footer__links-inner dd ul li a:hover {
    opacity: 1;
  }

  /* テーブル青　スクロールあり */
  .table-wrapper__sp-scroll {
    overflow-x: scroll;
    overflow-y: scroll;
  }

  .table-wrapper__content {
    margin-top: 0.3125rem;
  }

  .table {
    border-collapse: collapse;
    width: 55rem;
  }

  /* テーブル余白調整 */
  .inner.table-inner {
    padding: 0;
  }

  .table-inner .table {
    margin-left: 20px;
    position: relative;
    height: 843px;
    overflow-x: auto;
  }

  .table-inner .table::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 20px;
    height: 1px;
  }

  .comparison .table > tbody > tr:nth-of-type(2) > td {
    /* height: 120px; */
  }

  .table-wrapper__unit {
    padding-right: 20px;
  }

  /* テーブル黒 スクロールなし */
  .table-black {
    line-height: 1.25;
  }

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

  .table-black th {
    padding: 0.25rem 0.9rem;
  }

  /* PCのみ表示 */
  .u-desktop {
    display: none;
  }

  /* スマホのみ表示 */
  .u-mobile {
    display: block;
  }

  /* コラム記事 番号付きリスト */
  .article ol li {
    font-size: 1rem;
  }

  .article ol li p {
    margin: 0;
    flex: 1;
  }

  /* アコーディオン */
  .aco button {
    padding: 0.9375rem 0.625rem;
    align-items: flex-start;
  }

  .aco button span {
    margin-right: 0.625rem;
  }

  /* 吹き出しボックス */
  .balloon-box {
    padding: 3.25rem 1rem 1.5rem;
  }

  .balloon-box__ttl > span > span {
    padding: 0.625rem 1.875rem;
    text-align: center;
    line-height: 1.5;
  }

  .balloon-box__ttl--blue > span > span {
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
  }

  .balloon-box__ttl > span > span::before {
    top: 0.625rem;
  }

  .balloon-box__ttl > span > span::after {
    top: 0.625rem;
  }

  /* ==========================================================================
    comparison / FX口座10社比較のセクション
    =========================================================================== */
  /* セクション背景 */
  .body.top .comparison {
    padding-bottom: 0;
  }

  .comparison::before {
    width: 6.25rem;
    height: 6.25rem;
    z-index: -1;
  }

  .comparison::after {
    width: 6.25rem;
    height: 6.25rem;
    z-index: -1;
  }

  .comparison__tab {
    margin-top: 1.25rem;
  }

  body.system .table--1 th:nth-child(1) {
    width: 6%;
  }

  /* タブ */
  .tab__btn {
    width: calc(100% / 3 - 0.625rem * 2 / 3);
    font-size: 0.875rem;
    font-weight: bold;
    text-align: center;
    padding: 0.625rem 0.625rem;
    margin-bottom: -3px;
  }

  .tab__btn:not(:last-child) {
    margin-right: 0.625rem;
  }

  .tab__item {
    padding-top: 1.875rem;
  }

  .tab__item.tab__item--pt10 {
    padding-top: 0.3125rem;
  }

  /* ==========================================================================
    recommend / 初心者におすすめFX口座のセクション
    =========================================================================== */
  /* セクション背景 */
  .recommend::before {
    width: 6.25rem;
    height: 6.25rem;
  }

  .recommend::after {
    width: 6.25rem;
    height: 6.25rem;
  }

  /* カード群 */
  .recommend__cards {
    margin: 2.5rem auto 0;
    display: block;
    max-width: 31.25rem;
  }

  .recommend__card {
    width: 100%;
  }

  .recommend__card:not(:nth-child(4n)) {
    margin-right: 0rem;
  }

  .recommend__card:nth-child(n + 2) {
    margin-top: 3rem;
  }

  /* カード */
  .card__img {
    padding: 1.5rem 5.625rem 0rem;
  }

  .recommend__card.gmo .card__img {
    display: block;
    padding: 1.8rem 0rem 0rem;
  }

  .card__img img {
    max-width: 9.6875rem;
  }

  .body.system .card__img img.matsui {
    max-width: 7.6875rem;
  }

  .recommend__card.gmo .card__img img {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    padding: 0 1.5rem;
    margin-top: 14px;
  }

  .card__txt {
    display: flex;
    align-items: center;
    padding: 0.5375rem 1.5rem;
  }

  .card__txt > span {
    flex: 1;
  }

  .card__btn-sp {
    display: inline-block;
    width: 2.125rem;
    background-color: #af0005;
    height: 2.125rem;
    margin-left: 0.625rem;
    border-radius: 50%;
    box-shadow: 0px 1px 0px 2px #000;
    position: relative;
    transition: 0.3s;
  }

  .card__btn-sp::before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    top: 50%;
    left: calc(50% - 0.125rem);
  }

  .card__btn-sp:hover {
    opacity: 0.6;
  }

  .card__btn {
    display: none;
  }

  /* ==========================================================================
    search / おすすめFX口座を検索のセクション
    =========================================================================== */
  /* セクション背景 */
  .search::before {
    width: 6.25rem;
    height: 6.25rem;
    z-index: -1;
  }

  .search::after {
    width: 6.25rem;
    height: 6.25rem;
    z-index: -1;
  }

  .search__form {
    margin-top: 1.875rem;
  }

  /* フォーム */
  .form dl:nth-child(n + 2) {
    margin-top: 1.25rem;
  }

  .form__grid {
    margin-top: 0.5rem;
    gap: 0.625rem;
  }

  .form__grid.form__grid--sp-2col {
    grid-template-columns: 1fr 1fr;
    gap: 0.9375rem;
  }

  .form label {
    padding: 0.625rem;
    height: 2rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
  }

  .form__radio-label {
    justify-content: center;
  }

  .form__radio-label::before {
    display: none;
  }

  .form__radio-label::after {
    display: none;
  }

  /* ボタン */
  .form__btns {
    display: flex;
    margin-top: 2.5rem;
  }

  .form__clear-btn {
    position: static;
    margin-right: 0.9375rem;
    padding: 1rem;
    color: var(--Text);
  }

  .form__submit-btn {
    border: none;
    flex: 1;
  }

  /* ==========================================================================
    ranking / おすすめFX口座を検索のセクション
    =========================================================================== */
  /* セクション背景 */
  .ranking::before {
    width: 6.25rem;
    height: 6.25rem;
    z-index: 1;
  }

  .ranking::after {
    width: 6.25rem;
    height: 6.25rem;
    z-index: 1;
  }

  .ranking__ttl-wrapper {
    padding: 1.3rem 0;
    margin-top: -1.875rem;
  }

  .ranking__companies {
    margin-top: 2.5rem;
  }

  /* 会社情報 */
  .company-info__ttl-wrap {
    display: block;
    position: relative;
  }

  .company-info__rank {
    width: 4.75rem;
    height: 3.5rem;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 3px solid #000;
  }

  .company-info__rank img {
    width: 3rem;
  }

  .company-info__ttl {
    padding: 0.5375rem 1.25rem;
  }

  .company-info__ttl span {
    display: block;
    padding-left: 4.8125rem;
    font-size: 0.875rem;
    min-height: 2.625rem;
  }

  .pr__dmm .company-info__ttl span {
    padding-left: 0;
  }

  .company-info__ttl h3 {
    font-size: 1.5rem;
    margin-top: 0.7125rem;
    text-align: center;
  }

  .pr__dmm .company-info__ttl h3 {
    margin-top: 0;
  }

  /* バナー */
  .company-info__bnr {
    margin-top: 1.25rem;
  }

  .company-info__bnr-body {
    margin-top: -3px;
    background-color: #000;
    padding: 0.45rem 0.9375rem;
  }

  .company-info__bnr-body p {
    font-size: 0.875rem;
    margin-right: 1.25rem;
  }

  .pr__dmm .company-info__bnr-body p {
    margin-right: 0.35rem;
  }

  .company-info__bnr-body span {
    width: 5.375rem;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  /* キャンペーンのボックス */
  .company-info__campaign-box > div {
    padding: 1.875rem 1.25rem 1.5625rem;
  }

  .company-info__campaign-ttl > span {
    width: 19.6875rem;
    background-image: url(../img/cm_ribbon_yellow_sp.png.webp);
  }

  /* 吹き出し付きのCTAボタン */
  .cta-btn__message {
    font-size: 1rem;
    max-width: calc(100% - 2.5rem);
    font-weight: bold;
  }

  .cta-btn__message::before,
  .cta-btn__message::after {
    width: 3.4375rem;
    height: 1.9375rem;
  }

  .cta-btn__message::before {
    left: -1.25rem;
  }

  .cta-btn__message::after {
    right: -1.25rem;
  }

  .cta-btn__wrap a {
    min-width: 0;
    width: calc(100% - 3.75rem);
  }

  /* ==========================================================================
  .campaign-area / キャンペーンコンテンツ
  =========================================================================== */
  .campaign-area {
    background: linear-gradient(transparent 8.6%, #fffbd1 8.6% 0);
    padding-bottom: 24px;
    aspect-ratio: auto;
    padding-bottom: 2px;
  }

  .campaign-area__inner {
    flex-direction: column;
    gap: 18px;
  }

  .campaign-area .campaign-area__item {
    width: 82%;
  }

  .campaign-area .campaign-area__item:hover {
    opacity: 1;
  }

  body.body .gmo__campign-bnr {
    margin: 0 calc(50% - 50vw);
    width: calc(100vw - 60px);
  }

  .campaign-area-ano {
    width: 100%;
    padding: 0 30px;
  }

  /* ==========================================================================
  検索結果ページ
  =========================================================================== */
  /* セクション背景 */
  .conditions {
    position: relative;
    background-color: #fffbd1;
    padding: 3.125rem 0 1.875rem;
  }

  .conditions::before {
    width: 6.25rem;
    height: 6.25rem;
  }

  .conditions::after {
    width: 6.25rem;
    height: 6.25rem;
  }

  .conditions__box {
    margin-top: 3.125rem;
  }

  .conditions__box.balloon-box {
    padding: 2.9375rem 1.25rem 1.4375rem;
  }

  .conditions__list dl {
    font-size: 0.75rem;
  }

  /* .conditions__list dl:nth-child(3) {
    display: block;
  } */

  .result_page .table--1 th:nth-child(2) {
    width: 11%;
  }

  .result_page .table--1 th:nth-child(3) {
    width: 9%;
  }

  .result_page .table--1 th:nth-child(4) {
    width: 10.625%;
  }

  .result_page .table--1 th:nth-child(5),
  .result_page .table--1 th:nth-child(6),
  .result_page .table--1 th:nth-child(7) {
    width: 5.625%;
  }

  .result_page .table--1 th:nth-child(8) {
    width: 15%;
  }

  .result_page .table--1 th:nth-child(9) {
    width: 14%;
  }

  .result__num {
    padding-left: 20px;
  }

  .re-search {
    padding: 1.875rem 0;
  }

  .re-search__form {
    margin-top: 1.875rem;
  }

  .top-btn {
    padding: 1.875rem 0;
  }

  .picture-sp {
    width: 85% !important;
    margin: 15px 0px -20px 27px;
  }

  /* ==========================================================================
  ポジショニングマップ
  =========================================================================== */
  .positioningMap {
    margin-top: 40px;
  }

  .positioningMap__top {
    padding: 0 20px;
  }

  .positioningMap__top-subTtl {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }

  .positioningMap__top-notes {
    font-size: 10px;
    text-align: right;
    margin-top: 2px;
  }

  .positioningMap__top-ttl {
    font-size: 18px;
    line-height: 55px;
    height: 55px;
  }

  .positioningMap__inner {
    background-size: 32px 32px;
    background-position: 50% 50%;
    width: 100%;
    aspect-ratio: 3 / 4;
    position: relative;
  }

  .positioningMap__inner::before {
    width: 38%;
    top: 5%;
    right: 6%;
  }

  .positioningMap__inner::after {
    width: 64%;
    height: 100%;
    position: absolute;
    top: 5%;
    left: 48.5%;
    transform: translateX(-50%);
  }

  .positioningMap__label,
  .positioningMap__subLabel {
    position: absolute;
    z-index: 2;
  }

  .positioningMap__subLabel {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
  }

  .positioningMap__label-01,
  .positioningMap__label-02 {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
  }

  .positioningMap__label-01 {
    top: 6.5%;
    left: 50%;
    transform: translateX(-50%);
  }

  .positioningMap__label-02 {
    top: 89%;
  }

  .positioningMap__label-03,
  .positioningMap__label-04 {
    font-size: 12px;
    line-height: 1.17;
    text-align: center;
    display: inline-block;
    padding: 8px;
  }

  .positioningMap__label-03 {
    top: 58.8%;
    transform: translateY(-50%);
    right: 20px;
  }

  .positioningMap__label-04 {
    top: 58.8%;
    transform: translateY(-50%);
    left: 20px;
  }

  .positioningMap__item-logo {
    width: auto;
    height: 16px;
  }

  .positioningMap__item-01 .positioningMap__item-logo {
    height: 28px;
  }

  .positioningMap__item-04 .positioningMap__item-logo {
    height: 15px;
  }

  .positioningMap__item-08 .positioningMap__item-logo {
    height: 26px;
  }

  .positioningMap__item {
    border-radius: 4px;
    max-width: 90px;
    padding: 8px;
    position: absolute;
    z-index: 1;
  }

  a.positioningMap__item {
    text-decoration: none;
  }

  a.positioningMap__item:hover {
    opacity: 1;
  }

  .positioningMap__item-catch {
    font-size: 10px;
    margin: 6px 0 0;
  }

  .positioningMap__item-catch1 {
    font-size: 10px;
    margin: 10px auto 0;
    color: #fff;
    background-color: #af0005;
    display: inline-block;
    padding: 3px;
    font-weight: bold;
  }

  .positioningMap__item-00 {
    display: block;
    width: 35%;
    max-width: 35%;
    top: 8%;
    right: 56%;
    text-align: center;
    padding: 10px 13px 8px;
  }

  .positioningMap__item-01 {
    width: 35%;
    max-width: 35%;
    top: 15%;
    right: 7%;
  }

  .positioningMap__item-01::before {
    background-size: auto 24px;
    width: 30px;
    height: 24px;
    position: absolute;
    top: -46%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  .positioningMap__item-01 img {
    width: auto;
    height: 22px;
  }

  .positioningMap__item-02 {
    top: 23%;
    left: 17%;
  }

  .positioningMap__item-03 {
    top: 39%;
    left: 27%;
  }

  .positioningMap__item-04 {
    top: 46%;
    right: 30%;
  }

  .positioningMap__item-05 {
    top: 60%;
  }

  .positioningMap__item-06 {
    right: 12%;
    top: 29%;
  }

  .positioningMap__item-07 {
    left: 26%;
    top: 70%;
  }

  .positioningMap__item-08 {
    top: 37%;
    right: 12%;
    padding: 2px 16px;
  }

  .positioningMap__item-09 {
    left: 11%;
    top: 47%;
  }

  .positioningMap__item-10 {
    left: 26%;
    top: 70%;
  }

  .positioningMap__item-link {
    display: block;
  }

  /* ==========================================================================
キャンペーン情報 2024/01/26追加
  =========================================================================== */
  section.campaign-info .comparison__campaign__cta {
    width: calc(100% - 40px);
    margin: 30px auto 0;
  }

  .campaign-info__ttl-wrapper {
    padding: 0.8rem 0 0.4rem;
  }

  section.campaign-info {
    padding: 1.875rem 0 3rem;
  }

  section.campaign-info::after,
  section.campaign-info::before {
    width: 4.3rem;
    height: 4.3rem;
    top: -9px;
  }

  section.campaign-info .comparison__campaign-txt {
    margin: 20px auto 0;
  }

  section.campaign-info .comparison__campaign__voucher {
    margin-top: 8px;
  }

  section.campaign-info .btn-main {
    font-size: 1.25rem;
    margin: 8px auto 0;
  }

  .section__ttl--5 img {
    z-index: 20;
    position: relative;
  }

  /* 20240313追記 */
  .dollar .comparison__tab {
    margin-top: 0.45rem;
  }

  .dollar > section.comparison.section.wrapper > h2 > picture > img {
    margin-top: -14px;
  }

  /* ==========================================================================
20240314 マネーパートナーズ追加
=========================================================================== */
  .dollar .positioningMap__item-11 {
    width: 35%;
    max-width: 35%;
    top: 15%;
    left: 58%;
  }

  .dollar .positioningMap__item-11 img {
    height: 20px;
  }

  .dollar .positioningMap__item-11::before {
    top: -68%;
  }

  .dollar .positioningMap__item-01 {
    max-width: 25%;
    top: 28%;
    right: 12%;
  }

  .dollar .positioningMap__item-04 {
    top: 51%;
    right: 33%;
  }

  .dollar .positioningMap__item-06 {
    top: 38%;
    right: 15%;
  }

  .dollar .positioningMap__item-08 {
    top: 44%;
    right: 20%;
  }

  body
    > section.ranking.section.wrapper
    > div.inner
    > div
    > div:nth-child(1)
    > div.company-info__box.balloon-box
    > div
    > a::before {
    top: 1.7rem;
  }

  /* ==========================================================================
20240315 米ドル/円教育コンテンツ追加
=========================================================================== */
  .dollar .reason img {
    max-width: 400px;
  }

  body > section.reason.section.wrapper {
    padding: 0.5rem 0 1.5rem;
  }

  /* ==========================================================================
20240321 SBI５位追記
=========================================================================== */
  .positioningMap__item-10 {
    top: 25%;
    left: 15%;
  }

  .positioningMap__item-02 {
    top: 30%;
    left: 12%;
  }

  .positioningMap__item-03 {
    top: 37%;
  }

  /* ==========================================================================
ステマ対策
=========================================================================== */

  .adTxt {
    text-align: right;
    max-width: 100%;
    padding: 0 10px;
    /* 左右余白 LPに合わせて調整 */
    margin: 8px auto 20px;
    right: 0px;
  }

  .adTxt span {
    font-size: 14px;
    font-weight: bold;
    border: 1px solid var(--Text);
    /* 枠色 変数名がTextでない場合は変更 */
    padding: 2px 14px;
  }

  .result_page .adTxt {
    top: -9px;
  }

  /* 20231219 註釈追加 */
  .result__table-notes {
    padding: 0 20px;
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: var(--FontSizeSP2);
  }
}

/* ==========================================================================
20240523 DMM PR追加
=========================================================================== */
@media screen and (max-width: 768px) {
  .pr__dmm {
    margin-top: 1.4rem;
  }

  .pr__dmm__ttl-catch {
    font-size: 15px;
  }

  .pr__dmm__ttl {
    width: 100%;
    font-size: 23px;
    padding: 10px 0 14px;
  }

  .pr__anno {
    font-size: 10px;
    display: inline-block;
    line-height: 1.3;
    margin-top: 4px;
  }

  .pr__dmm__wrap.inner {
    margin-top: 1rem;
    width: calc(100% - 1rem);
    padding: 15px 12px 25px;
  }

  /* ========================================================
20240606 header ロゴ追加
=========================================================*/
  .header__logo::before {
    width: 131px;
    height: 24px;
  }

  .header__logo {
    height: 24px;
    width: 100%;
  }

  /* ========================================================
20240808 system
=========================================================*/
  body.system .section__ttl--1 {
    width: 23.9375rem;
  }

  body.dollar .section__ttl--1,
  body.euro .section__ttl--1,
  body.aud .section__ttl--1,
  body.pond .section__ttl--1 {
    width: 100%;
  }

  /* ========================================================
20240813 通過ペア
=========================================================*/

  .hikaku-area-ano {
    width: 100%;
    padding: 0px 10px;
  }

  .table-inner .table {
    height: auto;
  }

  /* ========================================================
20250417 自動売買記事修正
=========================================================*/
  .system .company-info__rank img {
    width: 4rem;
  }
}

/*# sourceMappingURL=style_sp.css.map */
/* ========================================================
20250703 ランキング見出し修正
=========================================================*/

.section__ttl--4 picture img {
  width: 110%;
  height: auto;
  max-width: 623px;
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}