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

Open in your IDE?
  1. {#
  2. ファイル名：vd_head_body.twig
  3. 処理概要：商品選択ページ
  4. 修正年月日：2025/09/05 visiondgn
  5. 修正内容：www側の変更を反映
  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/2025/07/b8b063923a86f932ade255c7ad3bef00-1024x498.png" class="logo_pc logo img-responsive vd_hidden_under_1200" alt="[公式]住設チェンジャー|住宅設備を爆速で取り替え・交換工事">
  42.                                             <img src="https://www.changer.fun/cms/wp-content/uploads/2025/07/b8b063923a86f932ade255c7ad3bef00-1024x498.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_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/lp_aircon-2/"   ><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>
  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/mypage/login" target="_blank">
  107.                                                     マイページ                                                    </a>
  108.                                                 </li>
  109.                                                                                                 <li>
  110.                                                     <a href="https://www2.changer.fun/cart" >
  111.                                                     買い物かご                                                    </a>
  112.                                                 </li>
  113.                                                                                             </ul>
  114.                                                                                     </li>
  115.                                                                             <li class="h_sp_submenu_02_1">
  116.                                             <p class="h_sp_submenu_02_2">ピックアップ</p>
  117.                                                                                         <ul class="h_sp_submenu_03_1">
  118.                                                                                                 <li>
  119.                                                     <a href="https://www.changer.fun/area/" >
  120.                                                     対応エリア                                                    </a>
  121.                                                 </li>
  122.                                                                                                 <li>
  123.                                                     <a href="https://www.changer.fun/order-flow/" >
  124.                                                     注文の流れ                                                    </a>
  125.                                                 </li>
  126.                                                                                                 <li>
  127.                                                     <a href="https://www.changer.fun/why/" >
  128.                                                     選ばれる理由                                                    </a>
  129.                                                 </li>
  130.                                                                                                 <li>
  131.                                                     <a href="https://www.changer.fun/warranty/" >
  132.                                                     製品・工事保証                                                    </a>
  133.                                                 </li>
  134.                                                                                                 <li>
  135.                                                     <a href="https://www.changer.fun/jirei/" >
  136.                                                     施工事例                                                    </a>
  137.                                                 </li>
  138.                                                                                                 <li>
  139.                                                     <a href="https://www.changer.fun/qa/" >
  140.                                                     Q&A                                                    </a>
  141.                                                 </li>
  142.                                                                                             </ul>
  143.                                                                                     </li>
  144.                                                                             <li class="h_sp_submenu_02_1">
  145.                                             <p class="h_sp_submenu_02_2">その他</p>
  146.                                                                                         <ul class="h_sp_submenu_03_1">
  147.                                                                                                 <li>
  148.                                                     <a href="https://www.changer.fun/sample-page-2/kaishagaiyou/" >
  149.                                                     会社情報                                                    </a>
  150.                                                 </li>
  151.                                                                                                 <li>
  152.                                                     <a href="https://www.changer.fun/staff/" >
  153.                                                     スタッフ紹介                                                    </a>
  154.                                                 </li>
  155.                                                                                                 <li>
  156.                                                     <a href="https://www.changer.fun/contact/" >
  157.                                                     お問い合わせ                                                    </a>
  158.                                                 </li>
  159.                                                                                                 <li>
  160.                                                     <a href="https://www.changer.fun/shopping-guide/" >
  161.                                                     ショッピングガイド                                                    </a>
  162.                                                 </li>
  163.                                                                                             </ul>
  164.                                                                                     </li>
  165.                                                                     </ul>
  166.                             </div>
  167.                                                                                 </div>
  168.                     </div>
  170.                     
  171.                 </div>
  172.                                             </div>
  173.         </div>
  174.                     <div class="h_pickupmenu">
  175.                 <div>
  176.                     <nav>
  177.                         <!--pickup menu-->
  178.                         <ul class="text-center">
  179.                             
  180.                             <li class=""><p  ><a href="https://www.changer.fun/area/"  >対応エリア</a></p>
  181.                                                         </li>
  182.                             
  183.                             <li class=""><p  ><a href="https://www.changer.fun/why/"  >選ばれる理由</a></p>
  184.                                                         </li>
  185.                             
  186.                             <li class=""><p  ><a href="https://www.changer.fun/order-flow/"  >注文の流れ</a></p>
  187.                                                         </li>
  188.                             
  189.                             <li class=""><p  ><a href="https://www.changer.fun/warranty/"  >製品・工事保証</a></p>
  190.                                                         </li>
  191.                             
  192.                             <li class=""><p  ><a href="https://www.changer.fun/jirei/"  >施工事例</a></p>
  193.                                                         </li>
  194.                             
  195.                             <li class=""><p  ><a href="https://www.changer.fun/staff/"  >スタッフ紹介</a></p>
  196.                                                         </li>
  197.                             
  198.                             <li class=""><p  ><a href="https://www.changer.fun/qa/"  >Q&A</a></p>
  199.                                                         </li>
  200.                                                                                 </ul>
  201.                     </nav>
  202.                 </div>
  203.             </div>
  204.             </div>
  205. {% block stylesheet %}
  206. <style type="text/css">
  207. #navbar, .h002_sp{
  208.     background-color: #e8e8e8;
  209.     border-bottom: #ffffff 2px solid;
  210. }
  211. .f005, .f006, .copyright, .f005:before{
  212.     background-color: #e8e8e8;
  213. }
  215. @media (min-width: 768px){
  216.     #h002 li{
  217.         border-left: solid #ffffff 1px;
  218.     }
  219.     .h002_sideline{
  220.         border-right: solid #ffffff 1px;
  221.     }
  222.     #h002>li>ul>li a:hover{
  223.         background-color: #ffffff;
  224.     }
  225. }
  227. .z008 {
  228.     border-left: solid #e8e8e8 1px;
  229. }
  230. .advantage001 ol>li:before, .service001_02 h3{
  231.     color:#e8e8e8;
  232. }
  233. .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{
  234.     background-color: #e8e8e8;
  235. }
  236. .backnumber .z009:before, .z009.con_sec_001_01:before, .c001 h2:before, .c002 h2:before, .c003 h2:before, .c004 h2:before, .c005 h2:before{
  237.     color: #e8e8e8;
  238. }
  239. .index002_02 dl dd a.btn:hover, .index002_01 a.btn:hover {
  240.     text-decoration: none;
  241.     color: ;
  242.     background-color: #e8e8e8;
  243. }
  244. .index002_02 dl dd a.btn, .index002_01 a.btn{
  245.     box-shadow: 0px 0px 0px 1px #e8e8e8;
  246.     -moz-box-shadow: 0px 0px 0px 1px #e8e8e8;
  247.     -webkit-box-shadow: 0px 0px 0px 1px #e8e8e8;
  248. }
  249. .con_001_05, .container_faq_02 dt, .container_faq_02 dd{
  250.     border:1px solid #e8e8e8;
  251. }
  252. .con_001_05:hover, .container_faq_02 dt{
  253.     background-color: #e8e8e8;
  254. }
  255. .archive_pager .current>.page-item{
  256.     background-color: #e8e8e8;
  257. }
  258. .belt_001 hr{
  259.     border-top: 2px solid #e8e8e8;
  260. }
  261. .contact003_01 .btn-primary {
  262. }
  263. .main{
  264.     letter-spacing: 0.1em;
  265. }
  266. </style>
  267. <style type="text/css">
  268. body{
  269.     color: #3d3d3d;
  270. }
  271. a:link { color:#3d3d3d; }
  272. a:visited { color:#3d3d3d; }
  273. a:active {
  274.     color:#3d3d3d;
  275.  }
  276. #sbc-calendar table thead th, #sbc-calendar tr td{
  277.     color: #3d3d3d;
  278. }
  279.  ul#h002>li>a:link, ul#h002>li>a:visited, div.h002_sp>a:link, div.h002_sp>a:visited {
  280.     color:#3d3d3d !important;
  281. }
  282. .index002_02 dl dd a.btn:hover, .index002_01 a.btn:hover {
  283.     color: #3d3d3d;
  284. }
  285. .container_faq_02 dt {
  286.     color:#3d3d3d;
  287. }
  289. .h006 {
  290.     color: #ffffff;
  291. }
  292.   .f005, .f006, .copyright, .f005:before, .f005 a, .copyright{
  293.     color:#ffffff;
  294. }
  295.  #sbc-calendar .sbc-navigation select {
  296.     color: #333;
  297. }
  299. .f006 a:link {
  300.     color: #ffffff !important;
  301. }
  302. @media screen and (max-width: 767px) {
  303. #h002>li>a:link, #h002>li>a:visited, .h002_sp>a:link, .h002_sp>a:visited {
  304.     color: #ffffff;
  305. }
  306. .h002_sp, .h002_sp>a:link, .h002_sp>a:visited {
  307.     color: #ffffff;
  308. }
  309. }
  310. </style>
  311. <style type="text/css">
  312. .h006{
  313.   background-color:#ff444d;
  314.   text-align: center;
  315.   padding-top: 8px;
  316.   padding-bottom:8px;
  317. }
  318. .h_pickupmenu ul li {
  319.   border: none; 
  320.   border-radius: 20px;
  321. }
  322. .h_sp_submenu_02_2, .sp_navbar_head{
  323.     background-color: #54cda7;
  324.     padding: 2px 8px;
  325.     text-align:center;
  326. }
  327. .h_sp_submenu_03_1 li{
  328.     border-bottom: #aaa 1px solid;
  329. }
  330. .cf_footer {
  331.     display: flex;
  332.     flex-wrap: wrap;
  333. }
  334. .cf_footer ul {
  335.     width: 18em;
  336.     margin-bottom: 2em;
  337. }
  338. @media screen and (min-width: 768px) {
  339.     .cf_footer {
  340.         justify-content: end;
  341.     }
  342. }
  343. .cf_footer li {
  344.     margin-bottom: 8px;
  345. }
  346. li.cf_footer_02{
  347.     margin-bottom: 38px;
  348. }
  349. .cf_indent{
  350.     padding-left:1em;
  351.     }
  352. .cf_footer_sp_title01{
  353. font-size:14pt;
  354. display:inline-block;
  355. width:100%;
  356. }
  357. .cf_footer_sp_title01:after {
  358.     position: absolute;
  359.     right: 0;
  360.     content: "ー";
  361.     font-size: 1.2em;
  362. }
  363. .cf_footer_sp_title01.collapsed:after {
  364.     content: "＋";
  365. }
  366. .cf_footer_sp_wrap01{
  367. margin-right:-15px;
  368. }
  369. .cf_foot_sp_02{
  370.     display: flex;
  371.     flex-wrap: wrap;
  372. }
  373. .cf_foot_sp_02 li{
  374.     width: 50%;
  375.     padding: 0 4px;
  376.     text-align: center;
  377. }
  378. .cf_foot_sp_02 li a{
  379.     width: 100%;
  380.     display: inline-block;
  381.     text-align: center;
  382.     border: 1px solid #333;
  383.     padding: 8px 0;
  384. }
  385. .cf_footer_sp_wrap01 span {
  386.     line-height: 2.5em;
  387. }
  388. .cf_footer_sp_wrap01 .cf_indent {
  389.     margin-bottom: 1em;
  390. }
  391. .vdv027 a.pcate_normal_01_1{
  392.     border: 1px solid #2f833a;
  393.     color: #2f833a;
  394. }
  395. .vdv027 a.pcate_normal_01_1:hover{
  396.     border: 1px solid #2f833a;
  397.     color: #fff;
  398.     background-color: #2f833a;
  399. }
  400. .vdv027 .pcate_normal_01 {
  401.     gap: 20px;
  402. }
  403. .cf_aircon_table_title{
  404.     font-size: 1.4em;
  405. }
  406. .cf_aircon_table_title_02{
  407.     font-size: .5em;
  408. }
  409. .cf_aircon_table td, .cf_aircon_table th {
  410.     text-align: center;
  411. }
  412. .cf_aircon_table{
  413.     width:100%;
  414. }
  415. .cf_aircon_table td, .cf_aircon_table th {
  416.     border: 1px solid #aaa;
  417. }
  418. .cf_aircon_table td {
  419.     font-size: .9em;
  420. }
  421. @media (min-width: 768px) and (max-width: 991px){
  422.     .cf_aircon_table td {
  423.         font-size: .8em;
  424.     }
  425. }
  426. .cf_aircon_table tr:nth-of-type(1) th {
  427.     background-color: lightblue;
  428. }
  429. .cf_aircon_table tr:nth-of-type(2) th {
  430.     background-color: rgb(242, 183, 101);
  431. }
  432. .cf_staff_02 {
  433.     background-color: #fff;
  434.     padding: 40px;
  435.     width: 100%;
  436.     border-top-right-radius: 20px;
  437. }
  438. .cf_chart_hissu {
  439.     color: #f00;
  440.     border: 1.5px solid #f00;
  441.     border-radius: 4px;
  442.     font-size: .8em;
  443.     display: inline-block;
  444.     margin-left: .5em;
  445.     padding: 0 .2em;
  446. }
  447. .cf_chart_nini {
  448.     color: #777;
  449.     border: 1.5px solid #dadada;
  450.     border-radius: 4px;
  451.     font-size: .8em;
  452.     display: inline-block;
  453.     margin-left: .5em;
  454.     padding: 0 .2em;
  455. }
  456. </style><style type="text/css">
  457. .h009 li:before{
  458.     color: #3d3d3d;
  459. }
  460. .h012 li:before{
  461.     color: #3d3d3d;
  462. }
  463. </style>
  464. <style type="text/css">
  465. div.h002_sp{
  466. margin-top: -40px;
  467. }
  468. header.h_type008 {
  469.     background-color: unset;
  470.     border-bottom: none;
  471. }
  472. @media screen and (min-width: 1200px){
  473. header.afterscroll_disp.noscroll{
  474.     background-color: rgba( 255,255,255,0 ) !important;
  475. }
  476. }
  478. @media screen and (max-width: 1199px){
  479. header.afterscroll_disp.noscroll{
  480.     background-color: rgba( 255,255,255,0 ) !important;
  481. }
  482. .h_type008_fix_sp{
  483.     position: fixed;
  484.     width: 100%;
  485.     z-index: 10000;
  486.     background-color: rgba(255,255,255,.8);
  487. }
  488. }
  489. @media screen and (max-width: 1199px){
  490. #h002, .h_sp_submenu, .h013_wrapper {
  491.     background-color: #e8e8e8;
  492. }
  493. }
  494. @media screen and (min-width: 1200px){
  495. .dropdown-menu>li{
  496.     background-color: #ffffff;
  497. }
  498. }
  502. @media screen and (min-width: 1200px){
  503. #navbar{
  504.     background-color: unset;
  505.     border-bottom: none;
  506. }
  507. }
  509. ul#h002>li.type008_h009_003 a{
  510.     color: #3d3d3d !important;
  511. }
  512. @media screen and (max-width: 1199px){
  513. #h002, .h_sp_submenu, .h013_wrapper {
  514.     background-color: rgba( 255,255,255,1 );
  515. }
  516. }
  517. @media screen and (max-width: 1199px){
  518. div#navbar #h002 li a, div#navbar li a:visited{
  519.     color: #333333 !important;
  520. }
  521. }
  522. @media screen and (max-width: 1199px){
  523. header.header.h_type008 {
  524.     background-color: rgba( 255,255,255,1 );
  525. }
  526. }
  527. </style>
  529. <style type="text/css">
  530. <!--
  531. img.logo_pc{
  532.     width: 40%;
  533.     max-height: none;
  534.         margin-top: 8px;
  535. }
  536. img.logo_sp{
  537.         margin-bottom: 14px;
  538. }
  539. img.tel_img{
  540. }
  541. img.tel_img_sp{
  542. }
  543. img.fax_img{
  544. }
  545. img.fax_img_sp{
  546. }
  547. img.telfax_other_img{
  548. }
  549. img.telfax_other_img_sp{
  550. }
  551. li.h009_contact1:before{
  552.     vertical-align: middle;
  553. }
  554. .h009_contact1 a{
  555. }
  556. li.h009_contact2:before{
  557.     vertical-align: middle;
  558. }
  559. .h009_contact2 a{
  560. }
  561. li.h009_contact3:before{
  562.     vertical-align: middle;
  563. }
  564. .h009_contact3 a{
  565. }
  566. li.h009_contact4:before{
  567.     vertical-align: middle;
  568. }
  569. .h009_contact4 a{
  570. }
  571. li.h012_lang1:before{
  572.     vertical-align: middle;
  573. }
  574. .h012_lang1 a{
  575. }
  576. li.h012_lang2:before{
  577.     vertical-align: middle;
  578. }
  579. .h012_lang2 a{
  580. }
  581. li.h012_lang3:before{
  582.     vertical-align: middle;
  583. }
  584. .h012_lang3 a{
  585. }
  586. li.h012_lang4:before{
  587.     vertical-align: middle;
  588. }
  589. .h012_lang4 a{
  590. }
  591. -->
  592. </style>
  593. {% endblock %}
  594. </header>