@charset "utf-8";
.sp {
        display: none;
}

.pc {
        display: block;
}

/* yell-showa */
#yell-showa .navi-box {
        max-width: calc(1200px + 6%);
        width: 100%;
        padding: 0 3%;
        margin: 4rem auto;
}

#yell-showa .navi-box ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
}

#yell-showa .navi-box li {
        display: block;
        width: 16.5%;
        height: auto;
        float: none;
}

#yell-showa .top-box {
        max-width: calc(1200px + 6%);
        width: 100%;
        padding: 0 3%;
        margin: 4rem auto 0;
        position: relative;
        text-align: center;
}

#yell-showa .photo-area {
        max-width: calc(1200px + 6%);
        width: 100%;
        padding: 0 3%;
        margin: 2rem auto 5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
}

#yell-showa .photo-area .photo-box {
        width: 24%;
}

.main-contents {
        max-width: calc(1200px + 6%);
        width: 100%;
        padding: 0 3%;
        margin: 0 auto;
}

.main-title {
        text-align: center;
}

.main-title-style {
        font-size: 3.6rem;
        color: #99211b;
}

.main-fee-box {
        margin: 4rem auto 0;
        position: relative;
        z-index: -2;
        background-color: #f1c2dc;
}

.top-main-text {
        position: absolute;
        top: -5px;
        left: -20px;
        padding: 10px 20px;
        line-height: 1;
        font-size: 2rem;
        background-image: repeating-linear-gradient(
                -45deg,
                #f8e7e3 0,
                #f8e7e3 3px,
                #fafafa 3px,
                #fafafa 6px
        ); /*ストライプ*/
        border-left: 2px dotted rgba(0, 0, 0, 0.1); /* テープのギザギザ左*/
        border-right: 2px dotted rgba(0, 0, 0, 0.1); /* テープのギザギザ右*/
        transform: rotate(-3deg); /*テープの傾き*/
}

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

.monthly-fee {
        font-size: 3rem;
        font-weight: bold;
}

.monthly-fee-l {
        position: relative;
        color: #e6001b;
        font-size: 4.5rem;
}

.monthly-fee-l::after {
        content: "";
        background-color: #ffee00;
        width: 100%;
        height: 0.5em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-5deg);
        -webkit-transform: translate(-50%, -50%) rotate(-5deg);
        -ms-transform: translate(-50%, -50%) rotate(-5deg);
        z-index: -1;
}

.trunk-photo-wrap {
        max-width: 250px;
        margin-left: 8%;
}

.trunk-photo {
        width: 100%;
        transform: scale(1.4);
}

.example-contents {
        max-width: calc(1200px + 6%);
        padding: 0 3%;
        margin: 4rem auto;
}

.example-contents-title {
        margin-top: 1rem;
        text-align: center;
}

.example-contents-title h4 {
        margin-bottom: 1rem;
        color: #6cbdff;
        font-size: 3rem;
}

.example-contents-title p {
        color: #6cbdff;
        font-weight: bold;
        font-size: 2rem;
}

.example-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style-type: none;
}

.example-list-box {
        width: 32%;
        position: relative;
        margin: 2em 0;
        padding: 3.5rem 1rem 1rem 1.5rem;
        border: solid 4px #6cbdff;
        border-radius: 5px;
}

.example-list-box .example-box-title {
        position: absolute;
        display: inline-block;
        top: 0;
        left: -3px;
        padding: 0.3rem 3rem;
        background: #6cbdff;
        color: #ffffff;
        font-size: 1.8rem;
        font-weight: bold;
        border-radius: 0 0 5px 5px;
}

.example-list-box-detail {
        width: 95%;
        padding: 0;
        margin: 0;
        font-weight: bold;
        list-style-type: none;
}

.example-list-item {
        position: relative;
        padding: 0.7rem 1em 0.7rem 2.3em;
        margin-bottom: 5px;
        color: #6cbdff;
        font-size: min(2vw, 2.5rem);
        font-weight: bold;
        border-bottom: 1px dotted rgba(129, 194, 250, 0.5);
}

.example-list-item::after,
.example-list-item::before {
        content: "";
        position: absolute;
        border-radius: 50%;
}

.example-list-item::before {
        left: 0.2em;
        width: 17px;
        height: 17px;
        background: rgba(129, 194, 250, 0.5);
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}

.example-list-item::after {
        top: 1.1em;
        left: 0.7em;
        width: 14px;
        height: 14px;
        background: rgba(129, 194, 250, 0.3);
}

.example-number-of-pieces {
        margin-top: 2rem;
        font-size: 2rem;
        text-align: center;
}

.example-number-of-pieces-title {
        display: inline-block;
        position: relative;
        color: #e6001b;
        font-size: min(2.5vw, 35px);
}

.example-number-of-pieces-title::after {
        content: "";
        background-color: rgba(129, 194, 250, 0.3);
        height: 0.5em;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-5deg);
        -webkit-transform: translate(-50%, -50%) rotate(-5deg);
        -ms-transform: translate(-50%, -50%) rotate(-5deg);
        z-index: -1;
}

.example-img {
        width: 75%;
        margin-top: 2rem;
}

.main-contents-list {
        max-width: 1000px;
        margin: 2rem auto 3rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        list-style-type: none;
}

.main-contents-list-item {
        width: 23%;
        margin-bottom: 1rem;
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
        color: #99211b;
}

.circle {
        width: 85%;
        margin: 0 auto;
}

.list-item01 {
        width: 100%;
}

.ribbon {
        display: inline-block;
        position: relative;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 2.5rem;
        padding: 0 50px;
        margin: 3rem auto 2rem;
        background: #e6001b;
        color: #fff;
}

.ribbon::before,
.ribbon::after {
        position: absolute;
        content: "";
        width: 0px;
        height: 0px;
        z-index: 1;
}

.ribbon::before {
        top: 0;
        left: 0;
        border-width: 25px 0px 25px 15px;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
}

.ribbon::after {
        top: 0;
        right: 0;
        border-width: 25px 15px 25px 0px;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
}

.reason-box {
        display: flex;
        justify-content: space-between;
}

.reason-wrap {
        width: 49%;
        margin: 1em 0;
        background-color: #e3f2fd;
        border: 2px solid #6cbdff;
        letter-spacing: 0.3px;
}

.reason-wrap-title {
        color: #fff;
        font-weight: bold;
        font-size: 2.5rem;
        background-color: #6cbdff;
        padding: 4px 6px;
        text-align: center;
}

.reason-list {
        padding: 1rem;
        counter-reset: list;
        list-style-type: none;
        font-size: 2rem;
}

.reason-list-item {
        position: relative;
        line-height: 30px;
        margin: 7px 0 15px 40px;
        padding-left: 10px;
        font-weight: bold;
}

.reason-list-item::before {
        counter-increment: list;
        content: counter(list);
        position: absolute;
        top: 0;
        left: -35px;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;
        line-height: 30px;
        z-index: 1;
}

.reason-list-item::after {
        content: "";
        position: absolute;
        top: 3px;
        left: -32px;
        width: 25px;
        height: 25px;
        background: #99211b;
        color: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}

#yell-showa .content-box03,
#yell-showa .content-box04 {
        max-width: calc(1200px + 6%);
        padding: 0 3%;
        margin: 4rem auto;
}

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

        .pc {
                display: none;
        }

        #yell-showa .navi-box li {
                display: block;
                width: 32.5%;
                margin-bottom: 1%;
                float: none;
        }

        .main-title-style {
                font-size: 2.5rem;
        }

        .main-fee-box {
                margin: 2rem auto 0;
                padding: 5rem 0 1rem 0;
        }

        .example-contents {
                margin: 2rem auto;
        }

        .top-main-text {
                font-size: 1.5rem;
        }

        .monthly-fee {
                width: 73%;
                font-size: 3rem;
        }

        .monthly-fee-l {
                font-size: 3.5rem;
        }

        .trunk-photo {
                transform: scale(1);
        }

        .example-list {
                display: block;
        }

        .example-list-box {
                width: 100%;
                margin: 1rem auto;
                padding: 3.5rem 0.5rem 1rem 0.5rem;
        }

        .example-list-item {
                font-size: 2rem;
        }

        .example-number-of-pieces {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 0;
                margin-left: 1rem;
        }

        .example-title-wrap {
                width: 65%;
        }

        .example-number-of-pieces-title {
                display: inline;
                height: fit-content;
                font-size: 3.5rem;
        }

        .example-img-wrap {
                width: 33%;
        }

        .example-img {
                width: 100%;
                margin-top: 0;
        }

        .trunk-photo-wrap {
                width: 26%;
                margin: 0 auto;
        }

        #yell-showa .photo-area {
                flex-wrap: wrap;
                margin: 2rem auto;
        }
        #yell-showa .photo-area .photo-box {
                width: 48%;
                margin: 1rem auto;
        }

        .main-contents-list {
                flex-wrap: wrap;
                margin: 1rem auto;
        }

        .main-contents-list-item {
                width: 32%;
        }

        .circle {
                width: 95%;
        }

        .main-contents-list-item p {
                font-size: 1.5rem;
        }

        .ribbon {
                display: inline-block;
                position: relative;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 1.6rem;
                padding: 0 35px;
                margin: 1rem auto;
                background: #e6001b;
                color: #fff;
        }

        .reason-box {
                display: block;
        }

        .reason-wrap {
                width: 100%;
        }

        .reason-wrap-title {
                font-size: 1.8rem;
        }

        .reason-list {
                font-size: 1.6rem;
        }

        .reason-list-item {
                margin-left: 35px;
        }

        .main-contents-list::after {
                display: block;
                content: "";
                width: 32%;
                height: 0;
        }
}

@media screen and (max-width: 599px) {
        .sp {
                display: block;
        }

        #yell-showa .navi-box li {
                width: 49%;
        }
        .monthly-fee {
                width: 73%;
                font-size: 1.8rem;
        }

        .monthly-fee-l {
                font-size: 2.9rem;
        }

        .trunk-photo {
                transform: scale(1.4);
        }

        .example-number-of-pieces-title {
                font-size: 6vw;
        }

        #yell-showa .photo-area {
                display: block;
        }

        #yell-showa .photo-area .photo-box {
                width: 100%;
        }

        .main-contents-list-item {
                width: 48%;
        }
}