@charset "UTF-8";


.fixed {
    position: fixed;
}

.button_box {
    text-align: center;
    font-family: "M PLUS Rounded 1c", sans-serif;
    & .button {
        width: 100%;
        max-width: 300px;
        height: auto;
        font-size: clamp(1rem, 0.849rem + 0.75vw, 1.313rem);
        font-weight: 500;
        color: #000;
        border: #3d3d3d solid 1px;
        border-radius: 50px!important;
        background: #fff;
        padding: 8px 0;
        box-sizing: border-box;
        transition: 0.3s;
        &:hover {
            border: solid 1px #dedede;
            background-color: #ffedba;
            cursor: pointer;
        }
        @media screen and (max-width: 955px) {
            max-width: 250px;
        }
    }
}

.uk-modal {
    padding: initial;
}
.uk-modal-close {
    & svg {
        display: none;
    }
}

.modal,.modal2,.modal3,.modal4,.modal5 {
    display: none;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.ScrollContent
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal__overlay {
    background: rgba(0, 0, 0, 0.5);
    height: 100vh;
    position: absolute;
    width: 100%;
}


/*×ボタン*/
.close {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #fff;
    font-size: 5vw;
    position: absolute;
    top: -3vw;
    right: -3vw;
    cursor: pointer;
    z-index: 30;
    &:hover {
        color: #fff;
    }
}

.modalScroll {
    background: #fff;
    height: 70vh;
    width: 70vw;
    max-width: 1000px;
    padding: 20px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modalScroll2,.modalScroll3,.modalScroll4 {
    background: #fff;
    width: 70vw;
    max-width: 1000px;
    padding: 20px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ScrollContent {
    overflow-y: scroll;
    height: 70vh;
    width: 70vw;
    max-width: 1000px;
    border-radius: 20px;
}
::-webkit-scrollbar {
    border-radius: 10px;
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #b6b6b6;
    border-radius: 10px;
}

.modal_content h1,
.modal_content {
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 5vw;
    padding-right: 1em;
}
/*中身*/
.modal_content h4 {
    font-size: 2rem;
    font-weight: 600;
    color: #363636;
    text-align: center;
    margin: 0.5em 0;
}

.modal_content h5 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #363636;
    background: #dedede;
    padding: 0.3em 0;
    margin: 0.5em 0;
}
.modal_content{
    padding-bottom: 0;
    & ul {
        & li {
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-size: clamp(0.75rem, 0.629rem + 0.6vw, 1rem);
            text-align: left;
            line-height: 21px;
            list-style: disc;
            margin-left: 1em;
        }
    }
}
.modal_content p {
  font-size: 0.9rem;
}
.modal2 .modal_content p,
.modal3 .modal_content p, 
.modal4 .modal_content p
{
  font-size: 0.9rem;
  text-align: left;
  line-height: 1.4;
  @media screen and (max-width: 600px) {
    font-size: 0.7rem;
  }
}
.line {
  text-align: left;
}
.line_box {
  display: flex;
  justify-content: center;
}
.line_box :first-child {
  margin-right: 2em;
}
.breed {
  width: 30vw;
  display: flex;
  justify-content: space-between;
  color: #363636;
  border-bottom: 1px solid #b6b6b6;
  margin-top: 0.8em;
  margin-left: 1em;
}
.ko_gata {
  background: #d6eaf7;
  padding: 0.2em 0.3em;
  border-radius: 0.4em;
  margin-bottom: 0.1em;
}
.cyu_gata {
  background: #d7f298;
  padding: 0.2em 0.3em;
  border-radius: 0.4em;
  margin-bottom: 0.1em;
}
.o_gata {
  background: #fcd0c3;
  padding: 0.2em 0.3em;
  border-radius: 0.4em;
  margin-bottom: 0.1em;
}
.blank {
  border-bottom: none;
}
.mix {
  margin: 1em;
  line-height: 1.5;
}

@media screen and (max-width: 1080px) {
  .modalScroll {
    background: #fff;
    height: 70vh;
    width: 80vw;
  }
  .modal2 .modalScroll,
  .modal3 .modalScroll,
  .modal4 .modalScroll {
    background: #fff;
    height: 35vh;
    width: 80vw;
  }
  .modal2 .ScrollContent,
  .modal3 .ScrollContent,
  .modal4 .ScrollContent {
    overflow-y: scroll;
    height: auto;
    width: 80vw;
    max-width: 1000px;
    border-radius: 20px;
  }
  .ScrollContent {
    overflow-y: scroll;
    height: 70vh;
    width: 80vw;
    max-width: 1000px;
    border-radius: 20px;
  }

  .modal_content p {
    font-size: 1.2vw;
  }

  .breed {
    width: 40vw;
  }
}
@media screen and (max-width: 600px) {


  .modal a,.modal2 a,.modal3 a,.modal4 a {
    color: #fff;
    font-size: 10vw;
    position: absolute;
    top: -12vw;
    right: -3vw;
  }
  .modalScroll {
    background: #fff;
    height: 80vh;
    width: 85vw;
    max-width: 1000px;
    padding: 3vw;
    padding-right: 0vw;
    border-radius: 5vw;
  }
  .ScrollContent {
    overflow-y: scroll;
    height: 80vh;
    width: 85vw;
    max-width: 1000px;
    border-radius: 20px;
  }
  .modal_content h1,
  .modal_content {
    color: rgb(49, 49, 49);
    text-align: center;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 5vw;
    padding-right: 0;
  }
  .modal_content h4 {
    font-size: 4vw;
    font-weight: 600;
    color: #363636;
    text-align: center;
    margin: 0.5em 0;
  }

  .modal_content h5 {
    font-size: 3vw;
    font-weight: 600;
    color: #363636;
    background: #dedede;
    padding: 0.3em 0;
    margin: 0.5em 0;
    margin-right: 0.5em;
  }
  .modal_content p {
    font-size: 2.7vw;
  }
  .modal2 .modal_content p,
  .modal3 .modal_content p
  .modal4 .modal_content p {
    line-height: 1.4;
  }
  .line_box {
    display: block;
  }
  .line_box :first-child {
    margin-right: 1em;
  }
  .breed {
    width: 75vw;
    display: flex;
    justify-content: space-between;
    color: #363636;
    border-bottom: 1px solid #b6b6b6;
    margin-top: 0.8em;
    margin-left: 1em;
  }
  .blank {
    display: none;
  }
}


/* ------------------- 見積りモーダル ------------------- */

.uk-modal {
    font-family: "M PLUS Rounded 1c", sans-serif;
    z-index: 2022;
}

.agfpc-product-modal {
    border-radius: 5px;
    width: 350px;
    & .agfpc-product-modal-content {
        padding: 15px 20px;
        & p {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
        }
    }
    & .agfpc-product-modal-title {
        background: #FE5E45;
        color: #fff;
        padding: 15px 20px;
        border-radius: 5px 5px 0px 0px;
    }
    & .agfpc-modal-close {
        position: absolute;
        background-color: #FE5E45;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        top: -10px;
        & svg {
            width: 20px;
        }
    }
    & table {
        width: 100%;
        border: 1px solid #363636;
        border-radius: 5px;
        margin: 10px 0 15px 0;
        font-size: 14px;
        border-collapse: separate;
        border-radius: 5px;
        border-spacing: 0;
        & td {
            padding: 10px;
            width: 50%;
            vertical-align: baseline;
        }
        & tr:nth-child(1) {
            td:nth-child(1),
            td:nth-child(2) {
                border-bottom: 1px solid #363636;
            }
        }
    }
    & .result-wrap {
        display: flex;
        justify-content: space-evenly;
        gap: 5px;
        box-sizing: border-box;
        & .result {
            width: 100%;
            max-width: 100%;
            & .product-tit {
                font-size: 10px;
                text-align: center;
                line-height: 1.3;
                color: #fff;
                background-color: #FE5E45;
                border-radius: 10px 10px 0 0;
                padding: 6px 0;
                & span {
                    font-size: 15px;
                }
            }
            & .price-box {
                padding: 8px;
                background-color:  #FFDFDA;
                border-radius: 0 0 10px 10px;
                margin-bottom: 12px;
                & .price-li {
                    font-size: 14px;
                    text-align: center;
                    border-bottom: #FE5E45 dotted 2px;
                    margin-bottom: 10px;
                    padding-bottom: 10px;
                    &:last-child {
                        border-bottom: none;
                        margin-bottom: initial;
                    }
                    & span {
                        font-size: 10px;
                    }
                    & .price {
                        font-size: 12px;
                        margin-top: 8px;
                        & span {
                            font-size: 21px;
                            font-weight: 700;
                        }
                    }
                }
            }
            &.max-res {
                & .product-tit {
                    background-color: #00C4B6;
                }
                & .price-box {
                    background-color:  #C6F5F2;
                    & .price-li {
                        border-bottom: #00C4B6 dotted 2px;
                        &:last-child {
                            border-bottom: none;
                            margin-bottom: initial;
                        }
                    }
                }
            }
            & .apply-btn {
                display: inline-block;
                width: 100%;
                font-size: 13px;
                font-weight: 700;
                text-align: center;
                line-height: 1.3;
                color: #fff;
                background-color: #FE5E45;
                border-radius: 50px;
                border: none;
                padding: 10px 0;
                position: relative;
                cursor: pointer;
                &:after {
                    content: "";
                    width: 10px;
                    height: 10px;
                    border: 0;
                    border-top: solid 2px #fff;
                    border-right: solid 2px #fff;
                    position: absolute;
                    top: 45% !important;
                    right: 14px;
                    transform: translateY(-40%) rotate(45deg);
                    pointer-events: none;
                }
                & span {
                    font-size: 16px;
                }
                &.max-apply {
                    background-color: #00C4B6;
                }
            }
        }
    }

    .agfpc-product-button-group {
        text-align: center;
        margin: 20px 0;
    }

    .agfpc-btn-modal-apply {
        width: 100%;
        max-width: 280px;
        height: 48px;
        font-family: "M PLUS Rounded 1c", sans-serif;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        color: #fe5e45;
        border: #fe5e45 solid 2px;
        border-radius: 25px;
        padding-top: 13px;
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        &:after {
            content: "";
            width: 10px;
            height: 10px;
            border: 0;
            border-top: solid 2px #fe5e45;
            border-right: solid 2px #fe5e45;
            position: absolute;
            top: 45% !important;
            right: 14px;
            transform: translateY(-40%) rotate(45deg);
            pointer-events: none;
        }
    }

    .agfpc-btn-modal-close {
        width: 280px;
        border: 0;
        @media screen and (max-width: 955px) {
            min-width: 280px;
        }
    }

    .agfpc-estimate__amount {
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding: 10px 20px;
        justify-content: space-between;
        background-color: #fff;
        margin-bottom: 10px;
        width: 100%;
        font-size: 15px;
        font-style: normal;
        @media screen and (max-width: 955px) {
            padding: 10px;
        }

        & em {
            color: orange;
        }

        .value {
            color: orange;
            font-size: 24px;
            font-style: normal;
            font-weight: bold;
            margin-right: 6px;
        }
    }
}