{% block stylesheet %}
<style>
.top-what__box {
background-color: #ECF6FF;
text-align: center;
width: 100%;
padding: 5% 180px;
}
.top-what-title {
/* PC/PC_h2_24px_B */
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-size: 24px;
line-height: 36px;
font-weight: 600;
/* identical to box height, or 150% */
text-align: center;
/* text/Black_01 */
color: #333333;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.top-what-exp {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 30px;
/* identical to box height, or 107% */
text-align: center;
/* text/Black_01 */
color: #333333;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.top-what-gold {
margin: 35px 0;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 30px;
text-align: center;
color: #333333;
flex: none;
order: 1;
flex-grow: 0;
}
.top-what-gold-d-in {
margin: 35px 0;
display: inline-block;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 28px;
text-align: center;
color: #333333;
}
.top-what-gold span {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 30px;
/* identical to box height, or 75% */
text-align: center;
/* main/Orange */
color: #F76B34;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.top-what-gold-d-in span {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 40px;
/* identical to box height, or 100% */
text-align: center;
/* main/Orange */
color: #F76B34;
}
.elected-title {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 17px;
line-height: 24px;
text-align: center;
margin: 15px;
/* identical to box height, or 140% */
align-items: center;
/* text/Black_01 */
color: #333333;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.elected-content {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 15px;
line-height: 24px;
text-align: left;
/* 全国1000社以上の業者と提携してるので、全国どこでも対応できます! */
/* text/Black_01 */
color: #333333;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.elected-col {
margin: 0px 1.5%;
}
.elected-div-btn {
padding: 50px 0 0 0;
margin: 50px 0 0 0;
}
.logo-img-elected {
width: 75%;
}
.top-what-img-mix {
background: #E7E8ED;
padding: 70px;
border-radius: 16px;
}
.top-what-exp-big {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 54px;
text-align: center;
color: #333333;
margin: 0 15px;
position: relative;
z-index: 1;
}
.top-what-exp-big::after {
position: absolute;
content: '';
bottom: 2px;
left: 0;
width: 100%;
height: 12px;
background: #8FC0FF;
z-index: -1;
}
.top-what-exp-last {
padding: 10px 0;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #333333;
flex: none;
order: 1;
flex-grow: 0;
}
.top-what-exp-blue {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
color: #2379E7;
font-weight: 600;
font-size: 32px;
line-height: 28px;
}
.top-what-exp-black {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 32px;
line-height: 28px;
text-align: center;
color: #333333;
flex: none;
order: 0;
flex-grow: 0;
}
.color-orange {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: unset !important;
line-height: 30px;
text-align: center;
color: #F76B34;
}
.what-is-new {
max-width: 720px;
margin: 40px 0
}
.what-is-new-heart {
max-width: 800px;
margin: 40px 0
}
.what-is-new-sp, .what-is-new-sp-one {
display: none;
}
@media (min-width: 768px) {
.what-is-div {
margin-top: 40px
}
.elected-btn {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #F76B34;
box-sizing: border-box;
padding: 16px 72px;
background: #FFFFFF;
border: 2px solid #F76B34;
border-radius: 48px;
}
.what-is-new-heart-header {
background: #07326A;
padding: 12px;
border-radius: 8px;
margin: auto;
background-image: initial;
display: inline-block;
margin-top: -30px;
width: 72%;
position: relative;
}
.what-is-new-heart-header p {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 36px;
color: #FFFFFF;
display: inline;
}
.what-is-new-heart-one {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.what-is-new-heart-header-arrow {
top: 70px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
position: absolute;
display: inline-block;
}
.what-is-new-heart-content-one {
padding: 0px;
width: 72%;
border-radius: 8px;
display: inline-block;
margin: 30px 0 0 0;
}
.what-is-new-heart-content-one p {
height: 36px;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 36px;
color: #07326A;
}
.what-is-new-heart-content-one span {
height: 36px;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 36px;
color: #F76B34;
}
.span-two {
font-size: 32px !important;
}
.heart-heal {
width: 75%;
margin: 20px;
}
.what-is-new-heart-content-two {
padding: 0px;
border-radius: 8px;
display: inline-block;
width: 72%;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 24px;
color: #07326A;
text-align: left;
margin: 5px;
}
.what-is-new-heart-content-three {
padding: 0px;
border-radius: 8px;
display: inline-block;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
width: 72%;
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 24px;
color: #07326A;
text-align: left;
margin: 5px;
}
.what-is-new-heart-content-four {
padding: 0px;
border-radius: 8px;
display: inline-block;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
width: 72%;
text-align: left;
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 15px;
color: #07326A;
margin: 15px;
}
.what-is-new-heart-content-five {
padding: 0px 0 0 13px;
border-radius: 8px;
display: inline-block;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
width: 72%;
text-align: left;
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 15px;
color: #07326A;
}
.what-is-new-heart-div {
background: #FFFFFF;
border-radius: 16px;
width: 76%;
margin: 80px auto 0;
padding: 0 0 25px 0;
}
.eme-arrow {
bottom: -30px;
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
}
@media (max-width: 1434px) {
.what-is-new-heart-header-arrow {
top: 90px;
}
}
@media (max-width: 768px) {
.elected-btn {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 20px;
line-height: 28px;
text-align: center;
color: #F76B34;
background: #FFFFFF;
padding: 16px 72px;
width: auto;
border: 2px solid;
height: 60px;
border-radius: 48px;
display: block;
}
.container {
max-width: unset;
}
.top-what__box {
font-weight: 600;
text-align: center;
line-height: 1.4em;
padding: 40px 20px 5px;
}
.top-what-exp {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: unset;
line-height: 30px;
text-align: center;
color: #303033;
}
.top-what-gold {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: unset;
line-height: 30px;
text-align: center;
color: #303033;
margin: 2%;
}
.top-what-gold span {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: unset;
line-height: 30px;
text-align: center;
color: #F76B34;
}
.elected-col {
margin: unset;
}
.pc-line {
border-top: 3px solid #2379E7;
position: relative;
top: 0;
width: 40px;
left: 0;
right: 0;
margin: 15px auto 20px;
border-radius: 8px;
}
.top-what-gold-d-in {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
line-height: 30px;
text-align: center;
color: #303033;
margin: 5%;
display: block;
}
.top-what-gold-d-in:first-child {
margin: 10% 0 5% 0;
}
.logo-img-elected {
margin: 25px;
}
.top-what-img-mix {
padding: 0;
}
.what-is-new {
display: none;
}
.what-is-new-heart {
display: none;
}
.what-is-new-sp {
display: block;
width: calc(100% + 40px) !important;
margin-left: -20px;
}
.what-is-new-sp-one {
display: block;
width: 100% !important;
}
.not-sp {
display: none;
}
.elected-div-btn {
padding: unset;
margin: 50px 0;
}
}
</style>
{% endblock %}
{% block main %}
<div class="top-what__box">
<h2 class="top-what-title mt-0">遺品整理ドットコムとは</h2>
<div class="pc-line"></div>
<br>
<div class="text-center what-is-div">
<p class="top-what-exp not-sp">お客様の快適な生活に向け、</p>
<p class="top-what-gold not-sp"><span>全国の優良お片付け業者</span>をご紹介する</p>
<p class="top-what-gold not-sp"><span>マッチングサービス</span>です!</p>
<img class="w-100 what-is-new-sp-one" src="{{ asset('assets/img/common/what_is_new_on_sp.svg') }}"
style="padding-bottom: 30px"
alt="Ocomari">
</div>
<div class="top-what-img-mix">
<p class="top-what-exp not-sp">こんな<span class="top-what-exp-big">ご不安</span>ありませんか?</p>
<img class="w-100 what-is-new" src="{{ asset('assets/img/common/what_is_new.svg') }}"
alt="Ocomari">
<p class="top-what-exp-last not-sp"><span class="top-what-exp-black">いい加減な業者</span>に依頼した結果、
</p>
<p class="top-what-exp-last not-sp">見積もり時より<span class="top-what-exp-blue">増額して請求</span>されたり、<span
class="top-what-exp-blue">不法投棄</span>されることがあります。</p>
<div class="what-is-new-heart-div not-sp">
<div class="what-is-new-heart-header">
<p>でも、遺品整理ドットコムなら大丈夫!</p>
<img class="eme-arrow w-auto show-pc" src="/html/template/default/assets/img/common/arrow_down.svg"
alt="Ocomari">
</div>
{# <img class="what-is-new-heart-header-arrow" src="{{ asset('assets/img/common/arrow_down.svg') }}" #}
{# alt="Ocomari"> #}
<div class="what-is-new-heart-content-one">
<div class="d-inline-block">
<p>本サービスを運営する<span>オコマリ株式会社</span>の</p>
</div>
<div class="d-inline-block">
<p><span class="span-two">親会社</span>が<span class="span-two">上場企業</span>であるため、
</p>
</div>
<div class="d-inline-block">
<img class="heart-heal" src="{{ asset('assets/img/common/heart.svg') }}" alt="Ocomari">
</div>
</div>
<div class="what-is-new-heart-content-two">
<p>
オコマリ株式会社は、日本最大級の店舗の口コミ・ランキングサイト「エキテン」を運営する上場企業「デザインワン・ジャパン※」のグループ会社になります。</p>
</div>
<div class="what-is-new-heart-content-three">
<p>
だからこそ、その大きな看板を背負っているため、不法投棄といった悪徳業者をお客様にご紹介することはございません。</p>
</div>
<div class="what-is-new-heart-content-four">
<p>※デザインワン・ジャパンについて</p>
<p>
東京都新宿区に本社をおく、店舗の口コミ・ランキングサイト『エキテン』の運営などインターネットメディア事業を展開する企業。設立:平成17年9月|市場情報:東証スタンダード|2015年4月30日上場</p>
</div>
</div>
<img class="w-100 what-is-new-sp" src="{{ asset('assets/img/common/what_is_new_sp.svg') }}"
alt="Ocomari">
</div>
<div class="text-center">
<p class="top-what-gold-d-in">オコマリが選ばれる</p>
<p class="top-what-gold-d-in"><span>3</span><span class="color-orange">つの</span><span>理由</span></p>
</div>
<div class="container">
<div class="row">
<div class="col-md elected-col">
<img class="logo-img-elected top-img-elected"
src="{{ asset('assets/img/common/elected_left.svg') }}"
alt="Ocomari">
<div class="elected-title">全国対応</div>
<div class="elected-content">
全国1000社以上の業者と提携してるので、全国どこでも対応できます!
</div>
</div>
<div class="col-md elected-col">
<img class="logo-img-elected top-img-elected"
src="{{ asset('assets/img/common/elected.svg') }}"
alt="Ocomari">
<div class="elected-title">丁寧なお客様対応</div>
<div class="elected-content">
お片付けやハウスクリーニングのお困りごとをヒアリングし、それを解決するサービスを提供するだけではなく、万が一、他社よりも高い見積額の場合は、弊社から担当業者へ価格交渉を請け負います!
</div>
</div>
<div class="col-md elected-col">
<img class="logo-img-elected top-img-elected"
src="{{ asset('assets/img/common/elected_right.svg') }}"
alt="Ocomari">
<div class="elected-title">即日対応</div>
<div class="elected-content">
即日の見積り・作業希望の場合も、全国で数多くの提携業者がいるため、急なご用命にも柔軟に対応可能です!
</div>
</div>
</div>
</div>
<div class="elected-div-btn">
<a class="elected-btn" href="{{ path('homepage') }}#region">遺品整理業者を探す</a>
</div>
</div>
{% endblock %}