@charset "UTF-8";
@charset "utf-8";


*,
:before,
:after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: Verdana, Roboto, 'Droid Sans', '游ゴシック', YuGothic, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 100%;
-webkit-text-size-adjust: 100%;
word-break: break-all;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
main , menu, nav, output, ruby, section, summary,
time, mark, audio, video {
border: 0;
line-height: normal;
letter-spacing: normal;
vertical-align: baseline;
}
html,body {
height: auto;
min-width: 320px;
max-width: 100%;
}
article, aside, details, figcaption, figure,
footer, header, menu, main, nav, section {
display: block;
}
body {
line-height: 1;
}
ul,
ol {
list-style: none;
}
br {
letter-spacing: normal;
}
b,
strong {
font-weight: 700;
}
img,
iframe {
vertical-align: bottom;
}
th {
text-align: left;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix {
min-height: 1%; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
line-height: 0;
font-size: 0;
}
body > img[height="1"] {
position: absolute;
} html {
font-size: 62.5%;
}
@media only screen and (min-width: 375px) {
html {
font-size: 72.5%;
}
}
@media only screen and (min-width: 400px) {
html {
font-size: 82.5%;
}
}
@media only screen and (min-width: 500px) {
html {
font-size: 92.5%;
}
}
a {
display: block;
text-decoration: none;
}.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}.hbspt-form input[type=email],
.hbspt-form input[type=text],
.hbspt-form input[type=tel],
.hbspt-form textarea {
width: 100%;
font-size: 1rem;
border: none;
min-height: 38px;
font-weight: normal;
padding: 6px 16px;
border-radius: 4px;
background-color: #f5f5f5;
box-sizing: border-box;
margin: .5rem 0 1rem 0;
}
.hbspt-form input[type=submit] {
width: 100%;
color: #fff;
font-size: 18px;
font-weight: bold;
border: none;
padding: 1rem 20px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #29a63a;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
cursor: pointer;
height: auto;
}
.hbspt-form fieldset {
max-width: 100%!important;
}
.hbspt-form fieldset.form-columns-1 .hs-input {
width: 100%!important;
}
.hbspt-form label span {
font-size: 1rem;
font-weight: bold;
}
.hbspt-form label span.hs-form-required {
color: #f92a54;
}
.hbspt-form .hs-error-msg {
color: #f92a54;
display: block;
margin: -1.5rem 0 1rem 0;
font-size: .8rem;
}
.hbspt-form label.hs-form-booleancheckbox-display {
display: flex;
align-items: center;
margin: 1rem 0 2.5rem 0;
}
.hbspt-form fieldset.form-columns-1 label.hs-form-booleancheckbox-display input[type=checkbox] {
width: 15px !important;
height: 15px !important;
}
.hbspt-form label.hs-form-booleancheckbox-display span {
font-weight: normal;
font-size: 1rem;
}
.hbspt-form .hs_recaptcha {
display: none;
}
@media screen and (max-width: 480px) {
.hbspt-form input[type=email],
.hbspt-form input[type=text],
.hbspt-form input[type=tel],
.hbspt-form textarea {
width: 100%;
font-size: 1.6rem;
border: none;
min-height: 38px;
font-weight: bold;
padding: 6px 16px;
border-radius: 4px;
background-color: #f5f5f5;
box-sizing: border-box;
margin: 1rem 0 2rem 0;
}
.hbspt-form input[type=submit] {
width: 100%;
color: #fff;
font-size: 18px;
font-weight: bold;
border: none;
padding: 1rem 20px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #29a63a;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
cursor: pointer;
height: auto;
}
.hbspt-form fieldset {
max-width: 100%!important;
}
.hbspt-form fieldset.form-columns-1 .hs-input {
width: 100%!important;
}
.hbspt-form label span {
font-size: 1.2rem;
font-weight: bold;
}
.hbspt-form label span.hs-form-required {
color: #f92a54;
}
.hbspt-form .hs-error-msg {
color: #f92a54;
display: block;
margin: -1.5rem 0 1rem 0;
font-size: .8rem;
}
.hbspt-form label.hs-form-booleancheckbox-display {
display: flex;
align-items: center;
margin: 1rem 0 2.5rem 0;
}
.hbspt-form fieldset.form-columns-1 label.hs-form-booleancheckbox-display input[type=checkbox] {
width: 15px !important;
height: 15px !important;
}
.hbspt-form fieldset.form-columns-1 label.hs-form-booleancheckbox-display span {
font-weight: normal;
font-size: 1rem;
}
}
.lp1.top {
padding: 0 1.5rem;
}
.lp1.top input[type="checkbox"]+span::before {
left: -6%;
}
.lp1.top input[type="checkbox"]+span::after {
left: -5%;
}
.lp1.form01 {
padding: 0 1rem;
}
.lp2.top {
padding: 0 1.5rem;
}
.lp2.top input[type="checkbox"]+span::before {
left: -6%;
}
.lp2.top input[type="checkbox"]+span::after {
left: -5%;
}
.lp2.form01 {
padding: 0 1rem;
}
.bl_fv_r form {
border: none;
}
.bl_form_ttl {
margin: 0 0 1rem 0;
}
.lp6.top {
background: #fff;
margin: 1rem 0;
padding: 1.5rem;
}
.lp6.form01 .hbspt-form input[type=submit],
.lp6.form02 .hbspt-form input[type=submit] {
font-size: 24px;
padding: 1.2rem 0;
}
.lp6.form01 .hs_submit,
.lp6.form02 .hs_submit {
width: 75%;
margin: 6% auto 0 auto;
}
.lp6.top .hs_submit {
margin: 6% auto 0 auto;
}
@media screen and (max-width: 480px) {
.lp6.form01 .hs_submit,
.lp6.form02 .hs_submit {
width: 100%;
margin: 10% auto 0 auto;
}
.lp6.form01 .hbspt-form input[type=submit],
.lp6.form02 .hbspt-form input[type=submit] {
font-size: 20px;
}
}
.thanks p {
font-size: 1.2rem;
font-weight: bold;
}
.thanks a {
font-size: 1.4rem;
font-weight: bold;
display: block;
width: fit-content;
color: #fff;
background: #000;
margin: 2rem auto 0 auto;
padding: 0.8em 3em;
border-radius: 50px;
}
.thanks a:hover {
background-color: #f4bc1e;
}

img {
width: auto;
max-width: 100%;
height: auto;
}
a {
outline: none;
}
html#form,
#form body {
height: 100%;
min-height: 720px;
}
body {
color: #000;
font-size: 16px;
line-height: 1;
min-width: 1000px;
max-width: 100%;
margin: 0px;
padding: 0px;
}
strong {
font-weight: bold;
}
.hover {
transition: 0.5s;
opacity: 1;
}
.hover:hover {
opacity: 0.7;
}
.formbutton-message {
font-size: 26px;
text-align: center;
color: #ffffff;
line-height: 1.54;
margin-bottom: 15px;
}
.ly_wrap {
overflow-x: hidden;
}    .l-flex-between-start {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: flex-start;
} .l-flex-between-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}  .l-flex-start-start {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: flex-start;
} .l-flex-start-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
} .l-flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.l-inner {
width: 980px;
margin: 0 auto;
}
.m-center {
text-align: center;
}
.pc {
display: block;
}
.sp {
display: none;
} body {
background-color: #f4f4f4;
}
.ly_inner {
width: 1000px;
margin: 0 auto;
position: relative;
}
.hp_pcNone {
display: none !important;
} #lp1 .bl_fv {
padding: 23px 0 65px;
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/pc_fv_background.jpg) no-repeat center/cover;
}
.bl_fv {
padding: 0;   } .bl_fv_logo {
text-align: right;
padding: 1rem 0 0 0; }
.bl_fv_catch {
padding: 0 0 2rem 0; text-align: left;
}
.bl_fv_subCatch {
text-align: left;
}
.bl_fv_subPhone {
max-width: 170px;
position: absolute;
right: 40px;
bottom: 0px;
} .bl_info {
position: relative;
padding: 39px 0 54px;
background-color: #000;
} .bl_info_ttl {
text-align: center;
}
.bl_info_btnWrap {
width: 1000px;
margin: 0px auto;
column-gap: 30px;
} .bl_companySlider {
overflow: hidden;
display: flex;
margin: 50px 0 80px 0;
width: 100vw;
height: 100px;
}
.bl_companySlider_item {
display: flex;
width: 3498px;
margin: 0 20px 0 0;
animation: infinity-scroll 50s infinite linear 0.5s both;
}
.bl_companySlider_item img {
max-width: inherit;
height: fit-content;
}
@keyframes infinity-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
} .bl_result {
margin: 0 0 115px;
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/pc_background.png) no-repeat center top 30px/cover;
}
.bl_result_ttl {
margin: 0 0 82px;
text-align: center;
}
.bl_result_catch {
text-align: center;
} .bl_reason {
margin: 0 0 95px;
}
.bl_reason_ttl {
margin: 0 0 21px;
text-align: center;
}
.bl_reason_trouble {
position: relative;
margin: 0 0 54px;
text-align: center;
}
.bl_reason_trouble:before {
content: "";
display: block;
position: absolute;
top: 0;
left: calc(50% - 50vw);
width: 100vw;
height: 210px;
background-color: #7a7a7a;
}
.bl_reason_trouble img {
position: relative;
z-index: 1;
}
.bl_reason_compareWrap {
margin: 0 0 74px;
justify-content: center;
}
.bl_reason_compare {
margin: 0 20px;
} .bl_support {
margin: 0 0 56px;
padding: 83px 0 35px;
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/pc_background.png) no-repeat center/cover;
}
.bl_support_ttl {
margin: 0 0 39px;
text-align: center;
}
.bl_support_desc {
padding: 34px 30px;
border: 4px solid #1469fa;
border-radius: 20px;
background-color: #fff;
}
.bl_support_desc:nth-of-type(2) {
margin: 0 50px;
}
.bl_support_descImg {
margin: 0 0 20px;
}
.bl_support_descTtl {
margin: 0 0 19px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.bl_support_descTxt {
line-height: 1.375;
font-size: 16px;
} .bl_point {
margin: 0 0 103px;
padding: 85px 0 0;
}
.bl_point_inner {
width: 1197px;
margin: 0 auto;
}
.bl_point_ttl {
margin: 0 0 56px;
text-align: center;
}
.bl_point_sec {
position: relative;
height: 439px;
margin: 0 0 46px;
}
.bl_point_secImg {
position: absolute;
top: 0;
z-index: 1;
}
.bl_point_secTxtWrap {
position: absolute;
bottom: 0;
right: 0;
width: 676px;
height: 370px;
padding: 80px 85px 0 110px;
border-radius: 20px;
background-color: #1469fa;
color: #fff;
}
.bl_point_secTtl {
margin: 0 0 25px;
font-size: 30px;
font-weight: bold;
}
.bl_point_secTxt {
line-height: 1.666;
font-size: 18px;
} .bl_compare {
padding: 119px 0 100px;
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/pc_background.png) no-repeat center/cover, #e9e9e9;
}
.bl_compare_ttl {
margin: 0 0 27px;
text-align: center;
}
.bl_compare_table {
text-align: center;
} .bl_flow {
margin: 0 0 90px;
padding: 96px 0 0;
}
.bl_flow_ttl {
margin: 0 0 49px;
text-align: center;
}
.bl_flow_listWrap > li {
width: 220px;
margin: 0 40px 0 0;
}
.bl_flow_listWrap > li:last-of-type {
margin-right: 0;
}
.bl_flow_listImg {
margin: 0 0 15px;
text-align: center;
}
.bl_flow_listTtl {
margin: 0 0 26px;
color: #1469fa;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.bl_flow_listTxt {
font-size: 16px;
} .bl_faq {
margin: 0 0 100px;
}
.bl_faq_ttl {
margin: 0 0 64px;
text-align: center;
}
.bl_faq_list {
margin: 0 0 55px;
}
.bl_faq_list > dt {
padding: 16px 30px;
background-color: #000;
color: #fff;
font-size: 24px;
}
.bl_faq_list > dd {
padding: 37px 30px 0;
}
.bl_faq_list > dd a {
display: inline;
color: inherit;
text-decoration: underline;
}
.bl_faq_listIcn {
margin: 0 29px 0 0;
color: #1469fa;
line-height: 1.44;
font-size: 40px;
font-weight: bold;
} .bl_fixed {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
padding: 26px 0 23px;
background: linear-gradient(#0000ff00 10%, black);
}
.bl_fixed .bl_fixed_box {
display: flex;
width: 1000px;
justify-content: space-between;
align-items: end;
margin: 0 auto;
column-gap: 30px;
}
.bl_fixed .bl_fixed_box .bl_fixed_btn.hover {
flex: 1;
} .ly_footer {
padding: 36px 0 25px;
background-color: #000;
color: #fff;
}
.bl_footerTxt {
margin: 0 0 10px;
text-align: center;
font-size: 14px;
}
.bl_copy {
display: block;
text-align: center;
font-size: 14px;
} .ly_header {
padding: 26px 0;
background-color: #fff;
text-align: center;
}
.ly_form {
background: #fff;
margin: 0;
}
.bl_formTtl {
padding: 30px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
gap: 1%;
position: relative;
}
.bl_formTtl__contact,
.bl_formTtl__document {
background-color: #e5e5e5;
}
.bl_formFrame {
width: 860px;
margin: 0 auto;
padding: 70px 90px;
border-radius: 10px;
background-color: #fff;
}
.bl_formStepImg {
margin: 0 0 53px;
text-align: center;
}
.bl_formDesc {
margin: 0 0 40px;
font-size: 18px;
}
.bl_formThanksCatch {
margin: 0 0 34px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.bl_formThanksTxt {
margin: 0 0 100px;
}
.bl_formThanksTxt p {
margin: 0 0 1em;
font-size: 18px;
}
.bl_formThanksTxt_btn {
text-align: center;
margin-top: 4em !important;
}
.bl_formThanksTxt_btn:hover {
opacity: 0.7;
transition: 0.5s;
}
.bl_form dl {
margin: 0 0 30px;
}
.bl_form dl > dt {
margin: 0 0 6px;
color: #1469fa;
}
.bl_form dl > dt > label {
font-size: 20px;
font-weight: bold;
}
.bl_form dl dd > input {
width: 100%;
height: 50px;
padding: 0 20px;
border: none;
background-color: #e5e5e5;
}
.bl_form dl dd > textarea {
width: 100%;
height: 110px;
padding: 10px 20px;
border: none;
background-color: #e5e5e5;
}
.bl_form dl:last-child {
margin-bottom: 0;
}
.bl_form_req {
padding: 3px 4px;
border-radius: 5px;
background-color: #f92a54;
color: #fff;
vertical-align: 2px;
font-size: 14px;
}
#next-btn {
text-align: center;
}
#sentPrev {
text-align: center;
}
#sentPrev li {
margin: 0 0 20px;
}
#prevBtn {
cursor: pointer;
text-decoration: underline;
text-align: center;
}
.caseBox {
display: flex;
justify-content: space-between;
gap: 2%;
overflow-x: scroll;
padding: 0 2rem;
}
.caseBox .case {
flex: 1;
background: #136afa;
padding: 0.5rem;
min-width: 300px;
height: max-content;
}
.caseBox .case .TopBox {
position: relative;
}
.caseBox .case .TopBox .fixBox {
width: 80%;
position: absolute;
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/rectangle-1.png) no-repeat bottom/cover;
padding: 0.1rem 0 0.3rem 1.5rem;
z-index: 2;
border-bottom-right-radius: 4px;
}
.caseBox .case .TopBox .mvBox {
z-index: 1;
}
.caseBox .case .TopBox .mvBox video {
margin: 0;
min-height: 37rem;
max-height: 200px;
max-width: 20.5rem;
}
.caseBox .case .TopBox .fixBox p {
color: #fff;
font-size: 12px;
}
.caseBox .case .flexBox {
display: flex;
justify-content: space-between;
gap: 1%;
}
.caseBox .case .flexBox .box {
background: #fff;
padding: 1%;
flex: 1;
text-align: center;
}
.caseBox .case .flexBox .box p {
font-weight: bold;
font-size: 12px;
} ::placeholder {
color: #ccc;
}
.hs-richtext {
font-size: 14px;
}
.hs-richtext a {
display: inline-block;
}
.hbspt-form input[type=email],
.hbspt-form input[type=text],
.hbspt-form input[type=tel],
.hbspt-form textarea {
width: 100%;
font-size: 1.2rem;
border: none;
min-height: 38px;
font-weight: normal;
padding: 16px;
border-radius: 4px;
background-color: #f5f5f5;
box-sizing: border-box;
margin: 1rem 0 2rem 0;
}
.hbspt-form textarea {
min-height: 12rem;
}
.hbspt-form input[type=submit] {
width: 100%;
color: #fff;
font-size: 18px;
font-weight: bold;
border: none;
padding: 1rem 20px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #29a63a;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
cursor: pointer;
height: auto;
}
.hbspt-form fieldset {
max-width: 100%!important;
}
.hbspt-form fieldset.form-columns-1 .hs-input {
width: 100%!important;
}
.hbspt-form label span {
font-size: 1.2rem;
font-weight: bold;
}
.hbspt-form label span.hs-form-required {
color: #f92a54;
}
.hbspt-form .hs-error-msg {
color: #f92a54;
display: block;
margin: -1.5rem 0 1rem 0;
font-size: .8rem;
}
.hbspt-form label.hs-form-booleancheckbox-display {
display: flex;
align-items: center;
margin: 1rem 0 2.5rem 0;
}
.hbspt-form fieldset.form-columns-1 label.hs-form-booleancheckbox-display input[type=checkbox] {
width: 15px !important;
height: 15px !important;
}
.hbspt-form label.hs-form-booleancheckbox-display span {
font-weight: normal;
font-size: 1rem;
}
.hbspt-form .hs_recaptcha {
display: none;
}
.thanks p {
font-size: 1.2rem;
font-weight: bold;
}
.thanks a {
font-size: 1.4rem;
font-weight: bold;
display: block;
width: fit-content;
color: #fff;
background: #000;
margin: 2.5rem auto 0 auto;
padding: 0.2em 3em;
border-radius: 50px;
}
.thanks a:hover {
background-color: #f4bc1e;
} .bl_info.bl01 {
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/tiktok-lp2_blbg.jpg) no-repeat center/cover;
padding: 40px 0;
}
.bl_info.bl01 img.bl01 {
margin-bottom: 2rem;
}
.tiktok-lp2.form01 .hbspt-form input[type=submit],
.tiktok-lp2.form02 .hbspt-form input[type=submit] {
font-size: 24px;
padding: 1.2rem 0;
}
.tiktok-lp2.form01 .hs_submit,
.tiktok-lp2.form02 .hs_submit {
width: 75%;
margin: 0 auto;
}
.hs_submit {
margin-top: 3rem!important;
}
@media screen and (max-width: 480px) {
.tiktok-lp2.form01 .hs_submit,
.tiktok-lp2.form02 .hs_submit {
width: 100%;
}
.tiktok-lp2.form01 .hbspt-form input[type=submit],
.tiktok-lp2.form01 .hbspt-form input[type=submit] {
font-size: 20px;
}
}
.bl_formFrame.tiktok-lp2 {
position: relative;
}
.bl_formTtl::after {
position: absolute;
content: '';
background: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/images/easyIcon-yellow.png) no-repeat center / contain;
width: 80px;
height: 80px;
bottom: 20px;
right: 27%;
} #works {
padding: 80px 0 0 0;
}
#works h2 {
text-align: center;
color: #000;
font-size: 3rem;
font-weight: bold;
margin: 0 auto 32px;
}
#works h2 span {
display: block;
font-family: 'azo-sans-web', sans-serif;
font-weight: bold;
font-size: 1.4rem;
color: #f4bc1e;
}
#works .worksList {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
#works .worksList .worksBox {
width: calc(94%/3);
margin: 0 3% 55px 0;
background-color: #fff;
border-radius: 10px;
box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.05);
}
#works .worksList .worksBox:nth-child(3n) {
margin-right: 0;
}
#works .worksList .worksBox .img {
position: relative;
}
#works .worksList .worksBox .img img {
border-radius: 10px 10px 0 0;
width: 100%;
height: 190px;
object-fit: cover;
}
#works .worksList.vertical .worksBox {
position: relative;
background: #efefef;
}
#works .worksList.vertical .worksBox .company {
position: absolute;
top: 0;
left: 0;
background: #000;
color: #fff;
z-index: 1;
border-radius: 10px 0;
padding: .5rem 1rem;
}
#works .worksList.vertical .worksBox .img img {
height: auto;
}
#works .worksList .worksBox .img::before {
position: absolute;
content: url(//mteam.jp/wp-content/themes/mteam-new/assets/tiktok-lp1/assets/images/common/play.png);
top: 50%;
left: 50%;
line-height: 1;
transform: translate(-50%, -50%);
}
#works .worksList .worksBox .txt {
padding: 12px;
}
#works .worksList .worksBox .txt .company {
line-height: 1;
}
#works .worksList .worksBox .txt h3 {
font-size: 1.6rem;
line-height: 1.5;
margin: 22px auto;
}
#works .worksList .worksBox .txt ul.category {
display: inline-table;
}
#works .worksList .worksBox .txt ul.category li {
border: solid 2px #6a6969;
border-radius: 40px;
padding: 0.2em 0.9em;
line-height: 1;
display: inline-block;
margin: 0 0 12px 0;
text-decoration: none;
font-size: .9rem;
}
#works .worksList .worksBox .txt ul.category li:last-child {
margin: 0;
}
#works .worksList .worksBox .txt ul.category li a {
color: #6a6969;
}
#works .worksList .worksBox .txt ul.category li a:hover {
opacity: .7;
}
#works .worksList .worksBox .txt .arrow {
margin: 15px 0 0;
text-align: right;
font-weight: bold;
line-height: 1;
position: relative;
padding-right: 1.8em;
}
#works .worksList .worksBox .txt .arrow::before {
content: '';
width: 18px;
height: 18px;
background: #f4bc1e;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
#works .worksList .worksBox .txt .arrow::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
right: 6px;
bottom: 0;
margin: auto;
}
#works .worksList .worksBox .txt ul.category .genre-tag,
#search .worksList .worksBox .txt ul.category .genre-tag,
#related .worksList .worksBox .txt ul.category .genre-tag {
background: lightblue;
}
#works .worksList .worksBox .txt ul.category .industry-tag,
#search .worksList .worksBox .txt ul.category .industry-tag,
#related .worksList .worksBox .txt ul.category .industry-tag {
background: brown;
}
#works .worksList .worksBox .txt ul.category .price-tag,
#search .worksList .worksBox .txt ul.category .price-tag,
#related .worksList .worksBox .txt ul.category .price-tag {
background: burlywood;
}
@media screen and (max-width: 1199px) {
#works .worksList .worksBox {
width: calc(92%/3);
margin: 0 4% 7% 0;
}
}
@media screen and (max-width: 768px) {
#works {
padding: 18% 0;
}
#works .worksList .worksBox {
width: 100%;
margin: 0 auto 10% 0;
}
#works .worksList .worksBox:last-child {
margin: 0 auto;
}
#works .worksList .worksBox .txt {
padding: 5%;
}
#works .worksList .worksBox .txt .company {
font-size: 1.4rem;
}
#works .worksList .worksBox .txt h3 {
font-size: 1.6rem;
margin: 5% auto;
}
#works .worksList .worksBox .txt ul.category li {
font-size: 1.4rem;
margin: 0 3% 3% 0;
word-break: keep-all;
}
}
.slick-track {
display: flex!important;
}
.topform form {
position: absolute;
top: 3rem;
left: 50%;
transform: translateX(11rem);
width: 30%;
background: #fff;
border-radius: 1rem;
padding: 2rem 3rem;
z-index: 1;
}
.topform .hbspt-form label span {
font-size: 1rem;
}
.topform .hbspt-form input[type=email],
.topform .hbspt-form input[type=text],
.topform .hbspt-form input[type=tel],
.topform .hbspt-form textarea {
font-size: 1rem;
padding: 6px;
margin: 0rem 0 1rem 0;
min-height: 30px;
}
.topform .hbspt-form textarea {
min-height: 4.5rem;
}
.topform .hs_submit {
margin-top: 1rem !important;
}