.mark {
    background: none
}

img {
    max-width: 100%
}

ul,
ol {
    list-style: none;
    padding: 0
}

.navbar-brand {
    box-sizing: border-box
}

.l-inner {
    width: 930px;
    padding: 0 15px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    margin: 0 auto
}

.row .col-xs-12.col-md-3 p {
    margin-bottom: 0;
}


@media(max-width: 768px) {
    .l-inner {
        padding: 0 20px
    }
}

@media(min-width: 769px) {
    .pc {
        display: block
    }

    .sp {
        display: none
    }

    br.pc {
        display: inline
    }
}

@media(max-width: 768px) {
    .pc {
        display: none
    }

    .sp {
        display: block
    }

    br.sp {
        display: inline
    }
}

.c-flex {
    display: flex;
    flex-wrap: wrap
}

.c-h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center
}

@media(max-width: 768px) {
    .c-h3 {
        font-size: 21px
    }
}

.c-btn {
    width: 260px;
    max-width: 100%
}

.c-btn.right {
    margin-left: auto
}

.c-btn.center {
    margin: 0 auto
}

.c-btn.consultation {
    width: 300px;
    padding: 0;
    margin-top: 60px
}

.c-btn.consultation a {
    background: linear-gradient(to bottom, #6ac795, #357954);
    color: #fff
}

.c-btn.consultation a:hover {
    background: linear-gradient(to bottom, #6ac795, #357954);
    opacity: .8
}

.c-btn.consultation a:before {
    background: url("../img/icon-arrow04.png");
    background-size: 100% 100%
}

.c-btn a {
    border-radius: 50px;
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
    font-size: 16px;
    color: #003046;
    font-weight: bold;
    display: block;
    border: 1px solid #013145;
    padding: 16px;
    text-align: center;
    position: relative;
    transition: .3s
}

.c-btn a:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background: url("../img/icon-arrow02-1.png");
    background-size: 100% 100%;
    right: 20px
}

.c-btn a:hover {
    background: linear-gradient(to bottom, #f4f4f4, #b9b9b9);
    text-decoration: none
}

@media(max-width: 768px) {
    .c-btn.right {
        margin: 0 auto
    }
}

.c-intro {
    margin: 40px 0px;
}

.c-intro-head {
    font-weight: bold;
    font-size: 32px
}

.c-intro-text {
    font-size: 16px;
    margin-top: 30px;
    text-align: center
}

.c-intro.left .c-intro-head,
.c-intro.left .c-intro-text {
    text-align: left;
}

@media(max-width: 768px) {
    .c-intro-head {
        font-size: 21px
    }

    .c-intro-text {
        word-break: keep-all;
        font-size: 12px;
        margin-top: 5px;
        text-align: center !important;
    }

    .c-intro.left .c-intro-head {
        text-align: center;
    }
}

#main {
    color: #222;
}

.fv {
    overflow: hidden;
    position: relative;
    max-height: 100vh
}

.fv .c-flex {
    align-items: center
}

.fv-head {
    text-align: center;
    font-size: 32px;
    line-height: 1.8;
    font-weight: bold;
    color: #fff;
    padding: 70px 0 180px;
    margin: 0
}

.fv-head img {
    display: none;
    margin-top: 30px
}

.fv .l-inner {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%)
}

.fv .video {
    width: 100%;
    overflow: hidden;
    z-index: -1
}

.fv .video video {
    width: 100%;
    height: auto
}

.fv .image {
    display: none
}

.fv .image img {
    width: 582px
}

@media(max-width: 768px) {
    .fv {
        margin-top: 0px
    }

    .fv-head {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
        padding: 0
    }

    .fv-head img {
        display: none
    }
}

#strengths {
    margin: 60px auto
}

#strengths a:hover {
    opacity: .6
}

@media(max-width: 768px) {
    #strengths {
        margin: 30px auto
    }
}

.category {
    padding: 80px 0 120px;
    background: url(bg-category.png) top center no-repeat
}

.category-list {
    justify-content: space-between
}

.category-list li {
    width: 46.66%;
    margin-top: 30px
}

.category-list li a {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 3px;
    border: 2px solid #e0e0e0;
    transition: .3s
}

.category-list li a:hover {
    opacity: .6;
    text-decoration: none
}

.category-list li a .image {
    width: 58%
}

.category-list li a p {
    width: 42%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #222;
    padding: 0 10px 20px;
    position: relative;
    line-height: 1.5
}

.category-list li a p:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -20px;
    width: 24px;
    height: 24px;
    background: url(../img/icon-arrow01.png);
    background-size: 100% 100%
}

.category-list li .noimage {
    justify-content: center;
    height: 100%
}

.category-list li .category-list-purpose a {
    border: none;
    border-bottom: 2px solid #ccc;
    background: none;
    color: #999;
    margin-top: 20px;
    padding-bottom: 6px;
    font-size: 1.6rem;
    width: 200px;
    position: relative;
    border-radius: 0
}

.category-list li .category-list-purpose a::before {
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 6px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #1E0000;
    ;
    border-right: 2px solid #1E0000;
    ;
    transform: rotate(45deg)
}

@media(max-width: 768px) {
    .category-list li {
        width: 100%
    }

    .category-list li a .image {
        width: 50%
    }

    .category-list li a p {
        width: 50%
    }

    .category-list li a p:before {
        bottom: -10px;
        width: 19px;
        height: 19px
    }

    .category-list li .noimage {
        height: 100px
    }
}

.sample {
    background: #f5f5f5;
    padding: 100px 0
}

.sample-list {
    justify-content: space-between
}

.sample-list li {
    width: 28%;
    margin-top: 50px
}

.sample-list li h3 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px
}

.sample-list li p {
    text-align: center;
    color: #1E0000;
    ;
    border: 1px solid #ccd4da;
    line-height: 1.5;
    padding: .2em
}

.sample-list li a {
    display: block;
    text-align: center;
    color: #1E0000;
    ;
    border: 1px solid #ccd4da;
    line-height: 1.5;
    padding: .2em;
    text-decoration: none !important
}

.sample-list li a:hover {
    opacity: .6
}

@media(max-width: 768px) {
    .sample {
        padding: 80px 0
    }

    .sample-list li {
        width: 46%;
        margin-top: 40px
    }

    .sample-list li h3 {
        font-size: 18px
    }

    .sample-list li p {
        font-size: 14px
    }
}

.about {
    padding: 80px 0 120px
}

.about-intro {
    padding-bottom: 70px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 70px
}

.about-intro .image {
    width: 38%
}

.about-intro .text {
    width: 62%;
    padding-left: 40px
}

.about-intro .text p {
    font-size: 16px;
    margin-bottom: 50px
}

.about-contents-list {
    justify-content: space-between
}

.about-contents-list li {
    width: 46.66%;
    margin-top: 50px
}

.about-contents-list li a {
    display: block;
    border: 2px solid #ccd4da;
    border-radius: 20px;
    transition: .3s;
    height: 100%;
    position: relative
}

.about-contents-list li a:hover {
    opacity: .6;
    text-decoration: none
}

.about-contents-list li a:before {
    content: "";
    position: absolute;
    bottom: 30px;
    right: 40px;
    background: url(../img/icon-arrow03.png) no-repeat;
    background-size: 100% 100%;
    width: 28px;
    height: 28px
}

.about-contents-list li .image img {
    border-radius: 18px 18px 0 0
}

.about-contents-list li .text {
    padding: 30px 40px 65px;
    position: relative
}

.about-contents-list li .text h4 {
    font-size: 18px;
    font-weight: bold;
    color: #003046;
    margin-bottom: 15px
}

.about-contents-list li .text p {
    color: #222
}

@media(max-width: 768px) {
    .about-intro .image {
        width: 100%;
        margin-bottom: 30px
    }

    .about-intro .text {
        width: 100%;
        padding-left: 0px
    }

    .about-intro .text p {
        font-size: 16px;
        margin-bottom: 50px
    }

    .about-contents-list li {
        width: 100%;
        margin-top: 30px
    }

    .about-contents-list li .text {
        padding: 30px 30px 55px
    }

    .about-contents-list li .text h4 {
        font-size: 16px;
        margin-bottom: 20px
    }

    .about-contents-list li .text:before {
        bottom: 20px;
        right: 30px;
        width: 32px;
        height: 32px
    }
}

.shop {
    padding: 80px 0;
    background: url(img/bg-shop.png) no-repeat;
    background-size: cover;
    color: #fff
}

.shop .c-intro-head {
    color: #fff
}

@media(max-width: 768px) {
    .shop {
        background-size: auto 100%
    }
}


.step-list {
    display: flex;
    justify-content: center;
    /* 追加 */
}

/*

.flow .service {
    border: 1px solid #ccd4da;
    border-top: 5px solid #1E0000;;
    padding: 50px 50px 70px;
    margin-top: 90px
}

.flow .service .c-h3 {
    color: #442520
}

.flow .service-contents {
    justify-content: space-between;
    margin-top: 50px
}

.flow .service-contents .image {
    width: 42%
}

.flow .service-contents .text {
    width: 58%;
    padding-left: 40px
}

.flow .service-contents .text p {
    margin-bottom: 50px
}

@media(max-width: 768px) {

    .flow .service {
        padding: 50px 20px 70px
    }

    .flow .service-contents {
        justify-content: space-between;
        margin-top: 50px
    }

    .flow .service-contents .image {
        width: 100%;
        margin-bottom: 30px
    }

    .flow .service-contents .text {
        width: 100%;
        padding-left: 0px
    }

    .flow .service-contents .text p {
        margin-bottom: 50px
    }
}
*/

.step {
    width: 260px;
    margin: 0 1.5%;
    border: 3px solid #000;
    padding: 45px 10px 20px 10px;
    text-align: center;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    position: relative;
    margin: 20px 20px;
    background-color: white;
}

.step::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    /* 左端を中央に */
    transform: translateX(-50%);
    /* 左へ自身の幅の半分移動 */
    width: 35%;
    height: 8px;
    background-image: linear-gradient(to right,
            #f5f5f5 0%,
            #f5f5f5 calc(15% - 8px),
            /* 左側の切り欠き */
            transparent calc(15% - 8px),
            transparent calc(15% - 3px),
            /* .step-number 部分 */
            #f5f5f5 calc(0% + 0px),
            #f5f5f5 calc(85% + 3px),
            /* 右側の切り欠き */
            transparent calc(85% - 8px),
            transparent calc(85% + 8px),
            #f5f5f5 calc(85% + 8px),
            #f5f5f5 100%);
    z-index: 10;
}

.step-number {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 15px;
    background-color: #f08200;
    color: #000000;
    /* 文字色を白に */
    border-radius: 50%;
    font-size: 30px;
    font-weight: 900;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    border-color: #000;
    border: 3px solid #000;
    /* 黒い枠を追加 */
}

.step-num {
    font-size: 20px;
    font-weight: 900;
    display: block;
    color: #fff;
}

.step-text {
    font-size: 10px;
    margin-top: 10px;
    color: #000;
}

.step-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    color: #000;
    position: relative;
    /* ::after の位置基準にする */
    padding-bottom: 5px;
    /* 下線の分の余白を追加 */
}

.step-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    /* 5px下にずらす */
    width: 100%;
    height: 2px;
    background-color: #f08200;
    /* オレンジ色 */
}

.step-description {
    font-size: 14px;
    height: 120px;
    margin: 30px 5px 0px 5px;
}

.step-container {
    display: flex;
    justify-content: center;
}

#customer {
    background-color: #fff
}

#customer li {
    list-style: none
}

.customer {
    margin-top: 80px;
    padding: 0
}

.customer li {
    margin-bottom: 20px
}

.customer li img {
    display: block;
    width: 80%;
    margin: 0 auto
}

.list-customer {
    margin: 40px 0;
    padding: 0
}

.list-customer li {
    margin: 0 10px 10px;
    font-size: 1.5rem
}

.madeia {
    flex-wrap: nowrap;
    margin: 0 auto;
    border: solid 1px #ccc;
    align-items: center
}

.madeia p {
    margin: 0 20px 0 30px;
    font-weight: bold
}

.madeia .mediaitem {
    width: 12%;
    padding: 10px
}

@media screen and (max-width: 991px) {
    .madeia p {
        margin: 0 10px 0 20px;
        font-size: 1.4rem
    }
}

@media screen and (max-width: 767px) {
    #customer {
        margin: 80px 0
    }

    .madeia {
        flex-wrap: wrap
    }

    .madeia .mediaitem {
        width: 20%
    }
}

.consultation {
    padding: 120px 0 150px;
    background: #003046
}

.consultation .c-intro-head {
    color: #fff;
    line-height: 1.8;
    font-size: 26px
}

.u-tac {
    text-align: center !important
}

.u-tal {
    text-align: left !important
}

.u-tar {
    text-align: right !important
}


/* inview.cssからの抜粋 */
/* upアニメーションの基本設定（改善版） */
.up {
    opacity: 0;
    transform: translateY(20px); /* 下に20pxずれた状態 */
}

.upstyle {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻る */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの基本速度 */
}
.fade-in-text {
    visibility: hidden;
    word-break: keep-all;

}

.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(-30deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

h2.c-intro-head.fade-in-text {
    color: #222;
    /* 本来の黒系の色を指定 */
}


/* オープンチャット紹介セクション */

#open-chat-promo .chat-title {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    /* 少し影をつけて可読性を確保 */
    /* 見出しを少し小さくしてバランス調整 */
}

#open-chat-promo {
    padding: 80px 20px;
    background: linear-gradient(135deg, #1DE9B6, #1DC8CD);
    color: #fff;
    text-align: center;
}

#open-chat-promo .chat-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

#open-chat-promo .chat-description {
    font-size: 1.3rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
    opacity: 0.9;
    word-break: keep-all;
}

#open-chat-promo .chat-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px auto;
    max-width: 700px;
    text-align: left;
    display: inline-block;

}

#open-chat-promo .chat-features li {
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);

    word-break: keep-all;
}

/* ▼ アンダーラインの指定を削除 ▼ */
#open-chat-promo .chat-features strong {
    color: #f8ffac;
    /* ▼ 黄色から白に変更 ▼ */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    /* 少し影をつけて可読性を確保 */
    font-weight: bold;
    font-size: x-large;
}

#open-chat-promo .chat-features .fa-check-circle {
    margin-right: 10px;
    font-size: 1.3em;
    color: #f0ff5a;
}

/* ▼▼▼ スマートフォン表示用のスタイル調整 ▼▼▼ */
@media screen and (max-width: 768px) {
    #open-chat-promo {
        padding: 60px 15px;
        /* 余白を調整 */
    }

    #open-chat-promo .chat-title {
        font-size: 1.5rem;
        font-weight: bold;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
        /* 少し影をつけて可読性を確保 */
        /* 見出しを少し小さくしてバランス調整 */
    }

    #open-chat-promo .chat-description {
        font-size: 1rem;
        /* 説明文を少し小さく */
        margin-bottom: 30px;
    }

    #open-chat-promo .chat-features li {
        font-size: 1rem;
        /* リストの文字も少し小さく */
        line-height: 1.6;
        /* 行間を少し広げて読みやすく */
        white-space: normal !important;
    }

    /* ▼ display: contents; を維持する ▼ */
    #open-chat-promo .chat-features strong {
        display: contents;
        color: #f8ffac;
        /* ▼ 黄色から白に変更 ▼ */
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
        /* 少し影をつけて可読性を確保 */
        font-size: large;
    }


}

/*# sourceMappingURL=style.min.css.map */