@charset "UTF-8";
/* CSS Document */
@media only screen and (max-width : 768px) {
  /*-------------------------------------------------------------------------------------
スマホ用レイアウト（768px以下スクリーン）
----------------------------------------------------------------------------------------*/
  /*--------------------------------------------------
共通設定(スマホ)
-----------------------------------------------------*/
  /*body全体の初期スタイル調整*/
  body {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  /*--------------------------------------------------
見出しタグ設定（スマホ）
-----------------------------------------------------*/
  h2 {
    margin: 0.5em 0em;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
  }
  h3 {
    margin: 0.5em 0em;
    padding: 0.3em 0.6em;
    font-size: 1.4em;
    font-weight: bold;
    border-left: 8px solid #10559A;
    border-bottom: 1px dotted #10559A;
  }
  h4 {
    margin: 0.5em 0em;
    padding: 0.3em 0.6em;
    font-size: 1.2em;
    border: 1px solid #ccc;
    font-weight: bold;
  }
  h5 {
    margin: 0.5em 0em;
    padding: 0.1em;
    font-size: 1em;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
  }
  /*--------------------------------------------------
全体レイアウト／背景設定（スマホ）
-----------------------------------------------------*/
  /*全体エリア（全体背景を設定するにはここ）*/
  .main {
    background-color: #f2f2f2;
  }
  /*記事(ボディ)エリア*/
  .article {
    background-color: #fff;
    border-left: none;
    border-right: none;
    font-size: 1.6em; /*=16px*/
  }
  /*記事(ボディ)エリアの行間*/
  .article p {
    line-height: 1.6;
  }
  /*カラム全体の幅を変更する*/
  .article, .top_image_in {
    width: 100%;
    margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
  }
  /*--------------------------------------------------
上部固定ヘッダー設定
-----------------------------------------------------*/
.header_inr {
    padding: 0.8em 1em;   /* 上下余白を少し広めに */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8em;           /* ロゴとの間隔 */
  }

  /* ロゴ */
  .header_logo img {
    height: 28px;
    width: auto;
  }

  /* CTAボタン（大きめに） */
  .header_btn img {
    height: auto;
    max-height: 46px;     /* ★ 高さを拡大 */
    max-width: 180px;     /* ★ 横幅も拡張 */
    width: auto;
    display: block;
  }
  
/*--------------------------------------------------
ファーストビュー
-----------------------------------------------------*/
.fv {
    height: auto; /* 固定高さを解除して可変に */
    padding: 3em 1em; /* 上下に余白を確保 */
    text-align: center; /* 全体中央寄せ */
  }

  .fv_inner {
    max-width: 100%;
    margin: 0 auto;
  }

  .h1 {
    font-size: 1.8em; /* 見出しを縮小 */
    line-height: 1.4;
    margin-top: 0;
    text-align: center;
  }

  .h1_span {
    font-size: 1.2em; /* 強調部分も調整 */
  }

  .fv_sub {
    font-size: 1.2em;
    line-height: 1.5;
    margin-top: 0.5em;
    text-align: center;
  }

  .fv_copy {
    text-align: center; /* スマホでは中央寄せ */
    width: 100%;
  }

  .fv_cta {
    margin: 2em auto 0;
    text-align: center;
    display: block;
  }

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

  .fv_btn img {
    width: 90%;     /* 画面幅にフィットさせる */
    max-width: 360px; /* タップしやすい幅で制限 */
    height: auto;
    display: block;
    margin: 0 auto;
  }

/*--------------------------------------------------
About Us
-----------------------------------------------------*/
  .section_about {
    display: block;
    padding: 1em 1em;
  }

  .about_inr {
    padding: 2em 1em;
  }

  .about_title {
    margin-bottom: 2.5em;
  }

  .about_title img {
    width: 70%;
    max-width: 300px;
  }

  .about_lead p {
    font-size: 1.5em;
    line-height: 1.7;
    padding: 0 1em;
  }

  .feature_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.7em 0.2em;  /* 縦横の間隔 */
    margin-top: 3em;
    margin-bottom: 2em;
  }

  .feature_list li {
    flex: 1 1 calc(50% - 1em); /* 2列レイアウト */
    text-align: center;
  }

  .feature_list img {
    width: 65%;   /* スマホで程よい大きさ */
    max-width: 180px;
    margin: 0 auto;
    height: auto;
  }

  .feature_list li:nth-child(-n+5) {
    margin-bottom: 0; /* PC用の余白をリセット */
  }


/*--------------------------------------------------
industry
-----------------------------------------------------*/
.section_industry {
    display: block; /* flex解除 */
    padding: 1em 1em;
  }

  .industry_inr {
    padding: 3em 1em;
  }

  .industry_title {
    margin-bottom: 2em;
  }

  .industry_title img {
    width: 70%;
    max-width: 280px;
  }

  .industry_lead p {
    font-size: 1.4em;
    line-height: 1.6;
    padding: 0 1em;
  }

  .industry_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em; /* 縦横の隙間を調整 */
    justify-content: space-between; /* 左右に均等配置 */
    font-size: 1.2em;
    margin-top: 2em;
  }

  .industry_card {
    flex: 0 0 calc(50% - 0.8em); /* 2列レイアウト */
    background: #fff;
    border: 1px solid #335a94;
    border-radius: 0.3em;
    padding: 0.8em;
    text-align: center;
    font-size: 1em;
  }






/*--------------------------------------------------
CTA
-----------------------------------------------------*/
  .section_cta {
    display: block; /* flex解除 */
    padding: 3em 1em;
    text-align: center;
  }

  .cta_inr {
    max-width: 100%;
    padding: 2.5em 1em;
  }

  .section_cta h2,
  .section_cta .h2 {
    font-size: 2.8em;   /* 見出し小さめに */
    margin-bottom: 1em;
    flex-direction: column; /* 疑似要素の横線を外して縦揃え */
  }

  .section_cta .h2::before,
  .section_cta .h2::after {
    display: none; /* スマホでは横線を非表示にする */
  }

  .page_cta_microcopy {
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 0.3em;
    padding: 0 1em;
  }

  .page_cta_btn {
    display: block; /* 画像を中央寄せ */
    width: 100%;
  }

  .page_cta_btn img {
    width: 100%;       /* スマホで大きめに */
    max-width: 360px; /* 横幅制限で調整 */
    height: auto;
    margin: 0 auto;
  }

/*--------------------------------------------------
悩み
-----------------------------------------------------*/
.section_nayami {
    padding: 0.5em 1em;
    padding-bottom: 3em;
  }

  .nayami_inr {
    padding: 4em 1em;
  }

  .nayami_title p {
    font-size:2.5em;
    line-height: 1.5;
    margin-bottom: 0em;
  }

  .nayami_01_02 {
    flex-direction: column;  /* 横並び→縦並び */
    gap: 3.7em;                /* 画像の間隔を少し詰める */
    max-width: 100%;
  }

  .nayami_01 img,
  .nayami_02 img {
    width: 90%;       /* スマホでは少し余白を残して縮小 */
    max-width: 320px; /* 最大幅制限でバランスをとる */
    margin: 0 auto;
  }

  @media (max-width: 768px) {
  .nayami_title {
    margin-bottom: 3em; /* ← 6emを縮める */
  }
  .nayami_title p {
    margin-bottom: 2.5em; /* 念のため */
  }
}

/*--------------------------------------------------
解決
-----------------------------------------------------*/

.section_kaiketsu {
    padding-bottom: 3em; /* 下余白を少し縮小 */
  }

  .kaiketsu_banner {
    padding: 2em 1em; /* バナー内の上下余白を減らす */
    margin-bottom: 2.5em; /* バナー下の余白も縮小 */
  }

  .kaiketsu_banner p {
    font-size: 1.8em;   /* 見出し文字を縮小 */
    line-height: 1.5;

  }

  .kaiketsu_lead p {
    font-size: 1.6em;  /* リード文も小さめに */
    line-height: 1.6;
  }

  .kaiketsu_contents {
    padding: 3em 1em;  /* 青背景部分の余白を縮小 */
  }

  .kaiketsu_person {
    margin-bottom: 2em; /* 画像下余白を縮小 */
  }

  .kaiketsu_person img {
    width: 30%;   /* スマホでは大きめに表示 */
    max-width: 160px;
  }

  .kaiketsu_list img {
    width: 90%;   /* リスト画像は幅広に */
    max-width: 360px;
  }

  .kaiketsu_inr{
    padding: 0 1em 0;
  }


/*--------------------------------------------------
選ばれる理由
-----------------------------------------------------*/
.section_reason {
    padding: 4em 1em;   /* 上下余白を縮小 */
  }

  .reason_inr {
    max-width: 100%;   /* スマホ幅いっぱい */
    padding: 0 1em;    /* 左右に少し余白 */
  }

  .reason_title {
    margin: 0 0 3em 0; /* 上下余白を詰める */
  }

  .reason_title img {
    width: 80%;        /* タイトル画像を大きめに */
    max-width: 280px;
  }

  .reason_01,
  .reason_02,
  .reason_03,
  .reason_04,
  .reason_05 {
    margin-bottom: 2.5em; /* 画像同士の余白を小さめに */
    text-align: center;
  }

  .reason_01 img,
  .reason_02 img,
  .reason_03 img,
  .reason_04 img,
  .reason_05 img {
    width: 100%;         /* 横幅を広めに */
    height: auto;
    margin: 0 auto;
  }

  @media only screen and (max-width: 768px) {
  .section_reason {
    clip-path: none;   /* 斜めカットを解除 */
    border-top-left-radius: 0;  /* 万一の丸みもリセット */
    border-top-right-radius: 0;
  }
}


/*--------------------------------------------------
ご利用の流れ
-----------------------------------------------------*/
.section_step {
    padding: 5em 1em; /* 上下の余白を縮小 */
    padding-bottom: 3em;
  }

  .step_title {
    margin-bottom: 4em; /* タイトル余白縮小 */
  }

  .step_title img {
    width: 50%; 
    max-width: 280px;
  }

  .steps_row {
    flex-direction: column; /* 縦並びに */
    align-items: center;
    gap: 2em; /* ステップと矢印の間隔を広げる */
    margin-bottom: 3em;
  }

  .step {
    max-width: 100%; /* 幅制限を解除 */
    text-align: center;
  }

  .icon_wrap {
    width: 140px;  /* 少し小さめに */
    height: 140px;
    margin-bottom: 1em;
  }

  .icon_wrap img {
    max-width: 50%; /* アイコンは少し大きめ */
    margin-bottom: 1em;
  }

  .step_label {
    font-size: 1.5em;
  }

.step h3 {
  display: inline-block; /* ← inline を inline-block に変更 */
  background: linear-gradient(to top, #fff176 50%, transparent 50%);
}

  .step p {
    font-size: 1.5em;
    line-height: 1.5;
    padding: 0 1em;
  }

  .arrow {
    width: 18px;   /* 矢印アイコンを小さめに */
    transform: rotate(90deg); /* 横向きを縦向きに変更 */
  }


/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
.section_qa{
  padding: 5em 1em 3em;
}

.qa_title {
  text-align: center;
  margin-bottom: 4em;
}

.qa_title img {
  width: 35%;
}

  /* 質問・回答ヘッダー全体 */
  .qa-header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せに固定 */
    gap: 0.5em;
  }

  /* Q. / A. マーカー共通 */
  .qa-qmarker,
  .qa-amarker {
    display: inline-block;
   
    text-align: left;
    margin-right: 0.5em;
    font-weight: bold;
    font-size: 1.4em;   /* 少し小さめ */
    color: #00b7ee;
    line-height: 1;
  }


  /* プラス/マイナスアイコン */
  .qa-icon {
    width: 24px;
    height: 24px;
  }
  .qa-icon::before {
    width: 8px;
    height: 1.5px;
  }
  .qa-icon::after {
    width: 1.5px;
    height: 8px;
  }

  .qa-answer p{
    font-size: 1.5em;
  }

  .qa-qmarker{
    font-size: 2em;
  }

  .qa-amarker{
    font-size: 1.4em;
  }

  .qa-answer-summary {
  flex: 1;
  font-size: 1em;
  color: #222222;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-left: 0.8em;
}

.qa-question{
   font-size: 1.5em;
}


/*--------------------------------------------------
サポート
-----------------------------------------------------*/
.support_inr {
    padding: 4em 1.5em;   /* 上下余白を縮小 */
  }

  .support_title img {
    width: 65%;           /* タイトル画像を大きめに */
  }

  .support_title{
    margin-bottom: 3em;
  }

  .support_person img {
    width: 40%;           /* 人物イラストを大きめに */
  }

  .support_lead p {
    font-size: 1.65em;
    line-height: 1.7;
    padding: 0 0.5em;
  }

  /* 各サポートボックスを縦並びに */
  .support_01,
  .support_02,
  .support_03 {
    flex-direction: column;
    text-align: center;
    padding: 2em 1.5em;
  }

  /* アイコンを上に配置 */
  .support_icon_01,
  .support_icon_02,
  .support_icon_03 {
    margin: 0 0 1em 0;
    text-align: center;
  }

  .support_icon_01 img,
  .support_icon_02 img,
  .support_icon_03 img {
    width: 30%;   /* 適度な大きさに */
  }

  /* タイトル・本文を中央寄せ */
  .support_01_title,
  .support_02_title,
  .support_03_title {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 0.5em;
  }

  .support_01_p,
  .support_02_p,
  .support_03_p {
    font-size: 1.4em;
    line-height: 1.6;
    text-align: center;
  }
/*--------------------------------------------------
埋め込み問い合わせフォーム
-----------------------------------------------------*/
.contact {
    padding: 3em 1em;
    margin: 1em;
  }

  .contact h2 {
    font-size: 2em;
    margin-bottom: 1em;
  }

  .contact_form .form_group {
    margin-bottom: 2em;
  }

  .contact_form label {
    font-size: 1.2em;
    margin-bottom: 0.5em;
  }

  .contact_form input[type="text"],
  .contact_form input[type="email"],
  .contact_form input[type="tel"],
  .contact_form textarea {
    font-size: 1em;
    padding: 0.8em;
  }

  /* 氏名欄を縦並びに */
  .name_fields {
    flex-direction: column;
    gap: 0.8em;
  }

  .privacy_text {
    font-size: 1em;
    padding: 0 1em;
    line-height: 1.5;
  }

  .checkbox label {
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
  }

  .contact_form input[type="checkbox"] {
    transform: scale(1.3);
  }

  .form_submit button {
    font-size: 1.2em;
    padding: 0.8em 1.5em;
    border-radius: 1.5em;
    width: 100%; /* 横幅いっぱいでタップしやすく */
    max-width: 320px;
  }
/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
    padding: 1.5em 1em;     /* 上下左右に少し余白 */
    font-size: 1.2em;       /* スマホ用に文字を少し小さめに */
    line-height: 1.6;       /* 行間をゆったり */
  }

  .footer a {
    display: inline-block;
    margin: 0.3em 0;        /* リンク間に余白 */
  }

  .footer .small {
    font-size: 0.9em;       /* コピーライトはさらに控えめ */
    margin-top: 0.8em;
    display: block;         /* 強制的に改行 */
  }



}