/* -----------------------------

レスポンシブ
0.1023px以上
1.1023px以下
2.639px以下

01.共通
02.ヘッダー
03.MV
04.サービス
05.会社案内
06.フッター

下層ページ
07.サービス（事業紹介）
08.会社案内
09.お問い合わせ

その他
00.Snow Monkey「項目」デバイス 
01.WordPress「メディアとテキスト」960px以下で縦並び

-------------------------------- */

/* ------------------------------------------------------------------------- */
/* 0.1024px以上
/* ------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  /*--------------- */
  /* 02.ヘッダー
  /* -------------- */
  /* オーバーレイ、下がる対策 */
  .l-contents {
    margin-top: 82.5px;
  }
  .l-1row-header .p-global-nav .c-navbar__item:not(:first-child) {
    margin-left: 15px;
  }
  /*--------------- */
  /* 05.会社案内
  /* -------------- */
  .company-item:first-child .smb-items__banner {
    border-radius: 8px 0px 0px 8px;
  }
  .company-item:last-child .smb-items__banner {
    border-radius: 0 8px 8px 0;
  }
}

/* ------------------------------------------------------------------------- */
/* 1.1023px以下
/* ------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  /*--------------- */
  /* 01.共通
  /* -------------- */
  html {
    scroll-padding-top: 76px;
  }
  .smb-section__title:not(.mv .smb-section__title) {
    font-size: 60px;
  }
  .smb-section__subtitle {
    font-size: 16px !important;
  }
  .tb-br br {
    display: none;
  }
  .tb-m0 {
    margin: 0 !important;
  }
  /*--------------- */
  /* 02.ヘッダー
  /* -------------- */
  .menu-item-50 {
    display: none;
  }
  .c-hamburger-btn__label {
    display: none;
  }
  /*--------------- */
  /* 03.MV
  /* -------------- */
  .mv .smb-section__title span {
    font-size: clamp(40px, 5vw, 46px) !important;
  }
  .mv .smb-section__title {
    top: -9vw;
    left: 20px;
  }
  .mv-title_en {
    font-size: 72px;
  }
  /*--------------- */
  /* 04.サービス
  /* -------------- */
  .service .smb-section__background {
    border-radius: 30px;
  }
  /*--------------- */
  /* 06.フッター
  /* -------------- */
  .footer-navi {
    font-size: 14px;
  }
  .l-footer {
    margin-top: -100px;
  }
}

/* ------------------------------------------------------------------------- */
/* 2.639px以下
/* ------------------------------------------------------------------------- */
@media screen and (max-width: 639px) {
  /*--------------- */
  /* 01.共通
  /* -------------- */
  .smb-section__title:not(.mv .smb-section__title) {
    font-size: clamp(42px, 9vw, 60px) !important;
  }
  .smb-section__subtitle {
    font-size: 13px !important;
  }
  h3.wp-block-heading,
  h3.wp-block-heading span {
    font-size: 18px !important;
  }
  /* アイコンリスト */
  .wp-block-snow-monkey-blocks-list {
    font-size: 14px;
  }
  .sp-br br {
    display: none;
  }
  .sp-br_show br {
    display: block;
  }
  /* 下層 */
  .mv-sub p {
    font-size: 14px !important;
  }
  /*--------------- */
  /* 03.MV
  /* -------------- */
  .mv .smb-section__title {
    display: none;
  }
  .mv-sp-title span {
    font-size: clamp(32px, 6vw, 40px) !important;
  }
  .mv-scroll {
    position: absolute;
    top: -80px;
    right: 20px;
  }
  .mv-scroll a {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 10px #f8f7f3;
  }
  .mv-title_en {
    font-size: 60px;
  }
  /*--------------- */
  /* 04.サービス
  /* -------------- */
  .service .c-row {
    max-width: 400px;
    margin: auto;
  }
  .company-item .smb-items__banner {
    border-radius: 4px;
  }
  .service-card:last-child {
    margin-top: 32px;
  }
  /*--------------- */
  /* 05.会社案内
  /* -------------- */
  .company .c-row__col {
    max-width: 400px;
  }
  .company .smb-items__banner__title span {
    font-size: 18px;
  }
  .company .smb-items__banner__lede span {
    font-size: 14px !important;
  }
  /*--------------- */
  /* 06.フッター
  /* -------------- */
  .footer-navi {
    font-size: 14px;
  }
  .l-footer .smb-section::before {
    top: 23%;
    left: 3.5vh;
  }
  /*--------------- */
  /* 08.会社案内
  /* -------------- */
  .company-table {
    font-size: 14px;
  }
  .has-fixed-layout th {
    width: 35% !important;
  }
  .company-en span {
    font-size: 14px !important;
  }
  .company-table th,
  .company-table td {
    padding: 7% 2% !important;
    padding: 28px 8px !important;
  }
  .company-title_border h3.wp-block-heading span {
    font-size: 24px !important;
  }
  /*--------------- */
  /* 09.お問い合わせ
  /* -------------- */
  .contact-form span {
    font-size: 14px;
  }
  .smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
    font-size: 10px;
    margin-right: 1em;
  }
  .smf-action .smf-button-control__control {
    font-size: 14px;
    max-width: 230px;
  }
  .smf-error-messages {
    font-size: 14px !important;
  }
  /* 確認画面 */
  .smf-action .smf-button-control + .smf-button-control {
    margin-left: 0 !important;
  }
  .smf-action .smf-button-control button[data-action="complete"] {
    margin-top: 15px;
  }
}

/* ------------------------------------------------------------------------- */
/* 00.Snow Monkey「項目」デバイス 
/* ------------------------------------------------------------------------- */
/* 3列に変更 */
@media screen and (min-width: 840px) and (max-width: 1023px) {
  .smb-items .c-row {
    /* 2列(50%)になろうとする挙動を阻止し、33.33%にする */
    --c-row--col-width: 33.33333% !important;
  }
  .smb-items .c-row__col {
    flex: 0 0 var(--c-row--col-width) !important;
    max-width: var(--c-row--col-width) !important;
  }
}

/* サービスの項目 */
@media screen and (min-width: 640px) and (max-width: 840px) {
  /* 840px以下でカードの幅を70%にし、中央寄せにする */
  .service-card {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    min-width: 430px !important;
  }
}

/* ------------------------------------------------------------------------- */
/* 01.WordPress「メディアとテキスト」960px以下で縦並び（下層の会社案内）
/* ------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {
  .wp-block-media-text.is-stacked-on-mobile {
    display: block !important;
    grid-template-columns: 100% !important;
  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
    margin: auto;
    margin-bottom: 2em;
    width: 100% !important;
    max-width: 30rem;
  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}