@charset "utf-8";

/*
Theme Name : shippio_service
Author: Shippio
*/

/* =============================================
共通
============================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}
body {
  background-color: #f2f5f9;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}
.c-button.c-button.c-button.c-button {
  border-radius: 5px;
  padding: 0.6em 1em;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
}
.c-button--navy {
  background-color: #000665 !important;
  color: #fff !important;
}
.c-button--white {
  background-color: #fff !important;
  color: #000665 !important;
  border: 1px solid #000665 !important;
}
.text--bold {
  font-weight: 700;
}
.text--small {
  font-size: 0.8;
}
.sp {
  display: none;
}
@media (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
.mt--0 {
  margin-top: 0px !important;
}
.mt--10 {
  margin-top: 10px !important;
}
.mt--20 {
  margin-top: 20px !important;
}
.mt--30 {
  margin-top: 30px !important;
}
.mt--40 {
  margin-top: 40px !important;
}
.mt--50 {
  margin-top: 50px !important;
}
.mt--60 {
  margin-top: 60px !important;
}
.mt--70 {
  margin-top: 70px !important;
}
.mt--80 {
  margin-top: 80px !important;
}
.mt--90 {
  margin-top: 90px !important;
}
.mt--100 {
  margin-top: 100px !important;
}
.mb--0 {
  margin-bottom: 0px !important;
}
.mb--10 {
  margin-bottom: 10px !important;
}
.mb--20 {
  margin-bottom: 20px !important;
}
.mb--30 {
  margin-bottom: 30px !important;
}
.mb--40 {
  margin-bottom: 40px !important;
}
.mb--50 {
  margin-bottom: 50px !important;
}
.mb--60 {
  margin-bottom: 60px !important;
}
.mb--70 {
  margin-bottom: 70px !important;
}
.mb--80 {
  margin-bottom: 80px !important;
}
.mb--90 {
  margin-bottom: 90px !important;
}
.mb--100 {
  margin-bottom: 100px !important;
}
.pt--0 {
  padding-top: 0px !important;
}
.pt--10 {
  padding-top: 10px !important;
}
.pt--20 {
  padding-top: 20px !important;
}
.pt--30 {
  padding-top: 30px !important;
}
.pt--40 {
  padding-top: 40px !important;
}
.pt--50 {
  padding-top: 50px !important;
}
.pt--60 {
  padding-top: 60px !important;
}
.pt--70 {
  padding-top: 70px !important;
}
.pt--80 {
  padding-top: 80px !important;
}
.pt--90 {
  padding-top: 90px !important;
}
.pt--100 {
  padding-top: 100px !important;
}
.pb--0 {
  padding-bottom: 0px !important;
}
.pb--10 {
  padding-bottom: 10px !important;
}
.pb--20 {
  padding-bottom: 20px !important;
}
.pb--30 {
  padding-bottom: 30px !important;
}
.pb--40 {
  padding-bottom: 40px !important;
}
.pb--50 {
  padding-bottom: 50px !important;
}
.pb--60 {
  padding-bottom: 60px !important;
}
.pb--70 {
  padding-bottom: 70px !important;
}
.pb--80 {
  padding-bottom: 80px !important;
}
.pb--90 {
  padding-bottom: 90px !important;
}
.pb--100 {
  padding-bottom: 100px !important;
}
/* =============================================
ヘッダー
============================================= */
.global-header {
  background: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.global-header__inner {
  width: 90%;
  /* max-width: 1200px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.global-header__list {
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.global-header__link {
  color: #000665;
  display: inline-block;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  padding: 6px 0;
}
/* =============================================
フッター
============================================= */
.global-footer {
  margin-top: 100px;
}
@media (max-width: 767px) {
  .global-footer {
    margin-top: 60px;
  }
}
/* =============================================
ページネーション
============================================= */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 64px auto;
}
.wp-pagenavi .current,
.wp-pagenavi .larger,
.wp-pagenavi .smaller,
.nextpostslink,
.previouspostslink,
.wp-pagenavi .first,
.wp-pagenavi .last {
  width: 36px;
  height: 36px;
  font-size: 14px;
  text-align: center;
  display: block;
  border-radius: 6px;
  font-weight: 700;
  margin: 0 5px;
  border: solid 1px #000665;
}
.wp-pagenavi .current {
  background: #000665;
  color: #fff;
}
.wp-pagenavi .current a:visited {
  color: #fff;
}
.nextpostslink,
.previouspostslink,
.wp-pagenavi .first,
.wp-pagenavi .last {
  font-size: 16px;
  line-height: 32px;
}
.wp-pagenavi a.larger,
.wp-pagenavi a.smaller,
a.nextpostslink,
a.previouspostslink,
.wp-pagenavi a.larger:visited,
.wp-pagenavi a.smaller:visited,
a.nextpostslink:visited,
a.previouspostslink:visited,
.wp-pagenavi .first,
.wp-pagenavi .last {
  color: #000665;
}
/* =============================================
旧CMSのアセットの補完
============================================= */
/* パンくずリスト*/
.breadCrumbList {
  margin: 0 auto;
  width: 90vw;
  max-width: 1200px;
  color: #000665;
}
@media (max-width: 850px) {
  .breadCrumbList {
    padding: 100px 0 20px;
    line-height: 1.8;
  }
}
/* ヘッダー */
.header__container--upper .navigation-primary .level-1 > li:active > a,
.header__language-switcher:active .header__language-switcher-label-current {
  text-decoration: none !important;
}
.submenu.level-1 > li:last-child > a {
  color: #fff !important;
}
.active-item::after,
.header__container--upper .navigation-primary .level-1 > li > a:after {
  display: none;
}
/* サイドバー */
.sidebar.sidebar {
  margin: 0 0 0 80px;
}
.sidebar_cta {
  display: block;
}
@media (max-width: 1024px) {
  /* .sidebar.sidebar {
    margin: 0;
    width: 100%;
    max-width: 800px;
  } */
  .sidebar {
    display: none;
  }
}
/* 概要ボックス付きページ */
.case-info-wrapper {
  margin-bottom: 30px;
}
.case-info-wrapper .case-info-list .case-info-list__ttl {
  min-width: 50px;
}
.case-tags.case-tags.case-tags ul li {
  border: 2px solid #000665;
  border-radius: 999em;
  color: #000665;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  margin: 5px 7px 0 0;
}

/* サンクスページ */
.thanks-page {
  background-image: url("/wp-content/themes/shippio-service/assets/img/bg_thanks.png");
  padding: 160px 0 0;
  text-align: center;
}
.thanks-page__inner {
  width: 90vw;
  max-width: 880px;
  margin-inline: auto;
}
.thanks-page__title {
  color: #000665;
  font-size: 31px;
  font-weight: 700;
  margin-bottom: 1em;
}
.thanks-page__sea {
  background: #000665;
  position: relative;
  height: 120px;
  margin-top: 120px;
}
.thanks-page__sea-image {
  max-width: 250px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -60px;
}
.page-template-page-thanks .global-footer {
  margin-top: 0 !important;
}
/* =============================================
トップページ
============================================= */
.logo-and-award {
  padding: 40px 20px;
  background: #eff3ff;
}
.wp-block-lazyblock-logo {
  margin: 0 !important;
}
.logo-copy.logo-copy {
  color: #000665;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}
.logo-wrapper {
  max-width: 1340px;
  margin: 10px auto 20px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(10, 1fr);
}
.logo-background {
  background: #fff;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-award {
  max-width: 750px;
  width: 100%;
  display: block;
  margin: auto;
}
.cell_17412714641352-row-1-vertical-alignment > .row-fluid.frontpage__services {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.frontpage__services::before {
  display: none !important;
}
.frontpage__services > .widget-span {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.hs-video-wrapper video {
  width: 100%;
  aspect-ratio: 19 / 11;
}
@media (max-width: 1024px) {
  .cell_17412714641352-row-1-vertical-alignment
    > .row-fluid.frontpage__services {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .logo-wrapper {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .logo-copy.logo-copy {
    font-size: 16px;
  }
  .cell_17412714641352-row-1-vertical-alignment
    > .row-fluid.frontpage__services {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* =============================================
一覧ページ
============================================= */
.archive-title {
  text-align: center;
  margin: 0 auto 60px;
  color: #000665;
}
.card-wrapper {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}
.card__image {
  margin-bottom: 20px;
  aspect-ratio: 1200 / 675;
  object-fit: cover;
}
.card__content {
  line-height: 1.6;
}
.card__micro {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.card__micro-inner {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.card__date {
  font-size: 14px;
  color: #666;
}
.card__category:not(.status-close):not(.status-open):not(.status-archive) {
  border: 2px solid #000665;
  border-radius: 999em;
  color: #000665;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
}
.card__heading {
  font-size: 18px;
  font-weight: 700;
  color: #000665;
  margin-bottom: 16px;
}
.card__time,
.card__place {
  font-size: 14px;
}
.tags {
  margin: 0 auto 40px;
  width: 90vw;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.card__name {
  color: #38474f;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.tags__link {
  border: 1px solid #000665;
  border-radius: 999em;
  color: #000665;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 20px;
  width: fit-content;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .tags {
    gap: 10px;
  }
}
/* お役立ち情報、レポート */
.page-template-page-useful-info .card-wrapper,
.report-wrapper .card-wrapper,
.normal-archive-wrapper .card-wrapper,
.glossary-archive-wrapper .card-wrapper {
  grid-template-columns: repeat(4, 1fr);
  gap: 60px 40px;
}
@media (max-width: 1380px) {
  .page-template-page-useful-info .card-wrapper,
  .report-wrapper .card-wrapper,
  .normal-archive-wrapper .card-wrapper,
  .glossary-archive-wrapper .card-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
@media (max-width: 1100px) {
  .page-template-page-useful-info .card-wrapper,
  .report-wrapper .card-wrapper,
  .normal-archive-wrapper .card-wrapper,
  .glossary-archive-wrapper .card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 660px) {
  .page-template-page-useful-info .card-wrapper,
  .report-wrapper .card-wrapper,
  .normal-archive-wrapper .card-wrapper,
  .glossary-archive-wrapper .card-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 1024px) {
  .card-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}
@media (max-width: 660px) {
  .archive-title {
    font-size: 1.8rem;
    margin: 0 auto 30px;
  }
  .card-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
/* リッチフォーマット */
.post-type-archive-seminar .card__link,
.post-type-archive-seminar-archive .card__link,
.post-type-archive-case .card__link,
.post-type-archive-eguide .card__link,
.page-template-front-page .card__link,
.page-id-824 .card__link {
  background-color: #fff;
  border-bottom: 3px solid #2ae41e;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  color: inherit;
}
.post-type-archive-seminar .card__content,
.post-type-archive-seminar-archive .card__content,
.post-type-archive-case .card__content,
.post-type-archive-eguide .card__content,
.page-template-front-page .card__content,
.page-id-824 .card__content {
  padding: 0 20px 20px;
}
/* =============================================
絞り込みフォーム
============================================= */
.filter-form {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto 50px;
  display: flex;
  gap: 60px 40px;
  align-items: end;
  justify-content: center;
  background-color: unset;
  border: 0;
  border-radius: 10px;
}
.filter-form__button-wrapper {
  height: 42px;
}
.filter-form__label {
  font-weight: 700;
  margin-bottom: 6px;
}
.filter-form__select {
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}
.filter-form__button {
  height: 100%;
}
@media (max-width: 767px) {
  .filter-form {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .filter-form__group {
    width: 100%;
  }
}
/* =============================================
詳細ページ
============================================= */
.body-container--blog-post.blog {
  width: 100%;
}
[class*="wp-block-"]:not(:last-child) {
  margin-bottom: 15px;
}
.ez-toc-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 15px;
  padding-top: 30px;
  text-decoration: underline 2px solid #2ae41e;
  text-underline-offset: 6px;
}
.ez-toc-list {
  list-style: none;
}
.ez-toc-link {
  text-decoration: none !important;
  font-weight: 700 !important;
}
.ez-toc-link:hover {
  text-decoration: underline !important;
}
.wp-block-flexible-table-block-table td {
  border: solid 1px #ccc !important;
}
.wp-block-flexible-table-block-table th {
  background-color: #000665 !important;
  color: #fff !important;
  border-bottom: solid 1px #fff !important;
  font-weight: 700;
  text-align: center !important;
}
.wp-block-buttons > .wp-block-button {
  margin: 0 auto;
}
.wp-block-buttons .wp-block-button__link.wp-block-button__link {
  background: #d53714;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2em;
  border-radius: 6px;
  margin: 0;
}
.wp-block-separator {
  border: none;
  border-top: 1px solid #d0d0d0;
}
.wp-block-lazyblock-article-banner img {
  margin: 0 !important;
}
.form-wrapper {
  margin-top: 50px;
}
.wp-block-list,
.ez-toc-list {
  list-style-position: outside;
  padding-left: 1.5em;
}
.ez-toc-list {
  list-style: circle;
}
/* ブログ */
.body-container--blog-post.blog {
  width: 90vw;
  max-width: 800px;
}
@media (max-width: 1024px) {
  .body-container-wrapper.blog {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-width: unset;
  }
}
/* ホワイトペーパー */
.single-eguide .article-image {
  margin-bottom: 40px;
}
.case-info-wrapper .case-info .case-info__company-name {
  color: #000666;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
}
.attachment-post-thumbnail {
  margin-bottom: 15px;
}
/* =============================================
資料ダウンロードフォーム
============================================= */
.document-wrapper {
  display: flex;
  gap: 30px;
  width: 90vw;
  margin-inline: auto;
}
.document-wrapper > div {
  width: 50%;
}
.document-heading {
  padding-top: 10px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #000066;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .document-text {
    display: none;
  }
  .document-wrapper > div {
    width: 100%;
  }
}
/* =============================================
404
============================================= */
.four-o-four,
.four-o-four__description {
  text-align: center;
}
.four-o-four__heading {
  margin: 0 auto 30px;
  color: #000665;
}
@media (max-width: 660px) {
  .four-o-four__heading {
    font-size: 1.8rem;
  }
}