app/template/default/Block/vd_head_body.twig line 1

Open in your IDE?
  1. {#
  2. ファイル名：vd_head_body.twig
  3. 処理概要：商品選択ページ
  4. 修正年月日：2024/07/11 k.saito
  5. 修正内容：旧エアコンを「標準工事」、複製したエアコンを「2階下ろし工事」とする。
  6. #}
  8. {% block javascript %}
  9. <script type="text/javascript">
  10. jQuery(document).ready(function($){
  11.     $(function() {
  12.         $('.h002_sp').on('click', function() {
  13.             if($(this).hasClass('close')){
  14.                 $(this).removeClass('close');
  15.                 $("#navbar").removeClass('open');
  16.                 $("body").removeClass('body_fixed');
  17.             }else{
  18.                 $(this).addClass('close');
  19.                 $("#navbar").addClass('open');
  20.                 $("body").addClass('body_fixed');
  21.             }
  23.         });
  24.     });
  25. });
  26. </script>
  27. {% endblock %}
  28. <header class="header h_type008   vd_no_fixed vd_no_over_sp">
  29.     <div id="h001" class="clearfix">
  30.                 <div class="h008">
  31.             <div class="h_type008_001">
  32.                 <h1><a href="https://www.changer.fun/">
  33.                                     <img src="https://www.changer.fun/cms/wp-content/uploads/2023/09/logo.png" class="logo_pc logo img-responsive vd_hidden_under_1200" alt="住設チェンジャー">
  34.                                             <img src="https://www.changer.fun/cms/wp-content/uploads/2023/09/logo.png" class="logo_sp logo img-responsive vd_visible_under_1200 logo_left" alt="住設チェンジャー">
  35.                                                         </a>
  36.                 </h1>
  37.                                 <div class="h012">
  38.                     <div class="">
  39.                                                 <ul class="list-inline pull-right">
  40.             <li class=" h012_lang1"><a  href="https://www2.changer.fun/products/list" >商品検索</a></li><li class=" h012_lang2"><a  href="https://www2.changer.fun/mypage/" >マイページ</a></li><li class=" h012_lang3"><a  href="https://www2.changer.fun/cart" >買い物かご</a></li></ul>
  41.                                         </div>
  42.                 </div>
  43.                             </div>
  44.             <div class="h008_02">
  45.                 <div class="h002_sp text-center" >
  46.                     <a href="#">
  47.                                         <div class="h002_sp_02">
  48.                             <span></span>
  49.                         </div>
  50.                                                 <p class="text-center center-block h002_sp_02_txt">メニュー</p>
  51.                                         </a>
  53.                 </div>
  55.             <div class="h_type008_003  h_type008_005">
  57.                 <div class="h_type008_003_01">
  58.                     <div class="navbar_wrap">
  59.                         <div id="navbar">
  60.                         <div class="vd_visible_under_1200 sp_navbar_head">メニュー</div>
  61.                         <nav>
  62.                             <!--メインメニュー-->
  63.                             <ul id="h002" class="text-center h002_01" >
  64.                                 
  65.                                 <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown"  ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h01.png" alt="エアコン"><span>エアコン</span></a>
  66.                                                                         <ul class="list-unstyled dropdown-menu">
  67.                                                                                 <li><a href="https://www2.changer.fun/products/list?category_id=1">標準工事</a></li>
  68.                                                                                 <li><a href="https://www2.changer.fun/products/list?category_id=69">2階下ろし工事</a></li>
  69.                                                                             </ul>
  70.                                                                     </li>
  71.                             
  72.                                 <li class=""><a  href="https://www2.changer.fun/products/list?category_id=2"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h02.png" alt="トイレ"><span>トイレ</span></a>
  73.                                                                     </li>
  74.                             
  75.                                 <li class=""><a  href="https://www2.changer.fun/products/list?category_id=9"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h04.png" alt="洗面台"><span>洗面台</span></a>
  76.                                                                     </li>
  77.                             
  78.                                 <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown"  ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h05.png" alt="ガス給湯器"><span>ガス給湯器</span></a>
  79.                                                                         <ul class="list-unstyled dropdown-menu">
  80.                                                                                 <li><a href="https://www2.changer.fun/products/list?category_id=10">都市ガスタイプ</a></li>
  81.                                                                                 <li><a href="https://www2.changer.fun/products/list?category_id=56">LPガスタイプ</a></li>
  82.                                                                             </ul>
  83.                                                                 </li>
  84.                             
  85.                                 <li class=""><a  href="https://www2.changer.fun/products/list?category_id=14"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h09.png" alt="IHヒーター"><span>IHヒーター</span></a>
  86.                                                                     </li>
  87.                             
  88.                                 <li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown"  ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h10.png" alt="ガスコンロ"><span>ガスコンロ</span></a>
  89.                                                                         <ul class="list-unstyled dropdown-menu">
  90.                                                                                 <li><a href="https://www2.changer.fun/products/list?category_id=15">都市ガスタイプ</a></li>
  91.                                                                                 <li><a href="https://www2.changer.fun/products/list?category_id=50">LPガスタイプ</a></li>
  92.                                                                             </ul>
  93.                                                                 </li>
  94.                                                                 <li class="type008_h009_003 h009_01 type008_h009_002 h009_contact1"><p><a  href="https://www2.changer.fun/products/list?category_id=8" ><img src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h03.png" alt="水栓（蛇口）"  class="img-responsive center-block"> <span>水栓（蛇口）</span></a></p></li><li class="type008_h009_003 h009_01 type008_h009_002 h009_contact2"><p><a  href="https://www2.changer.fun/products/list?category_id=12" ><img src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h07.png" alt="レンジフード"  class="img-responsive center-block"> <span>レンジフード</span></a></p></li><li class="type008_h009_003 h009_01 type008_h009_002 h009_contact3"><p><a  href="https://www2.changer.fun/products/list?category_id=13" ><img src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h01.png" alt="浴室乾燥機"  class="img-responsive center-block"> <span>浴室乾燥機</span></a></p></li><li class="type008_h009_003 h009_01 type008_h009_002 h009_contact4"><p><a  href="https://www2.changer.fun/products/list?category_id=11" ><img src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h06.png" alt="エコキュート"  class="img-responsive center-block"> <span>エコキュート</span></a></p></li>
  95.                             
  96.                             
  97.                                                             </ul>
  98.                             </nav>
  99.                             
  100.                                                         <div class="h_sp_submenu">
  101.                                 <ul class="h_sp_submenu_02">
  102.                                                                             <li class="h_sp_submenu_02_1">
  103.                                             <p class="h_sp_submenu_02_2"></p>
  104.                                                                                         <ul class="h_sp_submenu_03_1">
  105.                                                                                                 <li>
  106.                                                     <a href="https://www2.changer.fun/products/list" >
  107.                                                     商品検索                                                    </a>
  108.                                                 </li>
  109.                                                                                                 <li>
  110.                                                     <a href="https://www2.changer.fun/mypage/login" >
  111.                                                     マイページ                                                    </a>
  112.                                                 </li>
  113.                                                                                                 <li>
  114.                                                     <a href="https://www2.changer.fun/cart" >
  115.                                                     買い物かご                                                    </a>
  116.                                                 </li>
  117.                                                                                             </ul>
  118.                                                                                     </li>
  119.                                                                             <li class="h_sp_submenu_02_1">
  120.                                             <p class="h_sp_submenu_02_2">ピックアップ</p>
  121.                                                                                         <ul class="h_sp_submenu_03_1">
  122.                                                                                                 <li>
  123.                                                     <a href="https://www.changer.fun/area/" >
  124.                                                     対応エリア                                                    </a>
  125.                                                 </li>
  126.                                                                                                 <li>
  127.                                                     <a href="" >
  128.                                                     注文の流れ                                                    </a>
  129.                                                 </li>
  130.                                                                                                 <li>
  131.                                                     <a href="" >
  132.                                                     選ばれる理由                                                    </a>
  133.                                                 </li>
  134.                                                                                                 <li>
  135.                                                     <a href="" >
  136.                                                     保証・サービス                                                    </a>
  137.                                                 </li>
  138.                                                                                                 <li>
  139.                                                     <a href="" >
  140.                                                     施工事例                                                    </a>
  141.                                                 </li>
  142.                                                                                                 <li>
  143.                                                     <a href="" >
  144.                                                     Q&A                                                    </a>
  145.                                                 </li>
  146.                                                                                             </ul>
  147.                                                                                     </li>
  148.                                                                             <li class="h_sp_submenu_02_1">
  149.                                             <p class="h_sp_submenu_02_2">その他</p>
  150.                                                                                         <ul class="h_sp_submenu_03_1">
  151.                                                                                                 <li>
  152.                                                     <a href="" >
  153.                                                     会社情報                                                    </a>
  154.                                                 </li>
  155.                                                                                                 <li>
  156.                                                     <a href="" >
  157.                                                     スタッフ紹介                                                    </a>
  158.                                                 </li>
  159.                                                                                                 <li>
  160.                                                     <a href="" >
  161.                                                     お問い合わせ                                                    </a>
  162.                                                 </li>
  163.                                                                                                 <li>
  164.                                                     <a href="" >
  165.                                                     プライバシーポリシー                                                    </a>
  166.                                                 </li>
  167.                                                                                                 <li>
  168.                                                     <a href="" >
  169.                                                     特定商取引法に基づく表記                                                    </a>
  170.                                                 </li>
  171.                                                                                             </ul>
  172.                                                                                     </li>
  173.                                                                     </ul>
  174.                             </div>
  175.                                                                                 </div>
  176.                     </div>
  178.                     
  179.                 </div>
  180.                                             </div>
  181.         </div>
  182.                     <div class="h_pickupmenu">
  183.                 <div>
  184.                     <nav>
  185.                         <!--pickup menu-->
  186.                         <ul class="text-center">
  187.                             
  188.                             <li class=""><p  ><a href="https://www.changer.fun/area/"  >対応エリア</a></p>
  189.                                                         </li>
  190.                             
  191.                             <li class=""><p  ><a href=""  >注文の流れ</a></p>
  192.                                                         </li>
  193.                             
  194.                             <li class=""><p  ><a href=""  >選ばれる理由</a></p>
  195.                                                         </li>
  196.                             
  197.                             <li class=""><p  ><a href=""  >保証・サービス</a></p>
  198.                                                         </li>
  199.                             
  200.                             <li class=""><p  ><a href=""  >施工事例</a></p>
  201.                                                         </li>
  202.                             
  203.                             <li class=""><p  ><a href=""  >Q&A</a></p>
  204.                                                         </li>
  205.                                                                                 </ul>
  206.                     </nav>
  207.                 </div>
  208.             </div>
  209.             </div>
  210. {% block stylesheet %}
  211. <style type="text/css">
  212.     #navbar, .h002_sp{
  213.         background-color: #515151;
  214.         border-bottom: #ffffff 2px solid;
  215.     }
  216.     .f005, .f006, .copyright, .f005:before{
  217.         background-color: #515151;
  218.     }
  219.     
  220.     @media (min-width: 768px){
  221.         #h002 li{
  222.             border-left: solid #ffffff 1px;
  223.         }
  224.         .h002_sideline{
  225.             border-right: solid #ffffff 1px;
  226.         }
  227.         #h002>li>ul>li a:hover{
  228.             background-color: #ffffff;
  229.         }
  230.     }
  231.     
  232.     h2.z008 {
  233.         border-left: solid #515151 2px;
  234.     }
  235.     .advantage001 ol>li:before, .service001_02 h3{
  236.         color:#515151;
  237.     }
  238.     .advantage001 dt:after, .privacy001 dt:after, .service001_02 h3:before,h3.z009::after, .c001 h3:after, .c002 h3:after, .c003 h3:after, .c004 h3:after, .c005 h3:after{
  239.         background-color: #515151;
  240.     }
  241.     h3.z009:before, .c001 h3:before, .c002 h3:before, .c003 h3:before, .c004 h3:before, .c005 h3:before{
  242.         color: #515151;
  243.     }
  244.     .index002_02 dl dd a.btn:hover, .index002_01 a.btn:hover {
  245.         text-decoration: none;
  246.         color: ;
  247.         background-color: #515151;
  248.     }
  249.     .index002_02 dl dd a.btn, .index002_01 a.btn{
  250.         box-shadow: 0px 0px 0px 1px #515151;
  251.         -moz-box-shadow: 0px 0px 0px 1px #515151;
  252.         -webkit-box-shadow: 0px 0px 0px 1px #515151;
  253.     }
  254.     .con_001_05, .container_faq_02 dt, .container_faq_02 dd{
  255.         border:1px solid #515151;
  256.     }
  257.     .con_001_05:hover, .container_faq_02 dt{
  258.         background-color: #515151;
  259.     }
  260.     .archive_pager .current>.page-item{
  261.         background-color: #515151;
  262.     }
  263.     .belt_001 hr{
  264.         border-top: 2px solid #515151;
  265.     }
  266.     .contact003_01 .btn-primary {
  267.     }
  268.     </style>
  269. <style type="text/css">
  270. body{
  271.     color: #333333;
  272. }
  273. a:link { color:#333333; }
  274. a:visited { color:#333333; }
  275. a:active {
  276.     color:#333333;
  277.  }
  278. #sbc-calendar table thead th, #sbc-calendar tr td{
  279.     color: #333333;
  280. }
  281.  ul#h002>li>a:link, ul#h002>li>a:visited, div.h002_sp>a:link, div.h002_sp>a:visited {
  282.     color:#221815 !important;
  283. }
  284. .index002_02 dl dd a.btn:hover, .index002_01 a.btn:hover {
  285.     color: #221815;
  286. }
  287. .container_faq_02 dt {
  288.     color:#221815;
  289. }
  291. .h006 {
  292.     color: #ffffff;
  293. }
  294.   .f005, .f006, .copyright, .f005:before, .f005 a, .copyright{
  295.     color:#ffffff;
  296. }
  297.  #sbc-calendar .sbc-navigation select {
  298.     color: #333;
  299. }
  301. .f006 a:link {
  302.     color: #ffffff !important;
  303. }
  304. @media screen and (max-width: 767px) {
  305. #h002>li>a:link, #h002>li>a:visited, .h002_sp>a:link, .h002_sp>a:visited {
  306.     color: #ffffff;
  307. }
  308. .h002_sp, .h002_sp>a:link, .h002_sp>a:visited {
  309.     color: #ffffff;
  310. }
  311. }
  312. </style>
  313. <style type="text/css">
  314.     .h006{
  315.   background-color:#ff444d;
  316.   text-align: center;
  317.   padding-top: 8px;
  318.   padding-bottom:8px;
  319. }
  320. .h_pickupmenu ul li {
  321.   border: none; 
  322.   border-radius: 20px;
  323. }
  324. .h_sp_submenu_02_2, .sp_navbar_head{
  325.     background-color: #54cda7;
  326.     padding: 2px 8px;
  327.     text-align:center;
  328. }
  329. .h_sp_submenu_03_1 li{
  330.     border-bottom: #aaa 1px solid;
  331. }
  332. .cf_footer {
  333.     display: flex;
  334.     flex-wrap: wrap;
  335. }
  336. .cf_footer ul {
  337.     width: 15em;
  338.     margin-bottom: 2em;
  339. }
  340. .cf_footer li {
  341.     margin-bottom: 8px;
  342. }
  343. li.cf_footer_02{
  344.     margin-bottom: 38px;
  345. }
  346. .cf_indent{
  347.     padding-left:1em;
  348.     }
  349. .cf_footer_sp_title01{
  350. font-size:14pt;
  351. display:inline-block;
  352. width:100%;
  353. }
  354. .cf_footer_sp_title01:after {
  355.     position: absolute;
  356.     right: 0;
  357.     content: "ー";
  358.     font-size: 1.2em;
  359. }
  360. .cf_footer_sp_title01.collapsed:after {
  361.     content: "＋";
  362. }
  363. .cf_footer_sp_wrap01{
  364. margin-right:-15px;
  365. }
  366. .cf_foot_sp_02{
  367.     display: flex;
  368.     flex-wrap: wrap;
  369. }
  370. .cf_foot_sp_02 li{
  371.     width: 33.33333%;
  372.     padding: 0 4px;
  373.     text-align: center;
  374. }
  375. .cf_foot_sp_02 li a{
  376.     width: 100%;
  377.     display: inline-block;
  378.     text-align: center;
  379.     border: 1px solid #333;
  380.     padding: 8px 0;
  381. }
  382. .cf_footer_sp_wrap01 span {
  383.     line-height: 2.5em;
  384. }
  385. .cf_footer_sp_wrap01 .cf_indent {
  386.     margin-bottom: 1em;
  387. }
  388.     </style><style type="text/css">
  389.     .h009 li:before{
  390.         color: #333333;
  391.     }
  392.     .h012 li:before{
  393.         color: #333333;
  394.     }
  395.     </style>
  396. <style type="text/css">
  397. div.h002_sp{
  398. margin-top: -40px;
  399. }
  400. header.h_type008 {
  401.     background-color: unset;
  402.     border-bottom: none;
  403. }
  404. @media screen and (min-width: 1200px){
  405. header.afterscroll_disp.noscroll{
  406.     background-color: rgba( 255,255,255,0 ) !important;
  407. }
  408. }
  410. @media screen and (max-width: 1199px){
  411. header.afterscroll_disp.noscroll{
  412.     background-color: rgba( 255,255,255,0 ) !important;
  413. }
  414. .h_type008_fix_sp{
  415.     position: fixed;
  416.     width: 100%;
  417.     z-index: 10000;
  418.     background-color: rgba(255,255,255,.8);
  419. }
  420. }
  421. @media screen and (max-width: 1199px){
  422. #h002, .h_sp_submenu, .h013_wrapper {
  423.     background-color: #515151;
  424. }
  425. }
  426. @media screen and (min-width: 1200px){
  427. .dropdown-menu>li{
  428.     background-color: #ffffff;
  429. }
  430. }
  434. @media screen and (min-width: 1200px){
  435. #navbar{
  436.     background-color: unset;
  437.     border-bottom: none;
  438. }
  439. }
  441. ul#h002>li.type008_h009_003 a{
  442.     color: #333333 !important;
  443. }
  444. @media screen and (max-width: 1199px){
  445. #h002, .h_sp_submenu, .h013_wrapper {
  446.     background-color: rgba( 255,255,255,1 );
  447. }
  448. }
  449. @media screen and (max-width: 1199px){
  450. div#navbar #h002 li a, div#navbar li a:visited{
  451.     color: #333333 !important;
  452. }
  453. }
  454. @media screen and (max-width: 1199px){
  455. header.header.h_type008 {
  456.     background-color: rgba( 255,255,255,1 );
  457. }
  458. }
  459. </style>
  461. <style type="text/css">
  462. <!--
  463. img.logo_pc{
  464.     width: 40%;
  465.     max-height: none;
  466.         margin-top: 8px;
  467. }
  468. img.logo_sp{
  469.         margin-left: 30px;
  470. }
  471. img.tel_img{
  472. }
  473. img.tel_img_sp{
  474. }
  475. img.fax_img{
  476. }
  477. img.fax_img_sp{
  478. }
  479. img.telfax_other_img{
  480. }
  481. img.telfax_other_img_sp{
  482. }
  483. li.h009_contact1:before{
  484.     vertical-align: middle;
  485. }
  486. .h009_contact1 a{
  487. }
  488. li.h009_contact2:before{
  489.     vertical-align: middle;
  490. }
  491. .h009_contact2 a{
  492. }
  493. li.h009_contact3:before{
  494.     vertical-align: middle;
  495. }
  496. .h009_contact3 a{
  497. }
  498. li.h009_contact4:before{
  499.     vertical-align: middle;
  500. }
  501. .h009_contact4 a{
  502. }
  503. li.h012_lang1:before{
  504.     vertical-align: middle;
  505. }
  506. .h012_lang1 a{
  507. }
  508. li.h012_lang2:before{
  509.     vertical-align: middle;
  510. }
  511. .h012_lang2 a{
  512. }
  513. li.h012_lang3:before{
  514.     vertical-align: middle;
  515. }
  516. .h012_lang3 a{
  517. }
  518. li.h012_lang4:before{
  519.     vertical-align: middle;
  520. }
  521. .h012_lang4 a{
  522. }
  523. -->
  524. </style>
  525. {% endblock %}
  526. </header>