body {
 font-size: 18px;
 font-family: "M PLUS Rounded 1c";
 background: url(/assets/img/pitacure/pta.gif) repeat;
}

ul,li,ol {
    list-style: none
}

a,a:visited {
    text-decoration: none;
    color: #fff;
    transition: all .3s ease;
}

section {
    width: 100%;
}

/*------------------------
hello content
------------------------*/
.hello-wrap {
    background: url(/assets/img/pitacure/hello-bg.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    border-bottom: 1px solid #45a3b6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hello-inner {
    background-color: #fff;
    border: 10px solid #53c3da;
    width: 740px;
    height: 740px;
    border-radius: 50%;
    padding: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hello-inner__logo {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 5px dotted #54c3da;
}
.hello-inner__text {
    text-align: center;
    font-size: 1.5em;
    line-height: 2em;
    color: #54c3da;
}
.hello-inner__text--fill {
    background-color: #54c3da;
    color: #fff;
    width: 240px;
    display: inline-block;
    border-radius: 50px;
}

/*------------------------
section
------------------------*/
/* sectiion-header */
.s-header {
    max-width: 980px;
    margin: 0 auto;
    padding: 4em 1em 6em 1em;
    text-align: center;
    position: relative;
}
.s-header::after {
    content: "";
    position: absolute;
    background: url(/assets/img/pitacure/star.svg) no-repeat center center;
    width: 107px;
    height: 30px;
    margin-left: -54px;
    bottom: 70px;
}
.bg-2 .s-header::after {
    background: url(/assets/img/pitacure/star-w.svg) no-repeat center center;
}

.s-header__title--en {
    display: block;
    width: 240px;
    margin: 0 auto;
    padding-bottom: 1em;
}
.s-header__title--ja {
    font-size: 1.6em;
    text-align: center;
    position: relative;
    color: #54c3da;
}

/* container */
.s-container {
    width: 100%;
    margin: 0 auto;
}
.bg-w1 { background-color: #ffffff; }
.bg-w2 { background-color: #f4f3f1; }
.bg-b { background-color: #54c3da; }
.bg-1 { background: url(/assets/img/pitacure/bg_img1.jpg) no-repeat center center / cover; }
.bg-2 { 
    background: url(/assets/img/pitacure/bg_img2.jpg) no-repeat center center / cover;
    color: #fff;
}

.s-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 1em;
}
.s-container .s-inner:last-child {
    padding-bottom: 4em;
}
.s-inner .sub-title {
    text-align: center;
    margin-bottom: 1em;
}
.s-inner .sub-title img {
    margin: 0 auto;
}

.c-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.c-container.__center {
    align-items: center;
    justify-content: center;
}
.c-container__item {
    padding: 1em;
}

/* table */
.c-table__wrap {
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #54c3da;
    font-size: 1.4em;
    overflow: hidden;
    color: #54c3da;
}
.c-table__inline {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid #54c3da;
}
.c-table__title {
    background-color: #54c3da;
    padding: 1em;
    width: 20%;
    color: #fff;
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.c-table__body {
    padding: 1em;
    width: 80%;
}
.c-table__inline:last-child,
.c-table__inline:last-child .c-table__title {
    border-bottom: none;
}

/* box */
.c-box {
    background-color: #54c3da;
    border-radius: 18px;
    color: #fff;
    max-width: 780px;
    margin: 0 auto;
}
.c-box .c-container__item:first-child {
    padding-right: .5em;
    width: 40%;
}
.c-box .c-container__item:last-child {
    padding-left: .5em;
    width: 60%;
}
.c-box .c-container__item span {
    margin-bottom: .5em;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 5px 20px;
    display: inline-block;
}
.c-box .c-container__item .__title {
    color: #fff000;
    margin-bottom: .8em;
    padding-bottom: .5em;
    font-size: 1.4em;
    border-bottom: 2px dotted #fff000;
}
/* list */
.c-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.c-list.__full {
    flex-wrap: nowrap;
}
.c-list__item {
    padding: .5em;
}
.r-list {
    font-size: 1.5em;
    position: relative;
}
.r-list__item {
    margin-bottom: 1em;
    padding-left: 50px;
    display: block;
    width: auto;
}
.r-list__item::before {
    content: "";
    position: absolute;
    background-image: url(/assets/img/pitacure/li_before.png);
    width: 40px;
    height: 40px;
    left: 0;
}


.c-text.__body {
    text-align: center;
}
.bg-b .c-text.__body {
    color: #fff;
}
.c-text.__note {
    text-decoration: underline;
    text-underline-position: under;
}
.c-text.__note span {
    color: #fff000;
}

/* section-1 */
#sec1 .content-1 .sub-title img {
    margin: 0;
}
#sec1 .content-1 .sub-title {
    border-bottom: 3px dotted #54c3da;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
#sec1 .content-1 .__body {
    line-height: 1.8em;
}
#sec1 .content-1 .c-container__item:first-child {
    width: 60%;
}
#sec1 .content-1 .c-container__item:last-child {
    width: 40%;
}
.step-wrap {
    position: relative;
}
.step-wrap:nth-child(2) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.step-wrap img {
    text-align: center;
    margin: 0 auto;
}
.step__flow {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -109px;
    z-index: 2;
}
.step__text {
    margin-top: 1em;
}

/* section-4 */
.s4-bg1 {
    background: url(/assets/img/pitacure/s4-bg.png) no-repeat bottom right / contain;    
}
.recommend {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 2em;
}
.recommend-pic {
    width: 20%;
    margin: 1em;
}
.recommend-content {
    width: 80%;
    margin: 1em;
    border: 1px solid #fff;
    border-radius: 10px;
    position: relative;
}
.recommend-content:before {
    content: "";
    position: absolute;
    top: 20px;
    right: -20px;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
}
.recommend-content .__title {
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    padding: .5em;
    color: #54c3da;
}
.recommend-content .__title small {
    margin-right: 10px;
}
.recommend-content .__body {
    padding: .5em;
    color: #fff;
}
.recommend-point {
    padding: 0 1em;
    color: #fff;
}
.recommend-point .__title {
    font-size: 1.2em;
    padding: .5em 0;
    margin-bottom: 1em;
    border-top:  4px double ;
    border-bottom:  4px double ;
    text-align: center;
}
.recommend-point .__list {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
    counter-reset:number;
    list-style-type: none !important;
}
.recommend-point .__list-item {
    width: 40%;
    box-sizing: content-box;
    margin: 0 auto;
    margin-bottom: 1em;
    border-radius: 10px;
    background-color: #fff;
    color: #54c3da;
    position: relative;
    line-height: 1.5em;
    padding: 1em 1em 1em 2.5em;
}
.recommend-point .__list-item::before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display:inline-block;
    background: #ea5d5d;
    color: #fff;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 15px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);    
}

/*------------------------
banner
------------------------*/
.p-container {
    width: 100%;
    background: url(/assets/img/pitacure/banner-bg.jpg) no-repeat center center / cover;
    border-top: 2px solid #53c3da;
    border-bottom: 2px solid #53c3da;
}
.p-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 2em 1em;
}
.p-content {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.p-content .c-list {
    flex-wrap: nowrap;
}
.p-btn-container {
    width: 100%;
    background-color:  rgba(176, 237, 255, .5);
}
.p-btn-inner {
    max-width: 980px;
    padding: 2em 1em;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.p-btn-inner .p-price,
.p-btn-inner .p-button {
    padding: .5em;
}
.p-button img {
    transition: all .3s;
}
.p-button img:hover {
    opacity: .8;
}

/*------------------------
footer
------------------------*/
.footer {
    background-color: #54c3da;
    padding: 1em 2em;
}
.footer_inner {
    max-width: 980px;
    margin: 0 auto;
    color: #fff;
    font-size: .8em;
}
.footer_inner_list {
    display: flex;
    justify-content: space-between;
}

/* utility */
.__red { color: #ea5d5d; }
.__wh { color: #fff; }
.__ye { color: #fff000; }

.m0a { margin: 0 auto; }

.mb1 { margin-bottom: 1em !important; }
.mb2 { margin-bottom: 2em !important; }

.pt1 { padding-top: 1em !important; }
.pt2 { padding-top: 2em !important; }

/* fade */
.fade {
    opacity : 0;
    transform : translate(0, 80px);
    transition : all 500ms ease;
}
    
.fade.scroll {
    opacity : 1;
    transform : translate(0, 0);
}

.f_content .fade:nth-child(1) {
    -moz-transition-delay:100ms;
    -webkit-transition-delay:100ms;
    -o-transition-delay:100ms;
    -ms-transition-delay:100ms;
}
.f_content .fade:nth-child(2) {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
}
.f_content .fade:nth-child(3) {
    -moz-transition-delay:300ms;
    -webkit-transition-delay:300ms;
    -o-transition-delay:300ms;
    -ms-transition-delay:300ms;
}
.f_content .fade:nth-child(4) {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
}
.f_content .fade:nth-child(5) {
    -moz-transition-delay:500ms;
    -webkit-transition-delay:500ms;
    -o-transition-delay:500ms;
    -ms-transition-delay:500ms;
}

/*------------------------------------------------

tablet

------------------------------------------------*/
@media screen and (max-width: 820px) {
    .c-table__wrap {
        font-size: 1em;
    }
}

@media screen and (max-width: 580px) {
    img {
        margin: 0 auto;
    }

    /* table */
    .c-table__inline {
        display: block;
        text-align: center;
    }
    .c-table__title {
        width: 100%;
    }
    .c-table__body {
        width: 100%;
    }

    /* list */
    .c-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    .c-list.__full {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* section-1 */
    #sec1 .content-1 .c-container {
        display: block;
    }
    #sec1 .content-1 .c-container .c-container__item {
        width: 100%;
    }
    #sec1 .content-2 .c-list .c-list__item:nth-child(1) {
        margin-bottom: 3em;
    }
    #sec1 .content-2 .c-list .c-list__item:nth-child(2) {
        display: none;
    }
    /* section-2 */
    #sec2 .content-3 .c-container {
        display: block;
    }
    #sec2 .content-3 .c-container .c-container__item {
        width: 100%;
        padding: 1em;
    }
    #sec2 .content-3 .c-container .c-container__item span {
        width: 100%;
        display: block;
        text-align: center;
    }
    #sec2 .content-3 .c-container .c-container__item .__title {
        text-align: center;
    }
    /* section-4 */
    #sec4 .s4-bg1 {
        background-position: bottom right -120px;
    }
    #sec4 .recommend {
        flex-wrap: wrap;
        margin-bottom: 2em;
    }
    #sec4 .recommend-pic {
        width: 30%;
        margin: 0 auto;
    }
    #sec4 .recommend-content {
        width: 100%;
        margin: 0 0 2em 0;
    }
    #sec4 .recommend-content:before {
        right: 0;
        top: auto;
        bottom: -15px;
        left: 0;
        border-color: #fff transparent transparent transparent;
        border-width: 15px 15px 0 15px;
    }
    #sec4 .recommend-point {
        padding: 0;
    }
    #sec4 .recommend-point .__title span {
        display: block;
    }
    #sec4 .recommend-point .__list {
        display: block;
    }
    #sec4 .recommend-point .__list-item {
        width: 100%;
        box-sizing: border-box;
    }
    /* banner */
    .p-container .p-content {
        flex-wrap: wrap;
    }
    .p-container .p-content .c-list {
        flex-wrap: wrap;
    }
    .p-container .p-content .p-content__item:first-child {
        margin-bottom: 2em;
    }
    .p-container .p-btn-container .p-btn-inner {
        flex-wrap: wrap;
    }
    .p-container .p-btn-container .p-btn-inner .p-price {
        margin-bottom: 1em;
    }
}