@charset "UTF-8";
 *,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
}
html:focus-within {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
line-height: 1.5;
text-rendering: optimizeSpeed;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
img,
picture {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
@font-face {
src: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/font/NotoSansJP-Medium.woff2) format("woff2"), url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/font/NotoSansJP-Medium.woff) format("woff");
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 500;
}
@font-face {
src: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/font/NotoSansJP-Bold.woff2) format("woff2"), url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/font/NotoSansJP-Bold.woff) format("woff");
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 700;
} @font-face {
src: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/font/Roboto-Bold.woff2) format("woff2"), url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/font/Roboto-Bold.woff) format("woff");
font-family: "Roboto";
font-style: normal;
font-weight: 700;
}
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
:root {
--color-main01: #FF9800;
--color-main02: #004F98;
--color-accent: #009951;
--color-light-base: #F8F8F8;
}
html {
font-size: 62.5%;
}
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: "Noto Sans JP", "YuGothic", "Yu Gothic", "ヒラギノ角ゴシック", "Hiragino Sans", "sans-serif";
font-size: 62.5%;
text-size-adjust: 100%;
}
.overflow {
overflow-x: hidden;
}
p {
line-height: 1.8;
}
img {
display: inline;
max-width: 100%;
height: auto;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
li {
line-height: 1.8;
list-style-position: inside;
}
figure {
margin-right: 0;
margin-left: 0;
}
ul,
ol {
padding: 0;
list-style-type: none;
}
.arrow_right {
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 13px;
height: 13px;
margin: auto;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 3px solid #000;
border-right: 3px solid #000;
content: "";
}
.under-lg-disp {
display: none;
}
.under-sm-disp {
display: none;
}
.pc-no {
display: none;
}
.sp-no {
display: inline;
}
.u-color-blue {
color: var(--color-main02) !important;
}
.wrap {
max-width: 1100px;
margin-right: auto;
margin-left: auto;
}
.top-case .wrap {
max-width: 960px;
}
.cv {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 330px;
max-width: 100%;
padding: 28px 32px;
border-radius: 6px;
color: #ffffff;
font-size: 20px;
font-weight: 700;
}
.v-copy-util .cv {
width: 100%;
max-width: 330px;
}
.cv:hover {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.cv-document {
background-color: #ed6d33;
}
.cv-contact {
background-color: #333333;
}
.cv img {
margin-right: 15px;
}
.common-ttl {
margin-bottom: 55px;
font-size: 3.6rem;
text-align: center;
}
.common-ttl::before {
display: block;
width: 30px;
height: 4px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
background-color: #ed6d33;
content: "";
}
.common-ttl span {
font-size: 2rem;
}
.common-ttl img {
display: inline;
margin-right: 15px;
margin-left: 15px;
vertical-align: middle;
}
.common-ttl02 {
margin-bottom: 55px;
text-align: center;
font-size: 2.4rem;
}
.common-link a {
position: relative;
color: #004f98;
font-size: 1.8rem;
}
.common-link a::before {
display: inline-block;
position: absolute;
top: 60%;
right: -34px;
width: 26px;
height: 26px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/btn_marker.png);
font-size: 1.8rem;
content: "";
}
.common-btn {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 315px;
margin-right: auto;
margin-left: auto;
border-radius: 6px;
background-color: #333333;
text-align: center;
}
.common-btn:hover {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.common-btn a {
display: block;
width: 100%;
height: 100%;
padding: 22px 0;
color: #ffffff;
font-size: 2rem;
}
.bc-white {
background-color: #fff;
}
.bc-gray {
background-color: #f8f8f8;
}
.bc-orange {
background-color: #ed6d33;
}
.bc-navy {
background-color: #004f98;
}
.c-orange {
color: #ed6d33;
}
.c-navy {
color: #004f98;
}
.fz-16 {
font-size: 1.6rem;
}
.header-cv-login {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
min-width: 140px;
margin: 18px 0;
margin-right: 23px;
padding: 12px 18px;
border-radius: 6px;
color: #004f98;
font-size: 1.6rem;
font-weight: 700;
line-height: 2rem;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.header-cv-login img {
display: inline-block;
width: 20px;
height: auto;
margin-right: 8px;
}
.header-cv-login:hover {
-webkit-transform: translate3d(0, 5px, 0);
-webkit-transition-duration: 0.3s;
transform: translate3d(0, 5px, 0);
transition-duration: 0.3s;
}
.header-cv-login .icon {
-webkit-mask-size: cover;
mask-size: cover;
}
.header-cv-operation,
.header-cv-document {
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
min-width: 210px;
margin: 18px 0;
padding: 12px 18px;
border-radius: 6px;
font-size: 1.6rem;
font-weight: 700;
line-height: 2rem;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.header-cv-operation:hover,
.header-cv-document:hover {
-webkit-transform: translate3d(0, 5px, 0);
-webkit-transition-duration: 0.3s;
transform: translate3d(0, 5px, 0);
transition-duration: 0.3s;
}
.header-cv-operation:not(:last-of-type),
.header-cv-document:not(:last-of-type) {
margin-right: 23px;
}
.header-cv-operation {
background-color: var(--color-accent);
color: #ffffff;
}
.header-cv-document {
background-color: var(--color-main01);
color: #ffffff;
}
.header-sns-instagram img {
vertical-align: bottom;
}
.header {
z-index: 1001;
position: fixed;
width: 100%;
height: 98px;
background-color: #ffffff;
}
.header-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
margin-right: 20px;
margin-left: 28px;
}
.header-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.header-logo a {
display: flex;
font-size: 18px;
align-items: center;
}
.header-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 47px;
}
.header-nav-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header-nav li:not(:last-of-type) {
margin-right: 41px;
}
.header-nav-main .menu-item-home {
display: none;
}
.header-nav-main li.current_page_item a::after {
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
-webkit-transform: none;
transform: none;
background: #004f98;
content: "";
}
.header-nav-main li.menu-item-17 {
display: none;
}
.header-nav-main a {
display: inline-block;
position: relative;
color: #004f98;
font-size: 1.6rem;
font-weight: 700;
line-height: 2em;
text-decoration: none;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.header-nav-main a::after {
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px; -webkit-transform-origin: left top;
transform-origin: left top;
background: #004f98;
content: ""; }
.header-nav-main a:hover {
color: #004f98;
}
.header-nav-main a:hover::after {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.header-nav-sub {
display: none;
}
.header-nav-sub a {
font-size: 1.6rem;
line-height: 2em;
}
.header-cv {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
margin-left: auto;
}
.header-nav .header-cv {
display: none;
}
.header-cv-operation, .header-cv-document {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 210px;
margin: 18px 0;
padding: 12px 18px;
border-radius: 6px;
font-size: 1.6rem;
font-weight: 700;
line-height: 2rem;
}
.header-cv-operation:hover, .header-cv-document:hover {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.header-cv-operation:not(:last-of-type), .header-cv-document:not(:last-of-type) {
margin-right: 23px;
}
.header-hamburger {
display: none;
z-index: 9999;
position: relative;
width: 30px;
height: 22px;
}
.header-hamburger span {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 2px;
background-color: #000000;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.header-hamburger span:nth-of-type(1) {
top: 0;
}
.header-hamburger span:nth-of-type(2) {
top: 10px;
right: 0;
width: 20px;
}
.header-hamburger span:nth-of-type(3) {
right: 0;
bottom: 0;
width: 10px;
}
.open #header-hamburger span {
background-color: #000000;
}
.open #header-hamburger span:nth-of-type(1) {
width: 30px;
-webkit-transform: translateY(10px) rotate(315deg);
transform: translateY(10px) rotate(315deg);
}
.open #header-hamburger span:nth-of-type(2) {
opacity: 0;
}
.open #header-hamburger span:nth-of-type(3) {
width: 30px;
-webkit-transform: translateY(-10px) rotate(-315deg);
transform: translateY(-10px) rotate(-315deg);
}
.open .header-nav {
visibility: visible;
z-index: 5000;
overflow-y: scroll;
-webkit-transform: translateX(0);
transform: translateX(0);
background-color: rgba(255, 255, 255, 0.9);
opacity: 1;
}
@media screen and (min-width: 678px) and (max-width: 1800px) {
.header-nav  {
margin: 0 20px;
}
.header-nav-main a {
font-size: clamp(12px, 0.889vw, 16px);
}
.header-nav li:not(:last-of-type) {
margin-right: 20px;
}
.header-cv-operation, .header-cv-document {
padding-inline: 20px;
min-width: auto;
font-size: clamp(12px, 0.889vw, 16px);
}
.header-cv-operation:not(:last-of-type), .header-cv-document:not(:last-of-type) {
margin-right: 10px;
}
.header-cv-login {
margin-right: 10px;
}
}
.open {
overflow-y: hidden;
}
.aside {
z-index: 9999;
position: fixed;
top: 35%;
right: 0; -webkit-transform: translateY(-50%);
transform: translateY(-50%);  } .aside .aside-cv-trial {
position: relative;
padding: 50px 15px 10px;
color: #ffffff;
font-size: 1.6rem;
line-height: 1.2em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.aside .aside-cv-trial02 {
padding: 30px 25px;
color: #ffffff;
font-size: 2rem;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 1.2em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
background-color: #004f98;
}
.aside > :not(.aside-cv-trial02) {
display: none;
}
.aside .aside-cv-trial:hover {
opacity: 1;
}
.aside .aside-cv-trial::before {
position: absolute;
top: -20px;
left: -25px;
width: 64px;
height: 64px;
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/aside_img.png);
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.aside .aside-cv-operation,
.aside .aside-cv-document {
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: calc(49% - 20px);
margin-top: 8px;
margin-bottom: 6px;
border-radius: 4px;
color: #ffffff;
font-size: 1.6rem;
}
.aside .aside-cv-operation {
background: var(--color-accent);
}
.aside .aside-cv-document {
position: relative;
padding-inline: 15px;
background-color: #FF9800;
}
.aside .aside-cv-tel {
margin-top: 8px;
margin-bottom: 6px;
width: 40px;
border-right: 1px solid #fff;
background: #004f98 url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/common/tel-icon.png) no-repeat 50% 50% / auto 23px;
border-radius: 4px;
text-indent: -9999px;
overflow: hidden;
}
.main {
position: relative;
width: 100%;
overflow: hidden;
}
.top-contents {
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
}
.top-contents > .wrap:first-child > :first-child {
margin-top: 0;
}
.top-contents h2 {
margin-bottom: 60px;
font-size: 4.2rem;
letter-spacing: 0.05em;
}
.top-contents p {
margin-bottom: 30px;
font-size: 2.2rem;
font-weight: 700;
}
.explanation-contents {
padding-top: 120px;
}
.service_flow {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
margin-bottom: 55px;
border-top: 4px solid #004f98;
}
.service_flow > li {
display: grid;
grid-template-rows: subgrid;
position: relative;
grid-row: span 2;
margin-top: -25px;
}
.service_flow > li::before {
display: block;
position: absolute;
width: 47px;
height: 49px;
border-radius: 6px;
content: "";
}
.service_flow > li a {
color: #ed6d33;
text-decoration: underline;
}
.service_flow > li:nth-of-type(1)::before {
left: 0;
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/explanation_list_01.png);
}
.service_flow > li:nth-of-type(2)::before {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/explanation_list_02.png);
}
.service_flow > li:nth-of-type(3)::before {
right: 0;
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/explanation_list_03.png);
}
.service_flow > li figure {
padding-top: 100px;
}
.service_flow > li p {
width: 80%;
margin-right: auto;
margin-left: auto;
font-size: 1.6rem;
}
.explanation-contents .service_flow li {
width: 33.3%;
}
.explanation-contents .service_flow li figure img {
width: 100%;
}
.explanation-contents .explanation-cg,
.explanation-contents .explanation-vr,
.explanation-contents .explanation-pre {
margin-bottom: 80px;
}
.explanation-contents .explanation-cg p,
.explanation-contents .explanation-vr p,
.explanation-contents .explanation-pre p {
margin-bottom: 30px;
font-size: 1.6rem;
text-align: center;
}
.explanation-contents .explanation-cg h3,
.explanation-contents .explanation-vr h3,
.explanation-contents .explanation-pre h3 {
margin-bottom: 30px;
font-size: 3.6rem;
text-align: center;
}
.explanation-contents .explanation-cg .swiper-button-prev,
.explanation-contents .explanation-cg .swiper-button-next,
.explanation-contents .explanation-pre .swiper-button-prev,
.explanation-contents .explanation-pre .swiper-button-next {
--swiper-navigation-color: #fff;
text-rendering: auto;
}
.explanation-contents .explanation-cg .swiper-pagination-bullet-active,
.explanation-contents .explanation-pre .swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
.explanation-contents p.caption {
font-size: 14px;
margin-top: 24px;
font-weight: bold;
}
.explanation-cg .gallery-list li::before,
.explanation-pre .gallery-list li::before {
content: initial;
}
.explanation-cg .gallery-list,
.explanation-pre .gallery-list {
display: flex;
flex-wrap: wrap;
padding-top: 24px;
}
.explanation-cg .gallery-list li,
.explanation-pre .gallery-list li {
width: 48%;
margin-right: 2%;
}
.explanation-cg .gallery-list li:nth-of-type(2n),
.explanation-pre .gallery-list li:nth-of-type(2n) {
margin-right: 0;
}
@media screen and (min-width: 678px) and (max-width: 1260px) {
.header-nav {
margin-inline: 20px;
}
.header-nav li:not(:last-of-type) {
margin-right: 10px;
}
.header-cv-login {
margin: 5px 15px 5px 5px;
padding: 5px 5px;
min-width: auto;
font-size: 1.4rem;
}
.header-cv-operation,
.header-cv-document {
padding-inline: 10px;
min-width: auto;
}
.header-cv-operation:not(:last-of-type),
.header-cv-document:not(:last-of-type) {
margin-right: 10px;
}
.header-nav-main {
flex-wrap: wrap;
row-gap: 10px;
}
}
@media screen and (min-width: 678px) and (max-width: 950px) {
.header-logo {
width: 180px;
}
.header-nav-main a {
font-size: 1.4rem;
}
.header-cv-login {
font-size: 1.2rem;
}
.header-cv-operation,
.header-cv-document {
font-size: 1.2rem;
}
}
@media screen and (min-width: 678px) and (max-width: 850px) {
.header-inner {
margin-inline: 10px;
}
.header-nav {
margin-inline: 10px;
}
.header-nav li:not(:last-of-type) {
margin-right: 5px;
}
.header-nav-main a {
font-size: 1.2rem;
}
.header-cv-login {
margin-right: 5px;
}
.header-cv-login img {
width: 10px;
}
}
@media screen and (max-width: 677px) {
.explanation-service-sp {
margin-top: 40px;
}
.explanation-cg .gallery-list,
.explanation-pre .gallery-list {
display: block;
}
.explanation-cg .gallery-list li,
.explanation-pre .gallery-list li {
width: 100%;
margin-right: 0;
}
}
.explanation-contents .explanation-vr figure {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.explanation-contents .explanation-vr figure iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modaal-content-container .explanation-vr:nth-of-type(1) {
margin-bottom: 80px;
}
.modaal-content-container .explanation-vr figure {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.modaal-content-container .explanation-vr figure iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.explanation-cv {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 60px 200px;
}
.explanation-contents .explanation-service-sp {
display: none;
}
.explanation-contents .explanation-service {
position: relative;
padding-top: 100px;
padding-bottom: 100px;
}
.explanation-contents .explanation-service .service-button-cg {
position: absolute;
top: 332px;
left: 60px;
}
.explanation-contents .explanation-service .service-button-pre {
position: absolute;
top: 500px;
left: 398px;
}
.explanation-contents .explanation-service .service-button-vr {
position: absolute;
top: 332px;
left: 888px;
}
.explanation-contents #explanation-service-cg {
display: none;
}
.explanation-contents #explanation-service-pre {
display: none;
}
.explanation-contents #explanation-service-vr {
display: none;
}
.explanation-contents .explanation-cg {
display: none;
}
.explanation-contents .explanation-pre {
display: none;
}
.explanation-contents .explanation-vr {
display: none;
}
.explanation-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom: 30px;
text-align: center;
}
.explanation-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modaal-content-container h3 {
margin-bottom: 30px;
font-size: 3.6rem;
text-align: center;
}
.modaal-content-container p {
margin-bottom: 30px;
font-size: 1.6rem;
text-align: center;
}
.result-contents {
padding-top: 60px;
padding-bottom: 110px;
}
.result-contents ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.result-contents li {
width: 30%;
}
.result-contents li figure {
height: 176px;
text-align: center;
}
.result-contents li p {
width: 80%;
margin-right: auto;
margin-left: auto;
font-size: 1.6rem;
}
.message-contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 180px;
}
.message-contents .message-pic {
position: relative;
width: 50%;
padding-top: 41%;
}
.message-contents .message-pic img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto; }
.message-contents .message-wrap {
width: 50%; padding-left: 80px;
}
.message-contents .message-ttl {
position: relative;
margin-bottom: 70px;
padding-left: 28px; font-size: 4rem;
font-weight: 400;
letter-spacing: 0.11em;
}
.message-contents .message-ttl::before {
display: inline-block;
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 30px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ed6d33;
vertical-align: middle;
content: "";
}
.message-contents .message-box {
margin-bottom: 46px;
}
.message-contents .message-box h3 {
margin-bottom: 5px;
font-size: 4rem;
}
.message-contents .message-box h3 rt {
margin-bottom: 0.5em;
-webkit-transform: translateY(-0.5em);
transform: translateY(-0.5em); font-size: 1.4rem;
font-weight: 400;
}
.message-contents .message-box h3 span {
margin-left: 16px;
font-size: 1.4rem;
font-weight: 500;
}
.message-contents .message-box p {
font-size: 1.6rem;
}
.message-contents #acMenu dt {
display: block;
width: 90%;
height: 50px;
line-height: 50px;
text-align: left;
border-bottom: #666 1px solid;
font-size: 16px;
cursor: pointer;
position: relative;
}
.message-contents #acMenu dt::after {
content: "＋";
position: absolute;
right: 10px;
top: 5px;
}
#acMenu dd {
background: #fff6ef;
width: 90%;
height: auto;
line-height: 2;
text-align: left;
padding: 17px;
font-size: 14px;
margin-bottom: 24px;
display: none;
}
#acMenu dt.active::after {
content: "−";
}
@media screen and (max-width: 677px) {
.message-contents #acMenu dt,
.message-contents #acMenu dd {
width: 100%;
}
}
.feature-contents {
}
.feature-contents .feature-plan-link,
.information-contents .feature-plan-link {
text-align: center;
margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
.feature-contents .feature-plan-link,
.information-contents .feature-plan-link {
margin-bottom: 37px;
}
}
.feature-points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 59px 22px;
margin-bottom: 30px;
}
.feature-points > li {
display: flex;
flex-direction: column; gap: 8px;
position: relative;
padding: 35px 24px;
background-color: #ffffff;
}
.feature-points__head {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0;
font-size: 2.4rem;
min-height: calc(2.3em + 24px);
}
.feature-points__body {
text-align: left;
}
.feature-points > li .numbering {
display: flex;
align-items: center;
gap: 8px;
position: absolute;
top: 0;
left: 14px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #ed6d33; font-size: 2.4rem;
font-weight: 400;
}
.numbering_img {
display: inline-block;
}
.feature-points > li h3 {
font-size: 2.4rem;
font-weight: 700;
line-height: 2.8rem;
text-align: center;
}
.feature-points > li p {
line-height: 1.7;
font-size: 1.6rem;
}
.feature-points-img {
margin-bottom: 5px;
}
.feature-plan-flow-contents {
margin-top: 120px;
padding: 80px 0 120px;
}
.feature-plan-flow-contents > :first-child { margin-top: 0 !important; }
.feature-plan-flow-contents > :last-child { margin-bottom: 0 !important; }
.feature-plan-flow-contents p.project {
text-align: right;
font-size: 16px;
font-weight: bold;
padding-bottom: 32px;
}
.feature-plan-flow-contents p.project a {
text-decoration: underline;
}
.feature-plan-flow-contents p.caution {
text-align: right;
font-size: 16px;
}
.plan-contents {
padding-bottom: 60px;
}
.plan-contents h2 {
margin-bottom: 26px;
color: #004f98;
font-size: 2.8rem;
text-align: center;
}
.plan-contents ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.plan-contents li {
width: 48%;
margin-bottom: 37px;
padding: 40px 0;
background-color: #ffffff;
}
.plan-contents li h3 {
margin-bottom: 10px;
color: #004f98;
font-size: 2.4rem;
text-align: center;
}
.plan-contents li p {
font-size: 16px;
text-align: center;
}
.flow-contents {
padding-top: 150px;
padding-bottom: 110px;
}
.flow-contents .flow-list {
margin-bottom: 60px;
}
.flow-contents .flow-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 400px;
padding: 65px 35px;
}
.flow-contents .flow-box::before, .flow-contents .flow-box::after {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: repeat-x;
background-size: 10px 1px;
content: "";
}
.flow-contents .flow-box::after {
background-image: linear-gradient(to right, #b2b2b2, #b2b2b2 4px, transparent 4px, transparent 10px);
background-position: bottom;
}
.flow-contents .flow-box:first-of-type::before {
background-image: linear-gradient(to right, #b2b2b2, #b2b2b2 4px, transparent 4px, transparent 10px);
background-position: top;
}
.flow-contents .flow-box:nth-of-type(2n + 1) {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flow-contents .flow-box:nth-of-type(2n) {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flow-contents .flow-box .flow-pic {
width: 40%;
}
.flow-contents .flow-box:nth-of-type(1) .flow-pic {
width: 30%;
}
.flow-contents .flow-box:nth-of-type(2) .flow-pic {
width: 50%;
}
.flow-contents .flow-box .flow-copy {
width: 50%;
}
.flow-contents .flow-box .flow-numbering {
color: #ed6d33; font-size: 2rem;
font-weight: 400;
line-height: 1em;
}
.flow-contents .flow-box .flow-title {
margin-bottom: 15px;
font-size: 2.4rem;
font-weight: 700;
}
.flow-contents .flow-box li {
position: relative;
padding-left: 1.2em;
font-size: 1.6rem;
line-height: 1.75em;
}
.flow-contents .flow-box li::before {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #004f98;
content: "";
}
.introduction-contents {
padding-bottom: 110px;
}
.introduction-contents .introduction-ttl {
margin-top: 86px;
margin-bottom: 10px;
font-size: 2.4rem;
text-align: center;
}
.introduction-contents .introduction-ttl span {
font-size: 1.6rem;
}
.introduction-contents figure img {
width: 100%;
}
.work-contents {
padding-top: 60px;
padding-bottom: 90px;
}
.work-contents .work-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 60px;
}
.work-contents .work-box figure {
width: 45%;
}
.work-contents .work-box .work-box-copy {
width: 60%;
padding-left: 30px;
}
.work-contents .work-box .work-box-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 20px;
}
.work-contents .work-box .work-box-title span {
position: relative;
padding-left: 24px;
font-size: 1.6rem;
}
.work-contents .work-box .work-box-title span::before {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 16.88px;
height: 22.51px;
margin-right: 9.5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/works_map_marker.png);
background-repeat: no-repeat;
content: "";
}
.work-contents .work-box p {
margin-bottom: 20px;
font-size: 1.6rem;
}
.fee-contents {
padding-top: 60px;
padding-bottom: 100px;
}
.fee-contents table {
width: 60%;
margin: 0 auto;
margin-bottom: 17.5px;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
}
.fee-contents table thead th:nth-of-type(1) {
width: 100%;
max-width: 100%;
background-color: #f8f8f8;
}
.fee-contents table.second {
margin-top: 60px;
}
.fee-contents .plan {
padding: 20px 20px; background-color: #fff;
text-align: center;
vertical-align: top;
}
.fee-contents .plan-title {
display: inline-block;
width: 200px;
margin-bottom: 15px;
padding: 5px 40px;
border-radius: 20px;
color: #ffffff;
font-size: 2rem;
}
.fee-contents .plan-unit {
font-size: 2.2rem;
}
.fee-contents .plan-fee {
font-family: "Roboto";
font-size: 4.4rem;
line-height: 1em;
}
.fee-contents .plan-fee span {
color: #585858;
vertical-align: middle;
}
.fee-contents .plan-fee span:nth-of-type(1) {
margin-right: 10px;
font-family: "Roboto";
font-size: 3.7rem;
}
.fee-contents .plan-fee span:nth-of-type(2) {
margin-left: 10px;
font-family: "Noto Sans JP";
font-size: 1.8rem;
}
.fee-contents .plan figure {
text-align: center;
}
.fee-contents .plan figure img {
display: inline;
}
.fee-contents .plan-add {
font-size: 1.8rem;
}
.fee-contents .plan-addfee {
font-family: "Roboto";
font-size: 2.8rem;
line-height: 1em;
}
.fee-contents .plan-addfee span {
color: #585858;
vertical-align: middle;
}
.fee-contents .plan-addfee span:nth-of-type(1) {
font-family: "Roboto";
font-size: 2.4rem;
}
.fee-contents .plan-addfee span:nth-of-type(2) {
font-family: "Noto Sans JP";
font-size: 1.4rem;
}
.fee-contents table tbody tr {
background-color: #f9f9f9;
}
.fee-contents table tbody tr:nth-child(even) {
background-color: #fff;
}
.fee-contents table tbody td {
position: relative;
text-align: center;
display: table-cell;
width: calc(100% - 380px);
padding: 12px 20px;
font-size: 1.6rem;
font-weight: bold;
}
.fee-contents p.title {
font-size: 2rem;
position: relative;
font-weight: bold;
padding: 12px 20px;
width: 60%;
margin: 0 auto;
border-bottom: 1px solid #5d5f65;
}
.fee-contents p.title:after {
content: "▼";
padding-left: 16px;
}
.fee-contents p.title.active:after {
content: "▲";
padding-left: 16px;
}
.fee-contents table tbody td .annotation {
position: absolute;
top: 50%;
left: 58%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.4rem;
}
.fee-contents table tbody th {
width: 380px;
padding: 12px 20px;
font-size: 1.6rem;
text-align: left;
}
.fee-contents table tbody tr {
border-bottom: 1px solid #5d5f65;
}
.fee-contents .table-title th {
padding-top: 0;
font-size: 2.4rem;
}
.fee-contents .attention {
margin-bottom: 67px;
}
.fee-contents .attention p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 5px;
font-size: 1.4rem;
}
.fee-contents .attention p::before {
margin-right: 5px;
content: "※";
}
.fee-contents .balloon {
margin-bottom: 40px;
text-align: center;
}
.fee-contents .balloon p {
position: relative;
max-width: 434px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px;
border: 2px solid #00a0e9;
border-radius: 10px;
background: #ecf9fd;
color: #00a0e9;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
}
.fee-contents .balloon p::before, .fee-contents .balloon p::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
content: "";
pointer-events: none;
}
.fee-contents .balloon p::before {
margin-top: 2px;
margin-left: -12px;
border-top-width: 24px;
border-right-width: 12px;
border-bottom-width: 24px;
border-left-width: 12px;
border-color: rgba(0, 160, 233, 0);
border-top-color: #00a0e9;
}
.fee-contents .balloon p::after {
margin-left: -10px;
border-top-width: 20px;
border-right-width: 10px;
border-bottom-width: 20px;
border-left-width: 10px;
border-color: rgba(236, 249, 253, 0);
border-top-color: #ecf9fd;
}
.information-contents {
padding-top: 80px; }
.information-contents .wrap {
padding-inline: 70px;
}
.information-column {
padding-top: 60px; }
.information-column .wrap h2 {
display: flex;
justify-content: space-around;
}
.information-column .wrap h2.common-ttl {
display: block;
}
@media screen and (max-width: 767px) {
.information-contents .wrap {
padding-right: 10px;
padding-left: 10px;
}
.information-column .wrap h2 {
flex-direction: column;
}
}
.information-message {
padding-top: 60px;
padding-bottom: 160px
}
.information-message .wrap h2 {
text-align: center;
}
.information-contents .information-list {
margin-bottom: 50px;
}
.information-contents .information-box {
padding: 18px 20px;
border-bottom: 1px solid #dedede;
}
.information-contents .information-box:nth-of-type(1) {
border-top: 1px solid #dedede;
}
.information-contents .information-box p {
font-size: 1.6rem;
font-weight: 700;
display: flex;
}
.information-contents .information-box p span {
margin-right: 43px;
font-weight: 400;
display: block;
width: 130px;
}
.information-contents .information-box p a {
display: block;
width: 887px;
}
.cv-contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.cv-contents .cv-image {
position: relative;
width: 50%;
}
.cv-contents .cv-image img {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.cv-contents .cv-copy {
width: 50%;
padding: 58.9px 62px;
background-color: #ed6d33;
color: #ffffff;
}
.cv-contents .cv-copy h2 {
margin-bottom: 20px;
font-size: 3rem;
}
.cv-contents .cv-copy p {
font-size: 1.8rem;
}
.cv-contents .cv-logo {
margin-bottom: 30px;
text-align: left;
} .u-main {
margin-top: 98px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
}
.u-main h1 {
color: #004f98;
width: 960px;
margin: 0 auto;
}
.u-contents {
width: 960px;
margin: 0 auto 100px;
}
.u-contents.single-column {
width: 800px;
margin: 0 auto 100px;
}
.u-contents.single-message {
width: 800px;
margin: 0 auto 100px;
}
.u-contents p.breadcrumbs {
margin-bottom: 42px;
font-size: 14px;
}
.u-contents h2 {
font-size: 20px;
margin-bottom: 32px;
font-weight: bold;
color: #fff;
background: #004f98;
padding: 10px 24px;
border-radius: 6px;
} .com-list .box {
margin-bottom: 40px;
}
.com-list .box .title-wrap {
display: flex;
align-items: center;
}
.com-list .box .title-wrap .logo {
margin-right: 4%;
height: 50px;
}
.com-list .box .title-wrap .logo img {
width: auto;
height: 50px;
}
.com-list .box .title-wrap .c-name {
font-size: 18px;
font-weight: bold;
color: #004f98;
}
.com-list .box .title-wrap {
padding-bottom: 6px;
margin-bottom: 16px;
border-bottom: 2px solid #004f98;
}
.com-list .box dl {
display: flex;
}
.com-list .box dt {
font-size: 16px;
font-weight: bold;
padding: 6px 0;
color: #004f98;
width: 140px;
text-align: left;
}
.com-list .box dd {
width: 820px;
font-size: 16px;
padding: 6px 0;
text-align: left;
}
.com-list .box dd svg {
width: 14px;
vertical-align: middle;
}
.com-list .box dd a {
text-decoration: underline;
color: #004f98;
}
.com-list .box dd.tel a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
.tab-area {
display: flex;
justify-content: space-around;
background-color: #efefef;
cursor: pointer;
}
.tab-area .tab {
width: calc(100% / 9);
text-align: center;
color: #333;
border-right: 1px solid #50637b;
border-left: 1px solid #fff;
font-size: 14px;
padding: 10px 0;
}
.tab-area .tab.active,
.tab-area .tab:hover {
background-color: #004f98;
color: #fff;
}
.tab-area .tab:nth-last-of-type(1) {
border-right: none;
}
.content-area {
font-size: 30px;
text-align: center;
margin-bottom: 100px;
}
.content-area .content {
display: none;
}
.content-area .content.show {
margin-top: 50px;
display: block;
}
p.notmatch {
font-size: 16px;
}
.sub-tab-area,
.sub2-tab-area,
.sub3-tab-area,
.sub4-tab-area,
.sub5-tab-area,
.sub6-tab-area,
.sub7-tab-area,
.sub8-tab-area {
display: flex;
justify-content: center;
cursor: pointer;
}
.sub-tab-area .sub-tab,
.sub2-tab-area .sub2-tab,
.sub3-tab-area .sub3-tab,
.sub4-tab-area .sub4-tab,
.sub5-tab-area .sub5-tab,
.sub6-tab-area .sub6-tab,
.sub7-tab-area .sub7-tab,
.sub8-tab-area .sub8-tab {
padding: 0 26px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #333;
border-right: 1px solid #50637b;
font-weight: bold;
}
.sub-tab-area .sub-tab:hover,
.sub-tab-area .sub-tab.subactive,
.sub2-tab-area .sub2-tab.sub2active,
.sub3-tab-area .sub3-tab.sub3active,
.sub4-tab-area .sub4-tab.sub4active,
.sub5-tab-area .sub5-tab.sub5active,
.sub6-tab-area .sub6-tab.sub6active,
.sub7-tab-area .sub7-tab.sub7active,
.sub8-tab-area .sub8-tab.sub8active {
color: #004f98;
}
.sub-content-area,
.sub2-content-area,
.sub3-content-area,
.sub4-content-area,
.sub5-content-area,
.sub6-content-area,
.sub7-content-area,
.sub8-content-area {
font-size: 30px;
text-align: center;
}
.sub-content-area .sub-content,
.sub2-content-area .sub2-content,
.sub3-content-area .sub3-content,
.sub4-content-area .sub4-content,
.sub5-content-area .sub5-content,
.sub6-content-area .sub6-content,
.sub7-content-area .sub7-content,
.sub8-content-area .sub8-content {
display: none;
}
.sub-content-area .sub-content.show,
.sub2-content-area .sub2-content.show,
.sub3-content-area .sub3-content.show,
.sub4-content-area .sub4-content.show,
.sub5-content-area .sub5-content.show,
.sub6-content-area .sub6-content.show,
.sub7-content-area .sub7-content.show,
.sub8-content-area .sub8-content.show {
margin-top: 50px;
display: block;
}
.footer {
margin-top: 140px;
padding-top: 30px;
padding-bottom: 43px;
border-top: 1px solid #333;
}
.footer .footer-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
gap: 100px;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
}
.footer .footer-contact { }
.footer .footer-contact figure {
margin-bottom: 20px;
}
.footer .footer-nav {
flex-grow: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.footer .footer-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
margin: 0;
}
.footer .footer-nav li {
font-size: 1.6rem;
}
.footer .footer-cv a {
padding: 15px 24px;
}
.copylight {
padding: 10px 0;
text-align: center;
}
.copylight small {
font-size: 1.4rem;
}
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
@media screen and (max-width: 959px) {
.under-lg-nodisp {
display: none;
}
.under-lg-disp {
display: inline;
}
.feature-points > li {
padding-inline: 20px;
}
.feature-points > li h3 {
font-size: clamp(1.7rem, -6.05vw + 2.4rem, 2.4rem);
}
}
@media screen and (max-width: 520px) {
.under-sm-disp {
display: inline;
}
}
@media screen and (max-width: 767px) {
.pc-no {
display: inline;
}
.sp-no {
display: none;
}
.wrap {
padding-right: 10px;
padding-left: 10px;
}
.cv-document {
margin-bottom: 50px;
}
.common-ttl {
margin-bottom: 30px;
font-size: 2.4rem;
}
.common-ttl span {
font-size: 1.4rem;
}
.common-ttl img {
width: 60%;
}
.common-ttl02 {
margin-bottom: 30px;
text-align: center;
font-size: 2rem;
}
.common-link {
margin-right: 34px;
text-align: right;
}
.common-btn a {
font-size: 2.2rem;
}
.header {
height: 58px;
}
.header-inner {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
margin-right: 5%;
margin-left: 5%;
}
.header-logo {
width: 60%;
}
.header-logo a {
display: flex;
font-size: 16px;
align-items: center;
}
.header-logo a img {
zoom: 0.5;
}
.header-nav {
display: block;
visibility: hidden;
z-index: 100;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 90%;
margin: 0;
padding: 110px 60px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
background: #fff;
color: #fafafa;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.header-nav-main {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0;
}
.header-nav li:not(:last-of-type) {
margin-right: 0;
margin-bottom: 10px;
}
.header-nav-main .menu-item-home {
display: block;
}
.header-nav-main li.menu-item-17 {
display: block;
}
.header-nav-main a {
font-size: 1.5rem;
}
.header-nav-main a::before {
display: block;
position: absolute;
top: 50%;
left: -30px;
width: 14px;
height: 2px;
background: #004f98;
vertical-align: middle;
content: "";
}
.header-nav-sub {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 30px;
}
.header-nav-sub a {
display: inline-block;
position: relative;
color: #004f98;
font-size: 1.5rem;
font-weight: 700;
line-height: 2em;
text-decoration: none;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.header-nav-sub a::before {
display: block;
position: absolute;
top: 50%;
left: -30px;
width: 14px;
height: 2px;
background: #004f98;
vertical-align: middle;
content: "";
}
.header-cv {
display: none;
}
.header-nav .header-cv {
display: block;
}
.header-hamburger {
display: inline-block;
}
.aside {
display: grid;
grid-template-columns: repeat(3, 33.333%);
top: auto;
bottom: 0;
width: 100%;
transform: translateY(101%);
border-radius: 0;
background-color: rgba(255, 255, 255, 0.9);
transition: transform 0.3s;
}
.aside.is-active {
transform: translateY(0%);
}
.aside .aside-cv-trial {
display: none;
}
.aside .aside-cv-operation,
.aside .aside-cv-document,
.aside .aside-cv-trial02 {
margin: 0;
padding: 2px 2px;
width: 100%;
min-height: 46px;
line-height: 1.2;
text-align: center;
font-size: 1.4rem;
font-weight: normal;
border-radius: 0;
}
.aside .aside-cv-trial02 {
display: flex;
justify-content: center;
align-items: center;
writing-mode: initial;
letter-spacing: 0;
}
.aside .aside-cv-operation,
.aside .aside-cv-document {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.aside .aside-cv-document:only-child {
width: calc(100% - 20px);
}
.main {
height: 375px;
padding-top: 58px;
}
.top-contents h2 {
font-size: 3rem;
}
.top-contents p {
font-size: 1.6rem;
width: 92%;
margin: 0 auto;
}
.explanation-contents {
padding-top: 80px;
}
.service_flow {
grid-template-columns: 1fr;
border-top: none;
}
.service_flow > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin: 0;
margin-bottom: 50px;
}
.service_flow > li::before {
z-index: 2000;
width: 33px;
height: 34px;
border-radius: 4px;
background-size: cover;
}
.service_flow > li:nth-of-type(1)::before {
left: 35%;
}
.service_flow > li:nth-of-type(2)::before {
left: 35%;
-webkit-transform: none;
transform: none;
}
.service_flow > li:nth-of-type(8) {
margin-bottom: 0px;
}
.service_flow > li:nth-of-type(3)::before {
left: 35%;
}
.service_flow > li figure {
z-index: 1000;
position: relative;
width: 35%;
padding-top: 0;
}
.service_flow > li p {
width: 65%;
padding-top: 40px;
}
.explanation-contents .service_flow li,
.explanation-contents .service_flow li figure img {
width: auto;
}
.explanation-contents .explanation-cg h3,
.explanation-contents .explanation-vr h3,
.explanation-contents .explanation-pre h3 {
margin-bottom: 20px;
font-size: 2.4rem;
}
.explanation-contents .explanation-service-sp {
display: block;
}
.explanation-contents .explanation-service {
display: none;
}
.explanation-contents .explanation-cg,
.explanation-contents .explanation-pre,
.explanation-contents .explanation-vr {
margin-bottom: 0;
}
.explanation-contents .explanation-cg {
display: block;
}
.explanation-contents .explanation-pre {
display: block;
}
.explanation-contents .explanation-vr {
display: block;
}
.explanation-contents p.caption {
font-size: 13px;
margin-top: 16px;
font-weight: bold;
}
.explanation-cv {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: -5%;
margin-left: -5%;
padding: 60px 0;
}
.result-contents {
padding-top: 20px;
padding-bottom: 80px;
}
.result-contents ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.result-contents li {
width: 100%;
margin-bottom: 30px;
}
.message-contents {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0;
padding-bottom: 120px;
}
.message-contents .message-pic {
width: 100%;
padding-top: 80%;
}
.message-contents .message-wrap {
width: 100%;
padding: 15px 5%;
}
.message-contents .message-ttl {
margin-bottom: 30px;
padding-left: 10px;
font-size: 2.8rem;
}
.message-contents .message-ttl::before {
height: 23px;
}
.message-contents .message-box {
margin-bottom: 30px;
}
.message-contents .message-box h3 {
font-size: 3rem;
}
.message-contents .message-box h3 rt {
font-size: 1.2rem;
}
.feature-contents {
}
.feature-plan-flow-contents {
padding-bottom: 60px;
}
.feature-points {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 0;
}
.feature-points__head {
flex-direction: column;
min-height: auto;
}
.feature-points > li,
.feature-points > li:nth-of-type(2) {
width: 100%;
padding: 20px 5px;
}
.feature-points > li:last-child {
margin-bottom: 0;
}
.feature-points > li[data-aos-delay] {
transition-delay: .5s !important;
}
.feature-points > li .numbering {
position: relative;
top: 0;
left: 0;
-webkit-transform: none;
transform: none;
font-size: 1.8rem;
text-align: center;
}
.feature-points > li h3 {
display: block;
font-size: 2.4rem;
}
.feature-plan-flow-contents p.project {
font-size: 14px;
padding-bottom: 32px;
}
.plan-contents {
padding-bottom: 40px;
}
.plan-contents ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.plan-contents li {
width: 100%;
padding: 20px 0 28px;
}
.flow-contents {
padding-top: 80px;
padding-bottom: 50px;
}
.flow-contents .flow-box {
height: auto;
padding: 20px 0 65px;
}
.flow-contents .flow-box:nth-of-type(2n + 1) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flow-contents .flow-box:nth-of-type(2n) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flow-contents .flow-box .flow-pic {
width: 100%;
margin-right: auto;
margin-bottom: 45px;
margin-left: auto;
text-align: center;
}
.flow-contents .flow-box:nth-of-type(1) .flow-pic {
width: 80%;
}
.flow-contents .flow-box:nth-of-type(2) .flow-pic {
width: 100%;
}
.flow-contents .flow-box .flow-copy {
width: 100%;
}
.flow-contents .flow-box .flow-numbering {
font-size: 1.8rem;
}
.introduction-contents {
padding-bottom: 100px;
}
.introduction-contents .introduction-ttl {
font-size: 2.2rem;
}
.work-contents .work-box {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.work-contents .work-box figure {
width: 100%;
margin-bottom: 30px;
}
.work-contents .work-box .work-box-copy {
width: 100%;
padding: 0;
}
.work-contents .work-box .work-box-title {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.work-contents .work-box .work-box-title img {
width: 50%;
}
.work-contents .work-box .work-box-title span {
margin-top: 10px;
}
.fee-contents {
padding-top: 60px;
} .fee-contents .plan {
display: block;
width: 100%;
border-bottom: 50px solid #f8f8f8;
border-left: none;
padding: 2%;
}
.fee-contents .plan-title {
width: 133px;
padding: 5px 0;
font-size: 1.6rem;
}
.fee-contents .plan-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.fee-contents .plan-flex-evenly {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.fee-contents .plan-unit {
margin-right: 20px;
font-size: 1.4rem;
}
.fee-contents .plan figure {
margin-top: 10px;
margin-bottom: 10px;
}
.fee-contents .plan-fee {
font-size: 2.4rem;
}
.fee-contents .plan-fee span:nth-of-type(1) {
font-size: 2.7rem;
}
.fee-contents .plan-fee span:nth-of-type(2) {
font-size: 1.2rem;
}
.fee-contents .plan-add {
font-size: 1.4rem;
}
.fee-contents .plan-addfee {
font-size: 2.4rem;
} .fee-contents table {
width: 100%;
}
.fee-contents table tbody tr {
width: 100%;
}
.fee-contents table tbody td .annotation {
top: auto;
bottom: 0;
left: 75%;
}
.fee-contents table thead th:nth-of-type(1) {
width: 100%;
}
.fee-contents table tbody th {
width: 70%;
padding: 20px 2%;
font-size: 1.4rem;
}
.fee-contents table tbody td {
width: 30%;
padding: 12px 2%;
}
.fee-contents p.title {
width: 100%;
font-size: 4.3vw;
position: relative;
margin-bottom: 0;
font-weight: bold;
padding: 12px 2%;
}
.fee-contents .table-title th {
font-size: 2.2rem;
}
.fee-contents .attention {
margin-bottom: 30px;
}
.fee-contents .balloon p {
font-size: 2rem;
}
.information-contents {
padding-top: 50px;
}
.information-column {
padding-top: 50px;
padding-bottom: 50px;
}
.information-message {
padding-top: 50px;
padding-bottom: 50px;
}
.information-contents .information-box {
padding: 15px 0;
}
.information-contents .information-box p time {
font-size: 1.4rem;
} .u-main {
margin-top: 58px;
height: initial;
}
.u-main h1 {
font-size: 28px;
margin: 0 16px;
width: 100%;
}
.u-contents, .u-contents.single-column {
width: 92%;
margin: 0 auto;
}
.u-contents, .u-contents.single-message {
width: 92%;
margin: 0 auto;
}
.u-contents p.breadcrumbs {
font-size: 13px;
}
.com-list .box dl {
display: block;
border-bottom: 1px dotted #ccc;
margin-bottom: 16px;
}
.com-list .box dt {
width: 100%;
padding: 0 5px 6px;
}
.com-list .box dd {
width: 100%;
padding: 0 6px 10px;
} .tab-area {
flex-wrap: wrap;
background: none;
}
.tab-area .tab {
width: 50%;
background: #efefef;
text-align: center;
color: #333;
border-top: 1px solid #50637b;
border-bottom: 1px solid #fff;
font-size: 14px;
padding: 10px 0;
border-right: none;
border-left: none;
}
.tab-area .tab:nth-of-type(2n+1) {
border-left: 1px solid #fff;
}
.tab-area .tab:nth-of-type(2n) {
border-right: 1px solid #50637b;
}
.tab-area .tab:nth-of-type(1) {
width: 100%;
}
.sub-tab-area,
.sub2-tab-area,
.sub3-tab-area,
.sub4-tab-area,
.sub5-tab-area,
.sub6-tab-area,
.sub7-tab-area,
.sub8-tab-area {
flex-wrap: wrap;
justify-content: flex-start;
}
.sub-tab-area .sub-tab,
.sub2-tab-area .sub2-tab,
.sub3-tab-area .sub3-tab,
.sub4-tab-area .sub4-tab,
.sub5-tab-area .sub5-tab,
.sub6-tab-area .sub6-tab,
.sub7-tab-area .sub7-tab,
.sub8-tab-area .sub8-tab {
width: calc(100% / 3);
padding: 2%;
height: auto;
line-height: 1;
text-align: center;
font-size: 14px;
color: #333;
border-right: none;
font-weight: bold;
}
.com-list .box .title-wrap .c-name {
font-size: 17px;
}
.com-list .box .title-wrap .logo img {
width: auto;
height: 25px;
}
.com-list .box dt {
font-size: 14px;
}
.com-list .box dd {
font-size: 14px;
}
.com-list .box dd.tel a {
pointer-events: visible;
text-decoration: underline;
color: #004f98;
}
.com-list .box dd svg {
width: 10px;
height: auto;
}
.cv {
font-size: 18px;
}
.cv-contents {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.cv-contents .cv-image::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
z-index: 2000;
position: absolute;
bottom: -1px;
left: 50%;
width: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-right: calc(100vw / 2) solid transparent;
border-bottom: 10vw solid #ed6d33;
border-left: calc(100vw / 2) solid transparent;
content: "";
}
.cv-contents .cv-image {
width: 100%;
padding-top: 60.8%;
}
.cv-contents .cv-copy {
width: 100%;
padding: 42.8px 5% 30px;
text-align: center;
}
.cv-contents .cv-copy h2 {
font-size: 2rem;
}
.cv-contents .cv-logo {
text-align: center;
}
.cv-contents .cv-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.footer .footer-inner {
padding-right: 5%;
padding-left: 5%;
display: none;
}
.footer .footer-contact {
width: 100%;
}
.footer .footer-contact figure {
display: none;
}
.footer .footer-nav {
display: none;
}
.footer .footer-cv {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.copylight {
padding: 10px 10px 70px;
text-align: center;
}
.copylight small {
font-size: 2vw;
}
} .wp-pagenavi {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin: 80px 0;
font-size: 16px;
}
.wp-pagenavi span.current {
background: #212121;
color: #fff;
}
.wp-pagenavi a, .wp-pagenavi span {
border: 1px solid #757575;
color: #757575;
padding: 8px;
width: fit-content;
}
.wp-pagenavi .extend {
border: none;
} .news_wrap {
border-top: 1px solid #dedede;
margin-bottom: 100px;
}
.news_wrap .news_post {
width: 100%;
display: block;
padding: 20px;
border-bottom: 1px solid #dedede;
}
.news_wrap .news_post .title {
font-size: 16px;
font-weight: bold;
margin-left: 20px;
} .u-contents .date {
font-weight: 400;
display: block;
width: 110px;
color: #757575;
font-size: 14px;
}
.news_wrap .news_post{
display: flex;
align-items: center;
}
.news_wrap .news_post .title{
display: block;
width: 800px;
font-size:15px;
}
@media screen and (max-width: 767px) {
.u-contents .wp-pagenavi a, .u-contents .wp-pagenavi span {
padding: 8px;
}
}
@media screen and (max-width: 677px) {
.news_wrap .news_post{
display: block;
}
.u-contents .date{
display: block;
margin-bottom: 8px;
}
.news_wrap .news_post .title{
width: 100%;
margin-left: 0;
}
}
.u-contents .p-content {
font-size: 16px;
} .faq_wrap .faq_post {
border: 1px solid #dedede;
display: block;
padding: 15px;
font-size: 16px;
font-weight: bold;
margin-bottom: 24px;
}
.faq_wrap .faq_post .title {
color: #004f98;
text-decoration: underline;
} .answer {
width: 840px;
border: 1px solid #dedede;
padding: 30px 30px 30px 60px;
margin: 90px auto 0;
position: relative;
font-size: 16px;
}
@media screen and (max-width: 677px) {
.news_wrap a{
display: block;
}
.answer {
width: 100%;
padding: 60px 30px 30px 30px;
margin: 0 auto;
}
}
.answer:before {
content: "";
background: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/page/icon-a.png);
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 15px;
left: 15px;
} .w_wrap {
display: flex;
flex-wrap: wrap;
}
.w_wrap .w_post {
width: 310px;
margin-right: 15px;
margin-bottom: 100px;
border: 1px solid #dedede;
padding: 10px;
}
@media screen and (max-width: 677px) {
.w_wrap .w_post {
width: 100%;
margin-right: 0;
}
}
.w_wrap .w_post:nth-of-type(3n) {
margin-right: 0;
}
.w_wrap .w_post .title {
font-size: 20px;
line-height: 1.1;
font-weight: bold;
margin: 4px 0;
color: #004f98;
}
.w_wrap .w_post .c_name {
font-size: 16px;
}
.w_wrap .w_post .sample {
font-size: 16px;
line-height: 1.2;
margin: 4px 0;
}
.w_wrap .w_post img {
margin: 8px 0;
}
.w_wrap .w_post .topost {
text-align: right;
font-size: 14px;
text-decoration: underline;
} .s-content {
margin-bottom: 100px;
width: 740px;
margin: 0 auto;
}
@media screen and (max-width: 677px) {
.s-content {
width: initial;
}
.information-contents .information-box p {
display: block;
}
.information-contents .information-box p span {
width: 100%;
}
.information-contents .information-box p a {
width: 100%;
}
}
.s-content p {
font-size: 16px;
margin: 16px 30px;
}
@media screen and (max-width: 677px) {
.s-content p {
margin: 16px 0;
}
}
.s-content h2 {
background: white;
color: #0097A7;
border-bottom: 2px solid #0097A7;
border-radius: 0;
margin: 16px 30px;
padding: 10px 0;
}
@media screen and (max-width: 677px) {
.s-content h2 {
margin: 16px 0;
}
}
.s-content .company_info {
text-align: left;
}
.s-content .company_info p {
margin: 0;
}
.s-content .company_addr {
position: relative;
text-indent: 17px;
}
.s-content .company_addr:before {
content: "";
background: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/page/point.png);
width: 13px;
height: 19px;
display: block;
position: absolute;
top: 3px;
}
.s-content .company_site a {
text-decoration: underline;
word-break: break-all;
}
.totop {
text-align: center;
margin: 100px 0;
}
.totop a {
padding: 22px 70px;
background: #FF9800;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
color: white;
} p.notfound {
font-size: 16px;
text-align: center;
width: 90%;
margin: 0 auto 40px;
}
p.notfound span {
Font-size: 22px;
Font-weight: bold;
Margin-bottom: 24px;
display: block;
}
.fortop {
text-align: center;
margin-bottom: 40px;
}
.fortop a {
display: block;
width: 230px;
padding: 12px;
text-align: center;
color: #fff;
background: #004f98;
border: 1px solid #004f98;
margin: 24px auto;
font-size: 16px;
color: #fff;
}
.fortop a:hover {
background: #fff;
color: #004f98;
}
@media screen and (max-width:767px) {
p.notfound {
font-size: 15px;
text-align: center;
width: 90%;
margin: 24px auto 40px;
}
p.notfound span {
Font-size: 18px;
Font-weight: bold;
Margin-bottom: 24px;
display: block;
}
.fortop {
text-align: center;
margin-bottom: 40px;
}
.fortop a {
display: block;
width: 230px;
padding: 12px;
text-align: center;
color: #fff;
background: #004f98;
border: 1px solid #004f98;
margin: 24px auto;
font-size: 14px;
color: #fff !important;
}
.fortop a:hover {
background: #fff;
color: #004f98 !important;
}
}
.news-content p {
margin: 8px 0;
line-height: 1.6;
}
.news-content h2 {
margin: 16px 0;
}
.news-content a {
text-decoration: underline;
color: #ed6d33;
} .s_02 {
display: none;
}
@media screen and (max-width:767px) {
.s_02 {
display: block;
}
}
.s_02 .accordion_one {
max-width: 100%;
margin: 8px auto;
}
.s_02 .accordion_one .accordion_header {
background-color: #004f98;
color: #fff;
font-size: 26px;
font-weight: bold;
padding: 20px 11%;
text-align: center;
position: relative;
z-index: +1;
cursor: pointer;
transition-duration: 0.2s;
}
.s_02 .accordion_one:nth-of-type(2) .accordion_header {
background-color: #004f98;
}
.s_02 .accordion_one:nth-of-type(3) .accordion_header {
background-color: #004f98;
}
.s_02 .accordion_one .accordion_header:hover {
opacity: .8;
}
.s_02 .accordion_one .accordion_header .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 5%;
width: 40px;
height: 40px;
margin-top: -20px;
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
}
.s_02 .accordion_one .accordion_header .i_box .one_i {
display: block;
width: 18px;
height: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.s_02 .accordion_one .accordion_header.open .i_box {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.s_02 .accordion_one .accordion_header .i_box .one_i:before, .s_02 .accordion_one .accordion_header .i_box .one_i:after {
display: flex;
content: '';
background-color: #fff;
width: 18px;
height: 4px;
position: absolute;
top: 7px;
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: center center;
}
.s_02 .accordion_one .accordion_header .i_box .one_i:before {
width: 4px;
height: 18px;
top: 0;
left: 7px;
}
.s_02 .accordion_one .accordion_header.open .i_box .one_i:before {
content: none;
}
.s_02 .accordion_one .accordion_header.open .i_box .one_i:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.s_02 .accordion_one .accordion_inner {
display: none;
padding: 30px 30px;
border-left: 2px solid #004f98;
border-right: 2px solid #004f98;
border-bottom: 2px solid #004f98;
box-sizing: border-box;
}
.s_02 .accordion_one:nth-of-type(2) .accordion_inner {
border-left: 2px solid #004f98;
border-right: 2px solid #004f98;
border-bottom: 2px solid #004f98;
}
.s_02 .accordion_one:nth-of-type(3) .accordion_inner {
border-left: 2px solid #004f98;
border-right: 2px solid #004f98;
border-bottom: 2px solid #004f98;
}
.s_02 .accordion_one .accordion_inner p.txt_a_ac {
margin: 0;
}
@media screen and (max-width: 1024px) {
.s_02 .accordion_one .accordion_header {
font-size: 18px;
}
.s_02 .accordion_one .accordion_header .i_box {
width: 30px;
height: 30px;
margin-top: -15px;
}
}
@media screen and (max-width: 767px) {
.s_02 .accordion_one .accordion_header {
font-size: 16px;
text-align: left;
padding: 15px 60px 15px 15px;
}
}
.thumbnail-content {
text-align: center;
}
.column_mv {
text-align: center;
margin: 42px 0;
}
.column_wrap {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
.column_wrap {
flex-direction: column;
align-items: center;
}
}
.column_wrap .column_post {
padding: 21px;
width: 300px;
display: block;
box-sizing: border-box;
border: 1px solid #E6E6E6;
margin-right: 30px;
margin-bottom: 30px;
}
.column_wrap .column_post:nth-of-type(3n){
margin-right: 0;
}
@media screen and (max-width: 767px) {
.column_wrap .column_post {
margin-bottom: 24px;
margin-right: 0px;
}
}
.column_wrap .column_post .title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 16px;
}
.column_wrap .column_post .date {
font-size: 1.4rem;
text-align: right;
width: 100%;
}
.date.author {
width: auto;
}
.mb30 {
margin-bottom: 30px;
}
.mb_YTPBar .buttonBar {
display: none;
}
.sec_movie {
height: 720px;
background: #000;
width: 100%;
padding-top: 98px;
}
@media screen and (max-width: 767px) {
.sec_movie {
height: 100%;
padding-top: 0;
}
}
.sec_movie p {
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
width: 100%;
height: 100%;
}
.sec_movie p img {
width: 40%;
height: auto;
}
@media screen and (max-width: 767px) {
.sec_movie p img {
width: 80%;
}
}
.user-voice {
margin-bottom: 140px;
padding: 50px 80px;
background-color: #d9e5f0;
border-radius: 10px;
}
@media screen and (max-width: 767px) {
.user-voice {
margin: 10px 0;
padding: 35px 15px 15px;
}
}
.user-voice-inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 44px 52px;
background-color: #fff;
}
@media screen and (max-width: 767px) {
.user-voice-inner {
padding: 15px;
}
}
.user-voice-ttl {
margin: -72px auto 12px;
padding: 10px 70px;
line-height: 1.2;
text-align: center;
color: #fff;
font-size: 3.5rem;
background-color: #004F98;
border-radius: 8px;
}
@media screen and (max-width: 767px) {
.user-voice-ttl {
margin: -30px auto 12px;
padding: 10px 30px;
font-size: 2rem;
}
}
.user-voice-detail {
width: 100%;
}
.user-voice-detail > :first-child {
margin-top: 0;
}
.user-voice-dl {
margin-top: 17px;
font-size: 2.1rem;
font-weight: bold;
line-height: 1.47;
}
@media screen and (max-width: 767px) {
.user-voice-dl {
margin-top: 15px;
font-size: 1.4rem;
}
}
.user-voice-dl-ttl {
position: relative;
padding-left: 1.2em;
}
.user-voice-dl-ttl::before {
content: "■";
position: absolute;
top: 0;
left: 0;
color: #004F98;
}
.user-voice-dl-detail {
padding-left: 1.2em;
}
.user-voice-accent-color {
color: #004F98;
}
.top-case {
padding: 80px 0 120px;
}
.top-case h3 {
font-size: 3.0rem;
border-bottom: 4px solid #000;
padding: 0 0 10px;
margin: 55px 0 30px;
}
@media screen and (max-width: 767px) {
.top-case {
padding: 60px 0;
}
.top-case h3 {
font-size: 2.0rem;
margin: 30px 0 20px;
}
}
.top-video {
position:relative;
margin: 55px auto 0;
max-width: 540px;
width: 100%;
}
.top-video iframe {
aspect-ratio: 16/9;
width: 100%;
height: 100%;
}
.feature-plan-flow-contents .caption {
margin-bottom: 40px;
}
.message-intro {
font-size: 2.3rem;
margin: 42px 0;
}
@media screen and (max-width: 767px) {
.message-intro {
font-size: 1.8rem;
}
}
.news-pagenavi {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin: 80px 0;
font-size: 16px;
}
.news-pagenavi-counter {
text-decoration: none;
margin: 2px;
padding: 8px;
color: #757575;
background-color: #fff;
border: 1px solid #757575;
}
.news-pagenavi-page,
.news-pagenavi-prev,
.news-pagenavi-next {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid #757575;
border-radius: 0;
color: #757575;
margin: 2px;
padding: 8px;
cursor: pointer;
}
.news-pagenavi-page.is-current {
color: #fff;
font-weight: bold;
background-color: #212121;
border: 1px solid #212121;
cursor: inherit;
}
.news-pagenavi-prev:disabled,
.news-pagenavi-next:disabled {
display: none;
}
.news-pagenavi-page:not(.is-current):hover,
.news-pagenavi-prev:hover,
.news-pagenavi-next:hover {
opacity: 0.7;
}
.feature-points > li.feature-plan-contents-wide {
width: 100%;
}
.feature-points > li.feature-plan-contents-wide h3 {
text-align: left;
}
.feature-points > li.feature-plan-contents-wide p {
margin-bottom: 1.2em;
text-align: left;
}
.feature-plan-flow {
display: flex;
justify-content: center;
margin: 30px auto;
}
.feature-plan-flow-item {
position: relative;
}
.feature-plan-flow-item::before {
content: '';
display: block;
position: absolute;
top: calc(50% - 16px);
left: 0;
width: 35px;
height: 31px;
background: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/point_arrow.png) no-repeat;
}
.feature-plan-flow-item:first-child::before {
display: none;
}
.feature-plan-flow-item + .feature-plan-flow-item {
margin-left: 50px;
padding-left: 85px;
}
.feature-plan-media {
display: flex;
position: relative;
margin: 0;
}
.feature-plan-media-img {
order:2;
flex-shrink: 0;
margin-top: -92px;
margin-left: -50px;
}
.feature-plan-media-detail {
position: relative;
z-index: 2;
}
.feature-plan-media-detail > :first-child {
margin-top: 0;
}
.feature-plan-media-detail > :last-child {
margin-bottom: 0;
}
.feature-plan-media-detail > :nth-child(n+2) {
padding-right: 50px;
}
.modaal-video-link-wrap {
}
.modaal-video-link {
display: inline-flex;
text-decoration: none !important;
color: #164F98;
background-color: #fff;
border: 2px solid #164F98;
border-radius: 9999px;
box-shadow: none;
text-decoration: underline;
padding: 0 1em;
font-size: 1.6rem;
font-weight: 500;
border-radius: 6px;
opacity: 1 !important;
}
.modaal-video-link:hover {
color: #fff;
background-color: #164F98;
}
.modaal-video-link > span {
display: inline-block;
position: relative;
padding-right: 20px;
}
.modaal-video-link > span::after {
content: '';
display: block;
position: absolute;
top: 0.5em;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 7px;
border-color: transparent transparent transparent #164F98;
}
.modaal-video-link:hover > span::after {
border-color: transparent transparent transparent #fff;
}
@media screen and (max-width: 767px) {
.feature-plan-flow {
margin: 30px auto 0;
}
.feature-plan-flow-item {
width: calc(50% - 15px);
}
.feature-plan-flow-item + .feature-plan-flow-item {
margin-left: 30px;
padding: 0;
}
.feature-plan-flow-item::before {
top: calc(50% - 8px);
left: -25px;
width: 18px;
height: 16px;
background-size: 100% auto;
}
.feature-plan-media {
display: block;
margin: 0;
}
.feature-plan-media::after {
content: '';
display: block;
clear: both;
}
.feature-plan-media-img {
float: right;
margin: -30px 0 0 15px;
width: calc(50% - 15px);
}
.feature-plan-media-detail > :nth-child(n+2) {
padding-right: 0;
}
.modaal-video-link-wrap {
display: flex;
justify-content: center;
padding-left: 0;
}
.modaal-video-wrap {
margin: 0;
}
.modaal-inner-wrapper {
padding-inline: 5%;
}
}
.v-copy-util {
display: flex;
justify-content: space-between;
}
.v-copy-util-main > :first-child,
.v-copy-util-sub > :first-child {
margin-top: 0;
}
.v-copy-util-main > :last-child,
.v-copy-util-sub > :last-child {
margin-bottom: 0;
}
.v-copy-util-main {
flex-shrink: 0;
margin-right: 5%;
}
.v-copy-util-sub {
flex-grow: 1;
}
.cv-tel > a {
display: flex;
flex-direction: column;
padding-left: 55px;
color: #fff;
text-decoration: none;
background: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/common/tel-icon.png) no-repeat 0 50%;
pointer-events: none;
}
.cv-tel-text01 {
line-height: 1.3;
font-size: 3rem;
font-weight: bold;
}
.cv-tel-text02 {
line-height: 1.3;
font-size: 2rem;
}
.cv-tel-text03 {
line-height: 1.5;
font-size: 1.6rem;
}
@media screen and (min-width: 678px) and (max-width: 1260px) {
.v-copy-util {
flex-direction: column;
align-items: center;
}
.v-copy-util-main {
margin-bottom: 20px;
margin-right: 0;
}
}
@media screen and (max-width: 678px) {
.v-copy-util {
flex-direction: column;
align-items: center;
}
.v-copy-util-main {
margin-right: 0;
}
.v-copy-util .cv-document {
margin-bottom: 15px;
}
.cv-tel > a {
pointer-events: initial;
}
}
.top-cv-button-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
margin: 50px auto 0;
}
.top-cv-button {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 420px;
margin: 18px 0;
padding: 27px 30px;
border-radius: 6px;
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
line-height: 2rem;
background-image: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/common/icon_arrow.svg);
background-size: 30px auto;
background-position: right 15px center;
background-repeat: no-repeat;
}
.top-cv-button.is-operation {
background-color: var(--color-accent);
}
.top-cv-button.is-contact {
background-color: var(--color-main01);
}
.top-media-layout {
display: flex;
flex-wrap: wrap;
margin-bottom: 70px;
}
.top-media-layout-video {
flex-shrink: 0;
width: 540px;
}
.top-media-layout-video .caption {
text-align: left;
font-size: 1rem;
}
.top-media-layout-detail {
margin-left: 32px;
width: calc(100% - 572px);
}
.top-media-layout-detail > :last-child {
margin-bottom: 0;
}
.top-media-layout .top-media-layout-title {
margin-bottom: 20px;
line-height: 2;
font-size: 3rem;
text-align: left;
}
.top-media-layout .top-media-layout-title-label {
display: inline-block;
margin-right: 5px;
padding: 2px 15px;
line-height: 1.5;
color: #fff;
font-size: 4rem;
background-color: #ed6d33;
}
.top-media-layout .top-media-layout-text {
text-align: left;
font-size: 1.6rem;
font-weight: normal;
}
.service_layout {
margin: 30px auto 100px;
}
.service_layout-head {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
}
.service_layout-head-item {
width: 300px;
}
.service_layout-def_wrap {
position: relative;
padding-top: 100%;
width: 100%;
height: 0;
border-radius: 300px;
overflow: hidden;
background-color: #D7E3EE;
}
.service_layout-def {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 0;
left: 0;
padding: 0 30px;
width: 100%;
height: 100%;
text-align: center;
}
.service_layout-def > dt {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
color: #144B8F;
font-size: 2.5rem;
font-weight: bold;
}
.service_layout-def > dt::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 15%;
width: 70%;
height: 2px;
background-color: #144B8F;
}
.service_layout-def > dd {
font-size: 2.5rem;
font-weight: normal;
}
.service_layout-body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
padding-inline: 15px;
}
.service_layout-read {
line-height: 1.2;
font-size: 4rem;
font-weight: bold;
}
.service_layout-read-marker {
display: inline-block;
padding: 2px 10px;
color: #fff;
background-color: #144B8F;
}
.service_layout .service_layout-text {
font-size: 3rem;
}
.service_flow > li .service_flow-read {
color: #144B8F;
text-align: center;
font-size: 2.4rem;
}
.feature-column {
display: flex;
flex-wrap: wrap;
gap: 46px 36px;
margin: 30px auto 90px;
}
.feature-column-item {
width: calc(50% - 18px);
}
.feature-title {
margin-bottom: 15px;
text-align: center;
font-size: 2.4rem;
}
.feature-iframe,
.feature-img {
margin-bottom: 15px;
}
.feature-iframe > iframe {
aspect-ratio: 16/9;
width: 100%;
height: 100%;
border: none;
}
.feature-button-wrap {
display: flex;
justify-content: center;
margin: 58px auto 0;
}
.feature-button {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
min-width: 220px;
margin: 0;
padding: 17px 40px 17px 30px;
border-radius: 6px;
color: #ed6d33;
font-size: 1.6rem;
font-weight: 700;
line-height: 2rem;
border: 2px solid #ed6d33;
transition: all 0.2s;
}
.feature-button::after {
content: '';
display: block;
position: absolute;
top: calc(50% - 7px);
right: 20px;
width: 10px;
height: 15px;
background: #ed6d33;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.feature-button:hover {
transform: translate3d(0, 5px, 0);
}
.banner-column {
display: flex;
justify-content: space-around;
}
@media screen and (min-width: 678px) and (max-width: 1260px) {
.top-media-layout {
flex-direction: column-reverse;
}
.top-media-layout-detail {
margin: 0 0 20px;
width: 100%;
}
.top-media-layout-video {
margin-inline: auto;
}
.top-media-layout .top-media-layout-text {
margin-inline: 0;
}
.service_layout-read {
font-size: 2.8rem;
}
.service_layout-text {
font-size: 2.4rem;
}
}
@media screen and (max-width: 767px) {
.top-cv-button-wrap {
gap: 16px;
}
.top-cv-button {
margin: 0;
width: 100%;
min-width: auto;
}
.top-media-layout {
margin-bottom: 0;
flex-direction: column-reverse;
}
.top-media-layout-detail {
margin: 0 0 20px;
width: 100%;
}
.top-media-layout .top-media-layout-title {
line-height: 1.6;
font-size: 2rem;
}
.top-media-layout .top-media-layout-title-label {
padding: 2px 10px;
font-size: 2.6rem;
}
.top-media-layout-video {
margin-inline: auto;
width: 100%;
}
.top-media-layout .top-media-layout-text {
margin-inline: 0;
}
.service_layout {
margin: 30px auto 50px;
}
.service_layout-def_wrap {
flex-direction: column;
align-items: center;
}
.service_layout-body {
padding-inline: 0;
}
.service_layout-read {
margin-bottom: 10px;
line-height: 1.2;
font-size: 2.4rem;
font-weight: bold;
}
.service_layout .service_layout-text {
line-height: 1.4;
text-align: center;
font-size: 2rem;
}
.service_flow .service_flow-detail {
margin-left: 50px;
width: 60%;
}
.service_flow .service_flow-detail > p {
padding-top: 0;
width: 100%;
}
.service_flow > li .service_flow-read {
text-align: left;
font-size: 2rem;
}
.feature-column {
gap: 30px;
margin: 30px auto 90px;
}
.feature-column-item {
width: 100%;
}
.feature-title {
margin-bottom: 10px;
text-align: center;
font-size: 2rem;
}
.banner-column {
flex-direction: column;
}
}
.table-text-note {
margin-top: 4px;
line-height: 1.7;
color: #5b5b5b;
font-size: 1.3rem;
font-weight: bold;
}
@media screen and (max-width: 767px) {
} .c-tag-layout-wrap {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 20px 30px;
}
.c-tag-layout-wrap > li {
list-style: none;
}
.c-tag-layout {
display: contents;
}
.c-tag-layout__dt {
flex-shrink: 0;
font-size: 18px;
}
.c-tag-layout__dd > :first-child {
margin-top: 0;
}
.c-tag-layout__dd > :last-child {
margin-bottom: 0;
}
.c-tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
}
.c-tag-list > li {
list-style: none;
}
.c-tag {
display: block;
margin: 0;
padding: 4px 10px;
line-height: 1.4;
color: #000;
font-size: 1.4rem;
font-weight: 500;
background-color: #fff;
border: 1px solid #000;
}
.c-tag:where(button) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-tag:where(button, a):hover,
.c-tag.is-active {
color: #fff;
background-color: #000;
border: 1px solid #fff;
}
.c-card-wrap.js-scroll-event-trigger01   > li,
.c-card02-wrap.js-scroll-event-trigger01 > li {
opacity: 0;
transform: translateY(100px);
transition: all 0.6s ease-in;
}
.c-card-wrap.js-scroll-event-trigger01.is-active   > li,
.c-card02-wrap.js-scroll-event-trigger01.is-active > li {
opacity: 1;
transform: translateY(0);
}
.c-card-wrap.js-scroll-event-trigger01.is-active   > li:nth-child(2),
.c-card02-wrap.js-scroll-event-trigger01.is-active > li:nth-child(2) {
transition-delay: 0.3s;
}
.c-card-wrap.js-scroll-event-trigger01.is-active   > li:nth-child(3),
.c-card02-wrap.js-scroll-event-trigger01.is-active > li:nth-child(3) {
transition-delay: 0.6s;
}
.c-card-wrap.js-scroll-event-trigger01.is-active   > li:nth-child(4),
.c-card02-wrap.js-scroll-event-trigger01.is-active > li:nth-child(4) {
transition-delay: 0.9s;
}
.c-card-wrap.js-scroll-event-trigger01.is-active   > li:nth-child(5),
.c-card02-wrap.js-scroll-event-trigger01.is-active > li:nth-child(5) {
transition-delay: 1.2s;
}
.c-card-wrap.js-scroll-event-trigger01.is-active   > li:nth-child(6),
.c-card02-wrap.js-scroll-event-trigger01.is-active > li:nth-child(6) {
transition-delay: 1.5s;
}
.c-card-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin: 50px 0 0;
padding: 0;
}
.c-card-wrap > li {
list-style: none;
}
.c-card__type {
display: block;
height: 100%;
background-color: #fff;
border: 1px solid #eee;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
.c-card__img {
aspect-ratio: 16/9;
width: 100%;
border-bottom: 1px solid #eee;
}
.c-card__img img {
object-fit: cover;
width: 100%;
height: 100%;
vertical-align: bottom;
}
.c-card__detail {
padding: 20px 24px 40px;
text-align: center;
}
.c-card__detail > :first-child { margin-top: 0 !important; }
.c-card__detail > :last-child { margin-bottom: 0 !important; }
.c-card__prop {
line-height: 1.8;
font-size: 1.6rem;
font-weight: 700;
}
.c-card__title {
margin-top: 20px;
color: #004F98;
line-height: 1.5;
font-size: 2rem;
font-weight: 700;
}
.c-card02-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin: 50px 0 0;
padding: 0;
}
.c-card02-wrap > li {
list-style: none;
}
.c-card02__type {
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
}
.c-card02__type > :first-child {
margin-top: 0 !important;
}
.c-card02__type > :last-child {
margin-bottom: 0 !important;
}
.c-card02__img {
aspect-ratio: 300/192;
overflow: hidden;
}
.c-card02__img > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.c-card02__detail {
display: flex;
flex-direction: column;
gap: 12px;
}
.c-card02__prop {
display: flex;
flex-direction: column;
gap: 8px;
}
.c-card02__date {
line-height: 1.4;
color: #6F6F6F;
font-size: 16px;
}
.c-card02__category-wrap {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.c-card02__category {
padding: 4px 10px;
line-height: 1.4;
font-size: 16px;
font-weight: 500;
color: #1A1A1A;
background-color: #fff;
border: 1px solid #6F6F6F;
}
.c-card02__title {
line-height: 1.5;
font-size: 20px;
font-weight: 700;
}
.p-interview-date {
display: block;
margin-bottom: 43px;
line-height: 1.4;
color: #6F6F6F;
font-size: 1.6rem;
font-weight: 400;
}
.p-interview-single {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
width: 100%;
}
.p-interview-single__main {
grid-area: 1 / 1 / 2 / 2;
}
.p-interview-single__side {
grid-area: 1 / 2 / 3 / 3;
}
.p-interview-single__content {
grid-area: 2 / 1 / 3 / 2;
}
.p-interview-single__content > :first-child { margin-top: 0; }
.p-interview-single__content > :last-child { margin-bottom: 0; }
.p-interview-spec-wrap {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
background-color: var(--color-light-base);
}
.p-interview-spec {
display: flex;
flex-direction: column;
gap: 8px;
}
.p-interview-spec__title {
color: var(--color-main02);
line-height: 1.4;
font-size: 1.6rem;
font-weight: 700;
}
.p-interview-spec__detail {
font-size: 1.6rem;
font-weight: 400;
}
.p-interview-spec__detail > :first-child { margin-top: 0; }
.p-interview-spec__detail > :last-child { margin-bottom: 0; }
.p-interview-question {
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 100px;
}
.p-interview-question__item > :first-child { margin-top: 0; }
.p-interview-question__item > :last-child { margin-bottom: 0; }
.p-interview-question__img {
margin-top: 32px;
text-align: center;
}
.p-interview-question .p-interview-question__title {
margin-bottom: 16px;
}
.p-interview-question__detail {
line-height: 1.8;
font-size: 1.6rem;
font-weight: 400;
}
.p-interview__edit {
margin-top: 100px;
}
.p-interview__edit p {
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
.c-tag {}
.c-card-wrap {
grid-template-columns: 1fr;
gap: 20px;
}
.c-card {}
.c-card02-wrap {
grid-template-columns: 1fr;
gap: 20px;
}
.p-interview-single {
display: flex;
flex-direction: column;
}
} .c-tab__panel-wrap {
margin: 55px auto 0;
}
.c-tab__panel:not(.is-active) {
display: none;
}
.c-tab__control,
.c-tag-list02 {
display: flex;
justify-content: center;
gap: 18px;
}
.c-tag-list02 {
margin: 30px 0;
justify-content: flex-start;
}
.c-tab__button,
.c-tag-list02__button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
margin: 0;
padding: 6px 30px;
line-height: 1.5;
color: #1A1A1A;
font-size: 1.8rem;
font-weight: 500;
background-color: #fff;
border: 1px solid #757575;
border-radius: 5px;
cursor: pointer;
}
.c-tab__button[aria-selected="true"],
.c-tag-list02__button.is-active {
color: #fff;
background-color: #1A1A1A;
border: 1px solid #1A1A1A;
cursor: inherit;
}
.acount-option-title {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flex;
justify-content: center;
margin: 55px auto 0;
max-width: 430px;
width: 100%;
line-height: 2;
color: #1A1A1A;
font-size: 1.8rem;
position: relative;
font-weight: bold;
padding: 12px 20px;
background-color: transparent;
border-bottom: 1px solid #5d5f65;
border-radius: 0;
cursor: pointer;
}
.acount-option-title:after {
content: "▼";
padding-left: 16px;
}
@media screen and (max-width: 767px) {
.c-tab__control,
.c-tag-list02 {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 10px;
}
.acount-option-title {
margin-top: 22px;
padding: 12px;
font-size: 1.7rem;
}
.c-tab__button,
.c-tag-list02__button {
padding: 10px 15px;
font-size: 1.6rem;
}
}
.c-button {
display: flex;
justify-content: center;
margin: 58px 0 0;
}
.c-button__type {
position: relative;
padding: 18px 42px 20px;
min-width: 220px;
color: #ED6D33;
border: 2px solid #ED6D33;
border-radius: 6px;
}
.c-button__type:hover {
}
.c-button__type::after {
content: '';
display: block;
position: absolute;
top: calc(50% - 8px);
right: 20px;
width: 10px;
height: 15px;
background: #ED6D33;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.c-pricing-container {
display: grid;
grid-template-columns: 34.54% repeat(2, 27.27%);
gap: 5.46%;
margin: 55px auto 0;
}
.c-pricing-card {
overflow: hidden;
background-color: var(--color-light-base);
border-radius: 20px 20px 0 0;
}
.c-pricing-card__head > :first-child,
.c-pricing-card__body > :first-child,
.c-pricing-card__bottom > :first-child {
margin-top: 0 !important;
}
.c-pricing-card__head > :last-child,
.c-pricing-card__body > :last-child,
.c-pricing-card__bottom > :last-child {
margin-bottom: 0 !important;
}
.c-pricing-card__head {
padding: 20px;
color: var(--color-main02);
background-color: #DAEDFE;
}
.c-pricing-card__head.is-base {
color: #fff;
background-color: var(--color-main02);
}
.c-pricing-card__body {
padding: 20px;
border-bottom: 1px solid #5D5F65;
}
.c-pricing-card__bottom {
padding: 20px;
}
.c-plan-title {
text-align: center;
line-height: 1.584;
font-size: 2.5rem;
}
.c-plan-lead {
line-height: 1.7;
text-align: center;
font-size: 1.6rem;
font-weight: 700;
}
.c-plan-note {
line-height: 1.7;
font-size: 1.6rem;
}
.c-price {
display: flex;
flex-direction: column;
align-items: center;
}
.c-price__title {
line-height: 1.8;
font-size: 2.2rem;
font-weight: 700;
}
.c-price__detail {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
line-height: 1;
color: #000;
font-weight: 700;
}
.c-price__currency {
font-family: "Roboto";
color: #585858;
font-size: 3.7rem;
}
.c-price__num {
font-family: "Roboto";
font-size: 4.4rem;
}
.c-price__unit {
color: #585858;
font-size: 1.8rem;
}
.c-features {
margin: 0;
}
.c-features > li {
position: relative;
padding-left: 24px;
line-height: 1.7;
font-size: 1.6rem;
}
.c-features > li::before {
content: '';
display: block;
position: absolute;
top: 0.7em;
left: 9px;
width: 5px;
height: 5px;
border-radius: 4px;
background-color: #000;
}
.c-vr-frame {
margin: 53px auto 0;
max-width: 720px;
}
.c-vr-frame > :first-child { margin-top: 0 !important; }
.c-vr-frame > :last-child  { margin-bottom: 0 !important; }
.c-vr-frame__title {
margin-bottom: 15px;
line-height: 1.5;
text-align: center;
font-size: 2.4rem;
}
.c-solution-wrap {
display: flex;
flex-direction: column;
gap: 95px;
}
.c-solution {
position: relative;
}
.c-solution + .c-solution::before {
content: '';
display: block;
position: absolute;
top: -107px;
left: 50%;
width: 96px;
height: 98px;
background: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/solution_arrow01.svg) no-repeat 0 0 / cover;
transform: translateX(-50%);
}
.c-solution-box {
margin-top: 55px;
padding: 30px 15px 35px;
background-color: var(--color-light-base);
}
.c-solution-box > :first-child { margin-top: 0 !important; }
.c-solution-box > :last-child  { margin-bottom: 0 !important; }
.c-solution-box__title {
line-height: 1.5;
text-align: center;
font-size: 2.4rem;
font-weight: 700;
}
.c-solution-ol {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 24px;
margin: 20px auto 0;
max-width: 726px;
}
.c-solution-ol > li {
display: flex;
align-items: center;
width: 100%;
background-color: #fff;
line-height: 1;
font-weight: 700;
}
.c-solution-ol__num {
padding: 12px 11px;
color: #fff;
font-size: 3.2rem;
background-color: #787878;
}
.c-solution-ol__text {
padding: 18px 10px 18px 20px;
font-size: 2rem;
}
.c-solution__heading {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 15px 8px;
color: #fff;
background-color: var(--color-main02);
}
.c-solution__title {
display: flex;
align-items: center;
justify-content: center;
line-height: 1.1;
font-size: 3.4rem;
font-weight: 700;
}
.c-solution__title__icon {
margin-right: 10px;
}
.c-feature-box-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 20px 0 0;
}
.c-feature-box {
background-color: #fff;
border-top: 4px solid var(--color-main02);
}
.c-feature-box__head > :first-child,
.c-feature-box__body > :first-child {
margin-top: 0 !important;
}
.c-feature-box__head > :last-child,
.c-feature-box__body > :last-child {
margin-bottom: 0 !important;
}
.c-feature-box__head {
display: flex;
gap: 10%;
padding-right: 10.92%;
min-height: 135px;
}
.c-feature-box__body {
padding: 20px 36px;
background-color: #DAEDFE;
}
.c-feature-box__number {
display: flex;
align-items: center;
padding: 5px 10px;
line-height: 1;
color: #fff;
font-size: 5.4rem;
font-weight: 500;
background-color: var(--color-main02);
}
.c-feature-box__head__text {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.c-feature-box__title {
line-height: 1.4;
font-size: 2rem;
font-weight: 700;
}
.c-feature-box__title__large {
color: var(--color-main02);
font-size: 2.8rem;
font-style: normal;
}
.c-feature-box__lead {
line-height: 1.8;
font-size: 1.6rem;
}
.c-feature-box__lead__large {
color: var(--color-main02);
font-weight: 700;
}
.c-feature-more {
display: flex;
justify-content: center;
margin: 55px auto 0;
max-width: 740px;
}
.c-banner,
.c-banner02,
.c-banner03 {
display: grid;
grid-template-columns: repeat(2, auto);
width: 100%;
border-radius: 6px;
transition: all 0.2s;
}
.c-banner {
padding: 8px 25px 0 24px;
color: #fff;
background-color: var(--color-accent);
box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.18);
}
.c-banner02 {
align-items: center;
padding: 12px 25px 12px 24px;
color: #fff;
background-color: var(--color-main02);
box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.18);
}
.c-banner03 {
grid-template-columns: 1fr 340px;
padding: 8px 25px 0 19px;
color: #fff;
background-color: var(--color-accent);
box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.18);
}
.c-banner:hover,
.c-banner02:hover,
.c-banner03:hover {
transform: translate3d(0, 5px, 0);
}
.top-main__detail__banner-wrap {
display: grid;
grid-template-columns: auto 275px;
gap: 16px 15px;
}
.top-main__detail__banner-wrap .c-banner,
.top-main__detail__banner-wrap .c-banner02 {
grid-column: 2 span;
grid-template-columns: subgrid;
}
.c-banner__image,
.c-banner03__image {
display: flex;
align-items: flex-end;
position: relative;
z-index: 2;
}
.c-banner__content > :first-child ,
.c-banner02__content > :first-child ,
.c-banner03__content > :first-child {
margin-top: 0;
}
.c-banner__content {
padding-top: 5px;
}
.c-banner03__content {
padding-top: 12px;
}
.c-banner__text,
.c-banner03__text {
position: relative;
margin: 0 auto;
padding: 0 18px;
width: fit-content;
line-height: 1.2;
font-size: 2.4rem;
font-weight: 500;
}
.c-banner__text {
font-size: 2rem;
}
.c-banner__text::before,
.c-banner03__text::before,
.c-banner__text::after,
.c-banner03__text::after {
content: '';
display: block;
position: absolute;
top: 0;
width: 2px;
height: 26px;
background-color: #fff;
}
.c-banner__text::before,
.c-banner03__text::before {
left: 0;
transform: rotate(-23deg);
}
.c-banner__text::after,
.c-banner03__text::after {
right: 0;
transform: rotate(23deg);
}
.c-banner__button,
.c-banner02__button,
.c-banner03__button {
display: flex;
align-items: center;
justify-content: center;
margin: 12px 0 0;
padding: 12px 16px;
text-align: center;
text-decoration: none;
color: var(--color-accent);
font-size: 2.6rem;
font-weight: bold;
background: #fff;
border-radius: 5px;
border: 2px solid var(--color-accent);
}
.c-banner03__button {
font-size: 2.8rem;
}
.c-banner02__text {
line-height: 1.2;
font-size: 2.4rem;
font-weight: 700;
}
.c-banner02__button {
margin: 0;
flex-grow: 1;
color: var(--color-main02);
border-color: var(--color-main02);
}
.c-banner02__button span {
border-color: var(--color-main02);
}
.c-banner03__image {
}
.c-banner03__text {
font-size: 2.2rem;
}
.c-banner03__button {
justify-content: center;
padding: 17px 16px;
width: 100%;
font-size: 2.6rem;
}
.c-banner03__button span {
margin-right: 12px;
padding: 5px 12px;
font-size: 2rem;
}
.top-main {
margin: 100px auto 0;
max-width: 1920px;
width: 100%;
}
.top-main__body {
width: 100%;
background: url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/main-bg01.webp) no-repeat center center / cover;
}
.top-main__bottom {
display: flex; overflow: hidden;
}
.top-main__bottom__img {
transition-timing-function: linear; }
.top-main__bottom > .top-main__bottom__img:nth-child(2) { }
.top-main__bottom__img .swiper-slide { width: 390px !important;
}
.top-main__detail {
display: grid;
grid-template-columns: 606px 1fr;
grid-template-rows: auto 1fr;
gap: 34px 59px;
margin: 0 auto;
padding: 40px 10px 0;
max-width: 1260px;
width: 100%;
min-height: 622px;
}
.top-main__detail__intro > :first-child,
.top-main__detail__more > :first-child { margin-top: 0 !important; }
.top-main__detail__intro > :last-child,
.top-main__detail__more > :last-child  { margin-bottom: 0 !important; }
.top-main__detail__intro {
grid-area: 1 / 1 / 2 / 2;
}
.top-main__detail__img-wrap {
grid-area: 1 / 2 / 3 / 3;
display: flex;
align-items: flex-end;
}
.top-main__detail__img {
width: 773px;
}
.top-main__detail__img > img {
}
.top-main__detail__more {
grid-area: 2 / 1 / 3 / 2;
}
.top-main__lead {
line-height: 1.4;
font-size: 3.4rem;
font-weight: 700;
}
.top-main__logo {
margin: 18px 0 0;
}
.footer-banner {
display: block;
width: fit-content;
margin-top: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.footer-banner img {
vertical-align: bottom;
}
@media screen and (min-width: 768px) and (max-width: 1720px) {
.top-main__detail {
grid-template-columns: repeat(2, 1fr);
gap: 34px 16px;
}
.top-main__detail__img {
width: 100%;
}
.c-banner02__text {
font-size: 1.8rem;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
.top-main__detail {
align-items: flex-end;
grid-template-columns: 60% 40%;
gap: 16px;
}
.top-main__detail__more {
padding-bottom: 7vw;
}
.top-main__detail__img-wrap {
padding-bottom: 7vw;
}
.c-banner__text {
padding: 0 12px;
font-size: 1.6rem;
}
.c-banner__text::before,
.c-banner__text::after {
height: 20px;
}
.c-banner__button,
.c-banner02__button {
font-size: 1.6rem;
}
}
@media screen and (max-width: 767px) {
.c-pricing-container {
grid-template-columns: 1fr;
gap: 20px;
margin: 30px auto 0;
}
.c-pricing-card {
border-radius: 10px 10px 0 0;
}
.c-pricing-card__head {
}
.c-pricing-card__head.is-base {
}
.c-pricing-card__body {
}
.c-pricing-card__bottom {
}
.c-plan-title {
}
.c-plan-lead {
}
.c-price {
}
.c-price__title {
}
.c-price__detail {
flex-wrap: nowrap;
}
.c-price__currency {
}
.c-price__num {
}
.c-price__unit {
}
.c-features {
}
.c-features > li {
}
.c-vr-frame {
}
.c-vr-frame__title {
}
.c-solution-wrap {
gap: 67px;
}
.c-solution {
}
.c-solution + .c-solution::before {
top: -74px;
width: 61px;
height: 62px;
}
.c-solution-box {
padding: 30px 20px;
}
.c-solution-box__title {
font-size: 2.2rem;
}
.c-solution-ol {
grid-template-columns: 1fr;
gap: 8px;
margin-top: 34px;
}
.c-solution-ol > li {
}
.c-solution-ol__num {
font-size: 2.8rem;
}
.c-solution-ol__text {
font-size: 1.8rem;
}
.c-solution__heading {
padding: 12px 15px;
}
.c-solution__title {
flex-wrap: wrap;
text-align: center;
font-size: 3.2rem;
}
.c-solution__title__sp-break {
display: block;
width: 100%;
}
.c-solution__title img {
max-width: 262px;
}
.c-feature-box-list {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 20px;
}
.c-feature-box {
}
.c-feature-box__head {
gap: 15px;
padding-right: 0;
min-height: auto;
}
.c-feature-box__body {
padding: 20px 16px;
}
.c-feature-box__number {
font-size: 3.5rem;
}
.c-feature-box__head__text {
gap: 5px;
padding: 17px 0 20px;
}
.c-feature-box__title__large {
font-size: 2.5rem;
}
.c-feature-box__icon {
max-width: 89px;
}
.top-main {
margin-top: 58px;
}
.top-main__body {
background: #fff url(//my-homerobo.com/wpcms/wp-content/themes/myhomerobo/assets/img/top/main-bg01-sp.webp) no-repeat top center / 100% auto;
}
.top-main__bottom__img {
width: 100%;
}
.top-main__bottom__img .swiper-slide {
width: 50vw !important;
}
.top-main__detail {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 34px;
padding: 18px 20px 16px;
min-height: auto;
}
.top-main__detail__intro,
.top-main__detail__img-wrap,
.top-main__detail__more {
grid-area: auto;
}
.top-main__detail__intro {
}
.top-main__detail__img {
max-width: 100%;
width: 100%;
}
.top-main__detail__img > img {
}
.top-main__detail__more {
}
.top-main__lead {
text-align: center;
line-height: 1.4;
font-size: 2rem;
}
.top-main__logo {
margin: 6px auto 0;
max-width: 346px;
}
.c-banner {
padding: 4px 10px 0 8px;
}
.c-banner03 {
grid-template-columns: 1fr 185px;
gap: 12px;
padding: 4px 10px 0 8px;
}
.top-main__detail__banner-wrap {
grid-template-columns: 1fr 185px;
gap: 12px;
}
.c-banner__content,
.c-banner03__content {
padding-top: 0;
padding-bottom: 8px;
}
.c-banner__text,
.c-banner03__text {
padding: 0 12px;
font-size: 1.5rem;
}
.c-banner__text::before,
.c-banner03__text::before,
.c-banner__text::after,
.c-banner03__text::after {
height: 20px;
}
.c-banner__button,
.c-banner02__button,
.c-banner03__button {
margin: 4px auto 0;
padding: 9px 9px;
font-size: 1.9rem;
}
.c-banner02 {
padding: 7px 10px 7px 8px;
color: #fff;
background-color: var(--color-main02);
box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.18);
}
.c-banner02__text {
text-align: center;
line-height: 1.2;
font-size: 1.8rem;
font-weight: 700;
}
.c-banner02__button {
margin: 0;
}
} .l-aside {
margin: 120px auto 0;
max-width: 1100px;
width: 100%;
}
.l-aside > :first-child { margin-top: 0 !important; }
.l-aside > :last-child  { margin-bottom: 0 !important; }
.l-aside__title {
margin-top: 30px;
padding: 20px 0;
line-height: 1.5;
font-size: 3.6rem;
font-weight: 700;
text-align: center;
border-top: 4px solid var(--color-main01);
border-bottom: 4px solid var(--color-main01);
}
.l-aside__lead {
margin-top: 24px;
line-height: 1.2;
font-size: 2rem;
font-weight: 500;
text-align: center;
}
.l-aside__lead__img {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}
.l-aside__btn-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 48px 0 0;
padding: 0;
}
.l-aside__btn-wrap > li {
margin: 0;
padding: 0;
list-style: none;
}
.l-aside__btn__type {
--bg-color: #191919;
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 20px 40px;
color: #fff;
background-color: var(--bg-color);
border-radius: 10px;
}
.l-aside__btn__type.l-aside__btn__type--contact {
--bg-color: var(--color-main01);
}
.l-aside__btn__type.l-aside__btn__type--catalog {
--bg-color: var(--color-accent);
}
.l-aside__btn__type.l-aside__btn__type--trial {
--bg-color: var(--color-main02);
}
.l-aside__btn__title {
display: inline-block;
position: relative;
padding-top: 10px;
line-height: 1.5;
text-align: center;
font-size: 2.4rem;
font-weight: 700;
}
.l-aside__btn__title::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 4px;
transform: translateX(-50%);
background-color: #fff;
}
.l-aside__btn__img {
margin-top: 10px;
}
.l-aside__btn__detail {
line-height: 1.5;
font-size: 1.8rem;
font-weight: 700;
}
.c-no-posts-text {
margin-top: 50px;
text-align: center;
font-size: 2rem;
font-weight: 700;
}
@media screen and (max-width: 767px) {
.l-aside {
margin: 130px auto 0;
padding-right: 5%;
padding-left: 5%;
width: 100%;
}
.l-aside__title {
margin-top: 30px;
padding: 10px 0;
font-size: 2.2rem;
}
.l-aside__lead {
margin-top: 12px;
line-height: 1.5;
font-size: 1.7rem;
}
.l-aside__lead__img {
margin-right: 2px;
max-width: 190px;
}
.l-aside__btn-wrap {
grid-template-columns: 1fr;
margin: 36px 0 0;
}
.l-aside__btn__type {
display: grid;
grid-template-columns: 56px 1fr;
gap: 12px;
padding: 18px 10px 20px;
}
.l-aside__btn__title {
grid-column: 1/3;
font-size: 2rem;
}
.l-aside__btn__detail {
font-size: 1.7rem;
}
.c-no-posts-text {
font-size: 1.6rem;
}
}
.u-animation-fade-up.is-active,
.js-scroll-event-trigger01.is-active .u-animation-fade-up--child {
transform: translateY(0);
opacity: 1;
}
.js-scroll-event-trigger01.is-active .u-animation-zoom--child,
.u-animation-zoom.is-active {
transform: scale(1);
opacity: 1;
}
.u-animation-fade-up,
.u-animation-zoom,
.u-animation-fade-up--child,
.u-animation-zoom--child {
transition: 0.3s ease;
transition-property: transform, opacity;
}
.u-animation-fade-up,
.u-animation-fade-up--child {
transform: translateY(50px);
opacity: 0;
}
.u-animation-zoom,
.u-animation-zoom--child {
transform: scale(0.5);
opacity: 0;
}
.u-animation-delay--300  { transition-delay: 300ms !important; }
.u-animation-delay--600  { transition-delay: 600ms !important; }
.u-animation-delay--900  { transition-delay: 900ms !important; }
.u-animation-delay--1200 { transition-delay: 1200ms !important; }
.u-animation-delay--1500 { transition-delay: 1500ms !important; }
.u-animation-delay--1800 { transition-delay: 1800ms !important; }
.u-animation-delay--2100 { transition-delay: 2100ms !important; }
.u-animation-delay--2400 { transition-delay: 2400ms !important; }
.u-animation-delay--2700 { transition-delay: 2700ms !important; }