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. <script async src="https://www.googletagmanager.com/gtag/js?id=G-XJ8JK2MF0T"></script>
  28. <script>
  29.   window.dataLayer = window.dataLayer || [];
  30.   function gtag(){dataLayer.push(arguments);}
  31.   gtag('js', new Date());
  33.   gtag('config', 'G-XJ8JK2MF0T');
  34. </script>
  35. {% endblock %}
  36. <header class="header h_type008   vd_no_fixed vd_no_over_sp">
  37.     <div id="h001" class="clearfix">
  38.                 <div class="h008">
  39.             <div class="h_type008_001">
  40.                 <h1><a href="https://www.changer.fun/">
  41.                                     <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="[公式]住設チェンジャー|住宅設備を爆速で取り替え・交換工事">
  42.                                             <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="[公式]住設チェンジャー|住宅設備を爆速で取り替え・交換工事">
  43.                                                         </a>
  44.                 </h1>
  45.                                 <div class="h012">
  46.                     <div class="">
  47.                                                 <ul class="list-inline pull-right">
  48.             <li class=" h012_lang1"><a  href="https://www2.changer.fun/products/list" >商品検索</a></li><li class=" h012_lang2"><a  href="https://www2.changer.fun/cart" >買い物かご</a></li><li class=" h012_lang3"><a  href="https://www2.changer.fun/mypage/login" >マイページ</a></li></ul>
  49.                                         </div>
  50.                 </div>
  51.                             </div>
  52.             <div class="h008_02">
  53.                 <div class="h002_sp text-center" >
  54.                     <a href="#">
  55.                                         <div class="h002_sp_02">
  56.                             <span></span>
  57.                         </div>
  58.                                                 <p class="text-center center-block h002_sp_02_txt">メニュー</p>
  59.                                         </a>
  61.                 </div>
  63.             <div class="h_type008_003  h_type008_005">
  65.                 <div class="h_type008_003_01">
  66.                     <div class="navbar_wrap">
  67.                         <div id="navbar">
  68.                         <div class="vd_visible_under_1200 sp_navbar_head">メニュー</div>
  69.                         <nav>
  70.                             <!--メインメニュー-->
  71.                             <ul id="h002" class="text-center h002_01" >
  72.                                 
  73.                                 <li class=""><a  href="https://www.changer.fun/"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h01.png" alt="エアコン"><span>エアコン</span></a>
  74.                                                                     </li>
  75.                             
  76.                                 <li class=""><a  href="https://www.changer.fun/lp_toilet/"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h02.png" alt="トイレ"><span>トイレ</span></a>
  77.                                                                     </li>
  78.                             
  79.                                 <li class=""><a  href="https://www.changer.fun/"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h04.png" alt="洗面台"><span>洗面台</span></a>
  80.                                                                     </li>
  81.                             
  82.                                 <li class=""><a  href="https://www.changer.fun/"   ><img class="img-responsive center-block" src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h05.png" alt="ガス給湯器"><span>ガス給湯器</span></a>
  83.                                                                     </li>
  84.                             
  85.                                 <li class=""><a  href="https://www.changer.fun/"   ><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://www.changer.fun/">都市ガスタイプ</a></li>
  91.                                                                                 <li><a href="https://www.changer.fun/">LPガスタイプ</a></li>
  92.                                                                             </ul>
  93.                                                                 </li>
  94.                                                                 <li class="type008_h009_003 h009_01 type008_h009_002 h009_contact1"><p><a  href="https://www.changer.fun/" ><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://www.changer.fun/" ><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://www.changer.fun/" ><img src="https://www.changer.fun/cms/wp-content/uploads/2023/06/h08.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://www.changer.fun/" ><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>
  96.                                                             </ul>
  97.                             </nav>
  98.                             
  99.                                                         <div class="h_sp_submenu">
  100.                                 <ul class="h_sp_submenu_02">
  101.                                                                             <li class="h_sp_submenu_02_1">
  102.                                             <p class="h_sp_submenu_02_2"></p>
  103.                                                                                         <ul class="h_sp_submenu_03_1">
  104.                                                                                                 <li>
  105.                                                     <a href="https://www2.changer.fun/products/list" >
  106.                                                     商品検索                                                    </a>
  107.                                                 </li>
  108.                                                                                                 <li>
  109.                                                     <a href="https://www2.changer.fun/mypage/login" target="_blank">
  110.                                                     マイページ                                                    </a>
  111.                                                 </li>
  112.                                                                                                 <li>
  113.                                                     <a href="https://www2.changer.fun/cart" >
  114.                                                     買い物かご                                                    </a>
  115.                                                 </li>
  116.                                                                                             </ul>
  117.                                                                                     </li>
  118.                                                                             <li class="h_sp_submenu_02_1">
  119.                                             <p class="h_sp_submenu_02_2">ピックアップ</p>
  120.                                                                                         <ul class="h_sp_submenu_03_1">
  121.                                                                                                 <li>
  122.                                                     <a href="https://www.changer.fun/area/" >
  123.                                                     対応エリア                                                    </a>
  124.                                                 </li>
  125.                                                                                                 <li>
  126.                                                     <a href="https://www.changer.fun/order-flow/" >
  127.                                                     注文の流れ                                                    </a>
  128.                                                 </li>
  129.                                                                                                 <li>
  130.                                                     <a href="https://www.changer.fun/why/" >
  131.                                                     選ばれる理由                                                    </a>
  132.                                                 </li>
  133.                                                                                                 <li>
  134.                                                     <a href="https://www.changer.fun/warranty/" >
  135.                                                     製品・工事保証                                                    </a>
  136.                                                 </li>
  137.                                                                                                 <li>
  138.                                                     <a href="https://www.changer.fun/jirei/" >
  139.                                                     施工事例                                                    </a>
  140.                                                 </li>
  141.                                                                                                 <li>
  142.                                                     <a href="https://www.changer.fun/qa/" >
  143.                                                     Q&A                                                    </a>
  144.                                                 </li>
  145.                                                                                             </ul>
  146.                                                                                     </li>
  147.                                                                             <li class="h_sp_submenu_02_1">
  148.                                             <p class="h_sp_submenu_02_2">その他</p>
  149.                                                                                         <ul class="h_sp_submenu_03_1">
  150.                                                                                                 <li>
  151.                                                     <a href="https://www.changer.fun/sample-page-2/kaishagaiyou/" >
  152.                                                     会社情報                                                    </a>
  153.                                                 </li>
  154.                                                                                                 <li>
  155.                                                     <a href="https://www.changer.fun/staff/" >
  156.                                                     スタッフ紹介                                                    </a>
  157.                                                 </li>
  158.                                                                                                 <li>
  159.                                                     <a href="https://www.changer.fun/contact/" >
  160.                                                     お問い合わせ                                                    </a>
  161.                                                 </li>
  162.                                                                                                 <li>
  163.                                                     <a href="https://www.changer.fun/privacy/" >
  164.                                                     プライバシーポリシー                                                    </a>
  165.                                                 </li>
  166.                                                                                                 <li>
  167.                                                     <a href="https://www.changer.fun/tokusho_kojin/" >
  168.                                                     特定商取引法に基づく表記                                                    </a>
  169.                                                 </li>
  170.                                                                                                 <li>
  171.                                                     <a href="https://www.changer.fun/riyoukiyaku/" >
  172.                                                     利用規約                                                    </a>
  173.                                                 </li>
  174.                                                                                                 <li>
  175.                                                     <a href="https://www.changer.fun/mensekijikou/" >
  176.                                                     キャンセル・返品・交換・免責事項について                                                    </a>
  177.                                                 </li>
  178.                                                                                                 <li>
  179.                                                     <a href="https://www.changer.fun/koujiukeoikeiyakkan/" >
  180.                                                     工事請負約款                                                    </a>
  181.                                                 </li>
  182.                                                                                                 <li>
  183.                                                     <a href="https://www.changer.fun/hannshakaiseiryoku/" >
  184.                                                     反社会勢力                                                    </a>
  185.                                                 </li>
  186.                                                                                             </ul>
  187.                                                                                     </li>
  188.                                                                     </ul>
  189.                             </div>
  190.                                                                                 </div>
  191.                     </div>
  193.                     
  194.                 </div>
  195.                                             </div>
  196.         </div>
  197.                     <div class="h_pickupmenu">
  198.                 <div>
  199.                     <nav>
  200.                         <!--pickup menu-->
  201.                         <ul class="text-center">
  202.                             
  203.                             <li class=""><p  ><a href="https://www.changer.fun/area/"  >対応エリア</a></p>
  204.                                                         </li>
  205.                             
  206.                             <li class=""><p  ><a href="https://www.changer.fun/why/"  >選ばれる理由</a></p>
  207.                                                         </li>
  208.                             
  209.                             <li class=""><p  ><a href="https://www.changer.fun/order-flow/"  >注文の流れ</a></p>
  210.                                                         </li>
  211.                             
  212.                             <li class=""><p  ><a href="https://www.changer.fun/warranty/"  >製品・工事保証</a></p>
  213.                                                         </li>
  214.                             
  215.                             <li class=""><p  ><a href="https://www.changer.fun/jirei/"  >施工事例</a></p>
  216.                                                         </li>
  217.                             
  218.                             <li class=""><p  ><a href="https://www.changer.fun/staff/"  >スタッフ紹介</a></p>
  219.                                                         </li>
  220.                             
  221.                             <li class=""><p  ><a href="https://www.changer.fun/qa/"  >Q&A</a></p>
  222.                                                         </li>
  223.                                                                                 </ul>
  224.                     </nav>
  225.                 </div>
  226.             </div>
  227.             </div>
  228. {% block stylesheet %}
  229. <style type="text/css">
  230. #navbar, .h002_sp{
  231.     background-color: #e8e8e8;
  232.     border-bottom: #ffffff 2px solid;
  233. }
  234. .f005, .f006, .copyright, .f005:before{
  235.     background-color: #e8e8e8;
  236. }
  238. @media (min-width: 768px){
  239.     #h002 li{
  240.         border-left: solid #ffffff 1px;
  241.     }
  242.     .h002_sideline{
  243.         border-right: solid #ffffff 1px;
  244.     }
  245.     #h002>li>ul>li a:hover{
  246.         background-color: #ffffff;
  247.     }
  248. }
  250. .z008 {
  251.     border-left: solid #e8e8e8 1px;
  252. }
  253. .advantage001 ol>li:before, .service001_02 h3{
  254.     color:#e8e8e8;
  255. }
  256. .backnumber .z009:after, .advantage001 dt:after, .privacy001 dt:after, .service001_02 h2:before,.z009.con_sec_001_01::after, .c001 h2:after, .c002 h2:after, .c003 h2:after, .c004 h2:after, .c005 h2:after{
  257.     background-color: #e8e8e8;
  258. }
  259. .backnumber .z009:before, .z009.con_sec_001_01:before, .c001 h2:before, .c002 h2:before, .c003 h2:before, .c004 h2:before, .c005 h2:before{
  260.     color: #e8e8e8;
  261. }
  262. .index002_02 dl dd a.btn:hover, .index002_01 a.btn:hover {
  263.     text-decoration: none;
  264.     color: ;
  265.     background-color: #e8e8e8;
  266. }
  267. .index002_02 dl dd a.btn, .index002_01 a.btn{
  268.     box-shadow: 0px 0px 0px 1px #e8e8e8;
  269.     -moz-box-shadow: 0px 0px 0px 1px #e8e8e8;
  270.     -webkit-box-shadow: 0px 0px 0px 1px #e8e8e8;
  271. }
  272. .con_001_05, .container_faq_02 dt, .container_faq_02 dd{
  273.     border:1px solid #e8e8e8;
  274. }
  275. .con_001_05:hover, .container_faq_02 dt{
  276.     background-color: #e8e8e8;
  277. }
  278. .archive_pager .current>.page-item{
  279.     background-color: #e8e8e8;
  280. }
  281. .belt_001 hr{
  282.     border-top: 2px solid #e8e8e8;
  283. }
  284. .contact003_01 .btn-primary {
  285. }
  286. .main{
  287.     letter-spacing: 0.1em;
  288. }
  289. </style>
  290. <style type="text/css">
  291. body{
  292.     color: #3d3d3d;
  293. }
  294. a:link { color:#3d3d3d; }
  295. a:visited { color:#3d3d3d; }
  296. a:active {
  297.     color:#3d3d3d;
  298.  }
  299. #sbc-calendar table thead th, #sbc-calendar tr td{
  300.     color: #3d3d3d;
  301. }
  302.  ul#h002>li>a:link, ul#h002>li>a:visited, div.h002_sp>a:link, div.h002_sp>a:visited {
  303.     color:#3d3d3d !important;
  304. }
  305. .index002_02 dl dd a.btn:hover, .index002_01 a.btn:hover {
  306.     color: #3d3d3d;
  307. }
  308. .container_faq_02 dt {
  309.     color:#3d3d3d;
  310. }
  312. .h006 {
  313.     color: #ffffff;
  314. }
  315.   .f005, .f006, .copyright, .f005:before, .f005 a, .copyright{
  316.     color:#ffffff;
  317. }
  318.  #sbc-calendar .sbc-navigation select {
  319.     color: #333;
  320. }
  322. .f006 a:link {
  323.     color: #ffffff !important;
  324. }
  325. @media screen and (max-width: 767px) {
  326. #h002>li>a:link, #h002>li>a:visited, .h002_sp>a:link, .h002_sp>a:visited {
  327.     color: #ffffff;
  328. }
  329. .h002_sp, .h002_sp>a:link, .h002_sp>a:visited {
  330.     color: #ffffff;
  331. }
  332. }
  333. </style>
  334. <style type="text/css">
  335. .h006{
  336.   background-color:#ff444d;
  337.   text-align: center;
  338.   padding-top: 8px;
  339.   padding-bottom:8px;
  340. }
  341. .h_pickupmenu ul li {
  342.   border: none; 
  343.   border-radius: 20px;
  344. }
  345. .h_sp_submenu_02_2, .sp_navbar_head{
  346.     background-color: #54cda7;
  347.     padding: 2px 8px;
  348.     text-align:center;
  349. }
  350. .h_sp_submenu_03_1 li{
  351.     border-bottom: #aaa 1px solid;
  352. }
  353. .cf_footer {
  354.     display: flex;
  355.     flex-wrap: wrap;
  356. }
  357. .cf_footer ul {
  358.     width: 15em;
  359.     margin-bottom: 2em;
  360. }
  361. .cf_footer li {
  362.     margin-bottom: 8px;
  363. }
  364. li.cf_footer_02{
  365.     margin-bottom: 38px;
  366. }
  367. .cf_indent{
  368.     padding-left:1em;
  369.     }
  370. .cf_footer_sp_title01{
  371. font-size:14pt;
  372. display:inline-block;
  373. width:100%;
  374. }
  375. .cf_footer_sp_title01:after {
  376.     position: absolute;
  377.     right: 0;
  378.     content: "ー";
  379.     font-size: 1.2em;
  380. }
  381. .cf_footer_sp_title01.collapsed:after {
  382.     content: "＋";
  383. }
  384. .cf_footer_sp_wrap01{
  385. margin-right:-15px;
  386. }
  387. .cf_foot_sp_02{
  388.     display: flex;
  389.     flex-wrap: wrap;
  390. }
  391. .cf_foot_sp_02 li{
  392.     width: 33.33333%;
  393.     padding: 0 4px;
  394.     text-align: center;
  395. }
  396. .cf_foot_sp_02 li a{
  397.     width: 100%;
  398.     display: inline-block;
  399.     text-align: center;
  400.     border: 1px solid #333;
  401.     padding: 8px 0;
  402. }
  403. .cf_footer_sp_wrap01 span {
  404.     line-height: 2.5em;
  405. }
  406. .cf_footer_sp_wrap01 .cf_indent {
  407.     margin-bottom: 1em;
  408. }
  409. .vdv027 a.pcate_normal_01_1{
  410.     border: 1px solid #2f833a;
  411.     color: #2f833a;
  412. }
  413. .vdv027 a.pcate_normal_01_1:hover{
  414.     border: 1px solid #2f833a;
  415.     color: #fff;
  416.     background-color: #2f833a;
  417. }
  418. .vdv027 .pcate_normal_01 {
  419.     gap: 20px;
  420. }
  421. .cf_aircon_table_title{
  422.     font-size: 1.4em;
  423. }
  424. .cf_aircon_table_title_02{
  425.     font-size: .5em;
  426. }
  427. .cf_aircon_table td, .cf_aircon_table th {
  428.     text-align: center;
  429. }
  430. .cf_aircon_table{
  431.     width:100%;
  432. }
  433. .cf_aircon_table td, .cf_aircon_table th {
  434.     border: 1px solid #aaa;
  435. }
  436. .cf_aircon_table td {
  437.     font-size: .9em;
  438. }
  439. @media (min-width: 768px) and (max-width: 991px){
  440.     .cf_aircon_table td {
  441.         font-size: .8em;
  442.     }
  443. }
  444. .cf_aircon_table tr:nth-of-type(1) th {
  445.     background-color: lightblue;
  446. }
  447. .cf_aircon_table tr:nth-of-type(2) th {
  448.     background-color: rgb(242, 183, 101);
  449. }
  450. .cf_staff_02 {
  451.     background-color: #fff;
  452.     padding: 40px;
  453.     width: 100%;
  454.     border-top-right-radius: 20px;
  455. }
  456. .cf_chart_hissu {
  457.     color: #f00;
  458.     border: 1.5px solid #f00;
  459.     border-radius: 4px;
  460.     font-size: .8em;
  461.     display: inline-block;
  462.     margin-left: .5em;
  463.     padding: 0 .2em;
  464. }
  465. .cf_chart_nini {
  466.     color: #777;
  467.     border: 1.5px solid #dadada;
  468.     border-radius: 4px;
  469.     font-size: .8em;
  470.     display: inline-block;
  471.     margin-left: .5em;
  472.     padding: 0 .2em;
  473. }
  474. </style><style type="text/css">
  475. .h009 li:before{
  476.     color: #3d3d3d;
  477. }
  478. .h012 li:before{
  479.     color: #3d3d3d;
  480. }
  481. </style>
  482. <style type="text/css">
  483. div.h002_sp{
  484. margin-top: -40px;
  485. }
  486. header.h_type008 {
  487.     background-color: unset;
  488.     border-bottom: none;
  489. }
  490. @media screen and (min-width: 1200px){
  491. header.afterscroll_disp.noscroll{
  492.     background-color: rgba( 255,255,255,0 ) !important;
  493. }
  494. }
  496. @media screen and (max-width: 1199px){
  497. header.afterscroll_disp.noscroll{
  498.     background-color: rgba( 255,255,255,0 ) !important;
  499. }
  500. .h_type008_fix_sp{
  501.     position: fixed;
  502.     width: 100%;
  503.     z-index: 10000;
  504.     background-color: rgba(255,255,255,.8);
  505. }
  506. }
  507. @media screen and (max-width: 1199px){
  508. #h002, .h_sp_submenu, .h013_wrapper {
  509.     background-color: #e8e8e8;
  510. }
  511. }
  512. @media screen and (min-width: 1200px){
  513. .dropdown-menu>li{
  514.     background-color: #ffffff;
  515. }
  516. }
  520. @media screen and (min-width: 1200px){
  521. #navbar{
  522.     background-color: unset;
  523.     border-bottom: none;
  524. }
  525. }
  527. ul#h002>li.type008_h009_003 a{
  528.     color: #3d3d3d !important;
  529. }
  530. @media screen and (max-width: 1199px){
  531. #h002, .h_sp_submenu, .h013_wrapper {
  532.     background-color: rgba( 255,255,255,1 );
  533. }
  534. }
  535. @media screen and (max-width: 1199px){
  536. div#navbar #h002 li a, div#navbar li a:visited{
  537.     color: #333333 !important;
  538. }
  539. }
  540. @media screen and (max-width: 1199px){
  541. header.header.h_type008 {
  542.     background-color: rgba( 255,255,255,1 );
  543. }
  544. }
  545. </style>
  547. <style type="text/css">
  548. <!--
  549. img.logo_pc{
  550.     width: 40%;
  551.     max-height: none;
  552.         margin-top: 8px;
  553. }
  554. img.logo_sp{
  555.         margin-bottom: 14px;
  556. }
  557. img.tel_img{
  558. }
  559. img.tel_img_sp{
  560. }
  561. img.fax_img{
  562. }
  563. img.fax_img_sp{
  564. }
  565. img.telfax_other_img{
  566. }
  567. img.telfax_other_img_sp{
  568. }
  569. li.h009_contact1:before{
  570.     vertical-align: middle;
  571. }
  572. .h009_contact1 a{
  573. }
  574. li.h009_contact2:before{
  575.     vertical-align: middle;
  576. }
  577. .h009_contact2 a{
  578. }
  579. li.h009_contact3:before{
  580.     vertical-align: middle;
  581. }
  582. .h009_contact3 a{
  583. }
  584. li.h009_contact4:before{
  585.     vertical-align: middle;
  586. }
  587. .h009_contact4 a{
  588. }
  589. li.h012_lang1:before{
  590.     vertical-align: middle;
  591. }
  592. .h012_lang1 a{
  593. }
  594. li.h012_lang2:before{
  595.     vertical-align: middle;
  596. }
  597. .h012_lang2 a{
  598. }
  599. li.h012_lang3:before{
  600.     vertical-align: middle;
  601. }
  602. .h012_lang3 a{
  603. }
  604. li.h012_lang4:before{
  605.     vertical-align: middle;
  606. }
  607. .h012_lang4 a{
  608. }
  609. -->
  610. </style>
  611. {% endblock %}
  612. </header>