@charset "UTF-8";
/* ----------------------------------------
   フォント
---------------------------------------- */

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------
   カラー
---------------------------------------- */
  /* キーカラー */
  --keyColorPrimary: #1b64a4;
  /* メインカラー */
  --keyColorSecondary: #2892ef;
  /* セカンダリーカラー */
  --keyColorTertiary: #73bfff;
  /* 第3カラー（Tertiary）*/

  /* アクセントカラー */
  --accentColorPrimary: #ffb129;
  /* メインカラー */
  --accentColorSecondary: #ffa200;
  /* セカンダリーカラー 濃いオレンジ */
  --accentColorTertiary: #ffc560;
  /* 第3カラー（Tertiary）薄いオレンジ */

  /* その他 */
  --colorBlack: #373238;
  /* フォントブラック */
  --colorDarkGray: #909094;
  /* 濃いグレー */
  --colorGray: #e3e8ed;
  /* グレー */
  --colorLightGray: #f9f9f9;
  /* 薄いグレー */

  /* 影の共通スタイル */
  --box-shadow-default: 0px 4px 4px rgba(0, 0, 0, 0.25);
  /* デフォルトの影 */
  --box-shadow-hover: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* ホバー時の影 */
}

/* ----------------------------------------
  共通スタイル
---------------------------------------- */
html {
  font-size: 62.5%;
  /* ※62.5％だと1rem=10px */
}

#frame {
  width: 100%;
  min-width: 1034px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  /* 16px */
}

.accentColorTxt {
  color: var(--accentColorSecondary);
}

.rightMgnSet {
  margin-right: 0.8rem;
}

.rightMgnSeth {
  margin-right: 0.4rem;
}

.spNone {
  display: block;
  /* PCでは表示させる */
}

.spShow {
  display: none;
}

.pcBreak {
  display: inline-block;
}

.spBreak {
  display: none;
}

/* ----------------------------------------
   CVエリア
---------------------------------------- */
.cvArea {
  padding: 4.8rem 0;
  background-color: #008ad8;
  color: #ffffff;
  text-align: center;
}

.cvArea .cvBtnTxt {
  margin-bottom: 2.4rem;
  font-size: 2.0rem;
  font-weight: 800;
}

.cvArea .cvBtnTxt>span {
  font-size: 1.6rem;
}

.cvArea .microCopy {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.6rem;
}

.cvArea .microCopy:before,
.cvArea .microCopy:after {
  content: "";
  width: 3%;
  height: 2px;
  /* 太さ */
  transform-origin: center;
  background-color: #ffffff;
}

.cvArea .microCopy:before {
  transform: rotate(60deg);
}

.cvArea .microCopy:after {
  transform: rotate(-60deg);
}

.cvArea .cvBtnWrap {
  display: flex;
  justify-content: center;
}

/* ----------------------------------------
  ボタン共通スタイル
---------------------------------------- */
.cvBtn {
  display: inline-block;
  margin-right: 1.6rem;
  padding: 1.6rem;
  width: 270px;
  font-size: 2.0rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--box-shadow-default);
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cvBtn:hover {
  box-shadow: var(--box-shadow-hover);
  opacity: 0.8;
}

.cvBtn:last-child {
  margin-right: 0;
}

/* お問い合わせ */
.contactTransitionBtn {
  border: 3px solid var(--keyColorSecondary);
  background: #ffffff;
  color: var(--keyColorSecondary);
}

/* 資料請求 */
.formTransitionBtn {
  border: 3px solid var(--accentColorSecondary);
  background: var(--accentColorPrimary);
  color: #ffffff;
  text-shadow:
    -0.0625rem -0.0625rem 0 var(--accentColorSecondary),
    0.0625rem -0.0625rem 0 var(--accentColorSecondary),
    -0.0625rem 0.0625rem 0 var(--accentColorSecondary),
    0.0625rem 0.0625rem 0 var(--accentColorSecondary);
}

/* ----------------------------------------
  セクションスタイル（背景色とパディング）
---------------------------------------- */
section {
  margin: 0 auto;
  padding: 6.4rem 0;
}

.secInner {
  margin: 0 auto;
  width: 1000px;
}

.bgLightBlue {
  background-color: #f4faff;
}

.bgYellow {
  background-color: #fffcf4;
}

.bottomLineOr {
  background: linear-gradient(transparent 70%, var(--accentColorTertiary) 70%, var(--accentColorTertiary) 90%, transparent 90%);
}

/* ----------------------------------------
   タイトル
---------------------------------------- */

h1,
h2,
h3 {
  font-weight: 800;
}

h4,
h5 {
  font-weight: 700;
}

.secSubHd {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--keyColorSecondary);
}

.secSubHd::before,
.secSubHd::after {
  content: "";
  width: 3%;
  height: 2px;
  /* 太さ */
  background-color: var(--keyColorSecondary);
  transform-origin: center;
}

.secSubHd::before {
  transform: rotate(60deg);
}

.secSubHd::after {
  transform: rotate(-60deg);
}

.secHd {
  position: relative;
  margin-bottom: 4.8rem;
  font-size: 4.0rem;
  line-height: 1.3;
  text-align: center;
  color: var(--keyColorPrimary);
  z-index: 1;
}

.secHd::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  font-size: 8.0rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow:
    -0.0625rem -0.0625rem 0 rgba(203, 252, 255, 0.6),
    0.0625rem -0.0625rem 0 rgba(203, 252, 255, 0.6),
    -0.0625rem 0.0625rem 0 rgba(203, 252, 255, 0.6),
    0.0625rem 0.0625rem 0 rgba(203, 252, 255, 0.6);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.secHd>.largeTxt {
  font-size: 4.8rem;
}

.secHd>.smTxt {
  font-size: 3.2rem;
}

.secHd>.xsmTxt {
  font-size: 2.4rem;
}

.contentTitle {
  position: relative;
  margin: 0 auto 5.2rem;
  color: var(--keyColorPrimary);
  text-align: center;
  font-size: 3.2rem;
  font-style: normal;
}

.contentTitle:after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -1rem;
  display: inline-block;
  width: 32px;
  height: 5px;
  background-color: var(--keyColorTertiary);
  transform: translate(-50%, 0%);
}

.contentTitle>span {
  font-size: 2.4rem;
}

/* ----------------------------------------
  ヘッダー
---------------------------------------- */
.headerArea {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid var(--colorGray);
}

.headerArea>.secInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.headerLogo>img {
  width: 224.547px;
  height: auto;
}

.headerNav {
  display: flex;
  list-style: none;
}

.headerBtn {
  display: inline-block;
  padding: 0.8rem;
  width: 178px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.headerBtn:hover {
  opacity: 0.8;
}

.headerBtn.contactTransitionBtn {
  border: 2px solid var(--keyColorSecondary);
}

.headerBtn.formTransitionBtn {
  border: 2px solid var(--accentColorPrimary);
}

/* ----------------------------------------
  MV
---------------------------------------- */
.mainVisualArea {
  padding: 4.8rem 0;
  overflow: hidden;
}

.mainVisualArea>.secInner {
  display: flex;
  justify-content: center;
}

.mainVisualMain {
  margin-right: 3.2rem;
  text-align: center;
}

/* 物販のリスクを減らして戦略的に儲けよう！ */
.mainVisualMain>.mainVisualLead {
  position: relative;
  display: inline-block;
  margin-bottom: 2.4rem;
  padding: 0.8rem 1.6rem;
  border-radius: 100px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--keyColorSecondary);
}

.mainVisualMain>.mainVisualLead:after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 14px solid var(--keyColorSecondary);
  border-bottom: 0;
  transform: translateX(-50%);
}

.mainVisualMain>.mainVisualLead>.smTxt {
  font-size: 2.0rem;
}

/* ドロップシッピングツール */
.mainVisualMain>.mainVisualTagline {
  display: inline-block;
  margin-bottom: -1rem;
  padding: 0.8rem 2.4rem;
  align-items: center;
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 800;
  background: var(--keyColorPrimary);
}

.mainVisualMain>.mainVisualCatchcopy {
  margin-bottom: 0.8rem;
  font-size: 8.0rem;
  color: var(--keyColorPrimary);
}

/* 在庫管理の自動化 */
.mainVisualMain>.mainVisualFeatureWrap {
  position: relative;
  margin: 0 auto;
  width: 330px;
}

.mainVisualMain>.mainVisualFeatureWrap::before,
.mainVisualMain>.mainVisualFeatureWrap::after {
  position: absolute;
  display: inline-block;
  content: "";
  top: 56%;
  width: 43px;
  height: 2px;
  /* 太さ */
  background-color: var(--keyColorPrimary);
  transform-origin: center;
  transform: translate(0%, -50%);
}

.mainVisualMain>.mainVisualFeatureWrap::before {
  left: 0;
}

.mainVisualMain>.mainVisualFeatureWrap::after {
  right: 0;
}

.mainVisualMain>.mainVisualFeatureWrap>.mainVisualFeature {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--keyColorPrimary);
}

.mainVisualMain>.mainVisualFeatureWrap>.mainVisualFeature>.smTxt {
  font-size: 2.4rem;
}

.mainVisualMain>.mainVisualFeatureWrap>.mainVisualFeature>.strongDots {
  padding-top: 0.1em;
  background-image: radial-gradient(circle at center, var(--accentColorPrimary) 20%, transparent 25%);
  /* 点の色とサイズ調整 */
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 28px 8px;
}

/* CV周り */
.mainVisualMain>.cvBtnArea {
  margin-top: 3.2rem;
}

/* CVボタン横並び */
.cvBtnArea>.cvBtnWrap {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

/* MVイラスト画像 */
.mvImg {
  width: 480px;
  height: 330px;
}

/* ----------------------------------------
  こんなお悩みありませんか？
---------------------------------------- */
.troubleArea {
  position: relative;
  background-image: url('../image/dropbot/trouble_bg_img.png');
  background-size: cover;
}

.troubleArea::after {
  position: absolute;
  display: inline-block;
  content: "";
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 67px solid transparent;
  border-left: 67px solid transparent;
  border-top: 52.875px solid #c6ddef;
  border-bottom: 0;
  transform: translate(-50%, 100%);
}

.troubleArea .troubleSubHd,
.troubleArea .troubleHd {
  color: #ffffff;
  text-align: center;
  font-weight: 600;
}

.troubleArea .troubleSubHdWrap {
  margin-bottom: 2.4rem;
  text-align: center;
}

.troubleArea .troubleSubHdWrap>.troubleSubHd {
  display: inline-block;
  padding-bottom: 8px;
  font-size: 2.0rem;
  border-bottom: 2px solid #ffffff;
}

.troubleArea .troubleSubHdWrap>.troubleSubHd>span {
  font-size: 1.6rem;
}

.troubleArea .troubleHd {
  margin-bottom: 2.4rem;
  font-size: 3.2rem;
}

.troubleArea .troubleHd>span {
  margin: 0 0.4rem;
  padding: 0 0.8rem;
  font-size: 4.0rem;
  line-height: 1;
  background-color: var(--keyColorPrimary);
}

.troubleArea .troubleListWrap {
  display: flex;
  justify-content: center;
}

.troubleArea .troubleListWrap>.troubleList {
  display: inline-block;
  padding: 3.2rem 7.2rem;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid var(--colorLightGray);
}

.troubleArea .troubleListWrap>.troubleList>li {
  margin-bottom: 1.6rem;
}

.troubleArea .troubleListWrap>.troubleList>li:last-child {
  margin-bottom: 0;
}

.troubleArea .troubleListWrap>.troubleList>li>p {
  display: flex;
  align-items: center;
  font-size: 2.0rem;
  font-weight: 500;
}

.troubleArea .troubleListWrap>.troubleList>li>p::before {
  content: "";
  display: inline-block;
  top: 50%;
  margin-right: 0.8rem;
  width: 26px;
  height: 24px;
  background-image: url('../image/dropbot/solution_check_img.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.troubleArea .troubleListWrap>.troubleList>li>p>span {
  color: var(--keyColorPrimary);
  font-weight: 700;
}

/* ----------------------------------------
  そのお悩みDropBotで解決できます！
---------------------------------------- */
.reasonArea {
  padding: 6.4rem 0 0;
}

/* そのお悩みDropBotで解決できます！ */
.reasonArea>.secInner>.secHd {
  position: relative;
  margin: 0 auto;
  font-size: 3.2rem;
}

.reasonArea>.secInner>.secHd::before {
  display: none;
}

.reasonArea>.secInner>.secHd>.line {
  position: absolute;
  top: 64%;
  width: 7%;
  height: 2px;
  /* 太さ */
  background-color: var(--keyColorSecondary);
  transform-origin: center;
}

.reasonArea>.secInner>.secHd>.line.left {
  left: 24%;
  transform: translate(0%, -50%) rotate(60deg);
}

.reasonArea>.secInner>.secHd>.line.left.second {
  left: 23%;
}

.reasonArea>.secInner>.secHd>.line.right {
  right: 24%;
  transform: translate(0%, -50%) rotate(-60deg);
}

.reasonArea>.secInner>.secHd>.line.right.second {
  right: 23%;
}

.reasonArea>.secInner>.secHd>.accentColorTxt {
  font-size: 4.0rem;
}


/* DropBotにはドロップシッピングで稼ぐ仕組み〜 */
.reasonArea>.aboutArea {
  margin-top: 3.2rem;
  padding: 3.2rem 0 6.4rem;
  width: 100%;
}

.reasonArea>.aboutArea .aboutMessage {
  color: var(--keyColorPrimary);
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
}

.reasonArea>.aboutArea .aboutMessage>p {
  margin-bottom: 1.6rem;
}

.reasonArea>.aboutArea .aboutMessage>p:last-child {
  margin-bottom: 0;
}

.reasonArea>.aboutArea .aboutMessage .largeTxt {
  font-size: 3.2rem;
}

.reasonArea>.aboutArea .aboutMessage .middleTxt {
  font-size: 2.8rem;
}

.reasonArea>.aboutArea .aboutMessage>.aboutPointFlex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.reasonArea>.aboutArea .aboutMessage>.aboutPointFlex p {
  margin-right: 0.8rem;
}

.reasonArea>.aboutArea .aboutMessage>.aboutPointFlex p:last-child {
  margin-right: 0;
}

.reasonArea>.aboutArea .aboutMessage .bgBlueTxt {
  padding: 0.8rem 1.2rem;
  font-size: 3.2rem;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--keyColorPrimary);
}

.reasonArea>.aboutArea .aboutMessage .bgBlueTxt>.smTxt {
  font-size: 2.4rem;
}

.reasonArea>.aboutArea .aboutMessage .blackTxt {
  color: var(--colorBlack);
}

.reasonArea>.aboutArea .aboutMessage .aboutPointConnector {
  margin: 1.6rem auto 1.2rem;
}

.reasonArea>.aboutArea .aboutMessage .bottomLineOr {
  margin: 0 auto;
}

/* DropBotとは？ */
.reasonArea>.aboutArea .aboutBox {
  margin: 3.2rem auto 0;
  padding: 4.0rem 3.2rem;
  border-radius: 6px;
  border: 3px solid var(--keyColorSecondary);
  background: #ffffff;
}

.reasonArea>.aboutArea .aboutBox>.aboutHd {
  margin-bottom: 2.4rem;
  color: var(--keyColorPrimary);
  font-size: 3.2rem;
}

.reasonArea>.aboutArea .aboutBox>.aboutHd>span {
  font-size: 2.4rem;
}

.reasonArea>.aboutArea .aboutBox>.aboutLead {
  font-weight: 400;
  line-height: 1.8;
}

.reasonArea>.aboutArea .aboutBox>.aboutLead>span {
  color: var(--keyColorPrimary);
  font-weight: 700;
  line-height: 1.8;
}

/* ----------------------------------------
  DropBotで売上UP事例
---------------------------------------- */

/* 物販初心者・物販経験者 */
.caseArea {
  position: relative;
  margin-bottom: 8.4rem;
}

.caseArea::after {
  position: absolute;
  display: inline-block;
  content: "";
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 78px solid transparent;
  border-left: 78px solid transparent;
  border-top: 70.5px solid #f4faff;
  border-bottom: 0;
  transform: translate(-50%, 100%);
}

.caseArea .secHd:before {
  content: "CASE STUDY";
  color: #f4faff;
}

/* 事例 */

.caseArea .caseWrap {
  margin-bottom: 5.6rem;
}

.caseArea .caseWrap:last-child {
  margin-bottom: 0;
}

.caseArea .caseWrap>.caseCard {
  margin: 0 auto;
  padding: 4.0rem;
  border-radius: 6px;
  background: #ffffff;
}

/* 事例　タイトル・物販歴・カテゴリ */
.caseArea .caseWrap>.caseCard>.caseCardHeader {
  display: flex;
  align-items: center;
  margin-bottom: 2.4rem;
}

.caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardTitle {
  margin-right: 3.2rem;
  width: 60%;
  color: var(--keyColorPrimary);
  font-size: 3.2rem;
}

.caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardInfo>li {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardInfo>li:last-child {
  margin-bottom: 0;
}

.caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardInfo>li>.caseCardInfoLabel {
  margin-right: 0.8rem;
  padding: 0.8rem;
  color: #ffffff;
  background-color: var(--keyColorSecondary);
  font-size: 1.6rem;
  font-weight: 400;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardText {
  margin-bottom: 2.4rem;
  color: var(--colorBlack);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardText>span {
  color: var(--keyColorPrimary);
  font-weight: 700;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportTitle {
  margin-bottom: 3.2rem;
  padding-bottom: 4px;
  color: var(--colorBlack);
  border-bottom: 3px solid var(--colorGray);
  font-size: 2.4rem;
  font-weight: 700;
}

/* 事例　テキスト　売上レポート */
.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap li {
  margin-right: 6.4rem;
  text-align: center;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap li:last-child {
  margin-right: 0;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap li.caseCardReportSummaryAfter {
  width: 21%;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap .caseCardReportSummaryLabel {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 4px 8px;
  color: #ffffff;
  font-size: 2.0rem;
  font-weight: 700;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSummary {
  color: var(--keyColorPrimary);
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSummary .smTxt {
  font-size: 1.6rem;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSummary .largeTxt {
  font-size: 3.2rem;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--accentColorSecondary);
  font-size: 1.6rem;
  font-weight: 700;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary::before,
.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary::after {
  content: "";
  width: 12%;
  height: 2px;
  /* 太さ */
  background-color: var(--accentColorSecondary);
  transform-origin: center;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary::before {
  transform: rotate(60deg);
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary::after {
  transform: rotate(-60deg);
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary .smTxt {
  font-size: 1.2rem;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary .largeTxt {
  font-size: 1.8rem;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap>.caseCardReportSummaryBefore>.caseCardReportSummary {
  color: var(--colorBlack);
  font-size: 2.0rem;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap>.caseCardReportSummaryBefore>.caseCardReportSummaryLabel {
  background: var(--keyColorSecondary);
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap>.caseCardReportSummaryAfter>.caseCardReportSummaryLabel {
  background: var(--accentColorPrimary);
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap>.caseCardReportSummaryArrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 24px solid #cbecff;
  border-right: 0;
}

.caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>img {
  margin-top: 2.4rem;
  width: 100%;
  height: auto;
}

/* ----------------------------------------
  DropBotが稼げる理由とは
---------------------------------------- */

.worksArea .secHd:before {
  content: "WHY IT WORKS";
}

.worksArea .worksLeadWrap {
  margin-bottom: 4.8rem;
  padding: 2.4rem 0;
}

.worksArea .worksLeadWrap>.worksLead {
  color: var(--keyColorPrimary);
  text-align: center;
  font-size: 3.2rem;
  font-weight: 800;
}

.worksArea .worksLeadWrap>.worksLead>.smTxt {
  font-size: 2.4rem;
}

.worksArea .worksItemlistWrap {
  margin-bottom: 4.8rem;
}

.worksArea .worksItemlistWrap:last-child {
  margin-bottom: 0;
}

.worksArea .worksItemlistWrap>.worksItemlist {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
  padding: 0 4.4rem;
}

.worksArea .worksItemlistWrap>.worksItemlist:last-child {
  margin-bottom: 0;
}

.worksArea .worksItemlistWrap>.worksItemlist li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 2.4rem 2.4rem 0;
  padding: 2.4rem;
  width: calc(100% / 3 - 68px);
  border-radius: 6px;
  text-align: center;
}

.worksArea .worksItemlistWrap>.worksItemlist li:nth-child(3),
.worksArea .worksItemlistWrap>.worksItemlist li:last-child {
  margin-right: 0;
}

.worksArea .worksItemlistWrap>.worksItemlist li:nth-child(4),
.worksArea .worksItemlistWrap>.worksItemlist li:nth-child(5) {
  margin-bottom: 0;
}

.worksArea .worksItemlistWrap>.worksItemlist li.meritItem {
  height: 226px;
  border: 2px solid var(--accentColorPrimary);
  background: #fffcf4;
}

.worksArea .worksItemlistWrap>.worksItemlist li.demeritItem {
  height: 226px;
  border: 2px solid var(--colorDarkGray);
  background: var(--colorLightGray);
}

.worksArea .worksItemlistWrap>.worksItemlist li>img {
  margin-bottom: 1.6rem;
  height: auto;
}

.worksArea .worksItemlistWrap>.worksItemlist li.meritItem>img {
  width: 65%;
}


.worksArea .worksItemlistWrap>.worksItemlist li.demeritItem>img {
  width: 60%;
}

.worksArea .worksItemlistWrap>.worksItemlist li.demeritItem:first-child>img {
  width: 80%;
}

.worksArea .worksItemlistWrap>.worksItemlist li>p {
  color: var(--keyColorPrimary);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.worksArea .worksItemlistWrap>.worksItemlist li>p>span {
  font-size: 2.0rem;
}

/* ----------------------------------------
  DropBotを使えばこのデメリットをすべて解消できます！
---------------------------------------- */

.benefitArea .secHd:before {
  content: "BENEFIT";
  color: #f4faff;
}

.benefitArea .benefitContent {
  margin-bottom: 40px;
  padding: 4.0rem 3.2rem;
  border-radius: 6px;
  background: #ffffff;
}

.benefitArea .benefitContent:last-child {
  margin-bottom: 0;
}

.benefitArea .benefitContent>.contentSubTitle {
  color: var(--keyColorTertiary);
  text-align: center;
  font-size: 4.0rem;
  font-weight: 700;
}

.benefitArea .benefitContent>.contentSubTitle>span {
  font-size: 1.6rem;
}

.benefitArea .benefitContent>.benefitContentInner {
  display: flex;
  justify-content: space-between;
}

.benefitArea .benefitContent>.benefitContentInner .demeritArea,
.benefitArea .benefitContent>.benefitContentInner .meritArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 49%;
}

.benefitArea .benefitContent>.benefitContentInner .demeritArea {
  padding-right: 16px;
  border-right: 2px solid var(--colorLightGray);
}

.benefitArea .benefitContent>.benefitContentInner .meritArea {
  padding-left: 16px;
}

.benefitArea .benefitContent>.benefitContentInner .demeritAreaLabel,
.benefitArea .benefitContent>.benefitContentInner .meritAreaLabel {
  display: inline-block;
  margin-bottom: 2.4rem;
  padding: 0.8rem;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
}

.benefitArea .benefitContent>.benefitContentInner .demeritAreaLabel {
  background-color: var(--keyColorPrimary);
}

.benefitArea .benefitContent>.benefitContentInner .meritAreaLabel {
  background-color: var(--accentColorPrimary);
}

.benefitArea .benefitContent>.benefitContentInner .demeritAreaTitle,
.benefitArea .benefitContent>.benefitContentInner .meritAreaTitle {
  margin-bottom: 0.8rem;
  text-align: center;
  font-size: 2.0rem;
}

.benefitArea .benefitContent>.benefitContentInner .demeritAreaTitle {
  color: var(--keyColorPrimary);
}

.benefitArea .benefitContent>.benefitContentInner .meritAreaTitle {
  color: var(--accentColorSecondary);
}

.benefitArea .benefitContent>.benefitContentInner .AreaText {
  font-weight: 400;
}

.benefitArea .benefitContent>.benefitContentInner .demeritArea>img,
.benefitArea .benefitContent>.benefitContentInner .meritArea>img {
  margin-top: 20px;
  width: 82%;
  height: auto;
}

.benefitArea .benefitContent:last-child>.benefitContentInner .demeritArea>img,
.benefitArea .benefitContent:last-child>.benefitContentInner .meritArea>img {
  width: 52%;
}

/* ----------------------------------------
  よくある質問
---------------------------------------- */

.faqArea {
  background-color: var(--colorLightGray);
}

.faqArea .secHd:before {
  content: "FAQ";
  color: var(--colorLightGray);
}

.faqArea .faqBlock>.faqBox {
  margin-bottom: 3.2rem;
  padding: 4.0rem;
  border-radius: 6px;
  background-color: #ffffff;
}

.faqArea .faqBlock>.faqBox:last-child {
  margin-bottom: 0;
}

.faqArea .faqBlock>.faqBox>.faqQuestion,
.faqArea .faqBlock>.faqBox>.faqAnswer {
  display: flex;
  justify-content: left;
  align-items: center;
}

.faqArea .faqBlock>.faqBox .faqLabel {
  margin-right: 1.6rem;
  font-size: 4.0rem;
  font-weight: 500;
}

.faqArea .faqBlock>.faqBox>.faqQuestion>.faqLabel {
  color: var(--keyColorTertiary);
}

.faqArea .faqBlock>.faqBox>.faqQuestion>.faqText {
  color: var(--keyColorPrimary);
  font-size: 2.4rem;
  font-weight: 700;
}

.faqArea .faqBlock>.faqBox>.faqAnswer {
  margin-top: 2.4rem;
}

.faqArea .faqBlock>.faqBox>.faqAnswer>.faqLabel {
  color: var(--accentColorTertiary);
}

.faqArea .faqBlock>.faqBox>.faqAnswer>.faqAnswerText {
  font-size: 2.0rem;
}

.faqArea .faqBlock>.faqBox>.faqAnswer .telArea {
  display: inline-block;
  margin-top: 12px;
  padding: 1.6rem 3.2rem;
}

.faqArea .faqBlock>.faqBox>.faqAnswer .telArea>a {
  color: var(--accentColorSecondary);
  font-size: 2.0rem;
  font-weight: 800;
  text-decoration: none;
}

.faqArea .faqBlock>.faqBox>.faqAnswer .telArea>p {
  color: var(--colorBlack);
  font-size: 1.2rem;
  font-weight: 400;
}

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

.flowArea .secHd:before {
  content: "FLOW";
  color: #f4faff;
}

.flowArea .flowBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flowArea .flowBlock li {
  margin-bottom: 1.6rem;
}

.flowArea .flowBlock li:last-child {
  margin-bottom: 0;
}

.flowArea .flowBlock>.flowBox {
  padding: 4.0rem;
  border-radius: 6px;
  background: #ffffff;
}

.flowArea .flowBlock>.flowBox>.flowHdWrap {
  display: flex;
  margin-bottom: 1.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  border-bottom: 2px solid #cbecff;
  color: var(--keyColorPrimary);
}

.flowArea .flowBlock>.flowBox>.flowHdWrap>.flowNum {
  margin-right: 1.6rem;
  color: var(--keyColorSecondary);
}

.flowArea .flowBlock>.flowBox>.flowHdWrap>.flowHd {
  color: var(--keyColorPrimary);
}

.flowArea .flowBlock>.flowBox>.flowDetail {
  display: flex;
  align-items: center;
}

.flowArea .flowBlock>.flowBox>.flowDetail>.flowTxt {
  margin-right: 24px;
  width: 60%;
}

.flowArea .flowBlock>.flowBox>.flowDetail>.flowImg {
  width: 40%;
}

.flowArea .flowBlock>.flowBox>.flowDetail>.flowImg>img {
  width: 100%;
  height: auto;
}

.flowArea .flowBlock>.flowArrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 76px solid transparent;
  border-left: 76px solid transparent;
  border-top: 40px solid #cbecff;
  border-bottom: 0;
}

/* ----------------------------------------
  フッター
---------------------------------------- */

.footerArea {
  padding: 2.4rem 0;
}

.footerArea .footerAreaCopyright {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
}

/* ----------------------------------------
  レスポンシブのブレークポイント
---------------------------------------- */
@media (max-width: 1024px) {

  /* タブレット用スタイル */
  #frame {
    width: 100%;
    min-width: 768px;
  }

  body {
    font-size: 1.6rem;
  }

  .spNone {
    display: none;
    /* PCでは表示させる */
  }

  .spShow {
    display: block;
  }

  .pcBreak {
    display: none;
  }

  .spBreak {
    display: inline-block;
  }

  /* ----------------------------------------
    CVエリア(TB)
  ---------------------------------------- */
  .cvArea {
    padding: 3.2rem 0;
  }

  .cvArea .cvBtnTxt {
    margin-bottom: 2.0rem;
  }

  .cvArea .microCopy:before,
  .cvArea .microCopy:after {
    content: "";
    width: 3%;
    height: 2px;
    /* 太さ */
    transform-origin: center;
    background-color: #ffffff;
  }

  .cvArea .microCopy:before {
    transform: rotate(60deg);
  }

  .cvArea .microCopy:after {
    transform: rotate(-60deg);
  }

  .cvArea .cvBtnWrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* ----------------------------------------
    ボタン共通スタイル (TB)
  ---------------------------------------- */
  .cvBtn {
    margin-right: 0;
    margin-bottom: 2.4rem;
    width: 343px;
    cursor: pointer;
    box-shadow: var(--box-shadow-default);
  }

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

  /* ----------------------------------------
    セクションスタイル（背景色とパディング）TB
  ---------------------------------------- */
  .secInner {
    margin: 0 auto;
    width: 95%;
  }

  /* ----------------------------------------
    タイトル (TB)
  ---------------------------------------- */
  .secSubHd {
    text-align: center;
  }

  .secSubHd::before,
  .secSubHd::after {
    width: 10%;
    max-height: 35px;
  }

  .secSubHd::before {
    transform: rotate(70deg);
  }

  .secSubHd::after {
    transform: rotate(-70deg);
  }

  .secHd {
    margin-bottom: 3.2rem;
  }

  .secHd::before {
    width: 95%;
  }

  .contentTitle {
    margin: 0 auto 3.2rem;
  }

  .contentTitle:after {
    bottom: -1rem;
  }

  /* ----------------------------------------
    ヘッダー (TB)
  ---------------------------------------- */
  .headerArea>.secInner {
    justify-content: center;
    align-items: center
  }

  /* ----------------------------------------
    MV (TB)
  ---------------------------------------- */

  .mainVisualArea>.secInner {
    flex-direction: column;
    align-items: center;
  }

  .mainVisualMain {
    margin-right: 0;
  }

  /* 物販のリスクを減らして戦略的に儲けよう！ */
  .mainVisualMain>.mainVisualLead {
    display: block;
    margin-bottom: 2.0rem;
    border-radius: 100px;
  }

  /* ドロップシッピングツール */
  .mainVisualMain>.mainVisualTagline {
    margin-bottom: -20px;
    padding: 0.8rem 2.4rem;
  }

  .mainVisualMain>.mainVisualCatchcopy {
    margin-bottom: 0.8rem;
  }

  /* CV周り */
  .mainVisualArea .cvBtnArea {
    margin-top: 2.4rem;
    width: 93%;
  }

  /* 恒常的な売上創出まで専任コンサルタントがサポート! */
  /* CVボタン縦並び */
  .mainVisualArea .cvBtnArea>.cvBtnWrap {
    flex-direction: column;
    align-items: center;
  }

  /* MVイラスト画像 */
  .mainVisualArea .mvImg {
    width: 95%;
    max-width: 491.287px;
    height: auto;
  }

  .mainVisualArea .cvBtnArea.spShow .cvBtnTxt {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 800;
    color: var(--keyColorSecondary);
  }

  .mainVisualArea .cvBtnArea.spShow .cvBtnTxt::before,
  .mainVisualArea .cvBtnArea.spShow .cvBtnTxt::after {
    content: "";
    width: 11%;
    max-width: 46px;
    height: 2px;
    /* 太さ */
    background-color: var(--keyColorSecondary);
    transform-origin: center;
  }

  /* ----------------------------------------
  こんなお悩みありませんか？ (TB)
  ---------------------------------------- */
  .troubleArea {
    background-image: url('../image/dropbot/trouble_bg_img_sp.png');
    background-size: cover;
  }

  .troubleArea::after {
    border-right: 54px solid transparent;
    border-left: 54px solid transparent;
    border-top: 42.3px solid #dcebf5
  }

  .troubleArea .troubleListWrap>.troubleList {
    padding: 2.4rem;
  }

  .troubleArea .troubleListWrap>.troubleList>li {
    margin-bottom: 1.4rem;
  }

  .troubleArea .troubleListWrap>.troubleList>li:last-child {
    margin-bottom: 0;
  }

  .troubleArea .troubleListWrap>.troubleList>li>p::before {
    width: 18px;
    height: 24px;
  }

  /* ----------------------------------------
  そのお悩みDropBotで解決できます！(TB)
  ---------------------------------------- */

  /* そのお悩みDropBotで解決できます！ */
  .reasonArea>.secInner>.secHd {
    width: 95%;
  }

  .reasonArea>.secInner>.secHd>.line {
    top: 70%;
    width: 20%;
    max-width: 66px;
  }

  .reasonArea>.secInner>.secHd>.line.left {
    left: 17%;
    transform: translate(0%, -50%) rotate(70deg);
  }

  .reasonArea>.secInner>.secHd>.line.left.second {
    left: 16%;
  }

  .reasonArea>.secInner>.secHd>.line.right {
    right: 17%;
    transform: translate(0%, -50%) rotate(-70deg);
  }

  .reasonArea>.secInner>.secHd>.line.right.second {
    right: 16%;
  }


  /* DropBotにはドロップシッピングで稼ぐ仕組み〜 */

  .reasonArea>.aboutArea .aboutMessage>.aboutPointFlex {
    flex-direction: column;
  }

  /* ----------------------------------------
    DropBotで売上UP事例 (TB)
  ---------------------------------------- */

  /* 物販初心者・物販経験者 */
  .caseArea {
    margin-bottom: 6.0rem;
  }

  .caseArea::after {
    border-right: 54px solid transparent;
    border-left: 54px solid transparent;
    border-top: 48px solid #f4faff;
  }

  /* 事例　タイトル・物販歴・カテゴリ */
  .caseArea .caseWrap>.caseCard>.caseCardHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardTitle {
    margin: 0 0 1.2rem;
    width: 100%;
  }

  .caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardInfo>li {
    margin-bottom: 0.8rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardText {
    margin-bottom: 1.6rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportTitle {
    margin-bottom: 1.6rem;
    padding-bottom: 2px;
  }

  /* 事例　テキスト　売上レポート */
  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap li {
    margin-right: 1.6rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap .caseCardReportSummaryLabel {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary::before,
  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary::after {
    width: 9%;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary .smTxt {
    font-size: 1.0rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary .largeTxt {
    font-size: 1.4rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap>li.caseCardReportSummaryAfter {
    width: 41%;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap>.caseCardReportSummaryArrow {
    margin-right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 19px solid #cbecff;
    border-right: 0;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>img {
    margin-top: 1.6rem;
  }

  /* ----------------------------------------
    DropBotが稼げる理由とは (TB)
  ---------------------------------------- */

  .worksArea .secSubHd::before,
  .worksArea .secSubHd::after {
    width: 5%;
    max-height: 16px;
  }

  .worksArea .worksLeadWrap {
    margin-bottom: 4.8rem;
    padding: 2.4rem 0;
  }

  .worksArea .worksLeadWrap>.worksLead {
    font-size: 2.4rem;
  }

  .worksArea .worksLeadWrap>.worksLead>.smTxt {
    font-size: 1.6rem;
  }

  .worksArea .worksItemlistWrap {
    margin-bottom: 3.2rem;
  }

  .worksArea .worksItemlistWrap>.worksItemlist {
    align-items: flex-start;
    margin: 4.0rem auto 2.4rem;
    padding: 0;
  }

  .worksArea .worksItemlistWrap>.worksItemlist:last-child {
    margin-bottom: 0;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li {
    margin-right: 1.6rem;
    padding: 0.1rem;
    width: calc(100% / 2 - 35px);
  }

  .worksArea .worksItemlistWrap>.worksItemlist li:nth-child(3) {
    margin-right: 1.6rem;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li:nth-child(4) {
    margin-bottom: 1.6rem;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li:nth-child(2n),
  .worksArea .worksItemlistWrap>.worksItemlist li:last-child {
    margin-right: 0;
  }


  .worksArea .worksItemlistWrap>.worksItemlist li.meritItem {
    height: 148px;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li.demeritItem {
    height: 163px;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li>img {
    margin-bottom: 1.6rem;
    height: auto;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li.meritItem>img {
    width: 35%;
    max-width: 97px;
  }


  .worksArea .worksItemlistWrap>.worksItemlist li.demeritItem>img {
    width: 30%;
    max-width: 93px;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li.demeritItem:first-child>img {
    width: 40%;
    max-width: 129px;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li>p {
    font-size: 1.6rem;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li>p>span {
    font-size: 1.2rem;
  }

  /* ----------------------------------------
  DropBotを使えばこのデメリットをすべて解消できます！  (TB)
  ---------------------------------------- */

  .benefitArea .benefitContent {
    margin-bottom: 2.4rem;
    padding: 2.4rem 1.6rem;
  }

  .benefitArea .benefitContent>.benefitContentInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .benefitArea .benefitContent>.benefitContentInner .demeritArea,
  .benefitArea .benefitContent>.benefitContentInner .meritArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .benefitArea .benefitContent>.benefitContentInner .demeritArea {
    padding: 0 0 1.6rem 0;
    border-bottom: 2px solid var(--colorLightGray);
    border-right: none;
  }

  .benefitArea .benefitContent>.benefitContentInner .meritArea {
    padding: 1.6rem 0 0 0;
  }

  .benefitArea .benefitContent>.benefitContentInner .demeritAreaLabel,
  .benefitArea .benefitContent>.benefitContentInner .meritAreaLabel {
    margin-bottom: 1.6rem;
  }

  .benefitArea .benefitContent>.benefitContentInner .demeritAreaTitle,
  .benefitArea .benefitContent>.benefitContentInner .meritAreaTitle {
    font-size: 1.6rem;
  }

  .benefitArea .benefitContent>.benefitContentInner .demeritArea>img,
  .benefitArea .benefitContent>.benefitContentInner .meritArea>img {
    margin-top: 1.6rem;
    width: 52%;
  }

  .benefitArea .benefitContent:last-child>.benefitContentInner .demeritArea>img,
  .benefitArea .benefitContent:last-child>.benefitContentInner .meritArea>img {
    width: 33%;
  }

  /* ----------------------------------------
  よくある質問  (TB)
  ---------------------------------------- */
  .faqArea .faqBlock>.faqBox {
    margin-bottom: 2.4rem;
    padding: 2.4rem 1.6rem;
  }

  .faqArea .faqBlock>.faqBox .faqLabel {
    margin-right: 0.8rem;
  }

  .faqArea .faqBlock>.faqBox>.faqAnswer .telArea {
    margin-top: 0.8rem;
  }

  /* ----------------------------------------
    ご利用までの流れ (TB)
  ---------------------------------------- */
  .flowArea .flowBlock>.flowBox {
    padding: 2.4rem 1.6rem;
  }

  .flowArea .flowBlock>.flowArrow {
    border-right: 38px solid transparent;
    border-left: 38px solid transparent;
    border-top: 20.25px solid #cbecff;
  }

  /* ----------------------------------------
    フッター (TB)
  ---------------------------------------- */

  .footerArea {
    padding: 1.6rem 0;
  }
}

@media (max-width: 767px) {
  /* スマホ用スタイル */

  #frame {
    width: 100%;
    min-width: 344px;
  }

  body {
    font-size: 1.4rem;
  }

  /* ----------------------------------------
    ボタン共通スタイル (SP)
  ---------------------------------------- */
  .cvBtn {
    width: 85%;
    max-width: 343px;
  }

  /* ----------------------------------------
    セクションスタイル（背景色とパディング）SP
  ---------------------------------------- */
  section {
    padding: 4.0rem 0;
  }

  /* ----------------------------------------
    タイトル (SP)
  ---------------------------------------- */
  .secSubHd {
    text-align: center;
    font-size: 1.6rem;
  }

  .secHd {
    margin-bottom: 3.2rem;
    font-size: 3.2rem;
  }

  .secHd::before {
    width: 95%;
    font-size: 4.0rem;
  }

  .secHd>.largeTxt {
    font-size: 3.2rem;
  }

  .secHd>.smTxt {
    font-size: 1.7rem;
  }

  .secHd>.xsmTxt {
    font-size: 1.4rem;
  }

  .contentTitle {
    font-size: 2.4rem;
  }

  .contentTitle>span {
    font-size: 2.0rem;
  }

  /* ----------------------------------------
    ヘッダー (SP)
  ---------------------------------------- */
  .headerArea {
    width: 100%;
    height: 53px;
  }

  .headerArea>.secInner {
    display: block;
    text-align: center;
  }

  .headerLogo {
    display: inline-block;
  }

  .headerLogo>img {
    width: 66%;
    max-width: 224.547px;
    height: auto;
  }

  /* ----------------------------------------
    MV (SP)
  ---------------------------------------- */
  .mainVisualArea {
    padding: 2.4rem 0;
  }

  /* 物販のリスクを減らして戦略的に儲けよう！ */
  .mainVisualMain>.mainVisualLead {
    font-size: 1.6rem;
  }

  .mainVisualMain>.mainVisualLead>.smTxt {
    font-size: 1.2rem;
  }

  /* ドロップシッピングツール */
  .mainVisualMain>.mainVisualTagline {
    font-size: 2.0rem;
  }

  .mainVisualMain>.mainVisualCatchcopy {
    font-size: 7.2rem;
  }

  /* 在庫管理の自動化 */
  .mainVisualMain>.mainVisualFeatureWrap>.mainVisualFeature {
    font-size: 2.4rem;
  }

  .mainVisualMain>.mainVisualFeatureWrap>.mainVisualFeature>.smTxt {
    font-size: 2.0rem;
  }

  .mainVisualMain>.mainVisualFeatureWrap>.mainVisualFeature>.strongDots {
    background-size: 24px 8px;
  }

  .mainVisualArea .cvBtnArea.spShow .cvBtnTxt {
    font-size: 1.6rem;
  }

  .mainVisualArea .cvBtnArea.spShow .cvBtnTxt .smTxt {
    font-size: 1.2rem;
  }

  /* ----------------------------------------
  こんなお悩みありませんか？ (SP)
  ---------------------------------------- */

  .troubleArea .troubleSubHdWrap {
    margin-bottom: 1.6rem;
  }

  .troubleArea .troubleSubHdWrap>.troubleSubHd {
    font-size: 1.4rem;
  }

  .troubleArea .troubleSubHdWrap>.troubleSubHd>span {
    font-size: 1.2rem;
  }

  .troubleArea .troubleHd {
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
  }

  .troubleArea .troubleHd>span {
    margin: 0 0.4rem;
    padding: 0 0.2rem;
    font-size: 2.8rem;
  }

  .troubleArea .troubleListWrap>.troubleList>li>p {
    font-size: 1.4rem;
  }

  /* ----------------------------------------
  そのお悩みDropBotで解決できます！(SP)
  ---------------------------------------- */

  /* そのお悩みDropBotで解決できます！ */
  .reasonArea>.secInner>.secHd {
    max-width: 350px;
    font-size: 1.4rem;
  }

  .reasonArea>.secInner>.secHd>.line.left {
    left: 7%;
  }

  .reasonArea>.secInner>.secHd>.line.left.second {
    left: 6%;
  }

  .reasonArea>.secInner>.secHd>.line.right {
    right: 7%;
  }

  .reasonArea>.secInner>.secHd>.line.right.second {
    right: 6%;
  }

  .reasonArea>.secInner>.secHd>.accentColorTxt {
    font-size: 3.2rem;
  }


  /* DropBotにはドロップシッピングで稼ぐ仕組み〜 */
  .reasonArea>.aboutArea {
    margin-top: 2.4rem;
    padding: 4.0rem 0;
  }

  .reasonArea>.aboutArea .aboutMessage {
    font-size: 2.0rem;
  }

  .reasonArea>.aboutArea .aboutMessage>p {
    margin-bottom: 0.8rem;
    line-height: 1.3;
  }

  .reasonArea>.aboutArea .aboutMessage .largeTxt,
  .reasonArea>.aboutArea .aboutMessage .middleTxt {
    font-size: 2.4rem;
  }

  .reasonArea>.aboutArea .aboutMessage>.aboutPointFlex {
    flex-direction: column;
  }

  .reasonArea>.aboutArea .aboutMessage>.aboutPointFlex p {
    margin-right: 0;
  }

  .reasonArea>.aboutArea .aboutMessage .bgBlueTxt {
    padding: 0.8rem 1.2rem;
    font-size: 2.4rem;
  }

  .reasonArea>.aboutArea .aboutMessage .bgBlueTxt>.smTxt {
    font-size: 1.6rem;
  }

  .reasonArea>.aboutArea .aboutMessage .aboutPointConnector {
    margin: 1.6rem auto 0.8rem;
  }

  /* DropBotとは？ */
  .reasonArea>.aboutArea .aboutBox {
    margin: 2.4rem auto 0;
    padding: 2.4rem;
  }

  .reasonArea>.aboutArea .aboutBox>.aboutHd {
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
  }

  .reasonArea>.aboutArea .aboutBox>.aboutHd>span {
    font-size: 2.0rem;
  }

  /* ----------------------------------------
    DropBotで売上UP事例 (SP)
  ---------------------------------------- */

  /* 事例 */

  .caseArea .caseWrap {
    margin-bottom: 3.2rem;
  }

  .caseArea .caseWrap>.caseCard {
    padding: 2.4rem 1.6rem;
  }

  /* 事例　タイトル・物販歴・カテゴリ */
  .caseArea .caseWrap>.caseCard>.caseCardHeader {
    margin-bottom: 1.6rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardTitle {
    font-size: 2.0rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardHeader>.caseCardInfo>li>.caseCardInfoLabel {
    font-size: 1.4rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardText {
    font-size: 1.4rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportTitle {
    font-size: 2.0rem;
  }

  /* 事例　テキスト　売上レポート */

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport>.caseCardReportSummaryWrap .caseCardReportSummaryLabel {
    font-size: 1.2rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSummary {
    font-size: 1.6rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSummary .smTxt {
    font-size: 1.2rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSummary .largeTxt {
    font-size: 2.0rem;
  }

  .caseArea .caseWrap>.caseCard>.caseCardBody>.caseCardReport .caseCardReportSubSummary {
    font-size: 1.4rem;
  }

  /* ----------------------------------------
    DropBotが稼げる理由とは(SP)
  ---------------------------------------- */

  .worksArea .worksItemlistWrap>.worksItemlist li.meritItem>img {
    width: 65%;
    max-width: 109px;
  }


  .worksArea .worksItemlistWrap>.worksItemlist li.demeritItem>img {
    width: 60%;
    max-width: 95px;
  }

  .worksArea .worksItemlistWrap>.worksItemlist li.demeritItem:first-child>img {
    width: 80%;
    max-width: 125px;
  }

  /* ----------------------------------------
  DropBotを使えばこのデメリットをすべて解消できます！ (SP)
  ---------------------------------------- */

  .benefitArea .benefitContent>.contentSubTitle {
    font-size: 3.6rem;
  }

  .benefitArea .benefitContent>.benefitContentInner .demeritArea>img,
  .benefitArea .benefitContent>.benefitContentInner .meritArea>img {
    width: 82%;
    max-width: 346px;
  }

  .benefitArea .benefitContent:last-child>.benefitContentInner .demeritArea>img,
  .benefitArea .benefitContent:last-child>.benefitContentInner .meritArea>img {
    width: 52%;
    max-width: 279px;
  }

  /* ----------------------------------------
  よくある質問 (SP)
  ---------------------------------------- */
  .faqArea .faqBlock>.faqBox .faqLabel {
    font-size: 3.2rem;
  }

  .faqArea .faqBlock>.faqBox>.faqQuestion>.faqText {
    font-size: 2.0rem;
  }

  .faqArea .faqBlock>.faqBox>.faqAnswer>.faqAnswerText {
    font-size: 1.6rem;
  }

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

  .flowArea .flowBlock>.flowBox>.flowHdWrap {
    flex-direction: column;
    justify-content: center;
    font-size: 2.0rem;
    text-align: center;
    border-bottom: 2px solid #cbecff;
  }

  .flowArea .flowBlock>.flowBox>.flowHdWrap>.flowNum {
    margin-right: 2.0rem;
  }

  .flowArea .flowBlock>.flowBox>.flowDetail {
    flex-direction: column;
    justify-content: center;
  }

  .flowArea .flowBlock>.flowBox>.flowDetail>.flowTxt {
    margin: 0 0 0.8rem 0;
    width: 100%;
  }

  .flowArea .flowBlock>.flowBox>.flowDetail>.flowImg {
    width: 100%;
  }

  .flowArea .flowBlock>.flowBox>.flowDetail>.flowImg>img {
    width: 100%;
    height: auto;
  }

}