@charset "UTF-8";
@import url('//fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');
@import url(style_header.css);

/* ImageFlux専用のReset設定
 * ======================================== ======================================== */
.imageflux_contents {
  font-size: 15px;
  position: relative;
}
.imageflux_contents::before {
  content: "";
  display: block;
  width: 100%;
  height: 86px;
  background: #447AF2;
  position: absolute;
  top: 0;
  left: 0;
}

.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%;
}

.layout_main {
  /* overflow: hidden; */
}

.inner {
  max-width: 960px;
  margin: auto;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 801px) {
  .show_mobile {
    display: none;
  }
}
@media (max-width: 800px) {
  .inner {
    padding: 0 15px;
  }
  .hide_mobile {
    display: none;
  }
}
/* ImageFlux 読み込みヘッダ
 * ======================================== ======================================== */
.imageflux_header {
  position: sticky;
  top: 0;
  padding: 13px 0 22px;
  background-color: #447af2;
  z-index: 999;
}
.imageflux_header.is_sticky {
  padding: 5px 0;
  margin: 0 0 25px;
}
.imageflux_header.is_sticky .signup_login {
  display: none;
}

.imageflux_header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

@media (max-width: 959px) {
  .imageflux_header {
    padding: 0;
  }
  .imageflux_header.is_sticky {
    padding: 0;
    margin: 0;
  }
  .imageflux_header.is_sticky .signup_login {
    display: block;
  }
}
/* ImageFlux ロゴ
 * ---------------------------------------- */
.imageflux_main_logo {
  flex-shrink: 0;
}
.imageflux_main_logo a {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  overflow: visible;
}
.imageflux_main_logo span {
  font-size: 18px;
  line-height: .9;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

@media (max-width: 959px) {
  .imageflux_header {
    min-height: auto;
    padding: 0;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .imageflux_header .inner {
    display: block;
  }
  .imageflux_main_logo {
    padding: 17px 20px;
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 101;
  }

  .imageflux_main_logo a {
    font-size: 13px;
  }
}
/* グローバルナビ
 * ---------------------------------------- */
.global_navi_inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.global_navi_list {
  display: flex;
  justify-content: space-between;
  margin: 0 -12px;
  flex-shrink: 0;
}

.global_navi_item {
  position: relative;
  margin: 0 12px;
}
.global_navi_item:hover .subnavi {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.global_navi_link {
  display: flex;
  align-items: center;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.global_navi_link.toggle::after {
  content: "";
  display: block;
  width: 9px;
  height: 6px;
  background: url("../images/image/common/icon_arrow.svg") no-repeat center center;
  background-size: 100% 100%;
  margin: 0 0 0 5px;
}

.subnavi {
  position: absolute;
  top: 50px;
  left: 0;
  padding: 15px 0;
  min-width: 154px;
  background: #fff;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.36);
  transform: translateY(-10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 1;
}
.subnavi::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  left: 15px;
  top: -10px;
}

.subnavi_item a {
  display: block;
  padding: 7.5px 15px;
  color: #447AF2;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* サインアップナビ
 * ---------------------------------------- */
.signup_navi {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0 40px;
  position: relative;
}
.signup_navi li {
  margin: 0 5px;
}
.signup_navi li a {
  color: #fff;
  font-size: 13px;
  transition: all 0.3s;
}
.signup_navi li.signup_trial {
  width: 115px;
}
.signup_navi li.signup_trial a {
  border: solid 1px #fff;
}
.signup_navi li.signup_trial a:hover {
  opacity: 1;
  background: #fff;
  color: #447AF2;
}
.signup_navi li.signup_dl {
  width: 124px;
  margin-right: 0;
}
.signup_navi li.signup_dl a {
  background: #ECFF12;
  color: #1650D0;
}
.signup_navi li.signup_dl a:hover {
  opacity: 1;
  border: solid 1px #fff;
  background: none;
  color: #fff;
}
.signup_navi li.signup_login {
  width: auto;
  position: absolute;
  bottom: -32px;
  margin-right: 0;
}
.signup_navi li.signup_login a {
  font-weight: 600;
}
.signup_navi li.signup_login i {
  margin: 0 0 0 5px;
}
.signup_navi li:not(.signup_login) a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 4px;
  font-weight: 700;
}

@media (min-width: 960px) {
  .global_navi_link {
    transition: opacity 0.3s;
  }
  .global_navi_link:hover {
    opacity: 0.7;
  }
  .subnavi_item a:hover {
    background: #f6f6f6;
  }
  .signup_navi li.signup_login a {
    transition: opacity 0.3s;
  }
  .signup_navi li.signup_login a:hover {
    opacity: 0.7;
  }
  .sp_site_navi {
    display: none;
  }
}
/* レスポンシブ表示のハンバーガーメニュー
 * ---------------------------------------- */
@media (max-width: 959px) {
  .global_navi {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 0 200px;
    position: fixed;
    top: -100%;
    opacity: 0;
    visibility: hidden;
    background: #F9F9F6;
    transition: top 0.4s, opacity 0s 0.4s, visibility 0s 0.4s;
    overflow: auto;
    z-index: 100;
    overscroll-behavior: contain;
  }
  .is_open .global_navi {
    opacity: 1;
    visibility: visible;
    transition: top 0.4s;
    top: 50px
  }
  .global_navi_inner {
    display: block;
    height: calc(100vh - 190px);
  }
  .global_navi_list {
    display: block;
    margin: 0;
  }
  .global_navi_item {
    margin: 0;
    border-bottom: solid 1px #D9DFED;
  }
  .global_navi_link {
    background: #3F4042;
    font-size: 15px;
    padding: 12px 15px 11px;
    position: relative;
  }
  .global_navi_link::after {
    content: "";
    display: block;
    width: 9px;
    height: 14px;
    background: url('data:image/svg+xml;charset=utf-8,<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.12363 13.1926L2.12367 13.1927L2.12847 13.1872L7.37497 7.2395L7.67134 6.90352L7.36977 6.57219L2.12649 0.811406C1.95622 0.620913 1.71241 0.5 1.44301 0.5C1.17322 0.5 0.929064 0.621264 0.75874 0.812276C0.674112 0.906215 0.609885 1.01491 0.566914 1.1304C0.523627 1.24675 0.5019 1.36995 0.5019 1.49321C0.5019 1.61648 0.523627 1.73968 0.566914 1.85602C0.610225 1.97244 0.675084 2.08177 0.760516 2.17608L0.760494 2.1761L0.764182 2.18008L5.14775 6.91462L0.758849 11.8234C0.75847 11.8238 0.758092 11.8242 0.757714 11.8246C0.672766 11.9189 0.608221 12.028 0.565062 12.1441C0.521709 12.2608 0.5 12.3842 0.5 12.5076C0.5 12.631 0.521696 12.7545 0.565062 12.8711C0.608413 12.9878 0.673341 13.0974 0.758852 13.1919L0.759517 13.1926C0.930647 13.381 1.17375 13.5 1.44158 13.5C1.70944 13.5 1.95252 13.381 2.12363 13.1926Z" fill="white" stroke="white"/></svg>') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
  }
  .global_navi_link.toggle::before,
  .global_navi_link.toggle::after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    width: 10px;
    height: 2px;
    margin: auto;
    background: #fff;
    transition: transform 0.3s;
  }
  .global_navi_link.toggle::before {
    transform: rotate(90deg);
  }
  .global_navi_link.toggle.is_open::before {
    transform: rotate(360deg);
  }
  .global_navi_link.toggle.is_open::after {
    opacity: 0;
  }
  .subnavi {
    display: none;
    position: static;
    transform: none;
    padding: 0;
    min-width: inherit;
    background: #fff;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
    z-index: 1;
  }
  .subnavi::before {
    display: none;
  }
  .subnavi_item {
    margin: 0;
    border-bottom: solid 1px #D9DFED;
  }
  .subnavi_item a {
    display: block;
    padding: 11px 15px 12px;
    white-space: wrap;
  }
  .signup_navi {
    margin: 0;
    flex-wrap: wrap;
  }
  .signup_navi li {
    margin: 0;
  }
  .signup_navi li a {
    color: #fff;
    font-size: 15px;
    transition: all 0.3s;
  }
  .signup_navi li.signup_trial {
    width: 100%;
  }
  .signup_navi li.signup_trial a {
    background: #fff;
    color: #447AF2;
  }
  .signup_navi li.signup_trial a:hover {
    opacity: 1;
    background: #fff;
    color: #447AF2;
  }
  .signup_navi li.signup_dl {
    width: 100%;
  }
  .signup_navi li.signup_dl a:hover {
    opacity: 1;
    background: #ECFF12;
    color: #1650D0;
  }
  .signup_navi li.signup_login {
    width: 100%;
    position: static;
    text-align: center;
    margin: 10px 0 0;
  }
  .signup_navi li:not(.signup_login) {
    flex: 0 0 50%;
  }
  .signup_navi li:not(.signup_login) a {
    height: 60px;
    border-radius: 0;
  }

  .sp_site_navi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 0 0;
  }

  .sp_site_navi li a {
    display: flex;
    color: #447AF2;
    padding: 6px 17px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'Yu Gothic', YuGothic, Verdana, Helvetica, sans-serif;
    position: relative;
  }
  .sp_site_navi li a::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    background: url('data:image/svg+xml;charset=utf-8,<svg width="5" height="9" viewBox="0 0 5 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.62792 8.89234C0.558243 8.96139 0.465021 9 0.367986 9C0.27095 9 0.177713 8.96139 0.108036 8.89234C0.0738455 8.85833 0.0466698 8.81765 0.0281132 8.77271C0.00955665 8.72778 0 8.67949 0 8.63071C0 8.58194 0.00955665 8.53368 0.0281132 8.48874C0.0466698 8.44381 0.0738455 8.40313 0.108036 8.36911L4.01976 4.43156L0.109228 0.630291C0.0751657 0.596451 0.0480991 0.555982 0.0296097 0.511256C0.0111203 0.466529 0.00158364 0.418467 0.00158364 0.36991C0.00158364 0.321353 0.0111203 0.273291 0.0296097 0.228565C0.0480991 0.183838 0.0751657 0.143339 0.109228 0.1095C0.178342 0.0393556 0.27179 0 0.369177 0C0.466564 0 0.559997 0.0393556 0.629112 0.1095L5 4.43156L0.62792 8.89234Z" fill="%233C6FF0"/></svg>') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 17px;
    margin: auto;
  }

  .mobile_navi_toggle {
    display: block;
    height: 48px;
    margin: 0;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 180;
  }
  .switch {
    display: block;
    position: absolute;
    right: 0;
    width: 48px;
    height: 100%;
    background-color: transparent;
  }
  .switch::before,
  .switch button,
  .switch button:focus,
  .switch::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;
  }
  .switch::before {
    top: -16px;
  }
  .switch::after {
    bottom: -16px;
  }
  .is_open .switch::before {
    top: 0;
    transform: rotate(45deg);
  }
  .is_open .switch button {
    width: 0;
  }
  .is_open .switch::after {
    bottom: 0;
    transform: rotate(135deg);
  }
}
/* ImageFlux 読み込みフッター
 * ======================================== ======================================== */
/* 下層ページ共通 > 関連情報メニュー
* ---------------------------------------- */
.layout_footer_info {
  background: #F8F8F8;
  padding: 50px 0 75px;
}

.info_headline {
  margin: 0 0 25px;
  font-size: 21px;
  line-height: 1.4;
  color: #222;
  text-align: center;
}

.info_list {
  display: flex;
  justify-content: center;
}
.info_list li {
  width: 380px;
  margin: 0 22px;
}
.info_list li a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 30px 30px 30px 0;
  background: #fff;
  border: solid 2px #447AF2;
  border-radius: 8px;
  color: #000;
}

.info_icon {
  width: 125px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.info_icon.icon_faq img {
  width: 80px;
}
.info_icon.icon_flow img {
  width: 63px;
}
.info_icon.icon_plan img {
  width: 57px;
  transform: translateX(5px);
}
.info_icon.icon_case img {
  width: 75px;
}
.info_icon.icon_doc img {
  width: 55px;
}
.info_icon.icon_usecase img {
  width: 75px;
}
.info_icon.icon_about img {
  width: 75px;
}

.info_title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #447AF2;
}

.info_lead {
  line-height: 1.7;
}

@media (min-width: 801px) {
  .info_list li a {
    transition: background-color 0.3s;
  }
  .info_list li a:hover {
    background-color: rgba(68, 122, 242, 0.1);
  }
}
@media (max-width: 800px) {
  .layout_footer_info {
    padding: 50px 0;
  }
  .info_list {
    flex-direction: column;
  }
  .info_list li {
    width: 100%;
    margin: 0 0 20px;
  }
  .info_list li a {
    padding: 15px;
  }
  .info_icon {
    width: 80px;
  }
  .info_icon.icon_plan img {
    width: 47px;
    transform: none;
  }
  .info_icon.icon_case img {
    width: 50px;
    transform: translateX(-5px);
  }
  .info_icon.icon_usecase img {
    width: 50px;
    transform: translateX(-5px);
  }
  .info_icon.icon_about img {
    width: 50px;
  }
}
/* TOP ImageFlux iconメニュー
* ---------------------------------------- */
.layout_footer_menu {
  padding: 85px 40px 70px;
}

.menu_list {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.menu_list li {
  position: relative;
  width: 210px;
}
.menu_list li a {
  display: block;
  height: 100%;
  padding: 24px 20px 27px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  background: #fff;
  border: solid 2px #447AF2;
  border-radius: 8px;
  color: #333;
  text-align: center;
}

.menu_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 59px;
  margin: 0 0 10px;
}
.menu_icon .icon_faq {
  width: 74px;
}
.menu_icon .icon_plan {
  width: 60px;
}
.menu_icon .icon_flow {
  width: 74px;
}
.menu_icon .icon_case {
  width: 75px;
}
.menu_icon .icon_doc {
  width: 56px;
  transform: translateX(8px);
}

.menu_title {
  color: #447AF2;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 10px;
}

@media (min-width: 801px) {
  .menu_list li a {
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.3s;
  }
  .menu_list li a:hover {
    transform: scale(1.05);
  }
}
@media (max-width: 800px) {
  .layout_footer_menu {
    padding: 48px 0 40px;
  }
  .layout_footer_menu .inner {
    padding: 0 25px;
  }
  .menu_list {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
    margin: 0;
  }
  .menu_list li {
    position: relative;
    width: 46.769230769%;
    border-left: solid 1px #EAEEF8;
    border-bottom: solid 1px #EAEEF8;
  }
  .menu_list li:nth-child(-n+2) {
    border-top: solid 1px #EAEEF8;
  }
  .menu_list li:nth-child(1), .menu_list li:nth-child(3) {
    border-left: none;
  }
  .menu_list li a {
    padding: 17px 13px 18px;
    position: relative;
    transition: none;
    font-size: 11px;
    line-height: 1.6;
  }
  .menu_list li a:hover {
    opacity: 1;
  }
  .menu_list li::before {
    display: none;
  }
  .menu_list li:last-child::before {
    display: none;
  }
  .menu_icon {
    height: 43px;
    margin: 0 auto 6px;
  }
  .menu_icon .icon_faq {
    width: 55px;
  }
  .menu_icon .icon_plan {
    width: 38px;
  }
  .menu_icon .icon_flow {
    width: 54px;
  }
  .menu_icon .icon_case {
    width: 36px;
  }
  .menu_icon .icon_doc {
    width: 38px;
    transform: translateX(5px);
  }
  .menu_title {
    font-size: 13px;
    margin: 0 0 7px;
  }
}
/* ImageFlux 資料ダウンロード
 * ---------------------------------------- */
.layout_document_dl {
  padding: 60px 0;
  background: #447AF2;
  text-align: center;
}
.layout_document_dl img {
  width: 245px;
}

.dl_headline {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 32px;
}

.layout_document_dl .dl_btn {
  margin: 44px 0 0;
}

.dl_btn .cta_btn {
  margin: 0 auto;
  width: 340px;
  height: 84px;
  font-size: 21px;
}
.dl_btn .cta_btn small {
  font-size: 14px;
  margin: 0 0 3px;
}

@media (max-width: 800px) {
  .dl_headline {
    font-size: 24px;
  }
  .dl_btn .cta_btn {
    width: 100%;
  }
}
/* 問い合わせ/トライアルボタン
 * ---------------------------------------- */
.layout_contact {
  padding: 52px 0 80px;
  background: #F8F8F8;
}

.contact_list {
  display: flex;
  justify-content: center;
}

.contact_list li {
  width: 340px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 0 20px;
}

.contact_list li p {
  margin: 0 0 22px;
}

.contact_list li .c_btn {
  height: 80px;
  background: #fff;
  font-size: 19px;
}

.contact_list li .c_btn:hover {
  background: #447AF2;
}

.contact_list li .trial_btn + a {
  display: inline-block;
  color: #222;
  font-size: 16px;
  text-decoration: underline;
  line-height: 2;
  margin-top: 14px;
}

@media (max-width: 800px) {
  .layout_contact {
    padding: 50px 0;
  }
  .contact_list {
    display: block;
  }
  .contact_list li {
    width: 100%;
    margin: 0;
  }
  .contact_list li + li {
    margin-top: 40px;
  }
  .contact_list li p {
    margin: 0 0 22px;
  }
  .contact_list li a {
    height: 63px;
    font-size: 19px;
  }
}
/* ImageFlux フッターナビ（資料ダウンロード、ドキュメント、サポートサイト他）
 * ---------------------------------------- */
.layout_footer_navi {
  padding: 40px 0 15px;
  background-color: #fff;
  overflow: hidden;
}

.layout_footer_navi .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.layout_footer_navi .imageflux_logo {
  width: 173px;
  margin: 0 65px 0 0;
}

.footer_navi_list {
  display: flex;
}

.footer_navi_list li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 40px 0 0;
}

.footer_navi_list a {
  font-size: 14px;
  font-weight: 700;
  color: #447af2;
}

.footer_navi_list a:hover {
  opacity: 0.7;
}

.feedback_list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0 0;
  margin: 30px 0 0;
  position: relative;
}
.feedback_list::before {
  content: "";
  display: block;
  width: 100vw;
  height: 1px;
  background: #E5E9F2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.feedback_list li {
  margin: 0 20px;
}

.feedback_list a {
  font-size: 13px;
  color: #447AF2;
  transition: opacity 0.3s;
}

.feedback_list a:hover {
  opacity: 0.7;
}

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

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

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

@media (max-width: 959px) {
  .layout_footer_navi {
    height: auto;
    padding: 32px 0;
  }
  .layout_footer_navi .inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .layout_footer_navi .imageflux_logo {
    margin: 0 0 20px;
  }
  .footer_navi {
    flex-direction: column;
  }
  .footer_navi_list {
    flex-direction: column;
  }
  .footer_navi_list li {
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 20px;
  }
  .footer_navi_list li:last-child {
    margin: 0;
  }
  .feedback_list {
    justify-content: space-between;
  }
  .feedback_list li {
    margin: 0;
  }
  .feedback_list a {
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 1.3;
  }
  .feedback_list i {
    margin: 0 5px 0 0;
  }
}
/* トライアル開始までの流れ
 * ---------------------------------------- */
.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;
  }
}
/* ImageFlux コンテンツエリア
 * ======================================== ======================================== */
/* contents 共通指定
 * ---------------------------------------- */
.headline {
  margin: 0 0 70px;
  font-size: 30px;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}
.headline::after {
  content: "";
  display: block;
  width: 93px;
  height: 2px;
  background: #447AF2;
  margin: 46px auto 0;
}
@media (max-width: 800px) {
  .headline {
    font-size: 24px;
    margin: 0 0 50px;
  }
  .headline::after {
    width: 50px;
    margin: 30px auto 0;
  }
}

.sub_headline {
  margin: 0 0 85px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 800px) {
  .sub_headline {
    font-size: 22px;
    margin: 0 0 50px;
  }
}

.sub_headline_2 {
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 15px;
}
@media (max-width: 800px) {
  .sub_headline_2 {
    font-size: 18px;
  }
}

.c_link {
  color: #447AF2;
}
@media (min-width: 801px) {
  .c_link {
    transition: -webkit-text-decoration 0.3s;
    transition: text-decoration 0.3s;
    transition: text-decoration 0.3s, -webkit-text-decoration 0.3s;
  }
  .c_link:hover {
    text-decoration: underline;
  }
}

.c_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  border: solid 2px #447AF2;
  border-radius: 8px;
  box-shadow: 3px 6px 18px -9px rgba(25, 57, 128, 0.36);
  color: #447AF2;
}
@media (min-width: 801px) {
  .c_btn {
    transition: background-color 0.3s, color 0.3s;
  }
  .c_btn:hover {
    opacity: 1;
    background: #447AF2;
    color: #fff;
  }
}

.cta_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 312px;
  height: 77px;
  font-size: 20px;
  background: #ECFF12;
  border-radius: 8px;
  color: #1143B2;
  font-weight: 900;
  transition: background-color 0.3s;
}
.cta_btn small {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
@media (min-width: 801px) {
  .cta_btn:hover {
    background: #FDFFEC;
  }
}

@media (max-width: 800px) {
  .cta_btn {
    width: 100%;
  }
}
.c_link {
  color: #447AF2;
}
@media (min-width: 801px) {
  .c_link {
    transition: -webkit-text-decoration 0.3s;
    transition: text-decoration 0.3s;
    transition: text-decoration 0.3s, -webkit-text-decoration 0.3s;
  }
  .c_link:hover {
    text-decoration: underline;
  }
}

.c_link {
  color: #447AF2;
}
@media (min-width: 801px) {
  .c_link {
    transition: -webkit-text-decoration 0.3s;
    transition: text-decoration 0.3s;
    transition: text-decoration 0.3s, -webkit-text-decoration 0.3s;
  }
  .c_link:hover {
    text-decoration: underline;
  }
}

/* tooltip */
.c_tooltip {
  position: relative;
  margin: 0 0 0 3px;
  transform: translateY(-2px);
  z-index: 1;
}
.c_tooltip_icon {
  display: block;
  width: 14px;
  height: 14px;
  background: url(../images/image/common/icon_tooltip.svg) no-repeat center center;
  background-size: 100% 100%;
}
.c_tooltip_icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 6px 0 6px;
  border-color: #4C4E52 transparent transparent transparent;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 2px);
  margin: auto;
  opacity: 0;
  visibility: hidden;
}

.c_tooltip_conts {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 13px);
  transform: translateX(-50%);
  background: #4C4E52;
  color: #fff;
  z-index: 1;
  padding: 12px 13px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
}

.c_tooltip_conts ul li::before {
  content: "・";
}
@media (min-width: 801px) {
  .c_tooltip:hover {
    z-index: 11;
  }
  .c_tooltip:hover .c_tooltip_icon::before {
    opacity: 1;
    visibility: visible;
  }
  .c_tooltip:hover .c_tooltip_conts {
    opacity: 1;
    visibility: visible;
  }

}

@media (max-width: 800px) {
  .c_tooltip_icon:focus::before {
    opacity: 1;
    visibility: visible;
  }
  .c_tooltip_icon:focus + .c_tooltip_conts {
    opacity: 1;
    visibility: visible;
  }
  .c_tooltip_conts {
    width: 330px;
    white-space: wrap;
    margin-left: -80px;
  }
}

/* ヒーローエリア
 * ---------------------------------------- */
.layout_hero {
  min-height: 290px;
  overflow: hidden;
}

.lower_hero {
  display: flex;
  padding: 0 0 60px;
  background: #447AF2;
  position: relative;
}
.lower_hero::before {
  content: "";
  display: block;
  width: 571px;
  height: 249px;
  background: url("../../../c-/a-0-u-0-f-webp-png-q-75/image/common/bg_hero_lower.png") no-repeat center center/contain;
  position: absolute;
  top: -27px;
  bottom: 0;
  left: 33px;
  right: 0;
  margin: auto;
}
.lower_hero .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.lower_hero_head {
  text-align: center;
  color: #fff;
}

.lower_headline {
  font-size: 35px;
  font-weight: 700;
  margin: 0 0 25px;
}

.lower_copy {
  font-weight: 700;
  line-height: 2;
}

@media (max-width: 800px) {
  .layout_hero {
    padding-top: 32px;
  }
  .lower_hero {
    padding: 60px 0;
    min-height: inherit;
  }
  .lower_hero::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 30px;
  }
  .lower_hero .inner {
    width: 100%;
  }
  .lower_headline {
    font-size: 30px;
    margin: 0 0 25px;
  }
  .lower_copy {
    font-size: 14px;
  }
}
@media (max-width: 400px) {
  .hero_text_only {
    background-position: calc(50% - 210px) 120%;
    background-size: 800px;
  }
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  z-index: 9999;
}

.modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #000;
  opacity: 0.8;
}

.modal_content {
  max-width: 800px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.modal .video {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

.modal .video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal_close {
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  position: absolute;
  top: -45px;
  right: 0;
  cursor: pointer;
}

.modal_close::before,
.modal_close::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #fff;
}

.modal_close::before {
  transform: rotate(45deg);
}

.modal_close::after {
  transform: rotate(-45deg);
}

@media (max-width: 800px) {
  .modal_content {
    padding: 0 20px;
  }
  .modal_close {
    right: 20px;
    width: 30px;
    height: 30px;
    top: -35px;
  }
  .modal_close::before,
  .modal_close::after {
    width: 30px;
  }
}

/* 資料ダウンロード・問い合わせ
 * ---------------------------------------- */
.layout_cta {
  background: #447AF2;
  padding: 47px 0 58px;
}
.layout_cta .inner {
  max-width: 600px;
  margin: 0 auto;
}

.cta_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -10px -25px;
}

.cta_list_item {
  margin: 0 10px 25px;
}

.cta_list_dl-btn {
  width: 349px;
  height: 87px;
  font-size: 21px;
}
.cta_list_dl-btn small {
  font-size: 14px;
  margin: 0 0 3px;
}

.cta_list_btn {
  width: 290px;
  height: 69px;
  border-color: #fff;
  color: #fff;
}
@media (min-width: 801px) {
  .cta_list_btn:hover {
    background: #fff;
    color: #447AF2;
  }
}

@media (max-width: 800px) {
  .layout_cta {
    padding: 33px 0 47px;
  }
  .cta_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -1.3888888889% -20px;
  }
  .cta_list_item {
    width: 47.2972972973%;
    margin: 0 1.3513513514% 20px;
  }
  .cta_list_item.dl {
    width: 100%;
  }
  .cta_list_dl-btn {
    width: 100%;
  }
  .cta_list_btn {
    width: 100%;
    width: 100%;
    height: 63px;
  }
  .cta_list_btn span {
    display: none;
  }
}
/* セクション
 * ---------------------------------------- */
.layout_section {
  padding: 100px 0 140px;
}
.layout_section:nth-of-type(even) {
  background: #F8F8F8;
}
@media (max-width: 800px) {
  .layout_section {
    padding: 60px 0;
  }
}

/* 左右横並び
 * ---------------------------------------- */
.layout_row {
  display: flex;
  align-items: center;
}
.layout_row.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 800px) {
  .layout_row {
    flex-direction: column;
  }
  .layout_row > * {
    width: 100%;
  }
  .layout_row.reverse {
    flex-direction: column;
  }
}

.layout_grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.layout_grid > * {
  width: 50%;
}
.layout_grid.col3 > * {
  width: 33.333333%;
}
@media (max-width: 800px) {
  .layout_grid {
    flex-direction: column;
  }
  .layout_grid > * {
    width: 100%;
  }
  .layout_grid.col3 > * {
    width: 100%;
  }
}

.grid_item {
  padding: 0 15px;
}

/* ページ内アンカー
 * ---------------------------------------- */
.layout_page_navi {
  padding: 70px 0 0;
}

.page_navi {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.page_navi li {
  width: 33.333333%;
  padding: 1px;
}
.page_navi li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 30px;
  height: 100%;
  font-weight: 500;
  background: #F3F3ED url("../images/image/common/icon_arrow_blue.svg") no-repeat right 18px center;
  background-size: 11px 7px;
  color: #000;
}

@media (min-width: 801px) {
  .page_navi._col4 li {
    width: 25%;
  }
  .page_navi li a {
    transition: opacity 0.3s;
  }
  .page_navi li a:hover {
    opacity: 0.7;
  }

}
@media (max-width: 800px) {
  .layout_page_navi {
    padding: 60px 0 0;
  }
  .page_navi {
    flex-direction: column;
  }
  .page_navi li {
    width: 100%;
    padding: 1px;
  }
  .page_navi li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-weight: 500;
    background: #F3F3ED url("../images/image/common/icon_arrow_blue.svg") no-repeat right 18px center;
    background-size: 11px 7px;
    color: #000;
  }
}
/* HOME
 * ======================================== ======================================== */
.home .layout_main,
.layout_main {
  overflow: hidden;
}

/* ヒーローエリア
 * ---------------------------------------- */
.home_hero {
  min-height: 400px;
  padding-top: 55px;
  padding-bottom: 60px;
  background: #447AF2 url("../../../c-/a-0-u-0-f-webp-png-q-75/image/home/bg_hero_home.png") no-repeat center top;
  background-size: 1139px auto;
  overflow: hidden;
}

.hero_head {
  padding: 0 12px 0 0;
  width: 51.5625%;
  float: left;
}

.hero_title {
  font-size: 36px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 26px;
}
.hero_title span {
  color: #ECFF12;
  position: relative;
}
.hero_title span::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  border-radius: 50%;
}

.hero_sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 25px;
}

.hero_video {
  position: relative;
  transform: translateY(13px);
  width: 48.4375%;
  float: right;
  overflow: hidden;
}
.hero_video_inner {
  position: relative;
}
.hero_video_inner::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.hero_video .hero_video_thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero_video_link {
  text-align: right;
  margin: 5px 0 0;
}
.hero_video_link a {
  color: #fff;
  font-size: 13px;
}
.hero_video_link a::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 6px;
  background: url(../images/image/common/icon_arrow.svg) no-repeat center center;
  background-size: 100% 100%;
  transform: rotate(-90deg);
  margin: 0 3px 1px 0;
}

.hero_cta_btn {
  margin: 0 0 20px;
  width: 51.5625%;
  float: left;
}

.hero_poweredby {
  display: flex;
  align-items: center;
  width: 51.5625%;
  float: left;
}
.hero_poweredby dt {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin: 0 5px 0 0;
}
.hero_poweredby img {
  width: 60px;
}

@media (max-width: 800px) {
  .home_hero {
    min-height: inherit;
    padding-top: 32px;
    padding-bottom: 30px;
  }
  .layout_hero .inner {
    display: block;
  }
  .hero_head {
    padding: 0;
    width: 100%;
    float: none;
  }
  .hero_title {
    font-size: 30px;
    line-height: 1.7;
    margin: 0 0 20px;
  }
  .hero_sub-title {
    font-size: 18px;
  }
  .hero_video {
    width: auto;
    transform: none;
    margin: 0 12px 30px;
    float: none;
  }
  .hero_cta_btn {
    margin: 0 0 24px;
    width: 100%;
    float: none;
  }
  .hero_poweredby {
    justify-content: center;
    width: 100%;
    float: none;
  }
}
/* NEWS
 * ---------------------------------------- */
.layout_news {
  display: flex;
  align-items: flex-start;
  max-width: 960px;
  margin: -38px auto 0;
  padding: 25px 35px;
  background: #fff;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
  border-radius: 8px;
}

.news_title {
  margin: 0 33px 0 0;
}

.news_list li a {
  font-weight: 500;
  color: #447AF2;
}

@media (max-width: 800px) {
  .layout_news {
    flex-direction: column;
    margin: 0;
    padding: 15px 15px 18px;
    background: #fff;
    box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
    border-radius: 0;
  }
  .news_title {
    margin: 0 0 5px;
    font-size: 16px;
  }
  .news_list li {
    line-height: 1.5;
  }
  .news_list li a {
    font-weight: 500;
  }
}
/* 導入企業 上部スライド
 * ---------------------------------------- */
.layout_trustedby_top {
  padding: 36px 0;
  display: flex;
}

.trustedby_top_slide {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  flex-shrink: 0;
}
.trustedby_top_slide li {
  padding: 0 25px;
  flex-shrink: 0;
}
.trustedby_top_slide li img {
  zoom: 0.76774;
}

.logo_mercari {
  width: 144px;
}

.logo_stores {
  width: 155px;
}

.logo_base {
  width: 114px;
}

.logo_watashi {
  width: 133px;
}

.logo_csp,
.logo_locoguide {
  width: 139px;
}

.logo_kurashi,
.logo_atsp,
.logo_goodpatch {
  width: 164px;
}

.logo_davincistudio {
  width: 146px;
}

.logo_domingo {
  width: 128px;
}

.logo_hamee {
  width: 148px;
}

.logo_shueisha {
  width: 104px;
}

.logo_jmo {
  width: 97px;
}

.logo_kayac,
.logo_livepocket {
  width: 150px;
}

.logo_leverages,
.logo_mangahack {
  width: 135px;
}

.logo_mixi {
  width: 122px;
}

.logo_photocreate {
  width: 157px;
}

.logo_tabilabo {
  width: 117px;
}

.logo_tabio {
  width: 115px;
}

.logo_tellus,
.logo_timee {
  width: 143px;
}

.logo_tenki {
  width: 141px;
}

@media (max-width: 800px) {
  .layout_trustedby_top {
    padding: 10px 0;
  }
}
/* お悩み
 * ---------------------------------------- */
.layout_problem {
  background: #F9F9F6;
  padding: 90px 0 100px;
}

.problem_headline {
  font-size: 27px;
  text-align: center;
  margin: 0 0 50px;
}

.problem_list {
  display: flex;
  justify-content: center;
}

.problem_item {
  width: 265px;
  margin: 0 10px;
}
.problem_item.problem_01 .problem_img {
  align-items: flex-end;
}
.problem_item.problem_01 .problem_img img {
  width: 182.5px;
}
.problem_item.problem_02 .problem_img img {
  width: 107px;
}
.problem_item.problem_03 .problem_img {
  align-items: flex-start;
}
.problem_item.problem_03 .problem_img img {
  width: 145px;
}

.problem_img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 152px;
  margin: 0 0 30px;
  position: relative;
}
.problem_img img {
  position: relative;
}
.problem_img::before {
  content: "";
  display: block;
  width: 152px;
  height: 152px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.problem_title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 800px) {
  .layout_problem {
    padding: 35px 0 50px;
  }
  .problem_headline {
    font-size: 20px;
    margin: 0 0 50px;
  }
  .problem_list {
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -2.7777777778% -30px;
  }
  .problem_item {
    width: 44.7368421053%;
    margin: 0 2.6315789474% 30px;
  }
  .problem_item.problem_01 .problem_img img {
    width: 126px;
  }
  .problem_item.problem_02 .problem_img img {
    width: 73px;
  }
  .problem_item.problem_03 .problem_img img {
    width: 100px;
  }
  .problem_img {
    height: 105px;
    margin: 0 0 15px;
  }
  .problem_img img {
    position: relative;
  }
  .problem_img::before {
    width: 105px;
    height: 105px;
  }
  .problem_title {
    font-size: 14px;
    line-height: 1.6;
  }
}
/* 解決
 * ---------------------------------------- */
.layout_solution {
  padding: 70px 0 106px;
}

.solution_headline {
  font-size: 30px;
  text-align: center;
  margin: 0 0 120px;
}
.solution_headline strong {
  color: #447AF2;
}
.solution_headline span {
  display: inline-block;
  padding: 0 30px;
  position: relative;
}
.solution_headline span::before, .solution_headline span::after {
  content: "";
  display: block;
  width: 3px;
  height: 41px;
  background: #447AF2;
  position: absolute;
  top: 0;
}
.solution_headline span::before {
  transform: rotate(-30deg);
  left: 0;
}
.solution_headline span::after {
  right: 0;
  transform: rotate(30deg);
}

.solution_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 100px;
}
.solution_item:nth-child(odd) {
  flex-direction: row-reverse;
}
.solution_item:last-child {
  margin: 0;
}
.solution_item.solution_01 .solution_img {
  width: 44.6875%;
  margin: -30px -23px 0 0;
}
.solution_item.solution_02 .solution_img {
  width: 43.75%;
}
.solution_item.solution_03 .solution_img {
  width: 42.8125%;
  margin: -50px -18px 0 0;
}

.solution_img img {
  max-width: 100%;
}

.solution_text {
  flex-shrink: 0;
  width: 46.875%;
}

.solution_title {
  font-size: 32px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.solution_desc {
  line-height: 2.1;
  margin: 0 0 28px;
}

.solution_tag {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -7px 20px 0;
}
.solution_tag:last-child {
  margin-bottom: 0;
}
.solution_tag li {
  margin: 0 7px 10px 0;
  padding: 5px 15px 4px;
  font-size: 14px;
  font-weight: 600;
  background: #F3F3ED;
  border-radius: 30px;
  color: #447AF2;
}

.solution_btn a {
  width: 233px;
  height: 57px;
}

@media (max-width: 800px) {
  .layout_solution {
    padding: 45px 0;
  }
  .solution_headline {
    font-size: 24px;
    line-height: 1.5;
    margin: 0 0 30px;
  }
  .solution_headline span {
    padding: 0 20px;
  }
  .solution_headline span::before, .solution_headline span::after {
    bottom: 0;
    margin: auto;
  }
  .solution_headline span::before {
    left: 0;
  }
  .solution_headline span::after {
    right: 0;
  }
  .solution_item {
    display: block;
    margin: 0 0 80px;
  }
  .solution_item.solution_01 .solution_img {
    width: 250px;
    margin: 0 auto 45px;
  }
  .solution_item.solution_02 .solution_img {
    width: 300px;
    margin: 0 auto 45px;
  }
  .solution_item.solution_03 .solution_img {
    width: 250px;
    margin: 0 auto 45px;
  }
  .solution_img img {
    max-width: 100%;
  }
  .solution_text {
    width: 100%;
  }
  .solution_title {
    font-size: 22px;
    margin: 0 0 15px;
  }
  .solution_desc {
    font-size: 14px;
    margin: 0 0 18px;
  }
  .solution_tag li {
    padding: 5px 14px 4px;
  }
  .solution_btn .c_btn {
    margin: 0 auto;
  }
}
/* 理由
 * ---------------------------------------- */
.layout_reason {
  padding: 93px 35px 120px;
  background: #F8F8F8;
}

.reason_headline {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 110px;
  text-align: center;
}

.reason_list {
  display: flex;
  justify-content: space-between;
  margin: 0 -35px;
}
.reason_list li {
  width: 32.0388349515%;
  padding: 58px 2.7184466019% 50px;
  position: relative;
  border-radius: 70px 0 70px 0;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
}

.reason_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  position: absolute;
  top: -29px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 32px;
  font-weight: 600;
  background: #447AF2;
  border-radius: 50%;
  color: #fff;
}

.reason_title {
  margin: 0 0 20px;
  font-size: 20px;
  font-feature-settings: "palt";
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: center;
}

.reason_desc {
  line-height: 1.9;
}

@media (max-width: 800px) {
  .layout_reason {
    padding: 40px 0 90px;
  }
  .reason_headline {
    font-size: 24px;
    margin: 0 0 60px;
  }
  .reason_list {
    flex-direction: column;
    margin: 0 0 -58px;
  }
  .reason_list li {
    width: 91.6666666667%;
    margin: 0 auto 58px;
  }
}
/* 導入企業
 * ---------------------------------------- */
.layout_trustedby {
  padding: 90px 0 0;
  overflow: hidden;
}

.trustedby_intro {
  display: grid;
  grid-template-columns: 49.7916666667% 46.3541666667%;
  margin: 0 0 140px;
}

.trustedby_headline {
  grid-column: 1/2;
  grid-row: 1/2;
  font-size: 28px;
  line-height: 1.8;
  padding: 60px 0 0;
  position: relative;
  z-index: 1;
}

.trustedby_data {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-column: 2/2;
  grid-row: 1/span 3;
  position: relative;
}
.trustedby_data::before {
  content: "";
  display: block;
  width: 596px;
  height: 439px;
  background: url("../../../c-/a-0-u-0-f-webp-png-q-75/image/home/bg_data_02.png") no-repeat center top;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-54%);
}
.trustedby_data dl {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 46.5168539326%;
  height: 192px;
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
  margin: 0 0 27px;
}
.trustedby_data dl:nth-child(2) {
  margin: 110px 0 -110px;
}
.trustedby_data dl:last-child {
  margin: 0;
}
.trustedby_data dl dt {
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}
.trustedby_data dl dd {
  text-align: center;
  line-height: 1;
}
.trustedby_data dl dd img {
  width: 43px;
}
.trustedby_data dl dd span {
  display: block;
  font-size: 16px;
  margin: 0 0 3px;
  color: #447AF2;
}
.trustedby_data dl dd sup {
  color: #000;
  margin: 0 0 0 5px;
}
.trustedby_data dl dd b {
  font-weight: 700;
}
.trustedby_data dl dd em {
  font-size: 17px;
  font-style: italic;
}
.trustedby_data dl dd strong {
  font-size: 32px;
  font-feature-settings: "palt";
  font-weight: 900;
  line-height: 1;
}
.trustedby_data dl dd strong.jp {
  font-size: 24px;
}
.trustedby_data dl.number {
  padding: 0 0 10px;
}
.trustedby_data dl.number dt {
  margin: 0 0 20px;
}
.trustedby_data dl.number dd span {
  padding: 10px 50px 0;
  position: relative;
}
.trustedby_data dl.number dd span::before, .trustedby_data dl.number dd span::after {
  content: "";
  display: block;
  width: 42px;
  height: 75px;
  background: url("../images/image/home/bg_data_01.svg") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 7px;
}
.trustedby_data dl.number dd span::before {
  left: 0;
}
.trustedby_data dl.number dd span::after {
  right: 0;
  transform: scale(-1, 1);
}
.trustedby_data dl.number dd strong {
  display: block;
  margin: 0 0 5px;
}
.trustedby_data dl.ratio dt {
  margin: 0 0 8px;
}
.trustedby_data dl.ratio dd img {
  margin: 0 0 7px;
}
.trustedby_data dl.amount {
  padding: 0 0 5px;
}
.trustedby_data dl.amount dt {
  margin: 0 0 15px;
}
.trustedby_data dl.amount dd span {
  margin: 0 0 15px;
}

.trustedby_data_note {
  width: 100%;
  line-height: 1.7;
  text-align: center;
  margin: 20px 0 0;
}
.trustedby_data_note small {
  font-size: 13px;
}

.trustedby_data_link {
  grid-column: 1/2;
  grid-row: 2/2;
  margin: 45px 0 0;
}
.trustedby_data_link .c_btn {
  width: 233px;
  height: 57px;
}

.trustedby_corp {
  padding: 0 0 80px;
  position: relative;
}
.trustedby_corp::before {
  content: "";
  display: block;
  width: 100vw;
  height: 80%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #F8F8F8;
}

.trustedby_sub_headline {
  margin: 0 0 70px;
  font-size: 30px;
  text-align: center;
}

.trustedby_wrap {
  margin: 0 -100px;
  position: relative;
}
.trustedby_wrap::before, .trustedby_wrap::after {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.trustedby_wrap::before {
  width: 262px;
  height: 372px;
  background-image: url("../images/image/home/bg_trustedby_01.svg");
  left: -120px;
  top: -94px;
}
.trustedby_wrap::after {
  width: 268px;
  height: 427px;
  background-image: url("../images/image/home/bg_trustedby_02.svg");
  right: -131px;
  top: -97px;
}

.trustedby_box {
  padding: 60px 135px;
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
}

.trustedby_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 -40px;
}
.trustedby_list li {
  width: 25%;
  margin: 0 0 40px;
  text-align: center;
}

@media (max-width: 800px) {
  .layout_trustedby {
    padding: 60px 0 0;
  }
  .trustedby_intro {
    display: block;
    margin: 0 0 60px;
  }
  .trustedby_headline {
    font-size: 26px;
    padding: 0;
    margin: 0 0 30px;
  }
  .trustedby_data {
    margin: 0 -4px;
  }
  .trustedby_data::before {
    content: "";
    display: block;
    width: 489px;
    height: 360px;
    top: 0;
    left: 50%;
    transform: translateX(-54%);
  }
  .trustedby_data dl {
    width: 46.1956521739%;
    height: 157px;
    margin: 0 0 23px;
  }
  .trustedby_data dl:nth-child(2) {
    margin: 88px 0 -88px;
  }
  .trustedby_data dl dd img {
    width: 36px;
  }
  .trustedby_data dl dd span {
    margin: 0 0 3px;
  }
  .trustedby_data dl dd em {
    font-size: 22px;
  }
  .trustedby_data dl dd strong.jp {
    font-size: 23px;
  }
  .trustedby_data dl.number dt {
    margin: 0 0 12px;
  }
  .trustedby_data dl.number dd span {
    padding: 12px 40px 0;
  }
  .trustedby_data dl.number dd span::before, .trustedby_data dl.number dd span::after {
    width: 34px;
    height: 61px;
  }
  .trustedby_data dl.number dd strong {
    font-size: 28px;
  }
  .trustedby_data dl.ratio {
    padding: 10px 0 0;
  }
  .trustedby_data dl.ratio dt {
    margin: 0 0 5px;
  }
  .trustedby_data dl.ratio dd img {
    margin: 0 0 7px;
  }
  .trustedby_data dl.amount {
    padding: 0;
  }
  .trustedby_data dl.amount dd span {
    margin: 0 0 15px;
  }
  .trustedby_data_link {
    margin: 60px 0 0;
  }
  .trustedby_data_link .c_btn {
    width: 233px;
    height: 57px;
    margin: 0 auto;
  }
  .trustedby_corp {
    padding: 0;
  }
  .trustedby_corp::before {
    display: none;
  }
  .trustedby_sub_headline {
    margin: 0 0 30px;
    font-size: 24px;
    line-height: 1.9;
  }
  .trustedby_wrap {
    margin: 0;
  }
  .trustedby_wrap::before, .trustedby_wrap::after {
    display: none;
  }
  .trustedby_box {
    padding: 0;
    position: relative;
    z-index: 1;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .trustedby_list {
    margin: 0 0 -20px;
  }
  .trustedby_list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 70px;
    margin: 0 0 20px;
  }
  .trustedby_list li img {
    zoom: 0.80555555;
  }
}
/* 導入事例
 * ---------------------------------------- */
.layout_case {
  padding: 70px 0 0;
}

.case_headline {
  font-size: 32px;
  text-align: center;
  margin: 0 0 70px;
}

.case_slider {
  margin: 0 -26.214285714%;
}
.case_slider img {
  width: 100%;
}

.swiper-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 45px 0 0;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: static;
  width: auto;
  margin: 0 36px;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #E8E8E8;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #447AF2;
}

.swiper-button-prev,
.swiper-button-next {
  position: static;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EFEFEF;
  color: #5E5E5E;
  margin: 0;
  font-size: 20px;
  transition: opacity 0.3s;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}
.swiper-button-prev i,
.swiper-button-next i {
  transform: translate(3px, 1px);
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 0.7;
}

.swiper-button-prev i {
  transform: translate(-2px, 1px);
}

.case_slide {
  background: #fff;
  border-radius: 17px;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
  height: auto;
}
.case_slide a {
  display: block;
  color: #222;
}

.case_img {
  position: relative;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
}
.case_img::before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.case_title {
  padding: 0 24px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  color: #fff;
}

.case_text {
  padding: 40px 20px 42px 30px;
}

.case_lead {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.case_company {
  font-size: 16px;
  text-align: center;
}

.fa-chevron-right::before,
.fa-chevron-left::before {
  font-family: FontAwesome;
}

@media (min-width: 801px) {
  .swiper-pagination-bullet {
    transition: background-color 0.3s;
  }
  .swiper-pagination-bullet:hover {
    background: #447AF2;
  }
  .case_slide a {
    transition: opacity 0.3s;
  }
  .case_slide a:hover {
    opacity: 0.7;
  }
}
@media (max-width: 800px) {
  .layout_case {
    padding: 80px 0 0;
  }
  .case_headline {
    font-size: 24px;
    margin: 0 0 30px;
  }
  .case_slider {
    margin: 0;
    padding: 0 15px;
  }
  .swiper-pages {
    margin: 30px 0 0;
  }
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    margin: 0 15px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  .case_title {
    padding: 0 22px 8px;
  }
  .case_lead {
    margin: 0 0 10px;
  }
}
/* price
 * ======================================== ======================================== */
/* 料金プラン
 * ---------------------------------------- */
.layout_price_top {
  padding: 100px 0 60px;
  overflow: hidden;
}

.price_plan {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.price_item {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 25%;
  min-width: 225px;
  position: relative;
  border: solid 1px #D1D1D1;
}

.price_item.push::before {
  content: "おすすめ";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #ECFF12;
  color: #1143B2;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 10px 2px;
}

.price_item.push .price_headline {
  background: #447AF2;
  color: #fff;
}


.price_headline {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 28px 0;
  background: #F8F9FD;
}

.price_item_conts {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 15px 15px 24px;
}

.price_cost {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price_cost p {
  font-size: 18px;
  font-weight: 600;
  color: #171717;
  line-height: 1.1;
  padding: 25px 0;
}

.price_cost dl {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.price_cost dt {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}
.price_cost dd {
  display: inline-block;
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
}
.price_cost dd span {
  font-size: 23px;
  font-weight: 700;
  color: #447AF2;
}
.price_cost dd span strong {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  letter-spacing: -0.04em;
}

.price_lead {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 15px;
}

.price_list {
  background: #F8F9FD;
  padding: 16px 12.5px 16px 10.299401197%;
}

.price_list > dt {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 12px;
}

.price_list dd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price_list dd dl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}

.price_list dd dl dt {
  width: 52.074391988%;
  font-size: 13px;
  flex-shrink: 0;
}

.price_list dd dl dd {
  width: 44.062947067%;
  flex-direction: row;
  align-items: center;
  font-size: 13px;
}

.price_item_note {
  padding: 16px 0;
  text-align: center;
  background: #F8F9FD;
  margin: 28px 0 0;
  font-weight: 500;
  position: relative;
}

.price_item_note::before {
  content: "+";
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: auto;
}

.price_item_note dt {
  font-size: 14px;
  margin: 0 0 8px;
}

.price_item_note dd {
  font-size: 13px;
}

.price_item_note dd span {
  color: #447AF2;
}

.price_item_note dd span b {
  font-size: 16px;
}

.price_btn {
  width: 100%;
  height: 52px;
  font-size: 16px;
  margin: 0 0 12px;
  box-shadow: none;
}

.price_btn.cta_btn {
  border: solid 1px #447AF2;
}

.price_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background: #F8F9FD;
  font-size: 16px;
  line-height: 1.8;
  padding: 0 23.5px;
}

.price_link {
  font-size: 14px;
  font-weight: 600;
  color: #447AF2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 15px 0 0;
}

.price_link::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: url(../images/common/icon_arrow_blue_02.svg) no-repeat center center;
  background-size: 100% 100%;
}

.price_note {
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  margin: 15px 0 0;
}

.price_note::before {
  content: "※";
  flex-shrink: 0;
}

.price_cta_box {
  padding: 40px 15.625% 35px;
  background: #447AF2;
  border-radius: 5px;
  margin: 40px 0 0;
}

.price_cta_headline {
  font-size: 22px;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  margin: 0 0 28px;
}

.price_cta_list {
  display: flex;
  justify-content: space-between;
  gap: 3.03030303%;
}

.price_cta_list li {
  width: 390px;
}

.price_cta_list li:last-child {
  width: 255px;
}

.price_cta_list li span {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  margin: 0 0 6px;
}

.price_cta_list li a {
  width: 100%;
  height: auto;
  padding: 20px 0;
  font-size: 19px;
}

.price_cta_list li .dl_btn {
  color: #447AF2;
  background: #fff;
  border-color: #fff;
  padding: 18px 0;
  box-shadow: none;
}

.price_cta_note {
  color: #fff;
  margin: 18px 0 0;
}

.price_cta_note li {
  font-size: 14px;
  line-height: 1.6;
  display: flex;
}

.price_cta_note li::before {
  content: "※";
  flex-shrink: 0;
}

/* 機能一覧
* ---------------------------------------- */
.layout_function {
  padding: 60px 20px 80px;
}

.function_table_wrap {
  width: 100%;
}

.function_table_wrap > thead th {
  width: 300px;
  background: #fff;
  position: sticky;
  top: 61px;
  z-index: 10;
}

.function_table_wrap > thead td {
  width: 165px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #447AF2;
  background: #fff;
  padding: 11.5px 0;
  position: sticky;
  top: 61px;
  z-index: 10;
}
.function_table_wrap > thead th::after,
.function_table_wrap > thead td::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #D7DBEF;
  position: absolute;
  bottom: 0;
}

.function_table {
  width: 100%;
}

.function_table + .function_table {
  margin-top: 32px;
}

.function_table th {
  width: 310px;
  font-size: 15px;
  line-height: 1.25;
  text-align: left;
  padding: 16px 0;
  border-bottom: solid 1px #D7DBEF;
}

.function_table td {
  width: 165px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  border-bottom: solid 1px #D7DBEF;
}

.function_table td .circle {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: solid 2px #447AF2;
  border-radius: 50%;
}
.function_table td .dash {
  font-size: 17px;
  color: #447AF2;
}
.function_table thead th {
  font-size: 21px;
  font-weight: 700;
  line-height: 2.5;
  padding: 0 0 7px;
}
.function_table tbody tr:nth-child(odd) {
  background: #F8F9FD;
}

.function_table tbody td {
  padding: 16px 0;
}

.function_btn {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 100px auto 0;
}
.function_btn .c_btn {
  padding: 14px 85px;
  height: 57px;
}

/* ご利用の流れ
* ---------------------------------------- */

.layout_plan_flow {
  background: #F8F9FD;
  padding: 100px 0;
}

.layout_plan_flow dl dt {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 95px;
}

.plan_flow_list {
  display: flex;
  gap: 23px;
}

.plan_flow_list li {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 230px;
  padding: 50px 10px 37px;
  background: #fff;
  border-radius: 55px 0 55px 0;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
  font-size: 14px;
  line-height: 1.6;
  counter-increment: number;
  position: relative;
}

.plan_flow_list li::before {
  content: counter(number);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-family: "Inter",sans-serif;
  font-size: 30px;
  font-weight: 600;
  background: #447AF2;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.plan_flow_icon {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
}

.plan_flow_list li:nth-child(1) .plan_flow_icon img {
  width: 92px;
}
.plan_flow_list li:nth-child(2) .plan_flow_icon img {
  width: 100px;
}
.plan_flow_list li:nth-child(3) .plan_flow_icon img {
  width: 86px;
}
.plan_flow_list li:nth-child(3) .plan_flow_icon img {
  width: 90px;
}

.plan_flow_title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 9px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan_flow_link {
  text-align: center;
  margin-top: 10px;
}

.layout_plan_flow dl._enterprise  {
  margin: 100px 0 0;
}

.layout_plan_flow dl._enterprise dt {
  margin: 0 0 37px;
}

.layout_plan_flow dl._enterprise dd p {
  font-size: 15px;
  text-align: center;
}

.layout_plan_flow dl._enterprise .plan_flow_list li {
  align-items: center;
  padding: 55px 0 56px;
}

.layout_plan_flow dl._enterprise .plan_flow_list li::before {
  display: none;
}


.layout_plan_flow dl._enterprise .plan_flow_btn {
  padding: 13px 100px;
  margin: 24px 0 0;
}

/* お支払い方法について
* ---------------------------------------- */
.layout_plan_payment {
  text-align: center;
  padding: 100px 0;
}

.payment_lead {
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.6;
}
.payment_box {
  padding: 35px 30px;
  background: #F8F8F8;
  margin: 46px 0 0;
}
.payment_dot-list  {
  padding: 0 0 0 1em;
}
.payment_dot-list li {
  text-align: left;
  list-style-type: disc;
  font-size: 16px;
  line-height: 1.75;
}


/* よくある質問
* ---------------------------------------- */
.layout_faq {
  padding: 90px 0 82px;
  background: #F8F9FD;
}

.layout_faq dl dt {
  padding: 25px 54px 25px 70px;
  background: #fff;
  font-size: 18px;
  line-height: 1.7;
  border-bottom: solid 1px #D7DBEF;
  position: relative;
  cursor: pointer;
}

.layout_faq dl dd {
  padding: 35px 54px 35px 70px;
  font-size: 16px;
  line-height: 1.875;
  position: relative;
  display: none;
}

.layout_faq dl dt::before,
.layout_faq dl dd::before {
  font-family: 'Noto sans JP', sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  position: absolute;
  top: 18px;
  left: 23px;
}

.layout_faq dl dt::before {
  content: "Q";
  color: #447AF2;
}

.layout_faq dl dd::before {
  content: "A";
  color: #333;
  top: 29px;
}

.layout_faq dl dt::after {
  content: "";
  width: 21px;
  height: 21px;
  background: url(../images/common/icon_arrow_blue_02.svg) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 29px;
  margin: auto;
  transition: transform .3s;
}

.layout_faq dl dt.is_open::after {
  transform: rotate(-180deg);
}

.faq_btn {
  padding: 13.5px 74px;
  max-width: 357px;
  margin: 67px auto 0;
  background: #fff;
}

@media (min-width: 801px) and (max-width: 900px) {
  .price_item:nth-child(3) .price_tooltip .c_tooltip_conts {
    left: auto;
    right: -20px;
    transform: none;
  }

  .price_item:nth-child(3) .price_tooltip .c_tooltip_conts::after {
    right: 20px;
  }

}
@media (min-width: 801px) {
  .price_item + .price_item {
    border-left: none;
  }
  .price_cta_list li .dl_btn:hover {
    color: #fff;
    background-color: #447AF2;
  }
  .function_table_tooltip {
    display: inline-block;
    vertical-align: middle;
  }

  .function_table_tooltip .c_tooltip_conts {
    padding: 13px 20px 14px;
    width: 225px;
    white-space: wrap;
    z-index: 11;
  }

  .function_table_tooltip .c_tooltip_icon.is-left + .c_tooltip_conts {
    left: -20px;
    transform: none;
  }
}
@media (max-width: 800px) {
  .layout_price_top {
    padding: 60px 0;
  }
  .price_plan {
    flex-direction: column;
    gap: 20px;
  }
  .price_item {
    width: 100%;
    border-radius: 5px;
  }
  .price_item_conts {
    padding: 15px 20px 24px;
  }
  .price_list {
    padding: 16px 21.5px;
  }
  .price_list dd dl {
    justify-content: center;
  }
  .price_list dd dl dt {
    width: 91px;
  }
  .price_list dd dl dd {
    width: 77px;
  }
  .price_cost {
    margin: 0 0 15px;
  }
  .price_cost dt {
    margin: 0 0 5px;
  }
  .price_cost p {
    padding: 15px 0;
  }
  .price_lead {
    margin: 0 0 15px;
    padding: 5px 0;
  }
  .price_btn {
    margin: 0 0 16px;
    height: 47px;
  }
  .price_box {
    padding: 16px 64px;
  }

  .price_cta_box {
    padding: 40px 20px 35px;
  }

  .price_cta_list {
    flex-direction: column;
    gap: 20px;
  }

  .price_cta_list li {
    width: 100%;
  }

  .price_cta_list li:last-child {
    width: 100%;
  }

  .price_cta_list li a {
    font-size: 16px;
  }

  /* 機能一覧
  * ---------------------------------------- */
  .layout_function {
    padding: 60px 0;
  }

  .function_table_wrap {
    width: 100%;
  }

  .function_table_wrap > thead th {
    width: 100px;
    top: 64px;
  }

  .function_table_wrap thead td {
    width: 65px;
    font-size: 11px;
    padding: 11.5px 0;
    top: 64px;
  }
  .function_table + .function_table {
    margin-top: 40px;
  }
  .function_table th {
    width: 100px;
    font-size: 11px;
  }
  .function_table td {
    font-size: 11px;
    width: 65px;
  }
  .function_table td.jp {
    font-size: 11px;
  }
  .function_table td .circle {
    width: 12px;
    height: 12px;
  }
  .function_table td .dash {
    font-size: 15px;
  }
  .function_table thead th {
    font-size: 11px;
    font-weight: 700;
    padding: 0 10px 10px 0;
  }
  .function_table thead td {
    padding: 0 0 10px;
  }
  .function_table tbody td {
    padding: 11px 0;
  }

  .function_table_tooltip {
    display: none;
  }

  .function_btn {
    flex-direction: column;
    gap: 20px;
    margin: 50px auto 0;
  }

  .function_btn .c_btn {
    padding: 14px 0;
    width: 100%;
    height: 57px;
  }

  /*  */
  .layout_plan_flow dl dt {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 0 60px;
  }

  .plan_flow_list {
    flex-direction: column;
    gap: 60px;
  }

  .plan_flow_list li {
    width: 100%;
    padding: 50px 20px 37px;
  }

  .layout_plan_flow dl._enterprise .plan_flow_list li {
    padding: 55px 20px;
  }

  .layout_plan_flow dl._enterprise .plan_flow_btn {
    padding: 13px 0;
    width: 100%;
  }

  /* faq */
  .layout_faq dl dt {
    padding-left: 50px;
    padding-right: 40px;
  }
  .layout_faq dl dt::before,
  .layout_faq dl dd::before {
    left: 15px;
  }
  .layout_faq dl dt::after {
    right: 15px;
  }
  .layout_faq dl dd {
    padding-left: 50px;
    padding-right: 20px;
  }
  .faq_btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

}

/* function（機能ページ）
 * ======================================== ======================================== */
.function section {
  padding: 100px 0;
}

.function section:first-of-type {
  padding-top: 0;
}

.function section:last-of-type {
  padding-bottom: 0;
}

.function .sub_headline {
  margin-bottom: 40px;
  text-align: left;
}

.function_item {
  margin: -60px 0 60px;
  padding-top: 60px;
}
.function_item:last-child {
  margin-bottom: 0;
}

.function_text {
  width: 60%;
  padding: 0 40px 0 0;
}
.function_text p {
  line-height: 2;
}
.function_text p.note {
  font-size: 13px;
}
.function_image {
  width: 40%;
  text-align: center;
}

@media (min-width: 801px) {
  .transformation .function_item:nth-of-type(1) .function_image img {
    width: 300px;
  }
  .transformation .function_item:nth-of-type(2) .function_image img {
    width: 230px;
  }
  .cdn .function_item:nth-of-type(1) .function_image img {
    width: 210px;
  }
  .origin .function_item:nth-of-type(1) .function_image img {
    width: 260px;
  }
  .cdn .function_item:nth-of-type(2) .function_image img {
    width: 300px;
  }
  .origin .function_item:nth-of-type(2) .function_image img {
    width: 200px;
  }
  .cdn .function_item:nth-of-type(3) .function_image img {
    width: 361px;
  }
  .origin .function_item:nth-of-type(3) .function_image img {
    width: 350px;
    transform: translateX(10px);
  }
  .console .function_image {
    text-align: right;
  }
  .console .function_image img {
    width: 320px;
  }
  .console .function_item.reverse .function_image {
    text-align: left;
  }
  .console .function_item:nth-of-type(2) .function_image img {
    width: 340px;
  }
  .console .function_item:nth-of-type(4) .function_image {
    text-align: center;
  }
  .console .function_item:nth-of-type(4) .function_image img {
    width: 260px;
    transform: translateX(20px);
  }
  .api .function_image {
    text-align: right;
  }
  .api .function_image img {
    width: 320px;
  }
}
@media (max-width: 800px) {
  .function section {
    padding: 40px 0;
  }

  .function_item {
    margin-bottom: 40px;
    transform: none;
  }
  .function_text {
    width: 100%;
    padding: 0;
    margin: 0 0 30px;
  }
  .reverse .function_text {
    padding: 0;
  }
  .function_image {
    width: auto;
  }
  .function_image img {
    zoom: 0.4;
  }
}
/* flow（ご利用の流れページ）
 * ======================================== ======================================== */
.layout_flow .sub_headline_2 {
  margin: 0 0 65px;
}

.layout_flow_top {
  padding: 0 0 100px;
}

.flow_column {
  margin: 0 0 130px;
}
.flow_column:last-child {
  margin: 0;
}

.flow_item {
  padding: 0 0 0 40px;
  margin: 0 0 70px;
  position: relative;
  counter-increment: num;
  line-height: 1;
}
.flow_item p {
  line-height: 2;
}
.flow_item:last-child {
  margin: 0;
}
.flow_item::before {
  content: "";
  display: block;
  width: 3px;
  height: 100%;
  background: #447AF2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.flow_item dt {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 17px;
}
.flow_item dt::before {
  content: counter(num) " ";
}

.flow_btn {
  display: inline-block;
  padding: 14px 30px;
  margin: 23px 0 0;
  min-width: 233px;
  text-align: center;
  line-height: 1.5;
}

.flow_btn-list {
  display: flex;
  margin: 23px -10px 0 0;
}
.flow_btn-list li {
  margin: 0 10px 0 0;
  line-height: 0;
}
.flow_btn-list li a {
  margin: 0;
}

.layout_flow_note {
  padding: 67px 0 60px;
  background: #F8F9FD;
}
.layout_flow_note .sub_headline_2 {
  margin: 0 0 30px;
}

.flow_dot-list {
  margin-left: 2em;
}
.flow_dot-list li {
  line-height: 2;
  list-style-type: disc;
}

.flow_note-list {
  margin: 37px 0 0;
}
.flow_note-list li {
  font-size: 14px;
  line-height: 2;
  counter-increment: note;
  display: flex;
}
.flow_note-list li::before {
  content: "※" counter(note);
  flex-shrink: 0;
}

.layout_payment {
  padding-bottom: 0;
}
.layout_payment p {
  margin: 0 0 30px;
}
.layout_payment .flow_dot-list {
  margin-top: 60px;
}
.layout_payment a {
  color: #447AF2;
}

.payment_image img {
  max-width: 324px;
}

@media (max-width: 800px) {
  .layout_flow .sub_headline_2 {
    margin: 0 0 35px;
  }
  .layout_flow_top {
    padding: 0 0 60px;
  }
  .flow_column {
    margin: 0 0 60px;
  }
  .flow_column:last-child {
    margin: 0;
  }
  .flow_item {
    padding: 0 0 0 30px;
    margin: 0 0 50px;
  }
  .flow_btn {
    display: inline-block;
    padding: 14px 20px;
    width: 100%;
  }
  .flow_btn-list {
    flex-direction: column;
    margin: 23px 0 0;
  }
  .flow_btn-list li {
    margin: 0 0 20px;
  }
  .flow_btn-list li:last-child {
    margin: 0;
  }
  .layout_flow_note {
    padding: 60px 0;
  }
}
/* howtouse（業界ごとの活用法ページ）
 * ======================================== ======================================== */
.howtouse_section {
  padding: 125px 0 0;
}
.howtouse_section p {
  line-height: 2;
}

.howtouse_headline {
  margin: 0 0 20px;
}
.howtouse_headline::after {
  display: none;
}

.howtouse_tag {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -5px 30px;
}
.howtouse_tag li {
  margin: 0 5px 10px;
  padding: 5px 20px;
  font-weight: 700;
  background: #F3F3ED;
  border-radius: 33px;
  color: #447AF2;
}

.howtouse_row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.howtouse_row > * {
  margin: 0 25px;
}

.howtouse_text {
  width: 40.625%;
}

.howtouse_ec .howtouse_image {
  width: 37.70833333%;
}
.howtouse_platform .howtouse_image {
  width: 40.520833333%;
}
.howtouse_e-book .howtouse_image {
  width: 39.6875%;
}
.howtouse_media .howtouse_image {
  width: 42.4479166666%;
}
.howtouse_saas .howtouse_image {
  width: 42.083333333%;
}

.howtouse_soution {
  margin: 90px 0 0;
}
.howtouse_soution .inner {
  display: flex;
  justify-content: space-between;
}
.howtouse_soution dl {
  width: 46.875%;
  padding: 63px 0 65px;
  position: relative;
}
.howtouse_soution dl::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.howtouse_soution dl dt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
}
.howtouse_soution dl dt::before {
  content: "";
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  margin: 0 15px 0 0;
}
.howtouse_soution dl.probrem::before {
  background: #F9F9F6;
  right: 36px;
}
.howtouse_soution dl.probrem::after {
  content: "";
  display: block;
  width: 168px;
  height: 100%;
  background: linear-gradient(to bottom left, rgba(249, 249, 246, 0) 50%, #F9F9F6 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(249, 249, 246, 0) 50%, #F9F9F6 50.5%) no-repeat bottom right/100% 50%;
  position: absolute;
  right: -132px;
  top: 0;
  z-index: -1;
}
.howtouse_soution dl.probrem dt {
  background: #3E5484;
}
.howtouse_soution dl.probrem dt::before {
  width: 17px;
  height: 19px;
  background-image: url("../images/image/howtouse/icon_problem.svg");
}
.howtouse_soution dl.probrem dd .howtouse_soution_list li {
  padding-left: 42px;
}
.howtouse_soution dl.soution::before {
  background: #E1EAFF;
  left: -96px;
  z-index: -2;
}
.howtouse_soution dl.soution dt {
  background: #447AF2;
}
.howtouse_soution dl.soution dt::before {
  width: 26px;
  height: 26px;
  background-image: url("../images/image/howtouse/icon_check.svg");
}
.howtouse_soution dl.soution dd .howtouse_soution_list li::before {
  content: "\f00c";
  font-family: FontAwesome, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #447AF2;
  margin: 0 15px 0 0;
  flex-shrink: 0;
}

.howtouse_soution_list li {
  display: flex;
  align-items: center;
  height: 111px;
  margin: 0 0 20px;
  padding: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  background: #fff;
  border-radius: 10px;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
}
.howtouse_soution_list li:last-child {
  margin: 0;
}

.howtouse_sub_headline {
  margin: 0 0 35px;
  font-size: 22px;
  text-align: center;
}

.howtouse_recommend {
  padding: 70px 0 60px;
}
.howtouse_recommend_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.howtouse_recommend_list li {
  margin: 0 10px;
}
.howtouse_recommend_list li a {
  display: inline-block;
  min-width: 150px;
  padding: 18px 25px;
  font-size: 16px;
  font-weight: 700;
  color: #447AF2;
  border: solid 2px #447AF2;
  border-radius: 8px;
  box-shadow: 3px 6px 18px -9px rgba(25, 57, 128, 0.36);
  text-align: center;
}

@media (min-width: 801px) {
  .howtouse_recommend_list li a {
    transition: color 0.3s, background-color 0.3s;
  }
  .howtouse_recommend_list li a:hover {
    color: #fff;
    background: #447AF2;
  }
}
@media (max-width: 800px) {
  .howtouse_section {
    padding: 60px 0 0;
  }
  .howtouse_row {
    flex-direction: column;
  }
  .howtouse_row > * {
    margin: 0;
  }
  .howtouse_text {
    width: 100%;
    margin: 0 0 30px;
  }
  .howtouse_ec .howtouse_image {
    width: 100%;
  }
  .howtouse_platform .howtouse_image {
    width: 100%;
  }
  .howtouse_e-book .howtouse_image {
    width: 100%;
  }
  .howtouse_media .howtouse_image {
    width: 100%;
  }
  .howtouse_saas .howtouse_image {
    width: 100%;
  }
  .howtouse_soution {
    margin: 50px 0 0;
  }
  .howtouse_soution .inner {
    flex-direction: column;
  }
  .howtouse_soution dl {
    width: 100%;
    padding: 35px 0;
    position: relative;
  }
  .howtouse_soution dl::before {
    width: 100vw;
  }
  .howtouse_soution dl.probrem::before {
    right: -15px;
  }
  .howtouse_soution dl.probrem::after {
    width: 100vw;
    height: 60px;
    background: linear-gradient(to top right, rgba(249, 249, 246, 0) 50%, #F9F9F6 50.5%) no-repeat top left/50% 100%, linear-gradient(to top left, rgba(249, 249, 246, 0) 50%, #F9F9F6 50.5%) no-repeat top right/50% 100%;
    right: 0;
    left: 50%;
    top: auto;
    bottom: -60px;
    transform: translateX(-50%);
  }
  .howtouse_soution dl.soution::before {
    left: -15px;
  }
  .howtouse_soution_list li {
    height: auto;
  }
  .howtouse_sub_headline {
    margin: 0 0 30px;
    font-size: 20px;
  }
  .howtouse_recommend {
    padding: 60px 0 60px;
  }
  .howtouse_recommend_list {
    margin: 0 -5px -5px;
  }
  .howtouse_recommend_list li {
    margin: 0 5px 5px;
  }
  .howtouse_recommend_list li a {
    padding: 15px 15px;
    font-size: 15px;
    font-weight: 700;
  }
}
/* about（ImageFluxとは）
 * ======================================== ======================================== */
.about_lead {
  margin: 0 0 70px;
  line-height: 2;
  text-align: center;
}

.about_movie {
  width: 685px;
  position: relative;
  margin: 0 auto;
}
.about_movie::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.about_movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layout_more {
  padding: 50px 0 70px;
}
.layout_more:nth-of-type(even) {
  background: #F8F9FD;
}

.more_headline {
  margin: 0 0 40px;
}

.more_list {
  display: flex;
  justify-content: center;
}
.more_list li {
  width: 320px;
  margin: 0 22.5px;
  font-size: 16px;
}
.more_list li a {
  display: block;
  padding: 30px 54px;
  color: #000;
  text-align: center;
  background: #fff;
  border: solid 2px #447AF2;
  border-radius: 8px;
}

.more_title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #447AF2;
}

.more_lead {
  line-height: 1.7;
}

.about .layout_footer_info {
  background: #fff;
}

@media (min-width: 801px) {
  .more_list li a {
    transition: background-color 0.3s;
  }
  .more_list li a:hover {
    background: rgba(68, 122, 242, 0.1);
  }
}
@media (max-width: 800px) {
  .about_lead {
    margin: 0 0 40px;
    line-height: 2;
    text-align: left;
  }
  .about_movie {
    width: 100%;
  }
  .layout_more {
    padding: 40px 0;
  }
  .more_headline {
    margin: 0 0 20px;
  }
  .more_list {
    flex-direction: column;
  }
  .more_list li {
    width: 100%;
    margin: 0;
  }
  .more_list li + li {
    margin: 20px 0 0;
  }
  .more_list li a {
    padding: 20px 54px;
  }
  .more_title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #447AF2;
  }
}
/* media（メディア掲載記事）
 * ======================================== ======================================== */
.layout_media {
  padding: 125px 0 195px;
}

.media_list {
  margin-bottom: -50px;
}

.media_item {
  margin: 0 0 50px;
}

.media_link {
  display: block;
  height: 100%;
  color: #000;
  background: #fff;
  box-shadow: 3px 6px 35px -14px rgba(25, 57, 128, 0.36);
  border-radius: 0 0 10px 10px;
}

.media_image {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.media_image::before {
  content: "";
  display: block;
  padding-top: 53.71%;
}

.media_text {
  padding: 24px 20px 30px;
  line-height: 2;
}

.media_title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #447AF2;
  margin: 0 0 20px;
}

.media_tag {
  display: flex;
  justify-content: flex-end;
}
.media_tag li {
  padding: 0 18px;
  font-weight: 700;
  line-height: 2;
  color: #447AF2;
  background: #F3F3ED;
  border-radius: 30px;
}

@media (min-width: 801px) {
  .media_link {
    transition: opacity 0.3s;
  }
  .media_link:hover {
    opacity: 0.7;
  }
}
@media (max-width: 800px) {
  .layout_media {
    padding: 60px 0;
  }
  .media_item {
    margin: 0 0 30px;
  }
  .media_text {
    padding: 24px 20px 30px;
  }
  .media_title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #447AF2;
    margin: 0 0 20px;
  }
}
/* ==============================
   WordPress Plugin
 * ============================== */
.layout_wordpress {
  background-color: #327afa;
  background-image: url(https://imageflux.sakura.ad.jp/assets/images/image/for-wordpress.png);
  background-repeat: no-repeat;
  background-position: 100% 90%;
  background-size: 600px;
  padding: 104px 0;
}

.layout_wordpress h2 {
  padding: 0.3rem;
  background: #fff;
  display: inline-block;
  font-size: 1.9rem;
}

.layout_wordpress p.lead_text {
  padding: 0.5rem 0.3rem;
  margin-bottom: 0.7rem;
  background: #fff;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
}

.layout_wordpress p.lead_text span {
  background: #44FDAC;
}

.layout_wordpress p.wordpress_lead-text {
  color: #fff;
  font-size: 16px;
  line-height: 2;
  font-weight: bold;
  margin: 3rem 0;
}

.wordpress_lead-text-atten {
  color: #fff;
  margin: 1rem 0 0;
}

.layout_wordpress .wordpress_btn a {
  background: #44FDAC;
  border-radius: 3px;
  display: block;
  width: 290px;
  height: 60px;
  line-height: 60px;
  color: #1f1f1f;
  font-weight: bold;
  text-align: center;
  font-size: 1.3rem;
}

.layout_wordpress .wordpress_btn a:hover {
  opacity: 0.9;
  text-decoration: none;
}

.layout_wordpress .footnote_list {
  margin-top: 24px;
}

.layout_wordpress .footnote_list li {
  color: #fff;
  line-height: 24px;
}

.layout_wordpress .footnote_list a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 599px) {
  .layout_wordpress .wordpress_btn a {
    width: 90%;
    margin: 0 auto;
  }
  .layout_wordpress h2 {
    font-size: 1.5rem;
  }
  .layout_wordpress p.lead_text {
    font-size: 0.9rem;
  }
}
@media (max-width: 959px) {
  .layout_wordpress {
    background-image: none;
  }
}/*# sourceMappingURL=style_image.css.map */