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

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.         .top-what__box {
  4.             background-color: #ECF6FF;
  5.             text-align: center;
  6.             width: 100%;
  7.             padding: 5% 180px;
  8.         }
  10.         .top-what-title {
  11.             /* PC/PC_h2_24px_B */
  12.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  13.             font-size: 24px;
  14.             line-height: 36px;
  15.             font-weight: 600;
  16.             /* identical to box height, or 150% */
  17.             text-align: center;
  19.             /* text/Black_01 */
  20.             color: #333333;
  23.             /* Inside auto layout */
  24.             flex: none;
  25.             order: 0;
  26.             flex-grow: 0;
  27.         }
  29.         .top-what-exp {
  30.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  31.             font-style: normal;
  32.             font-weight: 600;
  33.             font-size: 28px;
  34.             line-height: 30px;
  35.             /* identical to box height, or 107% */
  36.             text-align: center;
  38.             /* text/Black_01 */
  39.             color: #333333;
  42.             /* Inside auto layout */
  43.             flex: none;
  44.             order: 0;
  45.             flex-grow: 0;
  46.         }
  48.         .top-what-gold {
  49.             margin: 35px 0;
  50.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  51.             font-style: normal;
  52.             font-weight: 600;
  53.             font-size: 28px;
  54.             line-height: 30px;
  55.             text-align: center;
  56.             color: #333333;
  57.             flex: none;
  58.             order: 1;
  59.             flex-grow: 0;
  60.         }
  62.         .top-what-gold-d-in {
  63.             margin: 35px 0;
  64.             display: inline-block;
  65.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  66.             font-style: normal;
  67.             font-weight: 600;
  68.             font-size: 28px;
  69.             line-height: 28px;
  70.             text-align: center;
  71.             color: #333333;
  72.         }
  74.         .top-what-gold span {
  75.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  76.             font-style: normal;
  77.             font-weight: 600;
  78.             font-size: 40px;
  79.             line-height: 30px;
  80.             /* identical to box height, or 75% */
  81.             text-align: center;
  83.             /* main/Orange */
  84.             color: #F76B34;
  87.             /* Inside auto layout */
  88.             flex: none;
  89.             order: 0;
  90.             flex-grow: 0;
  91.         }
  93.         .top-what-gold-d-in span {
  94.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  95.             font-style: normal;
  96.             font-weight: 600;
  97.             font-size: 40px;
  98.             line-height: 40px;
  99.             /* identical to box height, or 100% */
  100.             text-align: center;
  102.             /* main/Orange */
  103.             color: #F76B34;
  104.         }
  106.         .elected-title {
  107.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  108.             font-weight: 600;
  109.             font-size: 17px;
  110.             line-height: 24px;
  111.             text-align: center;
  112.             margin: 15px;
  113.             /* identical to box height, or 140% */
  114.             align-items: center;
  115.             /* text/Black_01 */
  116.             color: #333333;
  117.             /* Inside auto layout */
  118.             flex: none;
  119.             order: 0;
  120.             flex-grow: 0;
  122.         }
  124.         .elected-content {
  125.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  126.             font-weight: 600;
  127.             font-size: 15px;
  128.             line-height: 24px;
  129.             text-align: left;
  130.             /* 全国1000社以上の業者と提携してるので、全国どこでも対応できます！ */
  131.             /* text/Black_01 */
  132.             color: #333333;
  133.             /* Inside auto layout */
  134.             flex: none;
  135.             order: 1;
  136.             flex-grow: 0;
  137.         }
  139.         .elected-col {
  140.             margin: 0px 1.5%;
  141.         }
  143.         .elected-div-btn {
  144.             padding: 50px 0 0 0;
  145.             margin: 50px 0 0 0;
  146.         }
  148.         .logo-img-elected {
  149.             width: 75%;
  150.         }
  152.         .top-what-img-mix {
  153.             background: #E7E8ED;
  154.             padding: 70px;
  155.             border-radius: 16px;
  156.         }
  158.         .top-what-exp-big {
  159.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  160.             font-style: normal;
  161.             font-weight: 600;
  162.             font-size: 40px;
  163.             line-height: 54px;
  164.             text-align: center;
  165.             color: #333333;
  166.             margin: 0 15px;
  167.             position: relative;
  168.             z-index: 1;
  169.         }
  171.         .top-what-exp-big::after {
  172.             position: absolute;
  173.             content: '';
  174.             bottom: 2px;
  175.             left: 0;
  176.             width: 100%;
  177.             height: 12px;
  178.             background: #8FC0FF;
  179.             z-index: -1;
  180.         }
  182.         .top-what-exp-last {
  183.             padding: 10px 0;
  184.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  185.             font-style: normal;
  186.             font-weight: 600;
  187.             font-size: 20px;
  188.             line-height: 28px;
  189.             text-align: center;
  190.             color: #333333;
  191.             flex: none;
  192.             order: 1;
  193.             flex-grow: 0;
  194.         }
  196.         .top-what-exp-blue {
  197.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  198.             color: #2379E7;
  199.             font-weight: 600;
  200.             font-size: 32px;
  201.             line-height: 28px;
  202.         }
  204.         .top-what-exp-black {
  205.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  206.             font-style: normal;
  207.             font-weight: 600;
  208.             font-size: 32px;
  209.             line-height: 28px;
  210.             text-align: center;
  211.             color: #333333;
  212.             flex: none;
  213.             order: 0;
  214.             flex-grow: 0;
  215.         }
  217.         .color-orange {
  218.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  219.             font-weight: 600;
  220.             font-size: unset !important;
  221.             line-height: 30px;
  222.             text-align: center;
  223.             color: #F76B34;
  224.         }
  226.         .what-is-new {
  227.             max-width: 720px;
  228.             margin: 40px 0
  229.         }
  231.         .what-is-new-heart {
  232.             max-width: 800px;
  233.             margin: 40px 0
  234.         }
  236.         .what-is-new-sp, .what-is-new-sp-one {
  237.             display: none;
  238.         }
  240.         @media (min-width: 768px) {
  241.             .what-is-div {
  242.                 margin-top: 40px
  243.             }
  245.             .elected-btn {
  246.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  247.                 font-weight: 600;
  248.                 font-size: 20px;
  249.                 line-height: 28px;
  250.                 text-align: center;
  251.                 color: #F76B34;
  252.                 box-sizing: border-box;
  253.                 padding: 16px 72px;
  254.                 background: #FFFFFF;
  255.                 border: 2px solid #F76B34;
  256.                 border-radius: 48px;
  257.             }
  259.             .what-is-new-heart-header {
  260.                 background: #07326A;
  261.                 padding: 12px;
  262.                 border-radius: 8px;
  263.                 margin: auto;
  264.                 background-image: initial;
  265.                 display: inline-block;
  266.                 margin-top: -30px;
  267.                 width: 72%;
  268.                 position: relative;
  269.             }
  271.             .what-is-new-heart-header p {
  272.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  273.                 font-style: normal;
  274.                 font-weight: 600;
  275.                 font-size: 24px;
  276.                 line-height: 36px;
  277.                 color: #FFFFFF;
  278.                 display: inline;
  279.             }
  281.             .what-is-new-heart-one {
  282.                 top: 0;
  283.                 left: 0;
  284.                 width: 100%;
  285.                 height: 100%;
  286.             }
  288.             .what-is-new-heart-header-arrow {
  289.                 top: 70px;
  290.                 left: 50%;
  291.                 margin-right: -50%;
  292.                 transform: translate(-50%, -50%);
  293.                 position: absolute;
  294.                 display: inline-block;
  295.             }
  297.             .what-is-new-heart-content-one {
  298.                 padding: 0px;
  299.                 width: 72%;
  300.                 border-radius: 8px;
  301.                 display: inline-block;
  302.                 margin: 30px 0 0 0;
  303.             }
  305.             .what-is-new-heart-content-one p {
  306.                 height: 36px;
  307.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  308.                 font-style: normal;
  309.                 font-weight: 600;
  310.                 font-size: 18px;
  311.                 line-height: 36px;
  312.                 color: #07326A;
  313.             }
  315.             .what-is-new-heart-content-one span {
  316.                 height: 36px;
  317.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  318.                 font-style: normal;
  319.                 font-weight: 600;
  320.                 font-size: 18px;
  321.                 line-height: 36px;
  322.                 color: #F76B34;
  323.             }
  325.             .span-two {
  326.                 font-size: 32px !important;
  327.             }
  329.             .heart-heal {
  330.                 width: 75%;
  331.                 margin: 20px;
  332.             }
  334.             .what-is-new-heart-content-two {
  335.                 padding: 0px;
  336.                 border-radius: 8px;
  337.                 display: inline-block;
  338.                 width: 72%;
  339.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  340.                 font-style: normal;
  341.                 font-weight: 300;
  342.                 font-size: 15px;
  343.                 line-height: 24px;
  344.                 color: #07326A;
  345.                 text-align: left;
  346.                 margin: 5px;
  347.             }
  349.             .what-is-new-heart-content-three {
  350.                 padding: 0px;
  351.                 border-radius: 8px;
  352.                 display: inline-block;
  353.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  354.                 width: 72%;
  355.                 font-style: normal;
  356.                 font-weight: 600;
  357.                 font-size: 15px;
  358.                 line-height: 24px;
  359.                 color: #07326A;
  360.                 text-align: left;
  361.                 margin: 5px;
  362.             }
  364.             .what-is-new-heart-content-four {
  365.                 padding: 0px;
  366.                 border-radius: 8px;
  367.                 display: inline-block;
  368.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  369.                 width: 72%;
  370.                 text-align: left;
  371.                 font-style: normal;
  372.                 font-weight: 300;
  373.                 font-size: 12px;
  374.                 line-height: 15px;
  375.                 color: #07326A;
  376.                 margin: 15px;
  377.             }
  379.             .what-is-new-heart-content-five {
  380.                 padding: 0px 0 0 13px;
  381.                 border-radius: 8px;
  382.                 display: inline-block;
  383.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  384.                 width: 72%;
  385.                 text-align: left;
  386.                 font-style: normal;
  387.                 font-weight: 300;
  388.                 font-size: 12px;
  389.                 line-height: 15px;
  390.                 color: #07326A;
  391.             }
  393.             .what-is-new-heart-div {
  394.                 background: #FFFFFF;
  395.                 border-radius: 16px;
  396.                 width: 76%;
  397.                 margin: 80px auto 0;
  398.                 padding: 0 0 25px 0;
  399.             }
  401.             .eme-arrow {
  402.                 bottom: -30px;
  403.                 position: absolute;
  404.                 left: 50%;
  405.                 margin-right: -50%;
  406.                 transform: translate(-50%, -50%);
  407.             }
  408.         }
  410.         @media (max-width: 1434px) {
  411.             .what-is-new-heart-header-arrow {
  412.                 top: 90px;
  413.             }
  414.         }
  416.         @media (max-width: 768px) {
  417.             .elected-btn {
  418.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  419.                 font-weight: 600;
  420.                 font-size: 20px;
  421.                 line-height: 28px;
  422.                 text-align: center;
  423.                 color: #F76B34;
  424.                 background: #FFFFFF;
  425.                 padding: 16px 72px;
  426.                 width: auto;
  427.                 border: 2px solid;
  428.                 height: 60px;
  429.                 border-radius: 48px;
  430.                 display: block;
  431.             }
  433.             .container {
  434.                 max-width: unset;
  435.             }
  437.             .top-what__box {
  438.                 font-weight: 600;
  439.                 text-align: center;
  440.                 line-height: 1.4em;
  441.                 padding: 40px 20px 5px;
  442.             }
  444.             .top-what-exp {
  445.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  446.                 font-weight: 600;
  447.                 font-size: unset;
  448.                 line-height: 30px;
  449.                 text-align: center;
  450.                 color: #303033;
  451.             }
  453.             .top-what-gold {
  454.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  455.                 font-weight: 600;
  456.                 font-size: unset;
  457.                 line-height: 30px;
  458.                 text-align: center;
  459.                 color: #303033;
  460.                 margin: 2%;
  461.             }
  463.             .top-what-gold span {
  464.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  465.                 font-weight: 600;
  466.                 font-size: unset;
  467.                 line-height: 30px;
  468.                 text-align: center;
  469.                 color: #F76B34;
  470.             }
  472.             .elected-col {
  473.                 margin: unset;
  474.             }
  476.             .pc-line {
  477.                 border-top: 3px solid #2379E7;
  478.                 position: relative;
  479.                 top: 0;
  480.                 width: 40px;
  481.                 left: 0;
  482.                 right: 0;
  483.                 margin: 15px auto 20px;
  484.                 border-radius: 8px;
  485.             }
  487.             .top-what-gold-d-in {
  488.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  489.                 font-weight: 600;
  490.                 line-height: 30px;
  491.                 text-align: center;
  492.                 color: #303033;
  493.                 margin: 5%;
  494.                 display: block;
  495.             }
  497.             .top-what-gold-d-in:first-child {
  498.                 margin: 10% 0 5% 0;
  499.             }
  501.             .logo-img-elected {
  502.                 margin: 25px;
  503.             }
  505.             .top-what-img-mix {
  506.                 padding: 0;
  507.             }
  509.             .what-is-new {
  510.                 display: none;
  511.             }
  513.             .what-is-new-heart {
  514.                 display: none;
  515.             }
  517.             .what-is-new-sp {
  518.                 display: block;
  519.                 width: calc(100% + 40px) !important;
  520.                 margin-left: -20px;
  521.             }
  523.             .what-is-new-sp-one {
  524.                 display: block;
  525.                 width: 100% !important;
  526.             }
  528.             .not-sp {
  529.                 display: none;
  530.             }
  532.             .elected-div-btn {
  533.                 padding: unset;
  534.                 margin: 50px 0;
  535.             }
  536.         }
  537.     </style>
  538. {% endblock %}
  540. {% block main %}
  541.     <div class="top-what__box">
  542.         <h2 class="top-what-title mt-0">遺品整理ドットコムとは</h2>
  543.         <div class="pc-line"></div>
  544.         <br>
  545.         <div class="text-center what-is-div">
  546.             <p class="top-what-exp not-sp">お客様の快適な生活に向け、</p>
  547.             <p class="top-what-gold not-sp"><span>全国の優良お片付け業者</span>をご紹介する</p>
  548.             <p class="top-what-gold not-sp"><span>マッチングサービス</span>です！</p>
  549.             <img class="w-100 what-is-new-sp-one" src="{{ asset('assets/img/common/what_is_new_on_sp.svg') }}"
  550.                  style="padding-bottom: 30px"
  551.                  alt="Ocomari">
  552.         </div>
  553.         <div class="top-what-img-mix">
  554.             <p class="top-what-exp not-sp">こんな<span class="top-what-exp-big">ご不安</span>ありませんか？</p>
  555.             <img class="w-100 what-is-new" src="{{ asset('assets/img/common/what_is_new.svg') }}"
  556.                  alt="Ocomari">
  557.             <p class="top-what-exp-last not-sp"><span class="top-what-exp-black">いい加減な業者</span>に依頼した結果、
  558.             </p>
  559.             <p class="top-what-exp-last not-sp">見積もり時より<span class="top-what-exp-blue">増額して請求</span>されたり､<span
  560.                         class="top-what-exp-blue">不法投棄</span>されることがあります。</p>
  561.             <div class="what-is-new-heart-div not-sp">
  562.                 <div class="what-is-new-heart-header">
  563.                     <p>でも、遺品整理ドットコムなら大丈夫！</p>
  564.                     <img class="eme-arrow w-auto show-pc" src="/html/template/default/assets/img/common/arrow_down.svg"
  565.                          alt="Ocomari">
  566.                 </div>
  567.                 {#                    <img class="what-is-new-heart-header-arrow" src="{{ asset('assets/img/common/arrow_down.svg') }}" #}
  568.                 {#                         alt="Ocomari"> #}
  569.                 <div class="what-is-new-heart-content-one">
  570.                     <div class="d-inline-block">
  571.                         <p>本サービスを運営する<span>オコマリ株式会社</span>の</p>
  572.                     </div>
  573.                     <div class="d-inline-block">
  574.                         <p><span class="span-two">親会社</span>が<span class="span-two">上場企業</span>であるため、
  575.                         </p>
  576.                     </div>
  577.                     <div class="d-inline-block">
  578.                         <img class="heart-heal" src="{{ asset('assets/img/common/heart.svg') }}" alt="Ocomari">
  579.                     </div>
  581.                 </div>
  582.                 <div class="what-is-new-heart-content-two">
  583.                     <p>
  584.                         オコマリ株式会社は、日本最大級の店舗の口コミ・ランキングサイト「エキテン」を運営する上場企業「デザインワン・ジャパン※」のグループ会社になります。</p>
  585.                 </div>
  586.                 <div class="what-is-new-heart-content-three">
  587.                     <p>
  588.                         だからこそ、その大きな看板を背負っているため、不法投棄といった悪徳業者をお客様にご紹介することはございません。</p>
  589.                 </div>
  590.                 <div class="what-is-new-heart-content-four">
  591.                     <p>※デザインワン・ジャパンについて</p>
  592.                     <p>
  593.                         東京都新宿区に本社をおく、店舗の口コミ・ランキングサイト『エキテン』の運営などインターネットメディア事業を展開する企業。設立：平成17年9月｜市場情報：東証スタンダード｜2015年4月30日上場</p>
  594.                 </div>
  595.             </div>
  596.             <img class="w-100 what-is-new-sp" src="{{ asset('assets/img/common/what_is_new_sp.svg') }}"
  597.                  alt="Ocomari">
  598.         </div>
  599.         <div class="text-center">
  600.             <p class="top-what-gold-d-in">オコマリが選ばれる</p>
  601.             <p class="top-what-gold-d-in"><span>3</span><span class="color-orange">つの</span><span>理由</span></p>
  602.         </div>
  603.         <div class="container">
  604.             <div class="row">
  605.                 <div class="col-md elected-col">
  606.                     <img class="logo-img-elected top-img-elected"
  607.                          src="{{ asset('assets/img/common/elected_left.svg') }}"
  608.                          alt="Ocomari">
  609.                     <div class="elected-title">全国対応</div>
  610.                     <div class="elected-content">
  611.                         全国1000社以上の業者と提携してるので、全国どこでも対応できます！
  612.                     </div>
  613.                 </div>
  614.                 <div class="col-md elected-col">
  615.                     <img class="logo-img-elected top-img-elected"
  616.                          src="{{ asset('assets/img/common/elected.svg') }}"
  617.                          alt="Ocomari">
  618.                     <div class="elected-title">丁寧なお客様対応</div>
  619.                     <div class="elected-content">
  620.                         お片付けやハウスクリーニングのお困りごとをヒアリングし、それを解決するサービスを提供するだけではなく、万が一、他社よりも高い見積額の場合は、弊社から担当業者へ価格交渉を請け負います！
  621.                     </div>
  622.                 </div>
  623.                 <div class="col-md elected-col">
  624.                     <img class="logo-img-elected top-img-elected"
  625.                          src="{{ asset('assets/img/common/elected_right.svg') }}"
  626.                          alt="Ocomari">
  627.                     <div class="elected-title">即日対応</div>
  628.                     <div class="elected-content">
  629.                         即日の見積り・作業希望の場合も、全国で数多くの提携業者がいるため、急なご用命にも柔軟に対応可能です！
  630.                     </div>
  631.                 </div>
  632.             </div>
  633.         </div>
  634.         <div class="elected-div-btn">
  635.             <a class="elected-btn" href="{{ path('homepage') }}#region">遺品整理業者を探す</a>
  636.         </div>
  637.     </div>
  638. {% endblock %}