<?php
if (session_status() === PHP_SESSION_NONE) session_start();
header("Cache-control: public");
ob_start();
$thisPageName = 'top';
include_once('./wp/wp-load.php');
// include(dirname(__FILE__) . '/app_config.php');
include(APP_PATH . 'libs/form/security.php');
include(APP_PATH . 'libs/head.php'); ?>
<link rel="stylesheet" href="<?php echo APP_ASSETS ?>css/form/validationEngine.jquery.css?v=<?php echo APP_VER ?>">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="<?php echo APP_ASSETS ?>css/page/calendar.min.css">
<link rel="stylesheet" href="<?php echo APP_ASSETS ?>css/page/form.min.css?v=<?php echo APP_VER ?>">
<link rel="stylesheet" href="<?php echo APP_ASSETS ?>css/libs/marquee.min.css">
<link rel="stylesheet" href="<?php echo APP_ASSETS ?>css/libs/slick.min.css">
<link rel="stylesheet" href="<?php echo APP_ASSETS ?>css/page/top.min.css?v=<?php echo APP_VER ?>">
</head>

<body id="top" class="top page-form">
  <?php include(APP_PATH . 'libs/header.php'); ?>
  <main id="wrap">
    <div class="sec-mv">
      <span class="bg pc" rel="js-lazy" data-bg="<?php echo APP_ASSETS; ?>img/top/bg_mv.jpg"></span>
      <span class="bg sp" rel="js-lazy" data-bg="<?php echo APP_ASSETS; ?>img/top/bg_mv_sp.jpg"></span>
      <div class="sec-mv__ins">
        <ul class="mv-slider t-slider">
          <li class="item">
            <div class="c-lazybg thumb pc" style="background-image: url('<?php echo APP_ASSETS; ?>img/top/img_slide01.jpg');"></div>
            <div class="c-lazybg thumb sp" style="background-image: url('<?php echo APP_ASSETS; ?>img/top/img_slide01_sp.jpg');"></div>
            <h2 class="mv-txt">
              <span>高気密、高断熱の性能、</span>
              <span>生活動線を考えたデザイン</span>
              <span>家族みんなが笑顔になる住まい</span>
            </h2>
          </li>
          <li class="item">
            <div class="c-lazybg thumb pc" style="background-image: url('<?php echo APP_ASSETS; ?>img/top/img_slide02.jpg');"></div>
            <div class="c-lazybg thumb sp" style="background-image: url('<?php echo APP_ASSETS; ?>img/top/img_slide02_sp.jpg');"></div>
          </li>
          <li class="item">
            <div class="c-lazybg thumb pc" style="background-image: url('<?php echo APP_ASSETS; ?>img/top/img_slide03.jpg');"></div>
            <div class="c-lazybg thumb sp" style="background-image: url('<?php echo APP_ASSETS; ?>img/top/img_slide03_sp.jpg');"></div>
          </li>
        </ul>

        <p class="scroll">
          Scroll down
          <span class="line"></span>
        </p>
      </div>
      <a href="https://line.me/R/ti/p/@kinoedesign?oat_content=url" class="link_line">
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_line.png" alt="LINE" class="img_line pc">
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_line_sp.png" alt="LINE" class="img_line sp">
      </a>
      <a href="#form" class="link_book check1">
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_book.png" alt="今すぐ来場予約" class="img_book pc">
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_book_sp.png" alt="今すぐ来場予約" class="img_book sp">
      </a>
    </div>
    <div id="reason" class="sec-reason">
      <div class="inner">
        <div class="reason">
          <p class="ttl-block inview fadeInBottom"><img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/ttl_reason.svg" alt="reason"></p>
          <h2 class="sub-ttl inview fadeInBottom">キノエデザイン<br class="sp">加東支店が<br class="pc">選ばれる<span><br class="sp"><em>3</em>つ</span><small>の理由</small></h2>
          <ul class="reason__lst inview fadeInBottom">
            <li>
              <div class="ctn">
                <div class="num">
                  <img src="<?php echo APP_ASSETS; ?>img/top/num_reason01.svg" alt="01" class="pc">
                  <img src="<?php echo APP_ASSETS; ?>img/top/num_reason01_sp.jpg" alt="01" class="sp">
                </div>
                <p class="txt">何といっても、実績数！<br>キノエデザイン</p>
                <p class="txt-bold">総建設数<br class="pc"><span class="fs">600件！</span></p>
              </div>
            </li>
            <li>
              <div class="ctn">
                <div class="num">
                  <img src="<?php echo APP_ASSETS; ?>img/top/num_reason02.svg" alt="02" class="pc">
                  <img src="<?php echo APP_ASSETS; ?>img/top/num_reason02_sp.jpg" alt="02" class="sp">
                </div>
                <p class="txt">それぞれのご家族に合わせた<br>プラン提案に加えて、</p>
                <p class="txt-bold"><span>お手頃価格の規格住宅を</span><br><span>取り揃えてます！</span></p>
              </div>
            </li>
            <li>
              <div class="ctn">
                <div class="num">
                  <img src="<?php echo APP_ASSETS; ?>img/top/num_reason03.svg" alt="03" class="pc">
                  <img src="<?php echo APP_ASSETS; ?>img/top/num_reason03_sp.jpg" alt="03" class="sp">
                </div>
                <p class="txt">仕様を定めて、<br>クオリティの高い住宅でも</p>
                <p class="txt-bold">
                  <span>コスト軽減可能！</span><br><span>コストパフォーマンスを</span><br class="pc"><span>重視！</span>
                </p>
              </div>
            </li>
            <li>
              <div class="ctn-last">
                <!-- <p class="txt">アドバイザー　<br class="sp">浅利</p> -->
                <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_reason_lst.png" alt="アットホームで相談しやすい店舗です！" class="pc">
                <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_reason_lst_sp.png" alt="アットホームで相談しやすい店舗です！" class="sp">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="img_gall inview fadeInBottom">
      <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_rea_gal.jpg" alt="加東支店の内装・施工" class="pc">
      <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_rea_gal_sp.jpg" alt="加東支店の内装・施工" class="sp">
    </div>
    <div id="access" class="sec-access">
      <div class="inner">
        <div class="access inview fadeInBottom">
          <p class="ttl-block"><img src="<?php echo APP_ASSETS; ?>img/top/ttl_access.svg" alt="access&information"></p>
          <p class="access-txt">
            兵庫県加東市穂積 779-1<br>
            <a href="tel:0795-48-0355">TEL：0795-48-0355<br class="sp"></a><small>（受付時間 9:00 - 18:00 、定休日水曜日）</small>
          </p>
        </div>
      </div>
      <div class="map inview fadeInBottom">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3271.0023627192695!2d134.95959249999999!3d34.931477699999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3555347f65bd6d6b%3A0xeaf461a8785458a0!2z5pel5pys44CB44CSNjc5LTAyMDYg5YW15bqr55yM5Yqg5p2x5biC56mC56mN77yX77yX77yZ4oiS77yR!5e0!3m2!1sja!2s!4v1720498212651!5m2!1sja!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
      <a href="https://maps.app.goo.gl/8xkwqc5XYibLWBfA7" target="_blank" class="btn-map inview fadeInBottom"><span>googleマップで開く</span></a>
      <div class="inner">
        <div class="box-perks inview fadeInBottom">
          <div class="box-perks__img">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks01.jpg" alt="キノエデザイン加東支店" class="pc">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks01_sp.jpg" alt="キノエデザイン加東支店" class="sp">
          </div>
          <div class="box-perks__ctn">
            <h3 class="ttl">キノエデザイン加東支店への<br>来場予約はこちら</h3>
            <p class="txt">秋山住研の家を体感いただけます。<br>ご来場はお気軽にどうぞ♪</p>
            <a href="#form" class="btn-form check1"><span>今すぐお問い合わせ</span></a>
          </div>
        </div>
      </div>
    </div>
    <div id="event" class="sec-event">
      <div class="event">
        <p class="ttl-block inview fadeInBottom"><img src="<?php echo APP_ASSETS; ?>img/top/ttl_event.svg" alt="event"></p>
        <h2 class="sub-ttl inview fadeInBottom">加東支店人気の<br class="sp">常時開催<br class="sp">イベント情報</h2>
        <div class="event-cont inview fadeInBottom">
          <div class="inner">
            <a href="#form" class="box-event check3">
              <div class="box-event__ctn">
                <div class="content">
                  <p class="title">家づくりの相談会</p>
                  <p class="txt">土地のことや住まいのことについて知り尽くしたプロフェッショナルがご対応。<br>
                    些細なことでもお気軽にご相談ください。</p>
                </div>
              </div>
              <div class="box-event__img">
                <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_event.png" alt="家族の住まいのイメージ画像" class="pc">
                <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_event_sp.png" alt="家族の住まいのイメージ画像" class="sp">
              </div>
              <div class="box-event__last">
                <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_naka.png" alt="皆様のご来場お待ちしています！" class="pc">
                <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_naka_sp.png" alt="皆様のご来場お待ちしています！" class="sp">
                <!-- <p class="text">アドバイザー　<br class="sp">中川</p> -->
              </div>
            </a>
          </div>
        </div>
        <div class="inner">
          <div class="info-event inview fadeInBottom">
            <div class="info-event__cms">
              <ul class="ul">
                <?php
                $page = get_fields('event');
                $repeater_field = $page['f_rep'];
                // $repeater_field = array_reverse($repeater_field);
                // $latest_fields = array_slice($repeater_field, 0, 4);
                $total_fields = count($repeater_field);
                $start_index = max(0, $total_fields - 4);
                $latest_fields = array_slice($repeater_field, $start_index, 4);
                foreach ($latest_fields as $item) {
                ?>
                  <li>
                    <p class="date"><?php echo $item['f_date'] ?></p>
                    <p class="ttl"><?php echo $item['f_txt'] ?></p>
                  </li>
                <?php } ?>
              </ul>
            </div>
            <div class="info-event__phone">
              <h3 class="text"><span>見学ご希望の方は<br>お問い合わせください！</span></h3>
              <a href="tel:0795-48-0355" class="tel"><span>0795-48-0355</span></a>
              <p class="time">9:00〜18:00(水曜日 定休)</p>
            </div>
          </div>
          <div class="box-perks inview fadeInBottom">
            <div class="box-perks__img">
              <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks02.jpg" alt="相談会の様子" class="pc">
              <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks02_sp.jpg" alt="相談会の様子" class="sp">
            </div>
            <div class="box-perks__ctn">
              <h3 class="ttl">キノエデザイン加東支店への<br>相談会予約はこちら</h3>
              <p class="txt">秋山住研の家を体感いただけます。<br>ご来場はお気軽にどうぞ♪</p>
              <a href="#form" class="btn-form check3"><span>今すぐお問い合わせ</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="standard_housing" class="sec-housing">
      <span class="bg" rel="js-lazy" data-bg="<?php echo APP_ASSETS; ?>img/top/bg_housing.jpg"></span>
      <div class="inner">
        <p class="ttl-block inview fadeInBottom"><img src="<?php echo APP_ASSETS; ?>img/top/ttl_housing.svg" alt="standard housing"></p>
        <h2 class="sub-ttl inview fadeInBottom">大人気！規格住宅の<br class="sp"><span>Kokyu<em>＋</em></span></h2>
        <div class="pic1 inview fadeInBottom">
          <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_housing01.jpg" alt="規格住宅”kokyu+”の内観写真" class="pc">
          <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_housing01_sp.jpg" alt="規格住宅”kokyu+”の内観写真" class="sp">
        </div>
        <p class=" text01 inview fadeInBottom">
          <span>月々<em>5</em>万円代</span><small>から</small><br class="sp">実現可能な規格住宅！
        </p>
        <p class="text02 inview fadeInBottom">
          お手頃価格 <span class="num-black"><br class="sp">21,300,000</span>円<br class="sp"><small>なんと</small><br class="sp"><span class="num-blue"><em>55,573</em>円/月</span>から住める！
        </p>
        <p class="text03 inview fadeInBottom">
          <span>※</span>金利：0.475%、借入金額2,150万円、<br class="sp">元利均等、35年払い
        </p>
        <ul class="housing-lst inview fadeInBottom">
          <li>
            <div class="ctn">
              <img class="img img01" src="<?php echo APP_ASSETS; ?>img/top/hou01.svg" alt="平米数">
              <p class="title">１F−２F<br class="sp">平米数</p>
              <div class="flex">
                <div class="it">
                  <p class="number">52.99<em>m</em><sup>2</sup></p>
                  <span class="span01">(1F)</span>
                </div>
                <div class="it">
                  <p class="number">54.65<em>m</em><sup>2</sup></p>
                  <span class="span02">(2F)</span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="ctn">
              <img class="img img02" src="<?php echo APP_ASSETS; ?>img/top/hou02.svg" alt="延べ床">
              <p class="title title--02">延べ床</p>
              <p class="number">107.64<em>m</em><sup>2</sup></p>
            </div>
          </li>
          <li>
            <div class="ctn">
              <img class="img img03" src="<?php echo APP_ASSETS; ?>img/top/hou03.svg" alt="施工面積">
              <p class="title title--03">施工面積</p>
              <p class="number">107,64<em>m</em><sup>2</sup></p>
            </div>
          </li>
          <li>
            <div class="ctn-last">
              <!-- <p class="txt">アドバイザー　<br class="sp">田中</p> -->
              <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_tanaka.png" alt="人気のKokyu+！暮らし方に合うプランが見つかる！" class="pc">
              <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_tanaka_sp.png" alt="人気のKokyu+！暮らし方に合うプランが見つかる！" class="sp">
            </div>
          </li>
        </ul>
        <div class="pic2 inview fadeInBottom">
          <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_housing02.png" alt="規格住宅”kokyu+”の内観写真" class="pc">
          <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_housing02_sp.png" alt="規格住宅”kokyu+”の内観写真" class="sp">
        </div>
        <div class="box-perks inview fadeInBottom">
          <div class="box-perks__img">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks01.jpg" alt="キノエデザイン加東支店" class="pc">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks01_sp.jpg" alt="キノエデザイン加東支店" class="sp">
          </div>
          <div class="box-perks__ctn">
            <h3 class="ttl">キノエデザイン加東支店への<br>来場予約はこちら</h3>
            <p class="txt">秋山住研の家を体感いただけます。<br>ご来場はお気軽にどうぞ♪</p>
            <a href="#form" class="btn-form check1"><span>今すぐお問い合わせ</span></a>
          </div>
        </div>
      </div>
    </div>
    <div id="works" class="sec-works">
      <p class="ttl-block inview fadeInBottom"><img src="<?php echo APP_ASSETS; ?>img/top/ttl_works.svg" alt="works"></p>
      <h2 class="sub-ttl inview fadeInBottom"><span>人気の施工事例をチラ見せ</span></h2>
      <div class="marquee">
        <div class="cmn-marquee marquee-01">
          <div class="cmn-marquee__frame">
            <div class="item">
              <img data-src="<?php echo APP_ASSETS; ?>img/top/img_marquee01.jpg" alt="" class="lazy img-mar01 pc">
              <img data-src="<?php echo APP_ASSETS; ?>img/top/img_marquee01_sp.jpg" alt="" class="lazy img-mar01 sp">
            </div>
          </div>
        </div>
        <div class="cmn-marquee marquee-02" data-reverse>
          <div class="cmn-marquee__frame">
            <div class="item">
              <img data-src="<?php echo APP_ASSETS; ?>img/top/img_marquee02.jpg" alt="" class="lazy img-mar02 pc">
              <img data-src="<?php echo APP_ASSETS; ?>img/top/img_marquee02_sp.jpg" alt="" class="lazy img-mar02 sp">
            </div>
          </div>
        </div>
      </div>
      <div class="inner">
        <div class="box-perks box-perks--works inview fadeInBottom">
          <div class="box-perks__img">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks04.jpg" alt="無料カタログ" class="pc">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks04_sp.jpg" alt="無料カタログ" class="sp">
          </div>
          <div class="box-perks__ctn">
            <h3 class="ttl">キノエデザイン加東支店<br>無料カタログプレゼント</h3>
            <p class="txt">マイホームづくりのスタートをサポートする各種カタログをご用意しています。</p>
            <a href="#form" class="btn-form check2"><span>今すぐ資料請求</span></a>
          </div>
        </div>
      </div>
    </div>
    <div id="staff" class="sec-staff">
      <div class="gImg inview fadeInBottom">
        <img src="<?php echo APP_ASSETS; ?>img/top/bg_bl_staff.svg" alt="" class="bg_bl">
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/common/footer/bg_ft.png" alt="" class="bg_line">
      </div>
      <div class="inner staff">
        <div class="divttl inview fadeInBottom">
          <p class="ttl-block"><img src="<?php echo APP_ASSETS; ?>img/top/ttl_staff.svg" alt="staff"></p>
          <h2 class="sub-ttl">スタッフ紹介</h2>
        </div>
        <div class="staff__lst">
          <div class="item inview fadeInBottom">
            <div class="item__img">
              <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_staff01.jpg" alt="アドバイザー 浅利 徹">
              <p class="name"><span>アドバイザー</span> <br class="sp">浅利 徹</p>
            </div>
            <div class="item__ctn">
              <div class="info">
                <div class="info__cont">
                  <p class="ttl">出身地</p>
                  <p class="text">和歌山県</p>
                </div>
                <div class="info__cont">
                  <p class="ttl">趣味</p>
                  <p class="text">スポーツ観戦、旅行</p>
                </div>
                <div class="info__cont">
                  <p class="ttl">好きな言葉</p>
                  <p class="text">感動はひたすらの努力の後に</p>
                </div>
              </div>
              <p class="desc">
                お客様の故郷づくりをご一緒にさせていただきます。<br>
                お家づくりは故郷づくりでもあります。多くの方は、一生で一度の故郷づくり、<br>
                分からないことも分からない。そんな方も多いと思います。<br>
                経験をもとに、精いっぱいサポートをさせていただければと思います。
              </p>
            </div>
          </div>
          <div class="item inview fadeInBottom">
            <div class="item__img">
              <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_staff02.jpg" alt="アドバイザー 田中 瑠騎">
              <p class="name"><span>アドバイザー</span> <br class="sp">田中 瑠騎</p>
            </div>
            <div class="item__ctn">
              <div class="info">
                <div class="info__cont">
                  <p class="ttl">出身地</p>
                  <p class="text">京都</p>
                </div>
                <div class="info__cont">
                  <p class="ttl">好きなこと・もの</p>
                  <p class="text">旅行・温泉</p>
                </div>
                <div class="flex">
                  <div class="info__cont">
                    <p class="ttl">好きな言葉</p>
                    <p class="text">感謝・努力・挑戦</p>
                  </div>
                  <div class="info__cont">
                    <p class="ttl">趣味・特技</p>
                    <p class="text">サッカー</p>
                  </div>
                </div>
              </div>
              <p class="desc">
                まずは、このページを見てくださり誠にありがとうございます。<br>
                そして、「一生に一度の家づくり」そんな貴重な時間に携われることを大変嬉しく思います。<br>
                お家づくりを通して、「幸せ溢れる暮らし、そして感動を提供する」その一心でお手伝いさせていただきます！
              </p>
            </div>
          </div>
          <!-- <div class="item inview fadeInBottom">
            <div class="item__img">
              <img src="<?php echo APP_ASSETS; ?>img/top/img_staff03.jpg" alt="アドバイザー 田中 瑠騎">
              <p class="name"><span>アドバイザー</span> <br class="sp">田中 瑠騎</p>
            </div>
            <div class="item__ctn">
              <div class="info">
                <div class="info__cont">
                  <p class="ttl">出身地</p>
                  <p class="text">京都</p>
                </div>
                <div class="info__cont">
                  <p class="ttl">好きなこと</p>
                  <p class="text">旅行・温泉</p>
                </div>
                <div class="flex">
                  <div class="info__cont">
                    <p class="ttl">好きな言葉</p>
                    <p class="text">感謝・努力・挑戦</p>
                  </div>
                  <div class="info__cont">
                    <p class="ttl">趣味</p>
                    <p class="text">サッカー</p>
                  </div>
                </div>
              </div>
              <p class="desc">
                まずは、このページを見てくださり誠にありがとうございます。<br>
                そして、「一生に一度の家づくり」そんな貴重な時間に携われることを大変嬉しく<br>
                思います。お家づくりを通して、「幸せ溢れる暮らし、そして感動を提供する」<br>
                その一心でお手伝いさせていただきます！
              </p>
            </div>
          </div> -->
        </div>
        <div class="box-perks inview fadeInBottom">
          <div class="box-perks__img">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks01.jpg" alt="キノエデザイン加東支店" class="pc">
            <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/top/img_perks01_sp.jpg" alt="キノエデザイン加東支店" class="sp">
          </div>
          <div class="box-perks__ctn">
            <h3 class="ttl">キノエデザイン加東支店への<br>来場予約はこちら</h3>
            <p class="txt">秋山住研の家を体感いただけます。<br>ご来場はお気軽にどうぞ♪</p>
            <a href="#form" class="btn-form check1"><span>今すぐお問い合わせ</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="sec-present">
      <div class="inner">
        <div class="box-present">
          <h2 class="ttl inview fadeInBottom">
            嬉しい特典２つを<br class="sp">ご用意しています！
          </h2>
          <p class="text01 inview fadeInBottom">
            キノエデザイン加東支店にお越しの方には<br>
            お得な特典を無料でお渡ししています！
          </p>
          <p class="text02 inview fadeInBottom">
            とっておきの<span> 2 </span>特典
          </p>
          <ul class="present-lst inview fadeInBottom">
            <li>
              <div class="ctn ctn--01">
                <p class="ctn__ttl">今なら来場で</p>
                <p class="ctn__subttl"> QUOカード<span><em>2,000</em>円</span>分<br>もらえる！</p>
                <p class="ctn__txt">家づくり検討中なら、<br>キノエデザイン加東店に相談ください！</p>
              </div>
            </li>
            <li>
              <div class="ctn ctn--02">
                <p class="ctn__ttl">楽々土地探しのツール！</p>
                <p class="ctn__subttl ctn__subttl--02">ランディの<br>利用権利プレゼント！</p>
                <p class="ctn__txt">これさえあれば、いちいち検索しなくても<br>全国どこでも好きな土地情報が見つかる！</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="form" class="sec-form">
      <div class="sec-form__top">
        <span class="bg" rel="js-lazy" data-bg="<?php echo APP_ASSETS; ?>img/common/form/bg_form.jpg"></span>
        <p class="form-ttl inview fadeInBottom">CONTACT</p>
        <h2 class="form-subttl inview fadeInBottom">お問い合わせ・資料請求</h2>
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/common/form/img_step01.png" alt="STEP1" class="img-step inview fadeInBottom pc">
        <img rel="js-lazy" data-src="<?php echo APP_ASSETS; ?>img/common/form/img_step01_sp.png" alt="STEP1" class="img-step inview fadeInBottom sp">
      </div>
      <form method="post" class="contactform" id="contactform" action="confirm/?g=<?php echo time() ?>" name="contactform" onSubmit="return check()">
        <div class="form-block inview fadeInBottom">
          <p class="hid_url">Leave this empty: <input type="text" name="url"></p><!-- Anti spam part1: the contact form -->
          <div class="form-block__fields">
            <!-- Desired-->
            <div class="row">
              <div class="row-label">
                <span class="req">必須</span>
                <strong>ご希望項目</strong>
              </div>
              <div class="row-value">
                <div class="lst-checkbox">
                  <label>
                    <input type="checkbox" name="check01[]" id="checkbox01" value="<?php echo sanitize_form_value('来場予約') ?>" class="validate[required]">
                    <span>来場予約</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check01[]" id="checkbox02" value="<?php echo sanitize_form_value('資料請求') ?>" class="validate[required]">
                    <span>資料請求</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check01[]" id="checkbox03" value="<?php echo sanitize_form_value('相談会予約') ?>" class="validate[required]">
                    <span>相談会予約</span>
                  </label>
                </div>
              </div>
            </div>

            <!-- NAME -->
            <div class="row">
              <div class="row-label">
                <span class="req">必須</span>
                <strong>お名前</strong>
              </div>
              <div class="row-value">
                <input type="text" name="nameuser" id="nameuser" placeholder="例）佐藤 太郎" class="validate[required]">
                <p class="txt-pla sp">例）佐藤 太郎</p>
              </div>
            </div>

            <!-- TEL -->
            <div class="row">
              <div class="row-label">
                <span class="req">必須</span>
                <strong>電話番号</strong>
              </div>
              <div class="row-value">
                <input type="tel" name="tel" id="tel" placeholder="例）1234567890" class="validate[required,custom[phone]]" data-skip-zero>
                <p class="txt-pla sp">例）1234567890</p>
              </div>
            </div>

            <!-- EMAIL -->
            <div class="row">
              <div class="row-label">
                <span class="req">必須</span>
                <strong>メールアドレス</strong>
              </div>
              <div class="row-value">
                <input type="email" name="email" id="email" class="validate[required][custom[email]]" placeholder="xxxxxx@sample.com">
                <p class="txt-pla sp">例）sample@mail.com</p>
              </div>
            </div>

            <!-- DATE && TIME -->
            <div class="row row--start">
              <div class="row-label">
                <span class="req">必須</span>
                <strong>来場日時選択</strong>
              </div>
              <div class="row-value">
                <?php
                  $time_arr = array('10:00~','10:30~','11:00~','11:30~','12:00~','12:30~','13:00~','13:30~','14:00~','14:30~','15:00~','15:30~','16:00~','16:30~','17:00~','17:30~');
                ?>
                <ul class="lst-choice">
                  <li>
                    <span>第一希望：</span>
                    <input type="text" name="first-choice" id="datepicker" placeholder="例）2024/01/01（月）" inputmode="none" class="validate[required] date">
                    <div class="time-sel">
                      <select name="time01" id="time01" class="validate[required] select">
                        <option value>例）17:00</option>
                        <?php foreach($time_arr as $time){ ?>
                          <option value="<?php echo $time ?>"><?php echo $time; ?></option>
                          <?php }?>
                      </select>
                    </div>
                  </li>
                  <li>
                    <span>第二希望：</span>
                    <input type="text" name="second-choice" id="datepicker_02" placeholder="例）2024/01/01（月）" inputmode="none" class="validate[required] date">
                    <div class="time-sel">
                      <select name="time02" id="time02" class="validate[required] select">
                        <option value>例）17:00</option>
                        <?php foreach($time_arr as $time){ ?>
                          <option value="<?php echo $time ?>"><?php echo $time; ?></option>
                          <?php }?>
                      </select>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <!-- CONTENT -->
            <div class="row row--start row--cont">
              <div class="row-label">
                <span class="req req--any">任意</span>
                <strong>お問い合わせ<br class="pc">内容</strong>
              </div>
              <div class="row-value">
                <textarea name="content" id="content" class=""></textarea>
              </div>
            </div>

            <!-- Contents of consideration -->
            <div class="row row--start">
              <div class="row-label">
                <span class="req req--any">任意</span>
                <strong>検討内容</strong>
              </div>
              <div class="row-value">
                <div class="lst-checkbox lst-checkbox--02">
                  <label>
                    <input type="checkbox" name="check02[]" id="checkbox04" value="新築を検討している">
                    <span>新築を検討している</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check02[]" id="checkbox05" value=" リフォームを検討している">
                    <span> リフォームを検討している</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check02[]" id="checkbox06" value="土地を探している">
                    <span>土地を探している</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check02[]" id="checkbox07" value=" 中古物件を探している">
                    <span> 中古物件を探している</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check02[]" id="checkbox08" value="賃貸を探している">
                    <span>賃貸を探している</span>
                  </label>
                  <label>
                    <input type="checkbox" name="check02[]" id="checkbox09" value="その他（自由入力）">
                    <span>その他（自由入力）</span>
                    <input type="text" name="txtother" id="txtother" class="inp_txt">
                  </label>
                </div>
              </div>
            </div>
          </div>
          <p class="check-agree"><label><input type="checkbox" name="check1" value="<?php echo sanitize_form_value('agree') ?>"><span class="txt">個人情報の取り扱いに同意する</span></label></p>
          <div class="txtContact01">
            <p class="t0b10">【個人情報の取扱いについて】</p>
            <ul class="t0b20">
              <li>
                ・本フォームからお客様が記入・登録された個人情報は、資料送付・電子メール送信・電話連絡などの目的で利用・保管し、第三者に開示・提供することはありません。<br>
                ・詳しくは<a href="https://kinoedesign.co.jp/privacy/">プライバシーポリシー</a>をご覧ください。
              </li>
            </ul>
          </div>
          <div class="taC">
            <p class="t30b20">
              <button id="btnConfirm" class="btnConfirm"><span>入力内容を確認</span></button>
              <input type="hidden" name="_csrf" value="<?php echo generate_csrf_token() ?>">
              <input type="hidden" name="actionFlag" value="<?php echo sanitize_form_value('confirm') ?>">
            </p>
          </div>
          <p class="txtContact02">正常に動作しない場合はお手数ですが下記フォームの情報を<a class="mailContact" href="mailto:support@aki-jyu.com">support@aki-jyu.com</a>までメールにて送信ください。</p><!-- Anti spam part2: clickable email address -->
        </div>
      </form>
    </div>
  </main>
  <?php include(APP_PATH . 'libs/footer.php'); ?>
  <?php include(APP_PATH . 'libs/form-scripts.php'); ?>
  <script src="<?php echo APP_ASSETS; ?>js/lib/gsap.min.js"></script>
  <script src="<?php echo APP_ASSETS; ?>js/lib/marquee.min.js"></script>
  <script src="<?php echo APP_ASSETS; ?>js/lib/slick.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script nonce="<?php echo APP_NONCE ?>" src="<?php echo APP_ASSETS ?>js/page/top.min.js?v=<?php echo APP_VER ?>"></script>
  <script>
    $(document).ready(function() {
      callMarquee();
      datepicker();
      $('.mv-slider').slick({
        slidesToShow: 1,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 4000,
        speed: 2000,
        cssEase: 'ease'
      });

      $('.check1').click(function() {
        $("#checkbox01").prop("checked", true);
      })

      $('.check2').click(function() {
        $("#checkbox02").prop("checked", true);
      })

      $('.check3').click(function() {
        $("#checkbox03").prop("checked", true);
      })

      $('.form-block__fields .select').on('change', function() {
        if ($(this).val() === '') {
          $(this).removeClass('selected');
        } else {
          $(this).addClass('selected');
        }
      })
      function datepicker() {
        $('#datepicker,#datepicker_02').datepicker({
          minDate: 0,
          dateFormat: 'yy/mm/dd (DD)',
          yearSuffix: '年',
          showMonthAfterYear: true,
          monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          dayNames: ['日', '月', '火', '水', '木', '金', '土'],
          dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
        });
      }
    })
  </script>
</body>

</html>