@charset "UTF-8";

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700");
body {
color: #222;
}
body.bg-stripe-blue {
background: none;
}
p {
font-size: 16px;
}
body.post-type-archive-service #main-contents.grid,
body.single-service #main-contents.grid {
max-width: 100%;
}
@media (max-width: 74.9375em) {
body.post-type-archive-service #main-contents.grid,
body.single-service #main-contents.grid {
padding: 0;
}
}
@media (max-width: 47.9375em) {
body.post-type-archive-service #main-contents.grid,
body.single-service #main-contents.grid {
margin-top: 0;
}
}
body.post-type-archive-service .bread-crumb,
body.single-service .bread-crumb {
float: none;
}
@media (max-width: 74.9375em) {
.service-contents .grid {
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 47.9375em) {
.service-contents .grid {
padding-left: 24px;
padding-right: 24px;
}
}
.service-contents .grid.is-narrow {
max-width: 780px;
}
.service-cta {
padding-top: 30px;
padding-bottom: 56px;
background-color: #0070a7;
}
.service-cta .service-cta-button {
width: 250px;
height: 57px;
}
@media (max-width: 47.9375em) {
.service-cta .service-cta-button {
width: auto;
height: auto;
}
}
.service-cta-inner {
padding: 40px;
background-color: #fff;
border-radius: 8px;
}
@media (max-width: 47.9375em) {
.service-cta-inner {
padding: 24px;
}
}
.service-cta-heading {
color: #002554;
font-size: 2.1875rem;
text-align: center;
line-height: 1.3;
}
@media (max-width: 47.9375em) {
.service-cta-heading {
font-size: 1.5rem;
}
}
.service-cta-buttons {
display: flex;
justify-content: center;
}
body.post-type-archive-service .service-cta-buttons {
margin-top: 48px;
}
@media (max-width: 47.9375em) {
body.post-type-archive-service .service-cta-buttons {
margin-top: 24px;
}
}
body.single-service .service-cta-buttons {
margin-top: 24px;
}
@media (max-width: 47.9375em) {
body.single-service .service-cta-buttons {
margin-top: 12px;
}
}
@media (max-width: 47.9375em) {
.service-cta-buttons {
flex-direction: column;
margin-top: 24px;
}
}
.service-cta-button {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
color: #fff;
font-size: 1.125rem;
font-weight: 700;
border-radius: 9999px;
}
@media (max-width: 47.9375em) {
.service-cta-button {
max-width: 100%;
font-size: 1rem;
}
}
.service-cta-button.is-download {
background: linear-gradient(90deg, #0090ff 0%, #c63ef2 100%) no-repeat 50% 50%/100% 100%;
}
.service-cta-button.is-request {
color: #7054e2;
border: 2px solid #7054e2;
}
.service-cta-buttons-item + .service-cta-buttons-item {
margin-left: 20px;
}
@media (max-width: 47.9375em) {
.service-cta-buttons-item + .service-cta-buttons-item {
margin-top: 16px;
margin-left: 0;
}
}
.service-cta-question {
position: relative;
margin-bottom: 16px;
padding-bottom: 30px;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
@media (max-width: 47.9375em) {
.service-cta-question {
font-size: 5vw;
}
}
.service-cta-question::after {
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-family: "fontAwesome";
font-size: 1.25rem;
font-weight: 400;
content: "\f078";
}
.service-cta-question span {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.service-cta-tel {
margin-top: 24px;
color: #002554;
font-size: 1.625rem;
text-align: center;
}
.service-cta-tel::before {
margin-right: 4px;
font-family: "fontAwesome";
font-weight: 400;
content: "\f095";
}
.service-cta-tel-link {
color: #002554;
font-weight: 700;
}
.service-cta-hours {
color: #555;
text-align: center;
} @media screen and (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none;
}
}
.service-contents {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Noto Sans JP", sans-serif;
}
.service-contents img {
max-width: 100%;
}
.service-contents sup {
font-size: 0.75rem;
}
.service-heading {
margin-bottom: 64px;
font-size: 2.1875rem;
font-weight: 700;
color: #002554;
line-height: 1.3;
text-align: center;
}
@media (max-width: 47.9375em) {
.service-heading {
margin-bottom: 32px;
font-size: 1.5rem;
}
}
.service-heading-sub1 {
margin-bottom: 64px;
font-size: 1.625rem;
font-weight: 700;
color: #002554;
line-height: 1.5;
text-align: center;
}
@media (max-width: 47.9375em) {
.service-heading-sub1 {
margin-bottom: 32px;
font-size: 1.25rem;
}
}
.service-heading-sub2 {
padding-bottom: 16px;
margin-bottom: 28px;
font-size: 1.625rem;
font-weight: 700;
color: #002554;
line-height: 1.5;
text-align: center;
border-bottom: 2px dashed #ccc;
}
@media (max-width: 47.9375em) {
.service-heading-sub2 {
margin-bottom: 16px;
font-size: 1.25rem;
text-align: left;
}
}
.service-heading-sub3 {
margin-bottom: 48px;
color: #002554;
font-size: 1.625rem;
line-height: 1.3;
}
@media (max-width: 47.9375em) {
.service-heading-sub3 {
margin-bottom: 24px;
font-size: 1.25rem;
}
}
.service-section {
padding-top: 90px;
padding-bottom: 90px;
}
@media (max-width: 47.9375em) {
.service-section {
padding-top: 45px;
padding-bottom: 45px;
}
}
.service-section .service-section {
padding-top: 0;
padding-bottom: 0;
}
@media (max-width: 74.9375em) {
.service-section .service-section {
margin: 0;
}
}
.service-section .service-section + .service-section {
padding-top: 90px;
}
@media (max-width: 47.9375em) {
.service-section .service-section + .service-section {
padding-top: 48px;
}
}
.service-section.is-colored {
background-color: #eff0f1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Noto Sans JP", sans-serif;
}
.service-caution {
margin-top: 0.5rem;
margin-left: 1em;
text-indent: -1em;
font-size: 0.875rem;
}
@media (max-width: 47.9375em) {
.service-caution {
font-size: 0.75rem;
}
}
.service-textlink-container {
margin-top: 16px;
font-weight: 700;
text-align: right;
}
@media (max-width: 47.9375em) {
.service-textlink-container {
text-align: left;
}
}
.service-textlink::after {
margin-left: 8px;
font-family: "fontAwesome", sans-serif;
content: "\f054";
} .service-mainvisual {
display: flex;
align-items: center;
height: 580px;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media (max-width: 47.9375em) {
.service-mainvisual {
height: auto;
}
}
body.post-type-archive-service .service-mainvisual {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/img_mainvisual.png);
}
body.single-service .service-mainvisual {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/img_mainvisual-under.png);
}
.service-mainvisual .service-cta-button {
width: 250px;
height: 57px;
}
@media (max-width: 47.9375em) {
.service-mainvisual .service-cta-button {
width: auto;
height: auto;
}
}
.service-mainvisual-under-heading {
margin-bottom: 32px;
color: #002554;
font-size: 1.625rem;
}
@media (max-width: 47.9375em) {
.service-mainvisual-under-heading {
margin: 5% 0;
font-size: 1.25rem;
}
}
.service-mainvisual-under-heading::before {
content: "";
display: block;
width: 71px;
height: 61px;
margin: 0 auto 16px;
background: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_sns-unyo-daiko@2x.png) no-repeat center top;
background-size: 71px auto;
}
@media (max-width: 47.9375em) {
.service-mainvisual-under-heading::before {
width: 50px;
height: 43px;
background-size: 50px auto;
}
}
.service-mainvisual-inner {
width: 100%;
margin: 0 auto;
}
body.post-type-archive-service .service-mainvisual-inner {
max-width: 720px;
}
body.single-service .service-mainvisual-inner {
max-width: 748px;
}
@media (max-width: 74.9375em) {
body.single-service .service-mainvisual-inner {
max-width: 728px;
}
}
.service-mainvisual-box {
position: relative;
padding: 50px;
background-color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 47.9375em) {
.service-mainvisual-box {
max-width: 90%;
margin: 5% auto;
padding: 25px;
}
}
.service-mainvisual-box::before {
position: absolute;
top: -10px;
left: -10px;
content: "";
display: block;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 112, 167, 0.4);
pointer-events: none;
}
@media (max-width: 47.9375em) {
.service-mainvisual-box::before {
content: none;
}
}
.service-mainvisual-sns {
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 47.9375em) {
.service-mainvisual-sns-item {
width: 25px;
}
}
.service-mainvisual-sns-item + .service-mainvisual-sns-item {
margin-left: 22px;
}
@media (max-width: 47.9375em) {
.service-mainvisual-sns-item + .service-mainvisual-sns-item {
margin-left: 3vw;
}
}
.service-mainvisual-copy {
font-size: 2.375rem;
font-weight: 300;
color: #002554;
line-height: 1.3;
}
@media (max-width: 47.9375em) {
.service-mainvisual-copy {
font-size: 7vw;
}
}
.service-mainvisual-service-name {
margin-top: 16px;
color: #555;
font-size: 1rem;
font-weight: 400;
}
@media (max-width: 47.9375em) {
.service-mainvisual-service-name {
font-size: 4vw;
}
} .service-header-support {
padding: 32px 0;
}
@media (max-width: 47.9375em) {
.service-header-support {
margin: 0 -10px;
padding: 24px 0 12px;
}
}
.service-header-support-heading {
margin-bottom: 40px;
color: #002554;
text-align: center;
letter-spacing: 0.05rem;
}
@media (max-width: 47.9375em) {
.service-header-support-heading {
margin-bottom: 16px;
font-size: 3vw;
}
}
.service-header-support-heading-inner {
padding: 10px 32px;
background: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_laurel-left.png) 0 center no-repeat, url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_laurel-right.png) right center no-repeat;
}
@media (max-width: 47.9375em) {
.service-header-support-heading-inner {
background-size: 20px auto;
}
}
.service-header-support-heading-em {
margin: 0 2px;
font-size: 1.8125rem;
}
@media (max-width: 47.9375em) {
.service-header-support-heading-em {
font-size: 6vw;
}
}
.service-support-company {
margin-bottom: 0;
}
.service-support-company .slick-track {
display: flex;
align-items: center;
will-change: transform;
}
.service-support-company-item {
padding: 0 24px;
-webkit-transform: scale(0.9);
transform: scale(0.9);
float: none;
}
@media (max-width: 47.9375em) {
.service-support-company-item {
padding: 0;
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
} .service-support-lineup-inner {
display: flex;
flex-wrap: wrap;
}
.service-support-lineup-problem {
padding: 10px 26px;
color: #fff;
font-size: 1.125rem;
font-weight: 700;
background-color: #002554;
border-radius: 8px 8px 0 0;
}
@media (max-width: 47.9375em) {
.service-support-lineup-problem {
padding-left: 16px;
padding-right: 16px;
font-size: 1rem;
text-align: center;
}
}
.service-support-lineup-item {
width: calc(50% - 12px);
}
@media (max-width: 74.9375em) {
.service-support-lineup-item {
width: 100%;
}
}
.service-support-lineup-item:nth-child(even) {
margin-left: 24px;
}
@media (max-width: 74.9375em) {
.service-support-lineup-item:nth-child(even) {
margin-left: 0;
}
}
.service-support-lineup-item:nth-child(1) .service-support-lineup-image {
width: 49px;
}
@media (max-width: 74.9375em) {
.service-support-lineup-item:nth-child(2) {
margin-top: 24px;
}
}
.service-support-lineup-item:nth-child(2) .service-support-lineup-image {
width: 62px;
}
.service-support-lineup-item:nth-child(3) .service-support-lineup-image {
width: 44px;
}
.service-support-lineup-item:nth-child(4) .service-support-lineup-image {
width: 49.5px;
}
.service-support-lineup-item:nth-child(5) .service-support-lineup-image {
width: 47.5px;
}
.service-support-lineup-item:nth-child(6) .service-support-lineup-image {
width: 38px;
}
.service-support-lineup-item:nth-child(n + 3) {
margin-top: 24px;
}
.service-support-lineup-item-inner {
display: flex;
align-items: center;
padding: 24px;
background-color: #fff;
border-radius: 0 0 8px 8px;
}
@media (max-width: 47.9375em) {
.service-support-lineup-item-inner {
padding: 20px;
}
}
.service-support-lineup-image-container {
width: 62px;
text-align: center;
margin-right: 9px;
}
@media (max-width: 47.9375em) {
.service-support-lineup-image-container {
width: 56px;
}
}
.service-support-lineup-item-text {
width: calc(100% - 62px);
}
.service-support-lineup-heading {
margin-bottom: 10px;
font-size: 1.25rem;
overflow: hidden;
}
@media (max-width: 47.9375em) {
.service-support-lineup-heading {
font-size: 1.1rem;
}
}
.service-support-lineup-description {
overflow: hidden;
} .service-support-works {
display: flex;
max-width: 872px;
margin: 0 auto;
}
@media (max-width: 47.9375em) {
.service-support-works {
padding: 24px;
border: 1px solid #ccc;
border-radius: 8px;
}
}
.service-support-works + .service-support-works {
margin-top: 32px;
}
@media (max-width: 74.9375em) {
body.single-service .service-support-works + .service-support-works {
margin-top: 48px;
}
}
@media (max-width: 47.9375em) {
body.single-service .service-support-works + .service-support-works {
margin-top: 24px;
}
}
@media (max-width: 47.9375em) {
.service-support-works {
flex-direction: column;
}
}
.service-support-works-image-container {
width: 490px;
}
@media (max-width: 74.9375em) {
.service-support-works-image-container {
width: 60%;
}
}
@media (max-width: 47.9375em) {
.service-support-works-image-container {
width: 100%;
}
}
.service-support-works-text {
width: calc(100% - 490px);
}
@media (max-width: 74.9375em) {
.service-support-works-text {
width: 40%;
}
}
@media (max-width: 47.9375em) {
.service-support-works-text {
width: 100%;
margin-top: 16px;
}
}
.service-support-name {
margin-bottom: 16px;
padding-bottom: 10px;
color: #222;
font-size: 1.24rem;
font-weight: 700;
border-bottom: 2px dotted #ccc;
}
@media (max-width: 47.9375em) {
.service-support-name {
font-size: 1rem;
}
}
.service-support-label {
margin-bottom: 8px;
color: #222;
font-size: 0.875rem;
font-weight: 700;
}
.service-support-list-item {
margin-left: 1em;
text-indent: -1em;
color: #555;
}
.service-support-list-item + .service-support-list-item {
margin-top: 2px;
}
.service-support-sns {
margin-bottom: 16px;
font-size: 0;
}
.service-support-sns-item {
display: inline-block;
margin-right: 8px;
margin-bottom: 8px;
padding: 3px 6px;
font-size: 0.75rem;
color: #fff;
border-radius: 4px;
}
.service-support-sns-item.is-twitter {
background-color: #55acee;
}
.service-support-sns-item.is-instagram {
background-color: #e1306c;
}
.service-support-sns-item.is-facebook {
background-color: #1877f2;
}
.service-support-result-image-container {
max-width: 804px;
margin: 0 auto;
} .service-merit {
position: relative;
padding: 64px 63px;
background-color: #fff;
border: 1px solid #002554;
border-radius: 8px;
}
@media (max-width: 47.9375em) {
.service-merit {
padding: 48px 24px 24px;
}
}
.service-merit + .service-merit {
margin-top: 32px;
}
.service-ribbon {
display: inline-block;
position: absolute;
top: -6px;
left: 64px;
width: 68px;
margin: 0;
padding: 12px 0;
z-index: 2;
text-align: center;
font-size: 2rem;
color: #fff;
font-weight: 700;
line-height: 1;
background-color: #002554;
}
@media (max-width: 47.9375em) {
.service-ribbon {
left: 8px;
width: 48px;
padding: 8px 0;
font-size: 1.5rem;
}
}
.service-ribbon::after {
content: "";
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 34px solid #002554;
border-right: 34px solid #002554;
border-bottom: 10px solid transparent;
}
@media (max-width: 47.9375em) {
.service-ribbon::after {
border-left-width: 24px;
border-right-width: 24px;
}
}
.service-merit-image-container {
margin-top: 24px;
text-align: center;
}
.service-merit-image-container:nth-of-type(2) {
margin-top: 8px;
}
@media (max-width: 47.9375em) {
.service-merit-image-container:nth-of-type(2) {
margin-top: 0;
}
}
body.post-type-archive-service
.service-merit.is-02
.service-merit-image-container:nth-of-type(1)
.service-merit-image {
width: 578px;
}
@media (max-width: 47.9375em) {
body.post-type-archive-service
.service-merit.is-02
.service-merit-image-container:nth-of-type(2)
.service-merit-image {
width: 130px;
}
}
.service-merit-label {
display: flex;
align-items: center;
justify-content: center;
margin-top: 56px;
margin-bottom: 24px;
color: #222;
font-size: 1.25rem;
font-weight: 700;
}
@media (max-width: 47.9375em) {
.service-merit-label {
margin-top: 32px;
font-size: 1rem;
}
}
.service-merit-label::before, .service-merit-label::after {
content: "";
display: block;
height: 1px;
width: 100px;
background-color: #333;
}
@media (max-width: 47.9375em) {
.service-merit-label::before, .service-merit-label::after {
flex-grow: 1;
width: auto;
}
}
.service-merit-label::before {
margin-right: 16px;
}
.service-merit-label::after {
margin-left: 16px;
}
.service-index-links-heading {
padding: 16px 12px;
color: #fff;
font-size: 1.125rem;
font-weight: 700;
text-align: center;
background-color: #002554;
border-radius: 8px 8px 0 0;
}
.service-index-links {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 47.9375em) {
.service-index-links {
flex-direction: column;
}
}
.service-index-links-item {
width: 50%;
height: 13vh;
background-color: #fff;
border-left: 1px solid #002554;
border-bottom: 1px solid #002554;
border-right: 1px solid #002554;
}
@media (max-width: 47.9375em) {
.service-index-links-item {
width: 100%;
height: 8vh;
border-right: 1px solid #002554;
}
}
.service-index-links-item:nth-child(even) {
border-right: 1px solid #002554;
} .service-index-links-link {
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 40px 44px 40px 88px;
color: #0070a7;
font-size: 1.25rem;
font-weight: 700;
background-repeat: no-repeat;
}
@media (max-width: 74.9375em) {
.service-index-links-link {
padding-top: 32px;
padding-bottom: 32px;
}
}
@media (max-width: 47.9375em) {
.service-index-links-link {
padding: 24px 48px 24px 68px;
font-size: 1rem;
}
}
.service-index-links-item.is-current .service-index-links-link {
color: #222;
background-color: #eff0f1;
pointer-events: none;
}
.service-index-links-link::after {
position: absolute;
top: 50%;
right: 24px;
font-family: "fontAwesome", sans-serif;
font-weight: 300;
content: "\f054";
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.service-index-links-item.is-current .service-index-links-link::after {
content: none;
}
.service-index-links-item.is-sns-unyo-daiko .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_sns-unyo-daiko@2x.png);
background-size: 49px auto;
background-position: 24px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-sns-unyo-daiko .service-index-links-link {
background-size: 33px auto;
}
}
.service-index-links-item.is-sns-consulting .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_sns-consulting@2x.png);
background-size: 62px auto;
background-position: 20px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-sns-consulting .service-index-links-link {
background-size: 36px auto;
}
}
.service-index-links-item.is-social-listening .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_social-listening@2x.png);
background-size: 44px auto;
background-position: 26px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-social-listening .service-index-links-link {
background-size: 24px auto;
}
}
.service-index-links-item.is-flaming-security .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_flaming-security@2x.png);
background-size: 49.5px auto;
background-position: 24px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-flaming-security .service-index-links-link {
background-size: 28px auto;
}
}
.service-index-links-item.is-sns-ad-manage .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_ad-manage@2x.png);
background-size: 47.5px auto;
background-position: 24px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-sns-ad-manage .service-index-links-link {
background-size: 27px auto;
}
}
.service-index-links-item.is-twitter-support .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/icon_twitter-support@2x.png);
background-size: 38px auto;
background-position: 30px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-twitter-support .service-index-links-link {
background-size: 20px auto;
}
}
.service-index-links-item.is-analysis .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/analysis@2x.svg);
background-size: 58px auto;
background-position: 20px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-analysis .service-index-links-link {
background-size: 35px auto;
}
}
.service-index-links-item.is-marketingstrategy .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/marketingstrategy@2x.svg);
background-size: 58px auto;
background-position: 20px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-marketingstrategy .service-index-links-link {
background-size: 35px auto;
}
}
.service-index-links-item.is-datadrivenmarketing .service-index-links-link {
background-image: url(//gaiax-socialmedialab.jp/wp-content/themes/original/images/service/datadrivenmarketing@2x.svg);
background-size: 58px auto;
background-position: 20px center;
}
@media (max-width: 47.9375em) {
.service-index-links-item.is-datadrivenmarketing .service-index-links-link {
background-size: 35px auto;
}
} .service-popup {
position: fixed;
right: 16px;
bottom: 16px;
padding: 24px;
background-color: #002554;
border-radius: 8px;
z-index: 100000;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out;
}
.service-popup.is-visible {
opacity: 1;
pointer-events: auto;
}
.service-popup-close-container {
position: absolute;
top: 5px;
right: 7px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
}
.service-popup-close {
color: #fff;
font-size: 1.25rem;
cursor: pointer;
}
.service-popup-image {
width: 272px;
margin-bottom: 16px;
} .service-contents.is-top .service-mainvisual-copy {
margin-top: 24px;
}
.service-contents.is-top .slick-slide {
opacity: 1;
} .service-trouble-image-container {
position: relative;
width: 575px;
margin: 0 auto;
}
@media (max-width: 47.9375em) {
.service-trouble-image-container {
width: auto;
}
}
.service-trouble-image {
display: block;
width: 68px;
margin: 0 auto;
padding-top: 134px;
}
@media (max-width: 47.9375em) {
.service-trouble-image {
width: 56px;
padding-top: 258px;
}
}
.service-trouble-image-text-container {
position: absolute;
}
.service-trouble-image-text-container.is-01 {
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (max-width: 47.9375em) {
.service-trouble-image-text-container.is-01 {
left: auto;
right: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.service-trouble-image-text-container.is-02 {
top: 145px;
left: 0;
}
@media (max-width: 47.9375em) {
.service-trouble-image-text-container.is-02 {
top: 95px;
left: 0;
}
}
.service-trouble-image-text-container.is-03 {
top: 164px;
right: 0;
}
@media (max-width: 47.9375em) {
.service-trouble-image-text-container.is-03 {
top: 173px;
}
}
.service-trouble-image-text {
position: relative;
display: inline-block;
padding: 6px 20px;
border: 2px solid #222;
border-radius: 8px;
}
@media (max-width: 47.9375em) {
.service-trouble-image-text {
font-size: 0.9375rem;
}
}
.service-trouble-image-text::after {
position: absolute;
content: "";
display: block;
height: 2px;
background-color: #222;
}
.is-01 .service-trouble-image-text::after {
width: 50px;
left: 90px;
bottom: -17px;
-webkit-transform: rotate(-59deg);
transform: rotate(-59deg);
}
@media (max-width: 47.9375em) {
.is-01 .service-trouble-image-text::after {
width: 40px;
bottom: -12px;
}
}
.is-02 .service-trouble-image-text::after {
width: 60px;
right: -50px;
bottom: 20px;
-webkit-transform: rotate(13deg);
transform: rotate(13deg);
}
@media (max-width: 47.9375em) {
.is-02 .service-trouble-image-text::after {
width: 40px;
left: 50px;
right: auto;
bottom: -7px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
}
.is-03 .service-trouble-image-text::after {
width: 55px;
left: -43px;
bottom: 25px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
@media (max-width: 47.9375em) {
.is-03 .service-trouble-image-text::after {
width: 35px;
left: 47px;
bottom: -9px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}  .service-section.is-account-support .grid {
overflow: visible;
}
.service-section.is-account-support p + p {
margin-top: 1em;
}
.service-section.is-account-support .service-support-works:nth-of-type(1) {
margin-top: 64px;
}
@media (max-width: 47.9375em) {
.service-section.is-account-support .service-support-works:nth-of-type(1) {
margin-top: 24px;
}
}
.account-support-image-container {
position: relative;
height: 400px;
margin-top: 64px;
margin-bottom: 64px;
overflow: hidden;
}
@media (max-width: 74.9375em) {
.account-support-image-container {
height: 300px;
}
}
@media (max-width: 47.9375em) {
.account-support-image-container {
height: 204px;
margin-top: 24px;
margin-bottom: 40px;
}
}
.account-support-image {
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
width: 100%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.account-support-image {
position: static;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transform: none;
transform: none;
}
} .account-implementation-example-container {
display: flex;
flex-wrap: wrap;
}
.service-table-container.is-initial {
width: 34.1%;
}
@media (max-width: 47.9375em) {
.service-table-container.is-initial {
width: 100%;
}
}
.service-table-container.is-operation {
width: 60.3%;
margin-left: 5.6%;
}
@media (max-width: 47.9375em) {
.service-table-container.is-operation {
width: 100%;
margin-top: 40px;
margin-left: 0;
}
}
.service-table {
margin: 0;
border-collapse: separate;
border: 1px solid #002554;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
.service-table .service-table-heading {
padding-top: 20px;
padding-bottom: 20px;
font-size: 1.5rem;
text-align: center;
background-color: #002554;
border-top: none;
border-left: none;
border-right: none;
border-color: #002554;
}
@media (max-width: 47.9375em) {
.service-table .service-table-heading {
padding-top: 16px;
padding-bottom: 16px;
font-size: 1.25rem;
}
}
.service-table .service-table-heading.is-subheading {
padding-top: 12px;
padding-bottom: 12px;
font-size: 1.125rem;
border-top: 1px solid #fff;
}
.service-table .service-table-heading.is-subheading + .service-table-heading.is-subheading {
border-left: 1px solid #fff;
}
.service-table .service-table-data {
color: #555555;
font-size: 1.125rem;
text-align: center;
line-height: 1.3;
background-color: #fff;
border: none;
}
@media (max-width: 47.9375em) {
.service-table .service-table-data {
padding: 12px;
font-size: 0.875rem;
}
}
.service-table .service-table-data + .service-table-data {
border-left: 1px solid #002554;
}
.service-table tr:last-child .service-table-heading,
.service-table tr:last-child .service-table-data {
border-bottom: none;
}
.service-table thead tr:first-child .service-table-heading {
border-radius: 8px 8px 0 0;
}
.service-table tbody tr:nth-child(even) .service-table-data {
background-color: #eff0f1;
}
.service-table tbody tr:last-child .service-table-data:only-child {
border-radius: 0 0 8px 8px;
}
.service-table tbody tr:last-child .service-table-data:nth-last-child(2) {
border-radius: 0 0 0 8px;
}
.service-table tbody tr:last-child .service-table-data:nth-last-child(1):not(:only-child) {
border-radius: 0 0 8px 0;
}
.account-cost-formula {
display: flex;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 47.9375em) {
.account-cost-formula {
flex-direction: column;
}
}
.account-cost-formula .fa {
width: 2.4%;
margin-left: 3.2%;
margin-right: 3.2%;
color: #002554;
font-size: 1.875rem;
text-align: center;
}
@media (max-width: 47.9375em) {
.account-cost-formula .fa {
width: auto;
margin: 8px 0;
font-size: 1.5rem;
}
}
.account-cost-formula-item {
padding: 24px;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
background-color: #002554;
border-radius: 8px;
}
@media (max-width: 47.9375em) {
.account-cost-formula-item {
padding: 12px;
font-size: 1.1rem;
line-height: 1.3;
}
}
.account-cost-formula-item.is-initial {
width: 33.9%;
}
@media (max-width: 47.9375em) {
.account-cost-formula-item.is-initial {
width: 100%;
}
}
.account-cost-formula-item.is-operation {
width: 57.3%;
}
@media (max-width: 47.9375em) {
.account-cost-formula-item.is-operation {
width: 100%;
}
}
.account-cost-text {
text-align: center;
}
.account-cost-text a {
text-decoration: underline;
}
.account-cost-text a:hover {
text-decoration: none;
}
@media (max-width: 47.9375em) {
.account-cost-text {
text-align: left;
}
} .account-flow {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.account-flow-item {
width: 25%;
padding: 16px 3.2%;
counter-increment: label-number;
border-left: 1px solid #002554;
}
@media (max-width: 47.9375em) {
.account-flow-item {
width: 100%;
padding: 24px 0;
border-top: 1px solid #002554;
border-left: none;
}
}
@media (max-width: 47.9375em) {
.account-flow-item + .account-flow-item {
margin-top: 0;
}
}
.account-flow-item:last-child {
border-right: 1px solid #002554;
}
@media (max-width: 47.9375em) {
.account-flow-item:last-child {
border-bottom: 1px solid #002554;
border-right: none;
}
}
.account-flow-label {
position: relative;
margin-bottom: 48px;
padding-top: 2rem;
color: #222;
font-size: 1.25rem;
font-weight: 700;
text-align: center;
}
@media (max-width: 47.9375em) {
.account-flow-label {
margin-bottom: 24px;
padding-top: 0;
padding-left: 2.5rem;
text-align: left;
}
}
.account-flow-label::before {
position: absolute;
top: 0;
left: 50%;
content: counter(label-number, decimal-leading-zero);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #0070a7;
font-size: 1.625rem;
}
@media (max-width: 47.9375em) {
.account-flow-label::before {
left: 0;
font-size: 1.5rem;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.account-flow-list-item {
position: relative;
padding-left: 15px;
}
.account-flow-list-item::before {
position: absolute;
top: 6px;
left: 0;
content: "";
display: block;
width: 10px;
height: 10px;
background-color: #0070a7;
border-radius: 50%;
}
.account-flow-list-item + .account-flow-list-item {
margin-top: 5px;
}