@charset "UTF-8";

@import url('../../resource/css/reset.css');
@import url('../../resource/css/footer.css');
@import url(style_header.css);

/* ImageFlux専用のReset設定
 * ======================================== ======================================== */
.imageflux_contents {
  font-size: 14px;
}

.imageflux_contents * {
  border: 0;
  box-sizing: border-box;
  font-family:
    'ヒラギノ角ゴ ProN',
    'Hiragino Kaku Gothic ProN',
    'メイリオ',
    Meiryo,
    'Yu Gothic',
    YuGothic,
    Verdana,
    Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

main a {
  color: #447af2;
}

main a:hover {
  text-decoration: underline;
}

.inner {
  max-width: max(60vw, 960px);
  margin: auto;
}

@media (min-width: 801px) {
  .show_mobile {
    display: none;
  }
}

@media (max-width: 800px) {
  .inner {
    padding: 0 16px;
  }

  .hide_mobile {
    display: none;
  }
}

/*
 */

.s-header__pannel {
  background-color: #447af2;
}

.s-header__logo {
  width: 164px;
}

.s-gnav {
  display: flex;
  align-items: center;
  gap: 33px;
}

.s-gnav__list {
  gap: 0;
}

.s-gnav__list li a {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  padding: 27px 18px 29px;
}

.s-gnav__list li a.-newtab::after {
  background: url('data:image/svg+xml;charset=utf-8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.3582 0.785156H3.2146C2.62302 0.785156 2.14307 1.26511 2.14307 1.85669V2.92822H1.07153C0.479958 2.92822 0 3.40818 0 3.99976V11.1433C0 11.7349 0.479958 12.2148 1.07153 12.2148H8.21509C8.80666 12.2148 9.28662 11.7349 9.28662 11.1433V10.0718H10.3582C10.9497 10.0718 11.4297 9.59182 11.4297 9.00024V1.85669C11.4297 1.26511 10.9497 0.785156 10.3582 0.785156ZM8.21509 11.1433H1.07153V6.5H8.21509V11.1433ZM10.3582 9.00024H9.28662V3.99976C9.28662 3.40818 8.80666 2.92822 8.21509 2.92822H3.2146V1.85669H10.3582V9.00024Z" fill="%23fff"/></svg>');
}

.s-gnav__list li button {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  padding: 27px 18px 29px;
}

.s-gnav__list li button::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-5.89082e-08 1.34766L1.43056 -4.62005e-07L6 4.30467L10.5694 -6.25316e-08L12 1.34766L6 7L-5.89082e-08 1.34766Z" fill="%23fff"/></svg>');
}
.s-gnav__cta a {
  display: block;
  background: #fff;
  border-radius: 4px;
  color: #447af2;
  padding: 10px 24px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}
.s-gnav__list li button[aria-expanded="true"] {
  background: #fff;
  color: #447af2;
}

.s-drawer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 52px 0 62px;
  border-top: none;
}

.s-drawer__title {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 1.2;
}

/* ボタン */
.s-header__menu {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 8px;
  top: 8px;
  background: none;
  border: none;
}

.s-header__menu::before,
.s-header__menu::after {
  content: "";
  display: block;
  position: absolute;
  width: 22px;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 1px solid #fff;
  transition: all 500ms ease;
  outline: 0;
}

.s-header__menu span {
  border: 1px solid #fff;
  position: absolute;
  width: 22px;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 1px solid #fff;
  transition: all 500ms ease;
}

.s-header__menu::before {
  top: -16px;
}
.s-header__menu::after {
  bottom: -16px;
}

.s-header__menu[aria-expanded="true"]::before {
  transform: rotate(45deg);
  top: 0;
}
.s-header__menu[aria-expanded="true"]::after {
  transform: rotate(135deg);
  bottom: 0;
}
.s-header__menu[aria-expanded="true"] span {
  opacity: 0;
}

@media (min-width: 960px) {
  .s-gnav__list li a:hover {
    color: #fff;
    opacity: .7;
  }
  .s-gnav__list li a:hover.-newtab::after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.3582 0.785156H3.2146C2.62302 0.785156 2.14307 1.26511 2.14307 1.85669V2.92822H1.07153C0.479958 2.92822 0 3.40818 0 3.99976V11.1433C0 11.7349 0.479958 12.2148 1.07153 12.2148H8.21509C8.80666 12.2148 9.28662 11.7349 9.28662 11.1433V10.0718H10.3582C10.9497 10.0718 11.4297 9.59182 11.4297 9.00024V1.85669C11.4297 1.26511 10.9497 0.785156 10.3582 0.785156ZM8.21509 11.1433H1.07153V6.5H8.21509V11.1433ZM10.3582 9.00024H9.28662V3.99976C9.28662 3.40818 8.80666 2.92822 8.21509 2.92822H3.2146V1.85669H10.3582V9.00024Z" fill="%23ffffff"/></svg>');
  }
  [data-sp-show][aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 959px) {
  [data-sp-hide][aria-hidden="true"] {
    display: none;
  }

  .s-header {
    display: block;
  }

  .s-header__row {
    padding: 0;
  }
  .s-header__sp-head {
    width: 100%;
    padding: 16px 20px;
    background: #447af2;
    position: relative;
    z-index: 1;
  }
  .s-header__logo {
    width: 148px;
  }

  .s-gnav {
    position: absolute;
    display: block;
    left: 0;
    top: 62px;
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    transition: .5s;
  }

  .s-gnav[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
  }

  .s-gnav__list {
    flex-wrap: wrap;
  }

  .s-gnav__list li {
    width: 100%;
    border-bottom: solid 1px #ccc;
  }

  .s-gnav__list li:nth-last-child(-n+2) {
    width: 50%;
    border-bottom: none;
  }

  .s-gnav__list li:nth-last-child(-n+2) a {
    justify-content: center;
    font-size: 15px;
  }

  .s-gnav__list li a.-newtab::after {
    display: none;
  }

  .s-gnav__list li:last-child {
    border-left: solid 1px #ccc;
  }

  .s-gnav__list li a {
    padding: 18px 17px;
    font-weight: 400;
    line-height: 1.2;
    gap: 5px;
  }

  .s-gnav__list li:nth-child(-n+3) a {
    font-size: 16px;
  }

  .s-gnav__list li a .sub_text {
    font-size: 13px;
    font-weight: 400;
  }
}

/* トライアル開始までの流れ
 * ---------------------------------------- */
.layout_try {
  min-height: 400px;
  padding: 56px 0;
  background-color: #faf9f6;
}

.layout_try h3 {
  margin-bottom: 32px;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
}

.trial_step_list {
  display: flex;
  margin: 32px 0;
  justify-content: space-around;
}

.trial_step {
  position: relative;
  width: 296px;
  height: 160px;
  padding: 24px 0;
  background-color: #fff;
  text-align: center;
}

.trial_step::before,
.trial_step::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  border: 0 solid;
  border-width: 80px 16px;
}

.trial_step::before {
  border-color: #fff;
  border-left-color: #faf9f6;
  left: -16px;
}

.trial_step::after {
  border-color: #faf9f6;
  border-left-color: #fff;
  right: -16px;
}

.step_title {
  margin-bottom: 8px;
  color: #447af2;
}

.step_title .step_number {
  display: block;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
}

.step_title .main_text {
  display: block;
  font-size: 16px;
  line-height: 32px;
}

.layout_try .footnote {
  color: #464646;
  font-size: 13px;
  line-height: 24px;
}

@media (max-width: 800px) {
  .layout_try {
    min-height: auto;
    padding: 48px 0;
  }

  .trial_step_list {
    flex-direction: column;
    margin-bottom: 8px;
    align-items: center;
  }

  .trial_step {
    width: 100%;
    max-width: 342px;
    height: auto;
    min-height: 120px;
    margin-bottom: 8px;
    padding: 24px;
    text-align: left;
  }

  .trial_step::before,
  .trial_step::after {
    display: none;
  }

  .trial_step br {
    display: none;
  }
}

/* トライアル申込み、お問い合わせ
 * ---------------------------------------- */
.layout_call_to_action {
  padding: 56px 0;
  background: #4d85f4 no-repeat bottom center;
  background-image: url(../images/common/img_bg_footer.svg);
  background-size: 800px;
}

.layout_call_to_action h3 {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.try_signup_list {
  display: flex;
  margin: 40px 0;
  justify-content: center;
}

.try_signup_list a {
  display: flex;
  width: 268px;
  height: 64px;
  margin: 0 8px;
  border-radius: 2px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: 17px;
  justify-content: center;
  align-items: center;
}

.try_signup_list .signup_trial a {
  background-color: #fff;
  color: #0358ff;
}

.try_signup_list .signup_trial a:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.signup_contact a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.layout_call_to_action .footnote {
  color: #fff;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 800px) {
  .layout_call_to_action h3 {
    line-height: 32px;
  }

  .try_signup_list {
    flex-direction: column;
    align-items: center;
  }

  .try_signup_list .signup_trial {
    margin-bottom: 24px;
  }
}

/* ImageFlux フッターナビ（資料ダウンロード、ドキュメント、サポートサイト他）
 * ---------------------------------------- */
.layout_footer_navi {
  height: 144px;
  min-height: 144px;
  background-color: #fff;
}

.layout_footer_navi .inner {
  display: flex;
  height: 100%;
  align-items: center;
}

.layout_footer_navi .imageflux_logo {
  flex: 0 0 200px;
}

.layout_footer_navi .imageflux_logo img {
  width: 148px;
  height: 32px;
}

.footer_navi {
  display: flex;
  flex: 1 1 auto;
}

.document_list {
  display: flex;
  flex: 1 1 auto;
}

.document_list li {
  display: flex;
  width: 120px;
  height: 64px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
}

.document_list a {
  color: #447af2;
}

.document_list a:hover {
  opacity: 0.7;
}

.document_list .document_image,
.document_list .document_live {
    display: none;
}


.feedback_list {
  display: flex;
  flex: 0 0 354px;
  justify-content: space-between;
}

.feedback_list a {
  display: flex;
  width: 170px;
  height: 60px;
  position: relative;
  border: 1px solid #ebe9e2;
  color: #447af2;
  font-size: 13px;
  font-weight: bold;
  align-items: center;
}

.feedback_list a:hover {
  background-color: #f0f0f0;
}

.feedback_list i,
.feedback_list img {
  display: block;
  position: absolute;
  left: 16px;
}

.feedback_list i {
  font-size: 32px;
}

.feedback_list img {
  margin-top: -4px;
  width: 20px;
  height: 32px;
}

.twitter .main_text {
  display: block;
  margin-left: 56px;
}

.feedback_list .fa-twitter:before {
  content: '𝕏' !important;
  font-family: sans-serif !important;
  font-weight: bold;
}

.feedback .main_text {
  display: block;
  margin-left: 48px;
}

@media (max-width: 800px) {
  .layout_footer_navi {
    height: auto;
    padding: 32px 0;
  }

  .layout_footer_navi .inner {
    flex-direction: column;
  }

  .layout_footer_navi .imageflux_logo {
    flex: 0 0 auto;
    width: 100%;
  }

  .footer_navi {
    flex-direction: column;
  }

  .document_list {
    margin: 24px 0;
  }

  .feedback_list {
    flex: 0 0 auto;
  }
}

/* ImageFlux コンテンツエリア
 * ======================================== ======================================== */

/* 共通指定
 * ---------------------------------------- */
.behave_as_button {
  display: flex;
  border: 1px solid #447af2;
  border-radius: 3px;
  background-color: #fff;
  color: #447af2;
  justify-content: center;
  align-items: center;
}

.behave_as_button:hover {
  background-color: #f9f9f9;
  text-decoration: none;
}

@media (max-width: 800px) {
  .imageflux_contents h2 {
    padding: 56px 0 32px;
    font-size: 24px;
  }
}

/* テキスト  */
.imageflux_contents .maxheadline {
  padding-bottom: max(2vw, 32px);
  text-align: center;
}

.imageflux_contents .maxheadline .text {
  color: #467AEC;
  font-size: max(2vw, 32px);
}

.imageflux_contents .headline {
  padding-top: max(2vw, 32px);
  padding-bottom: max(1vw, 16px);
  text-align: center;
}

.imageflux_contents .headline .text {
  font-size: max(1.5vw, 24px);
  color: #333;
}

.lead {
  font-size: max(1vw, 16px);
  line-height: 1.5;
}

.center {
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .pc {
    display: none;
  }

  .lead {
    display: block;
    padding: 0 1rem;
  }
}

/* ヒーローエリア
 * ---------------------------------------- */
.layout_hero {
  position: relative;
  min-height: 480px;
  padding-top: 64px;
  background-color: #447af2;
}

.only_top {
  min-height: 400px;
}

.hero_text_only {
  background: #447af2 no-repeat calc(50% - 160px) 0;
  background-image: url(../images/top/img_hero.png);
  background-size: 1400px;
}

.catch_copy {
  margin-bottom: 40px;
  color: #fff;
  font-weight: bold;
}

.catch_copy .sub_text {
  display: block;
  font-size: 24px;
}

.catch_copy .main_text {
  display: block;
  font-size: 32px;
}

.signup_trial .behave_as_button {
  width: 260px;
  height: 56px;
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 800px) {
  .layout_hero {
    padding-top: 32px;
  }

  .hero_text_only {
    background-position: 100% 100px;
    background-size: 1300px;
  }

  .catch_copy {
    font-size: 26px;
  }

  .layout_hero .signup_trial .behave_as_button {
    position: absolute;
    top: 450px;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    box-shadow: 0 3px 6px #00000029;
  }

  .only_top .signup_trial .behave_as_button {
    top: 370px;
  }
}

@media (max-width: 400px) {
  .hero_text_only {
    background-position: calc(50% - 210px) 120%;
    background-size: 800px;
  }
}

/* ニュース
 * ---------------------------------------- */
.layout_news {
  padding-top: max(3vw, 48px);
  padding-bottom: max(5vw, 80px);
}

.news_list {
  margin-bottom: 16px;
}

.news_list li {
  border-bottom: 1px solid #e3e0d8;
  line-height: 24px;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.link_to_sakuranews {
  text-align: right;
}

@media (max-width: 800px) {
  .layout_news h2 {
    padding: 40px 0 24px;
  }

  .news_list li {
    line-height: 24px;
    padding: 16px 0;
  }

  .timestamp {
    display: block;
    margin-bottom: 8px;
  }
}

/* サービスリスト
 * ---------------------------------------- */
.layout_service_summary {
  padding-top: 0;
  padding-bottom: max(5vw, 80px);
}

.service_summary {
  display: flex;
  margin-bottom: max(4vw, 64px);
}

.service_summary:last-child {
  margin-bottom: 0;
}

.service_logo {
  flex: 0 0 224px;
  height: 136px;
  margin-right: 64px;
  border: 1px solid #afafaf;
}

.service_logo a {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.service_logo img {
  height: 50%;
}

.summary_body h3 {
  margin-bottom: 16px;
  color: #1f1f1f;
  font-size: 22px;
  line-height: 36px;
}

.summary_body h3 .sub_text {
  font-size: 15px;
  font-weight: normal;
  vertical-align: baseline;
}

.summary_body p {
  font-size: 15px;
  line-height: 24px;
}

.summary_body .news_text {
  background: #eaf1ff;
  padding: 1.5rem 2rem;
  margin: 0.9rem 0 0.5rem;
}

.summary_body .news_text p span {
  background: #fff;
  color: #447af2;
  font-weight: bold;
  padding: 0.2rem 0.7rem;
  margin-right: 1rem;
}

.summary_body .news_text p a {
  font-weight: bold;
}

.link_to_detail {
  display: flex;
  margin-top: 16px;
  gap: 16px;
}

.link_to_detail .behave_as_button {
  width: 184px;
  height: 44px;
}

@media (max-width: 800px) {
  .layout_service_summary {
    padding-bottom: 56px;
  }

  .service_summary {
    flex-direction: column;
  }

  .service_logo {
    flex: 0 0 132px;
    width: 100%;
    max-width: 336px;
    margin-right: 0;
    margin-bottom: 24px;
  }

  .summary_body .main_text {
    display: block;
    line-height: 28px;
  }

  .link_to_detail {
    flex-direction: column;
    margin-top: 24px;
  }

  .link_to_detail .behave_as_button {
    width: 100%;
  }
}

/* お役立ち情報
 * ---------------------------------------- */
.layout_document {
  padding-top: max(5vw, 80px);
  padding-bottom: max(5vw, 80px);
  padding: 5vw 0;
  background-color: #FAF9F5;
}


.layout_document .btn-area {
  margin-top: max(1vw, 16px);
}


/* .swiper  */
.document-swiper .swiper-slide .click-area {
  min-height: auto;
  height: auto;
}


/* 導入企業
 * ---------------------------------------- */
.layout_trustedby {
  padding-top: max(5vw, 80px);
  padding-bottom: max(5vw, 80px);
  background-color: #f9f8f5;
}

.company_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: max(1vw, 16px);
  margin-bottom: max(1vw, 16px);
}

.company_list li {
  display: flex;
  flex-basis:max(11.5vw, 184px);
  flex-direction: row;
  height: max(6vw, 96px);
  margin-right: max(0.5vw, 8px);
  margin-bottom: max(0.5vw, 8px);
  border: 1px solid #f0eee9;
  background-color: #fff;
  justify-content: center;
  align-items: center;
}

.company_list li img {
  display: block;
  max-height: 100%;
}

.company_list li .logo_stores {
  height: max(1.875vw, 30px);
}

.layout_trustedby .footnote {
  margin-top: 16px;
  color: #464646;
  font-size: 13px;
  line-height: 24px;
}

@media (max-width: 960px) {
  .layout_trustedby {
    padding-bottom: 56px;
  }

  .company_list li {
    flex-basis: calc((100% / 5) - 8px);
    height: 64px;
    margin-right: 8px;
  }

  .company_list li:nth-child(5n) {
    margin-right: 0;
  }

  .company_list li img {
    max-width: 70%;
    max-height: 70%;
  }

  .company_list li .logo_hey {
    height: 32px;
  }

  .company_list .empty {
    display: none;
  }
}



/* 導入企業（画像変換、Livestreming共通）
 * ---------------------------------------- */
.layout_poweredby {
  display: flex;
  background: #fff;
}

.layout_poweredby .inner {
  display: flex;
  min-height: 136px;
  margin: 0 auto;
  align-items: center;
}

.layout_poweredby ul {
  display: flex;
  margin: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

.layout_poweredby li {
  color: #9d9699;
  font-size: 12px;
  margin: 0 16px;
}

.layout_poweredby li img {
  max-height: 48px;
  position: relative;
  vertical-align: middle;
}

.layout_poweredby li .hey {
  height: 40px;
}

.layout_poweredby li .omunibus {
  max-width: 146px;
}

@media (max-width: 800px) {
  .layout_poweredby .inner {
    flex-direction: column;
    padding: 32px 0;
  }

  .layout_poweredby ul {
    width: 100%;
  }

  .layout_poweredby li {
    margin: 0;
    text-align: center;
  }

  .layout_poweredby .title {
    padding: 24px 0;
    text-align: center;
  }

  .layout_poweredby li img {
    max-width: 100%;
    max-height: 28px;
  }

  .poweredby {
    flex-direction: column;
  }

  .trustedby {
    flex-wrap: wrap;
  }

  .trustedby li {
    display: flex;
    width: 50%;
    max-width: 160px;
    min-height: 64px;
    justify-content: center;
    align-items: center;
  }

  .trustedby .title {
    width: 100%;
    max-width: 100%;
  }
}

/* お客様の声（画像変換、Livestreming共通）
 * ---------------------------------------- */
.layout_uservoice {
  padding-bottom: max(5vw, 80px);
  background-color: #fff;
  font-size: max(1vw, 16px);
  overflow: hidden;
}

.layout_uservoice h2 {
  color: #52474d;
}

.layout_voices {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.layout_voices li {
  flex: 1 1 100%;
  min-width: 232px;
  margin-right: 16px;
  padding: 0 16px 24px;
  border-radius: 2px;
  background: white;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.layout_voices li:last-child {
  margin-right: 0;
}

.user-logo {
  display: flex;
  width: 100%;
  max-width: 216px;
  min-height: 70px;
  margin: 32px auto 40px;
  justify-content: center;
  align-items: center;
}

.user-logo img {
  display: block;
  max-width: 100%;
  max-height: 70px;
}

.user-logo .f_hey {
  max-height: 56px;
}

.layout_voices li p {
  text-align: left;
  color: #52474d;
  padding: 0 12px;
  line-height: 1.8;
}

.layout_voices li a {
  text-align: left;
  color: #447af2;
  padding: 0 12px;
  line-height: 1.8;
}

@media (max-width: 800px) {
  .layout_voices {
    flex-direction: column;
  }

  .layout_voices li {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    padding-bottom: 32px;
  }

  .layout_voices li a {
    display: block;
    text-align: right;
  }
}

/* よくある質問（画像変換、LiveAppで共通）
 * ---------------------------------------- */
.layout_faq {
  padding-bottom: 104px;
}

.faq {
  padding-left: 32px;
  border-bottom: 1px solid #e8e7de;
}

.question {
  position: relative;
  padding: 24px 32px 16px 0;
  color: #447af2;
  font-size: 16px;
  line-height: 32px;
/*  cursor: pointer;*/
}

.question::before {
  content: "Q";
  display: inline-block;
  margin-right: 32px;
  font-size: 21px;
  font-weight: bold;
}

.question .text {
  vertical-align: top;
}

.answer {
  position: relative;
  padding: 8px 0 16px 56px;
  font-size: 16px;
}

.answer::before {
  content: "A";
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 0;
  font-size: 21px;
  font-weight: bold;
}

.answer p {
  margin-bottom: 8px;
}

.link_to_faq .behave_as_button {
  width: 232px;
  height: 56px;
  margin: 48px auto 0;
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 800px) {
  .faq {
    padding-left: 0;
  }

  .question {
    margin-left: 32px;
    padding: 32px 32px 24px 0;
    text-indent: -16px;
  }

  .question::before {
    margin-right: 8px;
  }

  .question::after {
    right: 8px;
  }

  .answer {
    padding-left: 32px;
  }
}

/* 導入事例
 * ---------------------------------------- */
.layout_case {
  padding-top: max(5vw, 80px);
  padding-bottom: max(5vw, 80px);
  background-color: #fff;
}

.layout_case .area {
  width: max(60vw, 960px);
  margin: 0 auto;
}

.layout_case .item-list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: max(1vw, 16px);
  flex-wrap: wrap;
  flex-direction: row;
}

.layout_case .item-list .item {
  width: calc((100% / 3) - max(1vw, 16px));
  display: flex;
  flex-direction: column;
  background-color: #fff;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: max(2vw, 32px);
  box-shadow: 3px 6px 18px -9px rgba(25,57,128,.36);
  border-radius: max(0.5vw, 8px);
  min-height: max(26.25vw, 420px);
}

.layout_case .item-list .item:nth-of-type(n + 10) {
    /*display: none;*/
}

.layout_case .item-list .item .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.layout_case .item-list .item .image {
  height: max(12.5vw, 200px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top-left-radius: max(0.5vw, 8px);
  border-top-right-radius: max(0.5vw, 8px);
}

.layout_case .item-list .item .image img {
  width: 105%;
  transition: all 0.2s;
}

.layout_case .item-list .item .click-area {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  height: 100%;
}

.layout_case .item-list .item .click-area:hover .image img {
  opacity: 0.6;
}


.layout_case .item-list .item .text-area {
  min-height: max(10vw, 160px);
}

.layout_case .item-list .item .label {
  padding-top: max(1vw, 16px);
  padding-right: max(1vw, 16px);
  padding-bottom: 0;
  padding-left: max(1vw, 16px);
  display: block;
  color: #333;
  font-size: max(0.75vw, 12px);
}

.layout_case .item-list .item .title {
  padding-top: max(0.25vw, 4px);
  padding-bottom: max(0.5vw, 8px);
  padding-left: max(1vw, 16px);
  padding-right: max(1vw, 16px);
  margin: 0;
  line-height: 1.5;
  display: block;
}

.layout_case .item-list .item .title .text {
  font-size: max(1vw, 16px);
  font-weight: bold;
  color: #333;
}

.layout_case .item-list .item .click-area:hover .title .text {
  color: #467AEC;
}

.layout_case .item-list .item .lead {
  font-size: max(0.75vw, 12px);
  color: #999;
  padding-top: 0;
  padding-right: max(1vw, 16px);
  padding-bottom: 0;
  padding-left: max(1vw, 16px);
  line-height: 1.75;
}

.layout_case .item-list .service-label {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto ;
  text-align: center;
}

.layout_case .item-list .service-label .text {
  padding-top: max(0.25vw, 4px);
  padding-bottom: max(0.25vw, 4px);
  padding-right: max(1.5vw, 24px);
  padding-left: max(1.5vw, 24px);
  border-radius: max(1.25vw, 20px);
  color: #999;
  line-height: 1.5;
  height: auto;
  border: 1px solid #ccc;
  width: auto;
  font-size: max(0.65vw, 12px);
}


@media screen and (max-width: 960px) {
  .layout_case .area {
    width: auto;
    padding: 0 24px;
  }

  .layout_case .item-list .item {
    width: calc(50% - max(1vw, 16px));
  }

  .layout_case .item-list .item .inner {
    padding-bottom: 1.5rem;
  }

  .layout_case .item-list .item .lead {
    padding-bottom: 16px;
  }

  .layout_case .item-list .service-label .text {
    height: auto;
    border-radius: 23px;
  }
}

@media screen and (max-width: 767px) {
  .company_list li {
    flex-basis: calc((100% /3 ) - 8px );
  }

  .company_list li:nth-child(3n) {
    margin-right: 0;
  }

  .company_list li:nth-child(5n) {
    margin-right: 8px;
  }

  .layout_case .item-list .item {
    width: auto;
    height: auto;
  }

  .layout_case .item-list .item .image {
    height: auto;
  }
}


/* コラム
 * ---------------------------------------- */
.layout_column {
  padding-top: max(5vw, 80px);
  padding-bottom: max(5vw, 80px);
  background-color: #FAF9F5;
}

@media screen and (max-width: 1000px) {
  .layout_column .pc {
    display: none;
  }
}

/* .swiper  */

.swiper .swiper-pages {
  text-align: center;
  position: static;
  padding-top: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  position: static;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  position: static;
  z-index: 1000;
  background-color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #447af2;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 2px solid #447af2;
  box-shadow: 3px 6px 18px -9px rgba(25,57,128,.36);
}

.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
  font-size: 16px;
  font-weight: bold;
}

.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
  background-color: #447af2;
  color: #fff;
}


.swiper .swiper-pages .swiper-pagination {
  display: none;
}

.btn-area {
  width: max(15vw, 240px);
  margin-top: max(1.5vw, 24px);
  margin-bottom: max(3vw, 48px);
  margin-right: auto;
  margin-left: auto;
}

.btn-area .click-area {
  background: #fff;
  border: 2px solid #447af2;
  text-align: center;
  border-radius: max(1.5vw, 24px);
  height: max(3vw, 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
  box-shadow: 3px 6px 18px -9px rgba(25,57,128,.36);
  line-height: 1;
  text-decoration: none;
}

.btn-area .click-area:hover {
  background-color: #447af2;
}

.btn-area .click-area .text {
  font-size: max(1vw, 16px);
  font-weight: bold;
  color: #447af2;
}

.btn-area .click-area:hover .text {
  color: #fff;
}

.swiper-slide .click-area {
  display: block;
  width: 100%;
  min-height: max(21vw, 336px);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0.5vw 1vw rgba(193,200,222,.3);
  text-decoration: none;
  border-radius: max(1vw, 16px);
  overflow: hidden;
  background-color: #fff;
}

.swiper-slide .click-area img {
  transition: all .2s ease-in-out;
  width: 100%;
}

.swiper-slide .click-area:hover img {
  opacity: 0.8;
}

.swiper-slide .click-area .title {
  line-height: 1em;
  margin: 0;
  border: none;
  min-height: auto;
  background: none;
  display: block;
  padding: max(1.25vw, 24px);
  text-align: left;
  display: block;
  text-decoration: none;
}

.swiper-slide .click-area .title .text {
  font-size: max(1vw, 16px);
  line-height: 1.75;
  color: #333;
  text-decoration: none;
  font-weight: normal;
  margin: 0;
  padding: 0;
  border: none;
  transition: all 0.2s ease-in-out;
  text-align: left;
}

.swiper-slide .click-area:hover {
  text-decoration: none;
}

.swiper-slide .click-area:hover .title .text {
  color: #447af2;
}

@media screen and (max-width: 1000px) {
  .layout_column .btn-area {
    width: 25%;
  }
}

@media screen and (max-width: 767px) {
  .layout_column .btn-area {
    width: auto;
    margin: 2rem 4rem;
  }
}