@charset 'utf-8';
/*
 * name:care.css
 * author:sovanda nulo
*/

/* care
------------------------------------------------ */


    @media only screen and (min-width: 768px) {
        #p-head:before { content: ''; display: block; position: absolute; width: 192em; height: 91.5em; left: 50%; top: 0; transform: translateX(-50%); background-image: url(../../img/care/cloud-head.png); background-repeat: no-repeat; background-size: 100% 100%; }
    }
    @media only screen and (max-width: 768px) {
        #p-head { background: #FCF9F5; }
        #pop-banner { display: none !important; }
    }

/* section about */
#c-about { padding-top: 3em; padding-bottom: 17.7em; }
.c-about--desc { font-size: 2.2em; line-height: 2; text-align: center; }

    @media only screen and (max-width: 768px) {
        #c-about { padding-top: 0; padding-bottom: 3.7em; }
        #c-about:before,
        #c-about:after { content: ''; display: block; position: absolute; width: 100vw; left: 50%; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; background-size: 100% 100%; }
        #c-about:before { background: #FCF9F5; top: 0; bottom: initial; height: calc( 100% - 5em ); }
        #c-about:after { height: 17.4em; bottom: -5em; background-image: url(../../img/care/cloud-head_sp.png); }
        .c-about--desc { font-size: 1.6em; margin: 0 -1em; }
    }

/* section benefit */
#c-benefit { padding-top: 15em; padding-bottom: 14.7em; }
.c-benefit--title { font-size: 4em; font-weight: bold; line-height: 1.5; text-align: center; margin-bottom: 1em; }
.c-benefit__lists { display: block; position: relative; }
.c-benefit__lists:not(:last-child) { margin-bottom: 14.5em; }
.c-benefit__lists--desc { position: relative; display: block; max-width: 60em; margin: 0 auto; }
.c-benefit__lists--tlt { font-size: 2.3em; font-weight: bold; line-height: 1.4; text-align: center; color: #EB6D8E; margin-bottom: .82em; }
.c-benefit__lists--cmn { font-size: 1.6em; line-height: 1.7; }

.c-benefit__lists--slides { position: relative; display: block; overflow: hidden; padding-bottom: 5em; margin-bottom: 7.6em; }
.c-benefit__lists--slides:before,
.c-benefit__lists--slides:after { content: ''; display: inline-block; position: absolute; width: 12.589em; height: 15.386em; background-repeat: no-repeat; background-size: 100% 100%; z-index: 2; }
.c-benefit__lists--slides:before { top: 0; left: 0; background-image: url(../../img/care/frame-top.png); }
.c-benefit__lists--slides:after { bottom: 4.95em; right: -.05em; background-image: url(../../img/care/frame-bot.png); }
.c-benefit__lists--num { font-family: 'Barlow', sans-serif; font-weight: bold; position: absolute; z-index: 3; top: 0; left: 3em; display: flex; flex-direction: column; text-align: center; color: #40A598; }
.c-benefit__lists--num small { font-size: 1.3em; letter-spacing: .07em; line-height: 1.23; }
.c-benefit__lists--num span { font-size: 5.5em; letter-spacing: .05em; line-height: 1; margin-top: -.05em; display: inline-block; }
.c-benefit__lists--slide { overflow: initial; }
.c-benefit__lists--slide .swiper-slide { display: block; overflow: hidden; border-radius: 3em; }
.c-benefit__lists--slide .swiper-pagination { height: 2em; bottom: -5em; top: auto; }
.c-benefit__lists--slide .swiper-pagination-bullet { position: relative; width: 2em; height: 2em; margin: 0 .25em !important; background: none; transition: all .3s ease; opacity: 1; }
.c-benefit__lists--slide .swiper-pagination-bullet:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #ccc; transform: scale(.5); }
.c-benefit__lists--slide .swiper-pagination-bullet-active { background: #66B7AC; }
.c-benefit__lists--slide .swiper-pagination-bullet-active:after { background: #fff; }

    @media only screen and (min-width: 768px) {
        .c-benefit__lists:before { content: ''; display: block; position: absolute; width: 135.949em; height: 79.8em; right: -108.6em; bottom: -42.8em; background-image: url(../../img/care/cloud-small.png); background-repeat: no-repeat; background-size: 100% 100%; }
        .c-benefit__lists:nth-of-type(1):before,
        .c-benefit__lists:nth-of-type(4):before { content: ''; }
        .c-benefit__lists:nth-of-type(3):before { content: ''; right: auto; bottom: -18em; left: -115.3em; }

    }

    @media only screen and (max-width: 768px) {
        #c-benefit { padding-top: 10em; padding-bottom: 0; }
        .c-benefit--title { font-size: 2.2em; line-height: 1.3; margin-bottom: 1.1em; }
        .c-benefit__lists:not(:last-child) { margin-bottom: 6.5em; }
        .c-benefit__lists--tlt { font-size: 1.8em; line-height: 1.5; margin-bottom: .61em; }
        .c-benefit__lists:before { content: ''; display: block; position: absolute; width: 54.257em; height: 31.848em; right: -31.5em; bottom: -13.5em; background-image: url(../../img/care/cloud-small.png); background-repeat: no-repeat; background-size: 100% 100%; }
        .c-benefit__lists:nth-child(2n):before { width: 37.791em; height: 22.183em; bottom: auto; top: 16.7em; left: -23.3em; right: auto; }
        .c-benefit__lists:nth-of-type(3):before { bottom: -11.5em; }
        .c-benefit__lists:nth-of-type(4):before { top: 14.7em;  }
        .c-benefit__lists:nth-of-type(5):before { bottom: 18.5em; }
        .c-benefit__lists--desc { padding-right: .2em; }

        .c-benefit__lists--slides { width: calc( 100% + 4.5em ); margin-left: -1.5em; padding-bottom: 2.8em; margin-bottom: 3em; }
        .c-benefit__lists--slides:before,
        .c-benefit__lists--slides:after { width: 6.792em; height: 8.301em; }
        .c-benefit__lists--slides:after { content: none; }
        .c-benefit__lists--num { left: 1.5em; top: -.3em; }
        .c-benefit__lists--num small { font-size: 1em; }
        .c-benefit__lists--num span { font-size: 2.9em; }
        .c-benefit__lists--slide { overflow: initial; }
        .c-benefit__lists--slide .swiper-slide { display: block; overflow: hidden; border-radius: 3em; }
        .c-benefit__lists--slide .swiper-pagination { margin-left: -1.5em; height: 1.8em; bottom: -2.8em; }
        .c-benefit__lists--slide .swiper-pagination-bullet { width: 1.8em; height: 1.8em; margin: 0 .5em !important; }
    }

/* section benefit */
#c-school { padding-top: 25.3em; padding-bottom: 23.8em; margin-bottom: 10em; }
.c-school--tlt { font-size: 4em; font-weight: bold; line-height: 1.4; text-align: center; color: #EB6D8E; }
.c-school__boxs { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 13.2em; }
.c-school__box { padding: 7.3em 3em 3.7em; margin: 0 3em; width: 30.3%; display: block; position: relative; background: #fff; border-radius: 3em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); box-sizing: border-box; }
.c-school__box--cloud { position: absolute; left: 50%; top: -9em; transform: translateX(-50%); width: 23.5em; }
.c-school__box--cloud figcaption { font-size: 2.3em; font-weight: bold; line-height: 1.3; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; }
.c-school__box--desc { font-size: 1.6em; line-height: 1.7; }

.c-school__note { display: block; text-align: center; margin-top: 7em; }
.c-school__note--desc { font-size: 2.3em; line-height: 1.3; position: relative; display: inline-block; }
.c-school__note--desc:after,
.c-school__note--desc:before { content: ''; display: inline-block; position: absolute; top: 0; width: .086em; height: 4.78em; background: #C8883D; border-radius: 1em; }
.c-school__note--desc:before { left: -2.39em; transform: rotate(-42deg); }
.c-school__note--desc:after { right: -1.6em; transform: rotate(42deg); }

.c-school--icon { position: relative; max-width: 41.563em; margin: 3.5em auto 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; z-index: 5; }
.c-school--icon li { display: inline-block; height: 9.525em; transform-origin: -100% 100%; }
.c-school--icon li img { height: 100%; width: auto; }
.c-school--icon li:nth-of-type(1) { animation: ringTheBell3 1.5s ease-in-out infinite; }
/*.c-school--icon li:nth-of-type(2) { animation: ringTheBell1 2.6s infinite ease-in-out; }*/
.c-school--icon li:nth-of-type(2) { animation: none; }
.c-school--icon li:nth-of-type(3) { animation: ringTheBell3 2s infinite; }

    @media only screen and (min-width: 768px) {
        #c-school:before { content: ''; display: block; position: absolute; width: 170.2em; height: 100%; left: 50%; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; background-size: 100% 100%; background-image: url(../../img/care/cloud-full.png); }
        .c-school__box:nth-child(n+3) { margin-top: 13.2em; }
    }

    @media only screen and (max-width: 768px) {
        #c-school { padding-top: 9.5em; padding-bottom: 6.8em; margin-bottom: 0; }
        #c-school:before,
        #c-school:after { content: ''; display: block; position: absolute; width: 100vw; left: 50%; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; background-size: 100% 100%; }
        #c-school .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 15em ); left: 50%; top: 10em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        #c-school:before { top: -5.5em; height: 30em; bottom: auto; background-image: url(../../img/care/cloud-botH_sp.png); }
        #c-school:after { height: 22.7em; background-image: url(../../img/care/cloud-bot_sp.png); }
        .c-school--tlt { font-size: 2.2em; }
        .c-school__boxs { display: block; margin-top: 7.1em; }
        .c-school__box:not(:last-child) { margin-bottom: 9em; }
        .c-school__box { padding: 8.6em 2em 3.7em; margin: 0; width: 100%; }
        .c-school__box--cloud { top: -5em; width: 19em; }
        .c-school__box--cloud figcaption { font-size: 1.8em; line-height: 1.27; }
        .c-school__box--desc { font-size: 1.6em; line-height: 1.7; }

        .c-school__note { margin-top: 6em; }
        .c-school__note--desc { font-size: 1.6em; line-height: 2; }
        .c-school__note--desc:after,
        .c-school__note--desc:before { top: auto; bottom: 0; width: .125em; height: 9.375em; }
        .c-school__note--desc:before { left: -2.1em; transform: rotate(-16deg); }
        .c-school__note--desc:after { right: -2.1em; transform: rotate(16deg); }

        .c-school--icon { max-width: 23.589em; margin-top: 2.2em; }
        .c-school--icon li { height: 5.4em; }
    }
/*@keyframes ringTheBell3 {
	0% { transform: translateY(0) rotate(0); }
	10% { transform: translateY(-20px) rotate(15deg); }
	20% { transform: translateY(-20px) rotate(0deg); }
	25% { transform: translateY(-10px) rotate(0)}
	30% { transform: translateY(0) rotate(0); }
	70% { transform: translateY(0) rotate(0); }
	100% { transform: translateY(0) rotate(0); }
}*/

@keyframes ringTheBell3 {
    0% {transform: translateY(0) rotate(0deg);}
    20% {transform: translateY(-5em) rotate(10deg);}
    30% {transform: translateY(.5em) rotate(-10deg);}
    70% {transform: translateY(0px) rotate(0deg);}
     100% { transform: translateY(0) rotate(0); }
}