@charset "UTF-8";

/*共通部分---------------*/
html {
    font-size: 100%;
}

body {
    color: #222222;
    font-family:"Gothic", sans-serif,"Roboto";
    font-size: 16px;
    line-height: 1.7;
    background-repeat: repeat;
    background-color: #ffffff;
    overflow-x: hidden;
}

a {
    color: #222222;
    text-decoration: none;
}

a:hover {
    color: #004A94;
}

/*ふわっと表示---------------*/
.loadFade {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}

.loadFade.done {
    opacity: 1;
    visibility: visible;

}

.scrollUp {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: all 1s;
}

.scrollUp.done {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

/*見出し---------------*/
.heading {
    margin: 50px 0px 50px 50px;
    color: #004A94;
    font-size: 4rem;
    line-height: 3rem;
    text-align: center;
}

.heading span {
    padding-left: 20px;
    font-size: 1rem;
}

/*詳しく見るボタン---------------*/
.button {
    margin-top: 50px;
}

.button a {
    letter-spacing: 0.1em;
    color: #ffffff;
    font-weight: 700;
    display: block;
    position: relative;
    box-sizing: border-box;
    max-width: 300px;
    text-align: center;
    padding: 4px 16px 4px 0;
    margin: 24px;
    margin-inline: auto;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

.button a::before {
    content: "";
    display: block;
    position: absolute;
    width: 300px;
    height: 1.5px;
    background: #209cff;
    bottom: 0;
    transition: all 0.3s;
}

.button a::after {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 1.5px;
    background: #209cff;
    rotate: 40deg;
    right: -3px;
    bottom: 10px;
    transition: all 0.3s;
}

.button a:hover {
    color: #209cff;
}

.button a:hover::after,
.button a:hover::before {
    translate: 20px 0;
    transition: all 0.3s;
}

/*区切り---------------*/
.content {
    overflow: hidden;
    /* はみ出た部分は表示しない */
}

.content01 {
    position: relative;
    height: 200px;
    width: 100%;
    background-color: #ffffff;
}

.content01::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 60px solid transparent;
    border-left: 50vw solid transparent;
    border-right: 50vw solid #D7E0E9;
    border-bottom: 60px solid #D7E0E9;
}


.content02 {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: #D7E0E9;
}

.content02::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 60px solid transparent;
    border-left: 50vw solid transparent;
    border-right: 50vw solid #ffffff;
    border-bottom: 60px solid #ffffff;
}

@media only screen and (max-width: 2000px) {
    .content01::after {
        border-left: 1000px solid transparent;
        border-right: 1000px solid #D7E0E9;
    }

    .content02::after {
        border-left: 1000px solid transparent;
        border-right: 1000px solid #ffffff;
    }
}

/*お問い合わせボタン---------------*/
/*お問い合わせ---------------*/
.contact {
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(image/contact.jpg);
    background-size: cover;
    padding: 150px 0px;
}

.contactWrap {
    width: 75%;
    margin: 0 auto;
}

.contactWrap__text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

.contactWrap__text--renovation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.contactWrap__text::before,
.contactWrap__text::after,
.contactWrap__text--renovation::before,
.contactWrap__text--renovation::after {
    content: "";
    width: 45px;
    height: 2px;
    background-color: #ffffff;
    margin: 0px 4px;
}

.contactWrap__text::before,
.contactWrap__text--renovation::before {
    transform: rotate(55deg);
}

.contactWrap__text::after,
.contactWrap__text--renovation::after {
    transform: rotate(-55deg);
}

.contactBoxWrap {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.contactBox {
    width: 49%;
    padding: 50px 0px;
    border: #ffffff 1px solid;
    text-align: center;
}

.contactBox__flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactIcon {
    width: 45px;
    height: auto;
    margin-right: 10px;
}

.contactBox__flex {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
}

.contact__tel {
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

.contact__line {
    font-size: 1rem;
    font-weight: normal;
    color: #ffffff;
}

.lineImg {
    width: 50px;
    height: auto;
    margin-left: 10px;
}

.contactButton {
    border: #ffffff 1px solid;
    margin: 50px auto 0px;
    padding: 25px;
    text-align: center;
}

.contactButton:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.contactButton a {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
}

/*-----------------------*/
.contactButtonImg {
    width: 100%;
    text-align: center;
}

.contactButtonImg {
    padding: 100px 0px 0px;
}

.contactButtonImg__text1 {
    margin-bottom: 5px;
    color: #0068b8;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}

.contactButtonImg__text1:before,
.contactButtonImg__text1:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #0068b8;
    content: "";
}

.contactButtonImg__text1:before {
    left: -30px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.contactButtonImg__text1:after {
    right: -30px;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

.contactButtonImg a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 83 109 / 15%), 0 0 5px rgb(0 83 109 / 10%);
}

.contactButtonImg a {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
    width: 60%;
    padding: 50px 20px;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 5px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(image/mv.jpg);
    background-size: cover;
    background-position: left center;
}

.contactButtonImg a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 83 109 / 15%), 0 0 5px rgb(0 83 109 / 10%);
}

.contactButtonImg__img {
    width: 50px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(357deg) brightness(98%) contrast(105%);
}

.contactButtonImg__text2 {
    font-weight: bold;
    color: #ffffff;
    font-size: 1.2rem;
}

.contactButtonImg__text2 span {
    color: #ffffff;
    font-size: 0.8rem;
}

/*ヘッター---------------*/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 90px;
    padding: 0px 10px;
    z-index: calc(infinity);
    box-sizing: border-box;
    background-color: #ffffff;
}

.header__logo {
    width: 250px;
    height: auto;
}

.header__nav ul {
    display: flex;
    list-style: none;
}

.header__nav ul li {
    margin: 0px 10px;
    line-height: 40px;
    font-size: 1.1rem;
    font-weight: bold;
}

.menu-item-51 {
    height: 45px;
    padding: 0px 20px;
    background-color: #004A94;
    text-align: center;
    line-height: 40px;
    border-radius: 2px;
}

.menu-item-51 a {
    color: #ffffff;
}

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
        /*①アンカーのtelを無効化*/
        cursor: default;
        /*②アンカーのポインターをデフォルトにする*/
        text-decoration: none;
    }
}

/*メインページ----------------*/
/*メインビジュアル*/
main {
    padding-top: 90px;
}

.mv {
    background-color: #D7E0E9;
}


.mv__img {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 610px;
}

.mv__img1,
.mv__img2,
.mv__img3 {
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: center center no-repeat;
    background-size: cover;
    animation: anime 15s 0s infinite;
    filter: contrast(90%);
}

.mv__img1 {
    background-image: url(image/mv.jpg);
    animation-delay: -1s;
}

.mv__img2 {
    background-image: url(image/mv2.jpg);
    animation-delay: 5s;
}

.mv__img3 {
    background-image: url(image/about.jpeg);
    animation-delay: 10s;
}

@keyframes anime {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: 0;
        transform: scale(1.1);
        z-index: 10;
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.mv__text {
    position: absolute;
    bottom: 0%;
    left: 0%;
    font-size: 8rem;
    line-height: 7.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
    z-index: 10;
}

.mv__title {
    position: absolute;
    bottom: 0%;
    left: 0%;
    margin-left: 10px;
    font-size: 2.5rem;
    color: #ffffff;
    text-align: right;
    letter-spacing: 0.1rem;
    z-index: 10;
}

.scrollDown {
    position: absolute;
    bottom: 50px;
    right: 5%;
    animation: arrowMove 1s ease-in-out infinite;
    z-index: 10;
}

.arrows {
    position: absolute;
    left: -24px;
    bottom: 30px;
    font-size: 14px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.arrow {
    position: absolute;
    width: 28px;
    height: 5px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}

.arrow:first-child {
    animation: move 3s ease-out 1s infinite;
}

.arrow:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}

.arrow:before,
.arrow:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: rgba(255, 255, 255, 0.5);
}

.arrow:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.arrow:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}

@keyframes move {
    25% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        transform: translateY(30px);
    }

    67% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}

.mvButton {
    position: absolute;
    top: 30%;
    right: 0%;
    z-index: 10;
}

.mvButton__box {
    padding: 40px 20px;
    margin-bottom: 20px;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(32, 155, 255, 0.7)), to(rgba(104, 224, 208, 0.7)));
    background-image: -webkit-linear-gradient(left, rgba(32, 155, 255, 0.7) 0%, rgba(104, 224, 208, 0.7) 100%);
    background-image: linear-gradient(to right, rgba(32, 155, 255, 0.7) 0%, rgba(104, 224, 208, 0.7) 100%);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    border-radius: 2px 0px 0px 2px;
}

.mvButton__box:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.mvButton__text1 {
    margin-right: 50px;
    text-align: center;
    color: #ffffff;
}

.mvButton__text2 {
    text-align: center;
    font-size: 1.5rem;
    color: #ffffff;
}

.mvButton__text2 span {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
    font-size: 1rem;
    -webkit-text-stroke-width: 0px;
}

/*Ekアルティについて*/
.about {
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
    margin: 50px auto 0px;
    text-align: center;
}

.aboutHeading {
    width: 20%;
    font-weight: bold;
}

.aboutHeading__text1 {
    color: #004A94;
    font-size: 4rem;
}

.aboutHeading__text2 {
    font-size: 1rem;
    margin-top: -15px;
}

.aboutHeading__logo {
    width: 80px;
    height: auto;
}

.about__text {
    margin: 100px 20px 0px 20px;
    text-align: left;
    line-height: 2rem;
    z-index: 20;
}

.aboutImg {
    position: relative;
    width: 25%;

}
.aboutImg img {
    position: absolute;
    top: 30%;
    left: 65%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    margin-top: 75px;
    z-index: 10;
}

.aboutImg__square {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: rgba(119, 119, 119, 0.2);
    z-index: -10;
}

/*便利屋・リフォームサービス---------------*/
.service {
    background-color: #D7E0E9;
    padding: 1px 0px 1px;
}

/*便利屋・リフォーム見出し*/
.serviceHeading {
    position: relative;
    height: 100px;
}

.serviceHeading__text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.1);
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.1);
    font-size: 6rem;
    font-weight: bold;
}

.serviceHeading__text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 2rem;
}

/*便利屋・リフォームボックス*/
.service__box {
    width: 95%;
    display: flex;
    justify-content: center;
    margin: 0px auto 20px;
    color: #ffffff;
}

.serviceHandyman {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(image/service4.jpg);
}

.serviceRenovation {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(image/service12.jpg);
}

.serviceHandyman,
.serviceRenovation {
    position: relative;
    width: 45%;
    margin: 20px auto 50px;
    padding-bottom: 50px;
    background-repeat: no-repeat;
    background-size: cover;
}

.service__img {
    display: block;
    width: 30%;
    height: auto;
    margin: 20px auto 0px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(357deg) brightness(98%) contrast(105%);
}

.service__text {
    width: 80%;
    margin: 20px auto;
    text-align: center;
    line-height: 2rem;
}

/*メインご依頼の流れ---------------*/
.mainFlow {
    width: 70%;
    margin: 0 auto;
}

.flow {
    padding-left: 120px;
    position: relative;
}

.flow::before {
    content: "";
    width: 15px;
    height: 100%;
    background: #eee;
    margin-left: -8px;
    display: block;
    position: absolute;
    top: 0;
    left: 120px;
}

.flow>li {
    position: relative;
}

.flow>li:not(:last-child) {
    margin-bottom: 8vh;
}

.flow>li .icon {
    font-size: 12px;
    color: #fff;
    background: rgb(107, 144, 219);
    background: -moz-linear-gradient(left, rgba(107, 144, 219, 1) 0%, rgba(102, 213, 233, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(107, 144, 219, 1) 0%, rgba(102, 213, 233, 1) 100%);
    background: linear-gradient(to right, rgba(107, 144, 219, 1) 0%, rgba(102, 213, 233, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b90db', endColorstr='#66d5e9', GradientType=1);
    padding: 8px 20px;
    display: block;
    position: absolute;
    top: 0;
    left: -110px;
    z-index: 100;
}

.flow>li .icon::after {
    content: "";
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #66d5e9;
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.flow>li dl {
    padding-left: 40px;
    position: relative;
}

.flow>li dl::before,
.flow>li dl::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
}

.flow>li dl::before {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    background: #6b90db;
    border-radius: 50%;
    left: -4px;
}

.flow>li dl::after {
    width: 30px;
    border-bottom: 1px dashed #999;
    position: absolute;
    left: 5px;
}

.flow>li dl dt {
    font-size: 20px;
    font-weight: 600;
    color: #6b90db;
    margin-bottom: 1vh;
}

.textColor__222222 a {
    color: #222222;
}

/*フッター---------------*/
footer {
    padding: 50px 0px 0px;
    background-color: #e8e8e8;
}

.footer {
    display: flex;
    padding-bottom: 50px;
    justify-content: space-around;
    align-items: center;
    color: #222222;
}

.footer__logo img {
    width: 300px;
    margin: 0px 0px 50px 50px;
}

footer ul li {
    list-style: none;
    margin: 0px 0px 20px 100px;
}

.footer__nav {
    margin-top:150px;
}

.footer__nav li {
    list-style: none;
    margin: 0px 100px 5px 0px;
}

.footer ul li a {
    color: #222222;
}

.footer ul li a:hover {
    color: #004A94;
}

.copyright {
    text-align: center;
    margin-top: 20px;
    color: #e8e8e8;
    background-color: #222222;
}

/*下層ページ---------------*/
/*下層ページ見出し*/
.subpageHeading {
    position: relative;
    height: 300px;
    background-image: url(image/mv-sub.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.subpageHeading__text1 {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 4.5rem;
    text-align: center;
    font-weight: normal;
}

.subpageHeading__text2 {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: normal;
    z-index: 100;
}

.subpageAbout {
    display: flex;
    justify-content: center;
    margin: 50px auto 100px;
}

.subpageAbout__text {
    margin-top: 30px;
}

/*対応エリア*/
.area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    background-color: #D7E0E9;
}

.areaHeading {
    width: 15%;
    text-align: center;
    color: #004A94;
    font-size: 2rem;
    border-bottom: 2px solid #004A94;
}

.area img {
    width: 35%;
    height: auto;
    margin-top: 30px;
}

.areaBox {
    border: 3px solid #004A94;
    padding: 10px 30px;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: #ffffff;
    border-radius: 0px 5px 5px 5px;
}

h3.areaBox__title {
    background: #004A94;
    color: #ffffff;
    margin-top: 50px;
    display: inline-block;
    padding: 2px 30px;
    border-radius: 5px 5px 0 0;
}

.areaBox .areaBox__text {
    padding: .5em;
}

/*企業概要*/
.company {
    width: 100%;
    margin-inline: auto;
    margin: 100px auto 150px;
    padding: 10px 0px 20px;
    background-color: #ffffff;
}

.company__title {
    margin: 50px 0px 10px;
    font-size: 1.5rem;
    text-align: center;
    color: #004A94;
}

.companyBox {
    width: 50%;
    margin-inline: auto;
    text-align: left;
}

.companyBox tr th {
    height: 50px;
    line-height: 50px;
    font-weight: normal;
    border-bottom: solid 1px #004A94;
}

.company__text1 {
    margin: 30px 0px;
    line-height: 25px;
}

.companyBox tr .company__text2 {
    height: 140px;
    line-height: 25px;
}

/*便利屋リフォーム詳細*/
/*サービス一覧見出し*/
.flex {
    display: flex;
    background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
    background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 20%);
    background-image: linear-gradient(to right, #209cff 0%, #68e0cf 20%);
}

.subpageServiceHeading,
.serviceList {
    text-align: center;
    color: #ffffff;
}

.subpageServiceHeading {
    justify-content: center;
    width: 20%;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    left: 0;
}

.subpageServiceHeading__text1 {
    font-size: 3.5rem;
    line-height: 4rem;
    padding-top: 20px;
}

.subpageServiceHeading__text2 {
    font-size: 1rem;
    height: 4rem;
    border-bottom: 1px solid #222222;
}

.serviceList {
    list-style-type: none;
    margin: 40px 20px;
}

.serviceList li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-top: 20px;
    font-weight: bold;
}

.serviceList li::before {
    transform: rotate(-45deg);
    width: .4em;
    height: .4em;
    border-bottom: 3px solid #6b90db;
    border-right: 3px solid #6b90db;
    content: '';
}

.serviceList a {
    color: #ffffff;
}

.serviceDescription {
    width: 80%;
    margin: 0px auto;
    background-color: #ffffff;
}


.serviceDescription__flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px;
}

.serviceDescription__img {
    display: block;
    width: 30%;
    height: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 5px;
}

.serviceDescription__text {
    width: 60%;
    padding: 20px 40px;
}

.serviceDescription__text h3 {
    position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 2px solid #004A94;
    color: #222222;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.serviceDescription__text h3::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #6b90db;
    content: '';
}

.serviceDescription__text h3::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #004A94;
    content: '';
}

.anchor {
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}

/*便利屋料金---------------*/
.handymanPrice {
    background-color: #D7E0E9;
    padding: 20px 0px 100px;
}

.handymanPriceHeading {
    text-align: center;
    color: #004A94;
    font-size: 2rem;
}

.priceBox {
    position: relative;
    width: 50%;
    margin: 10px auto 20px;
    padding-top: 30px;
    background-color: #ffffff;
    z-index: 0;
    border: 2px solid;
    border-image: linear-gradient(to right, #209cff, #68e0cf)1;
}

.priceBox:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
    background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
    background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
    content: '基本料金';
    z-index: 2;
}

.priceBox p {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.priceBox p span {
    margin-left: 20px;
    color: #0068b8;
    font-size: 4rem;
    font-weight: bold;
}

.handymanPrice img {
    display: block;
    width: 20px;
    height: auto;
    margin: 0 auto;
}

.priceBox2 {
    position: relative;
    width: 75%;
    margin: 20px auto 0px;
    padding: 20px 0px;
    background-color: #ffffff;
    z-index: 0;
    border: 2px solid ;
    border-image: linear-gradient(to right, #209cff, #68e0cf)1;
}

.priceBox2Text {
    text-align: center;
    margin-top: 20px;
}

.priceBox2 ul {
    display: flex;
}

.priceBox2List {
    display: flex;
    align-items: center;
    width: 50%;
    margin: 15px;
}

.priceBox2List img {
    margin: 0px 10px 0px 0px;
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 5px;
    background-color: #0068b8;
}

.priceBox2List__text {
    font-size: 1.1rem;
    font-weight: bold;
}

.priceBox2List__text span {
    font-size: 1rem;
    font-weight: normal;
}

/*ご依頼の流れ*/
.flow {
    margin-top: 50px;
    margin-bottom: 100px;
}

.flowWrap {
    margin-bottom: 100px;
    padding-left: 0;
}

.flowWrap>li {
    display: flex;
    justify-content: center;
    list-style-type: none;
    max-width: 65%;
    margin-inline: auto;
    margin-top: 60px;
    padding: 20px 30px 50px 0px;
    border: #004A94 4px solid;
    border-radius: 5px;
}

.flowWrap>li dl dt {
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2;
    border-bottom: #6e98b8 2px solid;
}

.flowWrap>li .icon {
    position: relative;
    width: 70px;
    margin-top: 5px;
    font-size: 2em;
    line-height: 1;
    text-align: center;
    color: #6b90db;
}

.flowWrap>li .icon::before {
    display: block;
    margin-bottom: 3px;
    font-size: 0.3em;
    content: 'STEP';
    letter-spacing: 1px;
    color: #6b90db;
}

.flowWrap>li dl dd {
    margin: 0;
    padding-left: 10px;
}

.flowWrap>li dl {
    width: calc(100% - 70px);
    margin-top: 0.8em;
}

/*コンタクトフォーム*/
/*CONTACT-----------------*/
.contact-container {
    width: 70%;
    margin: 0px auto;
}

.form-item {
    width: 80%;
    margin: 30px auto 0px;
}

.form-item label {
    display: block;
    font-size: 1.1rem;
    color: #59504F;
}

.form-item input {
    width: 100%;
    height: 60px;
    border-radius: 20px;
    border: 1px solid #cccccc;
    margin-top: 10px;
    padding-left: 15px;
    font-size: 1.1rem;
}

.form-item input::placeholder,
.form-item textarea::placeholder {
    padding-left: 15px;
}

.form-flex {
    display: flex;
    flex-direction: column;
}

.form-flex input {
    width: 100%;
    height: 60px;
    border-radius: 20px;
    border: 1px solid #cccccc;
    margin-top: 10px;
    padding-left: 15px;
    font-size: 1.1rem;
}

.form-flex input.your-add-1 {
    width: 50%;
}

.form-flex input.your-add-2 {
    width: 100%;
}

/* ドロップダウンメニュー */
.form-dropdown {
    position: relative;
    margin-top: 10px;
    font-size: 1.1rem;
}

select.wpcf7-form-control.wpcf7-select {
    width: 100%;
    height: 60px;
    border-radius: 20px;
    border: 1px solid #cccccc;
    padding: 10px 25px;
    font-size: 1.1rem;
}

.wpcf7-form-control {
    appearance: none;
}

/* ドロップダウンここまで */

.form-item textarea {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 1px solid #cccccc;
    margin-top: 10px;
    padding: 20px 10px;
    font-size: 1.1rem;
}

/*必須マーク*/
.form-mark {
    color: #ffffff;
    margin-left: 15px;
    padding: 4px 6px;
    background-color: #004A94;
    font-size: 0.8rem;
}

/* 送信ボタン */
.form-button {
    margin: 30px 0px;
    text-align: center;
}

.form-button input {
    font-size: 1rem;
}

input[type="submit"] {
    width: 260px;
    height: 60px;
    border: 1px solid #6e98b8;
    border-radius: 5px;
    background-color: #6e98b8;
    transition: opacity .6s;
    color: #FFFFFF;
}

input[type="submit"]:hover {
    opacity: .6;
}

/*入力中の枠の色*/
.form-item input:focus,
.form-flex input:focus,
.wpcf7-formControl:focus,
.form-item textarea:focus,
select.wpcf7-form-control:focus,
.wpcf7-select:focus {
    outline: 2px solid #00536D;
}

/*スピナー非表示(送信ボタンセンター揃えずれ防止)*/
div.wpcf7 .wpcf7-spinner {
    display: none !important;
}

/* プライバシーポリシーチェックボタン */
.form-check {
    margin-top: 50px;
    text-align: center;
}

.check {
    margin: 10px;
    font-size: 0.8rem;
    text-align: center;
}

/* reCAPTCHAバッジを非表示 */
.recaptcha {
    margin-top: 20px;
    font-size: 0.7rem;
    text-align: center;
}

.grecaptcha-badge {
    visibility: hidden;
}

/*プライバシーポリシー---------------*/
.privacy {
    max-width: 80%;
    margin: 80px auto;
}

.privacy h2 {
    margin: 40px 0px 0px;
}

.privacyContact {
    color: #222222;
}

.contact-skill {
    display: block;
}

.contact-skill+.contact-skill {
    margin-top: 10px;
}

.contact-skill-txt {
    margin-left: 5px;
}

/*レスポンシブ---------------*/
@media (max-width: 1100px) {

/*お問い合わせボタン---------------*/
/*お問い合わせ---------------*/
    .contact {
        padding-top: 100px;
    }

    .contactWrap {
        width: 90%;
    }

    .contactButton a {
        max-width: 80%;
    }

    .contactButtonImg a {
        width: 80%;
    }

    .contactWrap__text--renovation {
        font-size: 1.5rem;
    }

/*ヘッター---------------*/
    .header {
        display: flex;
        justify-content: center;
        height: 80px;
    }

    .header__logo {
        margin: 0 auto;
    }

/*ハンバーガーメニュー*/
/* ボタンのスタイル */
    .nav__btn {
        position: absolute;
        top: 25px;
        right: 5%;
        width: 30px;
        cursor: pointer;
        z-index: 1000000;
        background-color: #ffffff;
        border-radius: 0px 0px 0px 5px;
    }

    .nav__btn span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: #004A94;
        margin: 5px 0;
        transition: 0.4s;
    }

/* バツ印に変化するスタイル */
    .nav__btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav__btn.active span:nth-child(2) {
        opacity: 0;
    }

    .nav__btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

/*--------------*/
    .header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        font-size: 16px;
        box-sizing: border-box;
        z-index: 100;
        padding: 50px 0px 100px 80px;
        transition: .3s;
    }

    .header__nav a:hover {
        color: #004A94;
    }

    .header__nav.open {
        right: 0;
    }

    .header__nav ul {
        display: block;
        width: 100%;
        height: 100%;
        overscroll-behavior-y: none;
        overflow-y: scroll;
        /* IE, Edge 対応 */
        -ms-overflow-style: none;
        /* Firefox 対応 */
        scrollbar-width: none;
        padding: 0;
        flex-direction: column;
        text-align: center;
    }

    .header__nav ul li {
        margin: 0;
    }

    .tel {
        height: 80px;
    }

/* Chrome, Safari 対応 */
    .header__nav ul::-webkit-scrollbar {
        display: none;
    }

    .header__nav ul li {
        width: 86%;
        padding: 15px;
        border-bottom: #A9A278 1px solid;
    }

/*メインビジュアル---------------*/
    main {
        padding-top: 80px;
    }

    .mv__img {
        height: 550px;
    }

    .mv__text {
        font-size: 7.5rem;
    }

    .mv__title {
        font-size: 2rem;
    }

    .mvButton {
        top:20%;
    }

    .mvButton__box {
        padding: 20px 10px;
        margin-bottom: 10px;
    }

/*Ekアルティについて*/
    .about {
        width: 95%;
        align-items: center;
    }

    .aboutHeading {
        width: 30%;
    }

    .aboutHeading__text1 {
        font-size: 3.5rem;
    }

    .about__text {
        width: 45%;
        margin: 0 auto;
    }

    .aboutImg {
        display: none;
    }

/*便利屋・リフォーム見出し*/
    .serviceHeading {
        height: 50px;
    }

    .serviceHeading__text1 {
        font-size: 3.5rem;
    }


/*便利屋・リフォームボックス*/
    .service {
        padding-bottom:50px ;
    }

    .service__box {
        width: 98%;
    }

    .serviceHandyman,
    .serviceRenovation {
        width: 48%;
    }

    .service__text {
        width: 95%;
        font-size: 0.9rem;
        line-height: 2rem;
    }

/*メインご依頼の流れ---------------*/
    .mainFlow__list>li {
        font-size: 0.9rem;
    }

    .mainFlow__list>li:not(:first-child) dl::before {
        display: none;
    }

/*フッター---------------*/

/*下層ページ---------------*/
/*下層ページ見出し*/
    .subpageHeading {
        height: 300px;
    }

    .subpageHeading__text1 {
        font-size: 3rem;
    }

    .subpageAbout {
        margin: 50px auto 100px;
        text-align: center;
    }

    .subpageAbout__text {
        width: 85%;
    }

/*対応エリア*/
    .area {
        width: 100%;
    }

    .areaHeading {
        width: 25%;
        font-size: 2rem;
    }

    .area img {
        width: 25%;
    }

/*企業概要*/
    .company {
        margin-top: 0px;
    }

    .companyBox {
        width: 80%;
    }

/*便利屋リフォーム詳細*/
/*サービス一覧見出し*/
    .flex {
        flex-direction: column;
    }

    .subpageServiceHeading {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 150px;
        top: 80px;
        background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
        background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
        background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
        z-index: 100000;
    }

    .subpageServiceHeading__text1 {
        font-size: 3.5rem;
        padding-left: 20px;
    }

    .subpageServiceHeading__text2 {
        border-bottom: #004A94;
    }

    .serviceList {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }

    .serviceList li {
        margin: 0px 0px 0px 20px;
        gap: 0 5px;
    }

    .serviceDescription {
        width: 100%;
    }

    .anchor {
        padding-top: 250px;
        margin-top: -250px;
    }

/*便利屋料金---------------*/
    .handymanPrice {
        padding-bottom: 1px;
    }

    .priceBox {
        width: 80%;
    }

    .priceBox2 {
        width: 95%;
        margin-bottom: 150px;
    }

    .priceBox2List {
        margin: 10px 0px 10px 5px;
    }

/*ご依頼の流れ*/

    .flowWrap>li {
        max-width: 80%;
    }

/*コンタクトフォーム*/
    .contactForm {
        margin: 0 auto;
    }

/*プライバシーポリシー---------------*/
    .privacy {
        max-width: 80%;
    }
}


@media (max-width: 768px){
    .header__logo {
        width: 200px;
    }

/*お問い合わせボタン---------------*/
/*お問い合わせ---------------*/
    .contactBoxWrap {
        flex-direction: column;
    }

    .contactWrap__text {
        font-size: 2rem;
    }

    .contactWrap__text::before,
    .contactWrap__text::after {
        width: 40px;
    }

    .contactBox {
        width: 100%;
        margin-bottom: 20px;
    }

    .contactButton {
        margin: 0px auto;
    }

    .contact__centerline {
        font-size: 3rem;
        line-height: 3rem;
        letter-spacing: 0.5rem;
        text-align: center;
        writing-mode: horizontal-tb;
    }

    .lineImg {
        width: 80px;
    }

/*メインビジュアル---------------*/
    .mvButton {
        width: 80%;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0px;
    }

    .mv__text {
        bottom: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 5rem;
        line-height: 5rem;
    }

    .mv__title {
        width: 100%;
        bottom: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0px;
        font-size: 1.5rem;
        text-align: center;
    }

    /*Ekアルティについて*/
    .about {
        flex-direction: column;
        width: 100%;
    }

    .aboutHeading {
        width: 100%;
    }

    .aboutHeading__text1 {
        font-size: 3.5rem;
    }

    .about__text {
        width: 90%;
        margin: 0 auto;
    }

/*便利屋・リフォームサービス---------------*/
/*便利屋・リフォームボックス*/
    .service__box {
        width: 95%;
        flex-direction: column;
        margin: 0px auto;
    }

    .serviceHandyman,
    .serviceRenovation {
        width: 90%;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .service__text {
        margin: 30px auto;
    }

/*ご依頼の流れ---------------*/
    .mainFlow {
        width: 80%;
    }

/*フッター---------------*/
    footer {
        padding: 50px 0px 0px;
    }

    .footer {
        flex-direction: column;
        align-items: normal;
    }

    .footer__logo img {
        margin: 0px 0px 0px 20px;
    }

    .footer__nav {
        margin: 50px 0px 20px 100px;
    }

    .footer__nav li {
        margin: 0px 0px 5px 0px;
    }

/*下層ページ---------------*/
/*下層ページ見出し*/
    .subpageHeading {
        height: 250px;
    }

    .subpageHeading__text1 {
        font-size: 2.5rem;
    }

/*対応エリア*/
    .area {
        flex-direction: column;
        width: 100%;
        margin: 100px auto 0px;
        text-align: center;
    }

    .areaBox {
        border-radius: 5px;
    }

    .areaHeading {
        width: 100%;
        padding-top: 50px;
    }

    .area img {
        width: 50%;
    }

/*企業概要*/
    .company {
        width: 100%;
        margin-inline: auto;
        margin-bottom: 50px;
    }

/*便利屋リフォーム詳細*/
/*サービス一覧見出し*/
    .subpageServiceHeading {
        position: initial;
    }

    .subpageServiceHeading__text1 {
        font-size: 3rem;
    }

    .subpageServiceHeading__text2 {
        font-size: 1rem;
    }

    .serviceList {
        margin: 0px;
    }

    .serviceDescription__text h3 {
        font-size: 1.2rem;
    }

    .serviceDescription__flex {
        flex-direction: column;
        margin: 20px;
    }

    .serviceDescription__img {
        width: 60%;
        margin: 0 auto;
    }

    .serviceDescription__text {
        width: 80%;
    }

    .anchor {
        padding-top: 100px;
        margin-top: -100px;
    }

    .contactWrap__text--renovation {
        font-size: 1rem;
    }

    .contactWrap__text::before,
    .contactWrap__text::after,
    .contactWrap__text--renovation::before,
    .contactWrap__text--renovation::after {
        width: 35px;
        margin: 0px
    }

/*便利屋料金---------------*/
    .priceBox2 {
        width: 80%;
        margin-bottom: 50px;
    }

    .priceBox2 ul {
        flex-direction: column;
    }

    .priceBox2List {
        width: 90%;
        margin: 10px auto 5px;
    }

/*コンタクトフォーム*/
    form {
        width: 100%;
    }

    .contact-formWrap {
        padding: 30px 15px;
        border: none;
    }

    .form-item {
        width: 95%;
        margin: 20px auto 0;
    }

    .form-item input {
        height: 35px;
        border-radius: 15px;
        margin-top: 5px;
    }

    .form-item textarea {
        border-radius: 15px;
        margin-top: 5px;
    }

    .form-item input::placeholder {
        padding-left: 5px;
    }

    .form-flex input {
        height: 35px;
        border-radius: 15px;
        margin-top: 5px;
    }

    .form-flex input:firstChild {
        width: 70%;
    }

    .form-hissu {
        margin-left: 5px;
    }

    .form-free {
        margin-left: 5px;
    }

/*プライバシーポリシー---------------*/
    .privacy {
        max-width: 90%;
    }
}

@media (max-width: 500px) {

/*見出し---------------*/
    .heading {
        margin: 0px;
        font-size: 2rem;
        line-height: 2rem;
        text-align: center;
    }

    .heading span {
        padding-left: 20px;
        font-size: 1rem;
    }
/*区切り---------------*/
.content {
    overflow: hidden;
    /* はみ出た部分は表示しない */
    }

    .content01,
    .content02 {
        height: 100px;
    }

    .content02 {
        margin-bottom: 50px;
    }

/*ボタン---------------*/
    .button {
        width: 80%;
        margin: 0 auto;
    }
    .button a::before {
        width: 100%;
    }

/*お問い合わせボタン---------------*/
/*お問い合わせ---------------*/
    .contact {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right top;
    }

    .contactBoxWrap {
        width: 100%;
    }

    .contactBox__flex {
        flex-direction: column;
    }

    .contactIcon {
        margin: 0px 0px 10px 0px;
    }

    .contactButton {
        margin: 0 auto;
    }

    .contactWrap__text {
        font-size: 1.5rem;
    }

    .contactButton a {
        max-width: 90%;
        font-size: 1rem;
    }

    .contactButtonImg {
        padding: 50px 0px;
    }

    .contactButtonImg a {
        padding: 50px 10px;
    }

    .contactWrap__text--renovation {
        font-size: 1rem;
    }

    .contactButtonImg__text2 {
        font-size: 0.8rem;
    }

    .contactButtonImg__img  {
        width: 20px;
    }

    .lineImg {
        margin: 10px;
    }

/*メインビジュアル---------------*/
    .mv__img1,
    .mv__img2,
    .mv__img3 {
        background-position: center bottom;
    }

    .mv__text {
        top: 20%;
        font-size: 3.5rem;
        line-height: 3.5rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .mv__title {
        font-size: 1rem;
    }

    .arrows {
        display: none;
    }

    .mvButton {
        position: static;
        width: 100%;
        top: 0%;
        left: 0%;
        transform: translate(0%, 0%);
        background-color: #ffffff;
    }

    .mvButton__box {
        margin-bottom: 5px;
        text-align: center;
        background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
        background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
        background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }

    .mvButton__box:hover {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }

    .mvButton__text1,
    .mvButton__text2 {
        color: #ffffff;
    }

/*Ekアルティについて*/
    .about {
        margin-top: 50px;
    }

    .aboutHeading__text1 {
        font-size: 2rem;
    }

    .mainFlow {
        width: 90%;
    }

/*便利屋・リフォームサービス---------------*/
    .service {
        padding: 50px 0px 0px;
    }

    .serviceHeading__text2 {
        width: 100%;
        text-align: center;
    }

    .mainFlow__list {
        margin-top: 20px;
    }

    /*ご依頼の流れ---------------*/
    .mainFlow {
        width: 90%;
    }

    /*フッター---------------*/
    .footer__logo img {
        width: 200px;
        margin: 0px 0px 50px 50px;
    }

    .footer ul li {
        margin: 0px 0px 5px 50px;
    }

    .footer__nav {
        margin: 50px 0px 20px 0px;
    }

    /*下層ページ---------------*/
    /*下層ページ見出し*/
    .subpageHeading {
        height: 150px;
    }

    .subpageHeading__text1 {
        font-size: 2rem;
    }

    .subpageHeading__text2 {
        display: none;
    }

    .subpageAbout {
        margin-top: 50px;
        text-align: center;
    }

    /*対応エリア*/
    .areaBox .areaBox__text {
        padding: 0px;
    }

    .areaHeading {
        font-size: 1.5rem;
    }

    /*会社概要*/
    .company__title {
        font-size: 1.2rem;
    }

    /*便利屋リフォーム詳細*/
    /*サービス一覧見出し*/
    .subpageServiceHeading {
        height: 70px;
        flex-direction: column;
        background-color: #ffffff;
        background-image: none;
        color: #0068b8;
        font-size: 1.2rem;
        text-align: left;
        font-weight: bold;
        border-bottom: 2px solid;
        border-image: linear-gradient(to right, #209cff, #68e0cf)1;
    }

    .subpageServiceHeading__text1 {
        font-size: 2rem;
        padding: 0px 0px 0px 10px;
        line-height: 2rem;
    }

    .subpageServiceHeading__text2 {
        font-size: 0.8rem;
        height: 0rem;
        padding-left: 10px;
    }

    .serviceList {
        display: none;
    }

    .serviceDescription__flex {
        padding: 0px;
        margin: 50px 0px 0px;
    }

    /*便利屋料金---------------*/

    .handymanPrice {
        padding-top: 50px;
    }

    .handymanPriceHeading {
        font-size: 1.5rem;
    }

    .priceBox2 {
        padding-top: 30px;
    }

    .priceBox p span {
        font-size: 2.5rem;
    }

    .priceBox:before,
    .priceBox2:before {
        font-size: 1rem;
    }

    .priceBox2List {
        margin: 10px auto 15px;
    }

    /*コンタクトフォーム---------------*/
    .contact-container {
        width: 90%;
    }

    /*プライバシーポリシー---------------*/
    .privacy {
        max-width: 95%;
    }
    }

    .color__ffffff {
    color: #ffffff;
    }



@media screen and (min-width: 501px) {
    .sp {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .pc {
        display: none;
    }
}