@charset "utf-8";

@media screen and (max-width: 640px) {

    /* spサイズで画像の回り込みを解消、中央配置にする。（デフォルト設定） */
    img.alignleft, 
    img.alignright,
    figure.alignleft, 
    figure.alignright {
        float: none;
        display: block;
        margin: 0 auto;
        position: relative;
        right: 0;
    }

    img.alignleft::after, 
    img.alignright::after,
    figure.alignleft::after, 
    figure.alignright::after {
        content: "\A";
        white-space: pre;
    }

    /* spサイズでも画像の最大幅を50%にして、回り込みを有効にするクラス　br-no */
    img.alignleft.br-no {
        float: left;
        display: inline;
        max-width: 50%;
        margin: 0 10px 0 0;
    }

    img.alignleft.br-no::after {
        content: "";
        white-space: pre;
    }

    img.alignright.br-no {
        float: right;
        display: inline;
        max-width: 50%;
        margin: 0 0 0 10px;
    }
    img.alignright.br-no::after {
        content: "";
        white-space: pre;
    }
    /* グリッド */
    .pc-6,
    .pc-5,
    .pc-4,
    .pc-3,
    .pc-2,
    .tab-3,
    .tab-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tab-1,
    .sp-1 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .col-11, .col-10, .col-9 {
        width: 66.6666%;
    }
    .col-8, .col-7 {
        width: 50%;
    }
    .col-6 {
        width: 50%;
    }
    .col-5, .col-4 {
        width: 50%;
    }
    .col-3, .col-2, .col-1 {
        width: 33.3333%;
    }

    .col-6-7, .col-5-7 {
        width: 75%;
    }
    .col-4-7, .col-3-7 {
        width: 50%;
    }
    .col-2-7, .col-1-7 {
        width: 25%;
    }

    .col-4-5 {
        width: 75%;
    }
    .col-3-5 {
        width: 50%;
    }
    .col-2-5 {
        width: 50%;
    }
    .col-1-5 {
        width: 25%;
    }

    
    .col-sp-12 {
        width: 100%;
    }
    .col-sp-11 {
        width: 91.6666%;
    }
    .col-sp-10 {
        width: 83.3333%;
    }
    .col-sp-9 {
        width: 75%;
    }
    .col-sp-8 {
        width: 66.6666%;
    }
    .col-sp-7 {
        width: 58.3333%;
    }
    .col-sp-6 {
        width: 50%;
    }
    .col-sp-5 {
        width: 41.6666%;
    }
    .col-sp-4 {
        width: 33.3333%;
    }
    .col-sp-3 {
        width: 25%;
    }
    .col-sp-2 {
        width: 16.6666%;
    }
    .col-sp-1 {
        width: 8.3333%;
    }
    .col-sp-6-7 {
        width: 85.7142%;
    }
    .col-sp-5-7 {
        width: 71.4285%;
    }
    .col-sp-4-7 {
        width: 57.1428%;
    }
    .col-sp-3-7 {
        width: 42.8571%;
    }
    .col-sp-2-7 {
        width: 28.5714%;
    }
    .col-sp-1-7 {
        width: 14.2857%;
    }
    .col-sp-4-5 {
        width: 80%;
    }
    .col-sp-3-5 {
        width: 60%;
    }
    .col-sp-2-5 {
        width: 40%;
    }
    .col-sp-1-5 {
        width: 20%;
    }

    /* utility */

    .pd-sp-0 {
        padding: 0px;
    }
    .pd-sp-5 {
        padding: 5px;
    }
    .pd-sp-10 {
        padding: 10px;
    }
    .pd-sp-15 {
        padding: 15px;
    }
    .pd-sp-20 {
        padding: 20px;
    }
    .pi-sp-0 {
        padding-inline: 0px;
    }
    .pi-sp-5 {
        padding-inline: 5px;
    }
    .pi-sp-10 {
        padding-inline: 10px;
    }
    .pi-sp-15 {
        padding-inline: 15px;
    }
    .pi-sp-20 {
        padding-inline: 20px;
    }

    .gap-0 {
        gap: 5px 10px;
    }

    .gap-pc-0 {
        gap: 5px 10px;
    }

    .gap-10 {
        gap: 5px 10px;
    }

    .gap-pc-10 {
        gap: 5px 10px;
    }

    .gap-20 {
        gap: 5px 10px;
    }

    .gap-pc-20 {
        gap: 5px 10px;
    }

    .gap-30 {
        gap: 5px 10px;
    }

    .gap-pc-30 {
        gap: 5px 10px;
    }

    .gap-40 {
        gap: 5px 10px;
    }

    .gap-pc-40 {
        gap: 5px 10px;
    }

    .gap-50 {
        gap: 5px 10px;
    }

    .gap-pc-50 {
        gap: 5px 10px;
    }

    .gap-60 {
        gap: 5px 10px;
    }

    .gap-pc-60 {
        gap: 5px 10px;
    }

    .gap-tab-0 {
        gap: 5px 10px;
    }

    .gap-tab-10 {
        gap: 5px 10px;
    }

    .gap-tab-20 {
        gap: 5px 10px;
    }

    .gap-tab-30 {
        gap: 5px 10px;
    }

    .gap-sp-0 {
        gap: 0px;
    }

    .gap-sp-5 {
        gap: 5px;
    }

    .gap-sp-10 {
        gap: 10px;
    }

    .gap-sp-15 {
        gap: 15px;
    }

    .gap-sp-20 {
        gap: 20px;
    }

    /* ユーティリティクラス */
    .tab, .pc, .tab-inline, .pc-inline {
        display: none;
    }

    .sp {
        display: block;
    }

    .sp-inline {
        display: inline-block;
    }

    /*--- オリジナルCSS ---*/
    .header-logo {
        position: absolute;
        top: .5em;
        margin: 0;
        width: 28%;
    }
    header h1 {
        position: absolute;
        top: .4em;
        margin: 0;
        left: 11%;
        right: 11%;
        width: 78%;
    }
    .top-kv {
        background: url(../images/kv-sp.webp)top center no-repeat;
        background-size: cover;
        height: auto;
    }
    .top-kv h1 {
        width: 76%;
        margin: -6px auto 0;
    }
    .top-kv h2 {
        width: 68%;
        margin: 0 auto;
        padding-top: 19%;
    }
    .top-kv h3 {
        width: 47%;
        margin: -17px auto 0;
    }
    .top-kv a {
        width: 96%;
        margin: 64% auto 0;
    }
    .content1 {
        margin-top: 0;
    }
    .content1 h2 {
        margin: 10.5% auto 0;
        width: 74%;
    }
    .content1 p {
        margin: 3% auto 0;
        width: 94%;
    }
    .content2 {
        padding-top: 3.7%;
        padding-bottom: 100px;
    }
    .content2 .titlephoto {
        width: 40%;
        margin: 0 auto;
    }
    .content2 h2 {
        margin: 1% auto 7%;
        font-size: 1.5rem;
    }
    .content2 .sub-tittle {
        width: 98%;
        font-size: .9rem;
        margin: -5% auto 0;
    }
    .col-pc-5 {
        width: 45%;
        margin: 8% auto 3%;
    }
    .col-pc-6 {
        width: 86%;
        margin: auto;
    }
    .content2 .flex {
        margin: 0 0;
    }
    .content2 .flex p {
        margin-bottom: 2.4rem;
        line-height: 2.2rem;
        font-size: 1.2rem;
    }
    .content3 {
        padding-top: 13%;
    }
    .content3 .subtitle {
        margin: -2% auto 0;
        width: 70%;
    }
    .content3 .title {
        width: 86%;
        margin: 1.3% auto 0;
        padding-top: 0;
        background: url(../images/women.png) center bottom no-repeat;
        background-size: 62.5%;
        padding-bottom: 45%;
    }
    .content3 .title span {
        width: 100%;
        margin: auto;
        line-height: 1;
        padding-bottom: 2rem;
    }
    .content3 .title img {
        margin-bottom: .0rem;
    }
    .wangohan-2-3 {
        width: 45%;
        margin: auto;
    }
    .content3 .bg-color--f4efeb {
        padding-top: 7%;
        padding-bottom: 180px;
    }
    .content3 h2 {
        width: 90%;
        margin: 3.4% auto 0;
    }
    .content3 h3 {
        margin: 0.7% auto 5%;
        width: 98%;
    }
    .content3 .col-pc-9 {
        width: 91%;
        margin: 0 auto;
    }
    .content3 .col-pc-9 p {
        margin-left: 0;
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        line-height: 2.3rem;
    }
    .catchphrase {
        margin: 10% auto 0;
        width: 92%;
    }
    .content3 .col-pc-3 {
        width: 90%;
        margin: 8% auto 0;
    }
    .radius-30 {
        margin: 0 2%;
        width: 44%;
    }
    .content4 {
        background: url(../images/inu5.webp) top 0% right 16% no-repeat;
        background-size: 160%;
        border-top-right-radius: 50px;
        margin-top: -7%;
        margin-bottom: 0;
        position: relative;
        padding-top: 55%;
    }
    .content4 h2 {
        position: absolute;
        top: -9%;
        width: 85.2%;
        margin: 0 7.4% 0;
    }
    .content4 .bg-color-fff {
        width: 98%;
        margin: -16% auto 10%;
        padding-bottom: 50px;
    }
    .content4 h3 {
        margin: 0 auto;
        width: 66%;
    }
    .content4 h3 img {
        margin-top: -10%;
    }
    .content4 h4 {
        margin: -4% auto 0;
        width: 35.3%;
    }
    .content4 .naiyou-price-text-2 {
        width: 94%;
        margin: 0% auto 0;
        font-size: 4rem;
    }
    .naiyou-price-text-2 .middle {
        font-size: 2rem;
    }
    .naiyou-price-text-2 .small {
        font-size: 1.5rem;
    }
    .content4 ul {
        padding-left: 0;
        margin: 2.5% auto 0;
        width: 92%;
    }
    .content4 ul li {
        text-align: center;
        list-style: none;
        background: url(../images/naiyou-hr-sp.webp) center bottom no-repeat;
        padding-top: 0;
        margin-bottom: 0.3em;
        padding-bottom: .5em;
    }
    .content4 .naiyou-price-1 {
        width: 60%;
        margin: auto;
    }
    .content4 .naiyou-price-2 {
        width: 37%;
        margin: auto;
    }
    .content4 .naiyou-price-3 {
        width: 8%;
        margin: 1.5% auto;
    }
    .content4 .naiyou-price-4 {
        width: 94%;
        margin: auto;
    }
    p.naiyou-price-text {
        bottom: 0px;
        font-size: 2.5rem;
        letter-spacing: 0px;
    }
    .content4 .button-sanka {
        width: 98%;
        margin: 0 auto 3.5%;
        display: inline-block;
    }
    .content4 .tokuten-banner-1 {
        width: 92%;
        margin: 0 auto 2.5%;
    }
    .content5 {
        background: url(../images/photo-1.webp) right 22% top -3% no-repeat;
        background-size: 140%;
        padding-top: 42%;
        margin-bottom: 0;
    }
    .bg-color-f9d973 {
        padding-top: 30px;
        padding-bottom: 170px;
        background-color: #f9d973;
        border-top-left-radius: 50px;
    }
    .content5 h3 {
        background: url(../images/erareru-titlepic-sp.webp) top -3% center no-repeat;
        padding-top: 34%;
        margin: -12% auto 0;
        background-size: 25%;
        width: 90%;
    }
    .content5 ol {
        margin-right: -10px;
    }
    .content5 li {
        padding-left: 6.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 30px 0 0 30px;
        background-size: 15%;
    }
    .content5 li {
        border-radius: 30px 0 0 30px;
        background-size: 15%;
        padding: 1rem 2.5rem 1rem 6rem;
    }
    .erareru-1 {
        background: url(../images/erareru-1-sp.webp) top 1rem left 1rem no-repeat;
    }
    .erareru-2 {
        background: url(../images/erareru-2-sp.webp) top 1rem left 1rem no-repeat;
    }
    .erareru-3 {
        background: url(../images/erareru-3-sp.webp) top 1rem left 1rem no-repeat;
    }
    .erareru-4 {
        background: url(../images/erareru-4-sp.webp) top 1rem left 1rem no-repeat;
    }
    .erareru-photo {
        height: 29rem;
        margin-top: -2%;
    }
    .erareru-photo-1 {
        left: 10%;
        width: 80%;
        right: 10%;
        top: 0;
    }
    .erareru-photo-2 {
        left: 10%;
        top: 58%;
        width: 37.5%;
    }
    .erareru-photo-3 {
        right: 10%;
        top: 58%;
        width: 37.5%;
    }
    .content6 {
        position: relative;
        padding-bottom: 10rem;
    }
    .content6 h2 {
        text-align: center;
        width: 40%;
        margin: .8rem auto 1rem;
    }
    .content6 .setsumeibun {
        width: 90%;
        margin: 0 auto 1.8rem;
        line-height: 1.7;
    }
    .content6 .flex {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }
    @keyframes slide {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    .content6 .sliderarea-sp {
        display: flex;
        /* animation: slide 10s linear infinite; */
        margin-bottom: 0;
        overflow-x: scroll;
    }
    .content6 .voice1 {
        min-width: 100%;
        height: 100%;
    }
    .content6 .voice2 {
        min-width: 100%;
        height: 100%;
    }
    .inudeco {
        bottom: 0;
        right: 8%;
        top: -2%;
        width: 26%;
    }
    .content7 {
        border-top-left-radius: 50px;
        position: relative;
        margin-bottom: 8%;
        margin-top: -15%;
    }
    .content7 h2 {
        padding: 50px 5% 0;
        margin-bottom: 3%;
    }
    .pro-photo01 {
        float: none;
        margin: -2% auto 0;
        height: auto;
        width: 94%;
    }
    .pro-photo02 {
        float: none;
        margin: -2.4% auto 0;
        width: 94%;
    }
    .pro-text01 {
        float: none;
        width: 94%;
        margin: 7% auto 0;
    }
    .pro-text02 {
        float: none;
        width: 94%;
        font-size: .9rem;
        margin: 3% auto 0;
        border: solid 1px #000;
        padding: 1rem;
    }
    .pro-text02 p.font-07 {
        font-size: 0.9rem;
        margin-top: 0rem;
    }
    .content8 {
        background:url(../images/photo-2-sp.webp);
        border-top-right-radius: 50px;
        background-size: contain;
        background-position: top left 18%;
        background-repeat: no-repeat;
        padding-top: 45%;
        background-size: contain;
        padding-bottom: .5rem;
    }
    .content8 .osusume {
        width: 90%;
        margin: 0 5%;
    }
    .content8 .container {
        margin: 25% auto 6%;
        line-height: 1.8;
        width: 94%;
    }
    .content9 h2 {
        margin: -13% auto 0;
    }
    .content10 {
        padding-top: 4%;
    }
    .content10 .goyoyakuha-pic {
        position: absolute;
        left: 4%;
        width: 17%;
        top: 1.1%
    }
    .content10 h2 {
        width: 71%;
        margin: 0 auto 4%;
        padding-left: 1.5rem;
    }
    .content10 .bg-color-f5913b {
        padding: 5% 6% 2%;
        padding-bottom: 3px;
        margin-bottom: 15%;
    }
    .content10 .bg-color-f5913b .container {
        gap: 0;
        flex-direction: column;
    }
    p.form-tokuten-bunner {
        font-size: 3.5rem;
        width: 100%;
        padding-left: 0rem;
        text-align: center;
        margin: 0 auto;
        line-height: 1;
    }
    .form-tokuten-bunner .middle {
        font-size: 2rem;
    }
    .form-tokuten-bunner .small {
        font-size: 1.5rem;
    }
    .content10 ul {
        max-width: 100%;
        margin: 0 auto 1.5rem;
        font-size: .9rem;
    }
    .form-area {
        width: 94%;
        margin: auto auto;
        padding: 3rem 1.5rem;
    }
    .form-area h2 {
        width: 100%;
        margin: 0 auto 4%;
        padding-left: 0;
        font-size: 1.5rem;
    }
    .privacy-policy {
        border-top: solid 2px #0fba6e;
        border-right: solid 2px #0fba6e;
        border-bottom: solid 2px #0fba6e;
        border-left: solid 2px #0fba6e;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .submit {
        width: 96%;
    }
    .content11 p {
        width: 90%;
        margin: auto;
    }
    .content11 {
        margin-top: 10%;
        margin-bottom: 4rem;
        text-align: center;
    }
    .content11 .form-line {
        width: 90%;
        margin: auto;
    }
    .content11 .form-line-2 {
        width: 80%;
        margin: auto;
    }
    .content11 a {
        display: inline-block;
        width: 84%;
        margin: 10% auto 0;
    }
    .footer ul.sp-3 {
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr; 
    }
/*　お問い合わせ　*/
    body.contact .form-area {
        width: 94%;
        margin: auto auto;
        padding: 3rem 1.5rem;
    }
}