@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//haritetsu.com/wp-content/plugins/blog-floating-button/css/fonts/montserrat-latin-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}:root {
--htp-ink: #121619;
--htp-muted: #657079;
--htp-soft: #f4f5f5;
--htp-line: #dfe2e3;
--htp-white: #fff;
--htp-accent: #9d1f2d;
--htp-dark: #111416;
}
body.htp-ppf-page {
overflow-x: clip;
} body.htp-ppf-page .page-header {
display: none;
}
body.htp-ppf-page .site-body,
body.htp-ppf-page .siteContent {
padding-top: 0;
}
body.htp-ppf-page .site-body-container,
body.htp-ppf-page .siteContent-container,
body.htp-ppf-page .container.siteContent-container,
body.htp-ppf-page .main-section,
body.htp-ppf-page main.mainSection {
width: 100%;
max-width: none;
padding-right: 0;
padding-left: 0;
}
body.htp-ppf-page .sub-section,
body.htp-ppf-page .subSection {
display: none;
}
body.htp-ppf-page .entry-body,
body.htp-ppf-page .entry-content {
margin-top: 0;
}
.htp-ppf-lp,
.htp-ppf-lp * {
box-sizing: border-box;
}
.htp-ppf-lp {
width: 100%;
max-width: none;
margin: 0;
color: var(--htp-ink);
background: var(--htp-white);
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
line-height: 1.85;
}
.htp-ppf-lp > .alignfull {
width: 100vw;
max-width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
.htp-inner,
.htp-section > * {
width: min(1180px, calc(100% - 48px));
margin-right: auto;
margin-left: auto;
}
.htp-section {
position: relative;
padding: clamp(76px, 9vw, 132px) 0;
}
.htp-section h2,
.htp-cta h2 {
margin-top: 0;
color: var(--htp-ink);
font-size: clamp(30px, 4.5vw, 58px);
font-weight: 700;
letter-spacing: .025em;
line-height: 1.4;
}
.htp-section h3 {
color: var(--htp-ink);
line-height: 1.5;
}
.htp-eyebrow {
margin: 0 0 16px;
color: var(--htp-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
}
.htp-section-lead {
max-width: 760px;
margin-bottom: 42px;
color: var(--htp-muted);
font-size: clamp(16px, 1.8vw, 20px);
}
.htp-section-lead.has-text-align-center {
margin-right: auto;
margin-left: auto;
} .htp-hero {
position: relative;
min-height: min(860px, 88vh) !important;
color: #fff;
background: #111416;
}
.htp-hero::after {
content: "PPF";
position: absolute;
right: -1vw;
bottom: -5vw;
z-index: 1;
color: rgba(255, 255, 255, .06);
font-size: clamp(170px, 30vw, 460px);
font-weight: 900;
letter-spacing: -.1em;
line-height: .8;
pointer-events: none;
}
.htp-hero .wp-block-cover__background {
background: linear-gradient(90deg, rgba(5, 8, 10, .88) 0%, rgba(5, 8, 10, .62) 52%, rgba(5, 8, 10, .30) 100%) !important;
opacity: 1 !important;
}
.htp-hero__content {
position: relative;
z-index: 2;
padding-top: 92px;
padding-bottom: 92px;
}
.htp-hero .htp-eyebrow,
.htp-image-message .htp-eyebrow {
color: #f2b8be;
}
.htp-hero__title {
max-width: 940px;
margin: 0;
color: #fff !important;
font-size: clamp(42px, 7.2vw, 94px);
font-weight: 700;
letter-spacing: .035em;
line-height: 1.22;
text-wrap: balance;
}
.htp-hero__lead {
max-width: 720px;
margin: 30px 0 36px;
color: rgba(255, 255, 255, .88);
font-size: clamp(17px, 2vw, 22px);
line-height: 1.9;
}
.htp-hero__buttons {
gap: 12px;
}
.htp-ppf-lp .wp-block-button__link,
.htp-button {
display: inline-flex;
min-height: 56px;
align-items: center;
justify-content: center;
gap: 14px;
padding: 15px 27px;
border: 1px solid var(--htp-accent);
border-radius: 3px;
background: var(--htp-accent);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.htp-ppf-lp .wp-block-button__link:hover,
.htp-button:hover {
border-color: #751721;
background: #751721;
color: #fff;
transform: translateY(-2px);
}
.htp-hero .is-style-outline .wp-block-button__link {
border-color: rgba(255, 255, 255, .72);
background: transparent;
color: #fff;
}
.htp-hero .is-style-outline .wp-block-button__link:hover {
border-color: #fff;
background: #fff;
color: #111416;
}
.htp-hero__proof {
max-width: 820px;
margin-top: 64px;
margin-left: 0;
border-top: 1px solid rgba(255, 255, 255, .3);
}
.htp-hero__proof > .wp-block-column {
padding: 22px 28px 0 0;
}
.htp-hero__proof p {
margin: 0;
color: rgba(255, 255, 255, .67);
font-size: 12px;
letter-spacing: .06em;
}
.htp-hero__proof strong {
color: #fff;
font-size: 16px;
} .htp-split {
gap: clamp(34px, 6vw, 86px);
}
.htp-feature-image {
position: relative;
margin: 0;
overflow: hidden;
background: #eceeef;
}
.htp-feature-image::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(255, 255, 255, .55);
pointer-events: none;
}
.htp-feature-image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.htp-feature-image:hover img {
transform: scale(1.025);
}
.htp-check-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.htp-check-list li {
position: relative;
padding: 12px 0 12px 25px;
border-bottom: 1px solid var(--htp-line);
}
.htp-check-list li::before {
content: "";
position: absolute;
top: 21px;
left: 2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--htp-accent);
} .htp-difference {
background: var(--htp-soft);
}
.htp-difference-grid {
gap: 18px;
margin-top: 48px;
}
.htp-difference-card {
position: relative;
min-height: 280px;
margin: 0 !important;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--htp-line);
background: #fff;
}
.htp-difference-card::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 3px;
background: var(--htp-accent);
transition: width .5s ease;
}
.htp-difference-card:hover::after {
width: 100%;
}
.htp-number {
margin: 0 0 48px;
color: var(--htp-accent);
font-size: 13px;
font-weight: 800;
letter-spacing: .18em;
}
.htp-difference-card h3 {
margin: 0 0 14px;
font-size: 24px;
}
.htp-difference-card p:last-child {
margin-bottom: 0;
color: var(--htp-muted);
} .htp-image-message {
background: #111416;
color: #fff;
}
.htp-image-message .wp-block-cover__background {
background: linear-gradient(90deg, rgba(8, 11, 13, .82), rgba(8, 11, 13, .30)) !important;
opacity: 1 !important;
}
.htp-image-message__title {
max-width: 940px;
margin: 0;
color: #fff !important;
font-size: clamp(38px, 6.3vw, 80px) !important;
line-height: 1.32 !important;
}
.htp-image-message__text {
max-width: 650px;
margin-top: 28px;
color: rgba(255, 255, 255, .82);
font-size: clamp(16px, 2vw, 21px);
} .htp-video-section {
background: #fff;
text-align: center;
}
.htp-video {
margin-top: 44px !important;
padding: 12px;
background: #111416;
box-shadow: 0 24px 70px rgba(17, 20, 22, .16);
}
.htp-video .wp-block-embed__wrapper {
position: relative;
aspect-ratio: 16 / 9;
}
.htp-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.htp-video figcaption {
margin: 10px 4px 0;
color: rgba(255, 255, 255, .72);
} .htp-price-section {
background: var(--htp-soft);
}
.htp-price-table {
margin-top: 38px !important;
overflow-x: auto;
border: 0;
}
.htp-price-table table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
background: #fff;
}
.htp-price-table th,
.htp-price-table td {
padding: 22px 20px;
border: 0;
border-bottom: 1px solid var(--htp-line);
text-align: left;
vertical-align: middle;
}
.htp-price-table th {
background: var(--htp-dark);
color: #fff;
font-size: 13px;
letter-spacing: .06em;
}
.htp-price-table td:first-child {
width: 22%;
}
.htp-price-table td:last-child {
width: 22%;
color: var(--htp-accent);
font-size: 18px;
white-space: nowrap;
}
.htp-price-note {
margin: 20px 0 30px;
color: var(--htp-muted);
} .htp-works-section {
background: #fff;
}
.htp-works-button {
margin-top: 30px;
}
.htp-button--dark {
border-color: var(--htp-dark);
background: var(--htp-dark);
} .htp-related {
background: #f8f8f7;
}
.htp-related__grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 28px);
margin-top: 48px;
}
.htp-related__card {
display: flex;
min-width: 0;
flex-direction: column;
margin: 0 !important;
overflow: hidden;
border: 1px solid #e7e7e3;
background: #fff;
box-shadow: 0 12px 36px rgba(20, 25, 28, .045);
}
.htp-related__photo {
width: 100%;
margin: 0;
overflow: hidden;
background: #e5e7e7;
}
.htp-related__photo img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform .6s ease;
}
.htp-related__card:hover .htp-related__photo img {
transform: scale(1.04);
}
.htp-related__body {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
padding: clamp(22px, 2.4vw, 30px);
}
.htp-related__label {
margin: 0 0 10px;
color: var(--htp-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
}
.htp-related__body h3 {
margin: 0 0 12px;
font-size: clamp(19px, 1.8vw, 23px);
}
.htp-related__body > p:not(.htp-related__label) {
margin: 0 0 24px;
color: var(--htp-muted);
font-size: 14px;
}
.htp-related__body .wp-block-buttons {
margin-top: auto;
}
.htp-related .htp-related__button .wp-block-button__link {
min-height: 48px;
padding: 12px 20px;
border-color: var(--htp-dark);
background: #fff;
color: var(--htp-dark);
}
.htp-related .htp-related__button .wp-block-button__link:hover {
border-color: var(--htp-dark);
background: var(--htp-dark);
color: #fff;
} .htp-process {
background: var(--htp-dark);
color: #fff;
}
.htp-process h2 {
color: #fff;
}
.htp-process .htp-eyebrow {
color: #f2b8be;
}
.htp-flow-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 48px 0 0;
padding: 1px;
background: rgba(255, 255, 255, .18);
list-style: none;
counter-reset: htp-flow;
}
.htp-flow-list li {
position: relative;
min-height: 150px;
padding: 64px 25px 25px;
background: var(--htp-dark);
counter-increment: htp-flow;
}
.htp-flow-list li::before {
content: "0" counter(htp-flow);
position: absolute;
top: 22px;
left: 25px;
color: #f2b8be;
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
} .htp-faq {
background: #fff;
}
.htp-faq details {
padding: 24px 2px;
border-top: 1px solid var(--htp-line);
}
.htp-faq details:last-child {
border-bottom: 1px solid var(--htp-line);
}
.htp-faq summary {
color: var(--htp-ink);
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
.htp-faq details p {
padding: 12px 34px 0;
color: var(--htp-muted);
} .htp-cta {
padding: clamp(82px, 10vw, 140px) 0;
background: linear-gradient(120deg, #7b1722, var(--htp-accent));
color: #fff;
text-align: center;
}
.htp-cta .htp-eyebrow {
color: rgba(255, 255, 255, .65);
}
.htp-cta h2 {
max-width: 920px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
color: #fff;
}
.htp-cta p:not(.htp-eyebrow) {
max-width: 720px;
margin-right: auto;
margin-left: auto;
color: rgba(255, 255, 255, .82);
font-size: 17px;
}
.htp-cta__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 34px;
}
.htp-button--light {
border-color: #fff;
background: #fff;
color: var(--htp-accent);
}
.htp-button--light:hover {
border-color: #fff;
background: transparent;
color: #fff;
}
.htp-button--line {
border-color: #20bd5a;
background: #20bd5a;
} .htp-js .htp-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.htp-js .htp-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.htp-js .htp-line-reveal {
clip-path: inset(0 100% 0 0);
transform: translateY(15px);
transition: clip-path 1.05s cubic-bezier(.2, .7, .2, 1), transform 1.05s ease;
}
.htp-js .htp-line-reveal.is-visible {
clip-path: inset(0 0 0 0);
transform: translateY(0);
}
@media (max-width: 900px) {
.htp-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.htp-inner,
.htp-section > * {
width: min(100% - 40px, 1180px);
}
.htp-hero {
min-height: 760px !important;
}
.htp-hero__title {
font-size: clamp(42px, 8.6vw, 72px);
}
.htp-hero__proof {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.htp-split {
gap: 34px;
}
.htp-difference-grid {
display: grid !important;
grid-template-columns: 1fr;
}
.htp-difference-card {
min-height: 0;
}
.htp-number {
margin-bottom: 28px;
}
.htp-flow-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.htp-related__grid {
grid-template-columns: 1fr;
}
.htp-inner,
.htp-section > * {
width: min(100% - 28px, 1180px);
}
.htp-section {
padding: 72px 0;
}
.htp-section h2,
.htp-cta h2 {
font-size: clamp(29px, 9vw, 42px);
}
.htp-hero {
min-height: 720px !important;
align-items: flex-end;
}
.htp-hero .wp-block-cover__background {
background: linear-gradient(0deg, rgba(5, 8, 10, .94) 0%, rgba(5, 8, 10, .68) 55%, rgba(5, 8, 10, .3) 100%) !important;
}
.htp-hero__content {
padding: 88px 0 54px;
}
.htp-hero__title {
font-size: clamp(40px, 12vw, 56px);
}
.htp-hero__lead {
margin: 22px 0 28px;
font-size: 16px;
}
.htp-hero__buttons,
.htp-hero__buttons .wp-block-button,
.htp-hero__buttons .wp-block-button__link {
width: 100%;
}
.htp-hero__proof {
grid-template-columns: 1fr;
gap: 0;
margin-top: 36px;
}
.htp-hero__proof > .wp-block-column {
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.htp-split {
display: flex !important;
flex-direction: column;
}
.htp-check-list {
grid-template-columns: 1fr;
}
.htp-image-message {
min-height: 620px !important;
}
.htp-image-message .wp-block-cover__background {
background: linear-gradient(0deg, rgba(8, 11, 13, .9), rgba(8, 11, 13, .25)) !important;
}
.htp-image-message__title {
font-size: clamp(34px, 10vw, 48px) !important;
}
.htp-video {
margin-right: -5px !important;
margin-left: -5px !important;
padding: 6px;
}
.htp-flow-list {
grid-template-columns: 1fr;
}
.htp-flow-list li {
min-height: 116px;
}
.htp-cta__buttons,
.htp-cta__buttons .htp-button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.htp-ppf-lp *,
.htp-ppf-lp *::before,
.htp-ppf-lp *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.htp-js .htp-reveal,
.htp-js .htp-line-reveal {
opacity: 1;
clip-path: none;
transform: none;
}
}