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

/* top
------------------------------------------------ */

#head-logo { opacity: 0; transition: linear .3s; }
#header.header-visible #head-logo,
#header.h-show #head-logo { opacity: 1; }

    @media only screen and (min-width: 768px) {
        .head-menu--links li a { color: #fff; }
        .head-insta a { position: relative; }
        .head-insta a i { border-color: #fff; }
        .head-insta a i:before { background-image: url(../../img/share/icon-insta-w.svg); }
        .head-insta a:hover i { background: #fff; }
        .head-insta a:hover i:before { background-image: url(../../img/share/icon-insta-p.svg); }
        .head-insta .i-insta { opacity: 0; }
        .head-insta .i-bginsta { position: absolute; left: 0; top: 0; border: none; opacity: 1; background: url(../../img/share/bg-insta.png) no-repeat; background-size: 100% 100%; }
        .head-insta .i-bginsta:before { content: none; }
        .head-insta a:hover .i-bginsta { background: url(../../img/share/bg-insta-h.png) no-repeat; background-size: 100% 100%; }

        #header.header-visible .head-menu--links li a { color: #4C4948; }
        #header.header-visible .head-insta a i { border-color: #EB6D8E; }
        #header.header-visible .head-insta a i:before { background-image: url(../../img/share/icon-insta-p.svg); } 
        #header.header-visible .head-insta a:hover i { background: #EB6D8E; }
        #header.header-visible .head-insta a:hover i:before { background-image: url(../../img/share/icon-insta-w.svg); }
        #header.header-visible .head-insta .i-insta { opacity: 1; }
        #header.header-visible .head-insta .i-bginsta { opacity: 0; }
    }

    @media only screen and (max-width: 768px) {
    	.head-insta .i-bginsta { display: none; }
        #ft-info { padding-top: 5em; }
        #ft-bot { padding-bottom: 11.5em; }
    }

/* section visual */
#visual { padding: 0; width: 100vw; height: 100vh; }
.visual--video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.visual--video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; object-fit: cover; }
.visual--logo { display: block; position: absolute; left: 50%; top: 50%; width: 30.72vw; transform: translate(-50%,-50%); z-index: 2; }
.visual--nurse { display: block; position: absolute; left: 12.86%; bottom: 12.59%; width: 13.33vw; z-index: 2;}
.visual--nurse a { display: block; }
.visual--nurse a img { transition: linear .3s; position: relative; z-index: 1; }
.visual--nurse a img:last-child { position: absolute; top: 0; left: 0; z-index: 0; }
.visual--scroll { display: flex; flex-wrap: wrap; align-items: center; position: absolute; left: -1.75em; bottom: -2.4em; z-index: 2; transform: rotate(90deg) translate(-90%, 0%); }
.visual--scroll dt { font-family: brandon-grotesque, sans-serif; font-size: 1.3em; line-height: 1; font-weight: bold; color: #fff; margin-right: 1.53em; }
.visual--scroll dd { display: flex; flex-wrap: wrap; align-items: center; }
.visual--scroll dd span { display: block; width: 1.1em; height: 1em; background: url(../../img/share/arrow-box-w.svg) no-repeat; background-size: 100% 100%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll-animate; animation-name: scroll-animate; -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); }
.visual--scroll dd span:not(:last-child) { margin-right: .8em; }
.visual--scroll dd span:nth-of-type(1) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.visual--scroll dd span:nth-of-type(2) { -webkit-animation-delay: .6s; animation-delay: .6s; }
.visual--scroll dd span:nth-of-type(3) { -webkit-animation-delay: .9s; animation-delay: .9s; }

    @supports ((-o-object-fit: cover) or (object-fit: cover)) {
        @-webkit-keyframes scroll-animate { 0% { opacity: 1; } 49.9% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
        @keyframes scroll-animate { 0% { opacity: 1; } 49.9% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
    }

    @media only screen and (min-width: 768px) and (min-height: 1px) and (max-height: 1080px) {
        .visual--logo { width: 54.62vh; }
        .visual--nurse { width: 23.79vh; }
    }

    @media only screen and (min-width: 768px) {
        .visual--nurse a:hover img:first-child { opacity: 0; }
    }

    @media only screen and (max-width: 768px) {
        .visual--logo { width: 21.2em; top: 16.04%; transform: translateX(-50%); }
        .visual--nurse { width: 13.4em; left: auto; right: 1.5em; bottom: 18.74%; }
        .visual--scroll { display: none; right: auto; left: -3.5em; bottom: -3.5em; z-index: 2; transform: rotate(90deg) translate(-90%, 0%); }
        .visual--scroll dt { font-size: 1.2em; margin-right: 1.66em; }
        .visual--scroll dd span { width: .9em; height: .8em; }
    }

/* section pickup */
#pickup { background: #EF8AA4; color: #fff; padding: 3em 0; z-index: 2; }
#pickup .wrap { max-width: 95em; }
.pickup__block { padding: .5em 0; }
.pickup--lists { display: flex; align-items: flex-start; justify-content: center; }
.pickup--title { font-family: 'Barlow', sans-serif; font-size: 2.4em; font-weight: bold; letter-spacing: .07em; line-height: 1.25; width: 5.75em; float: left; border-right: 1px solid #fff; }
.pickup__block { width: calc( 100% - 17em ); padding: .8em 0; margin: -.8em 0; float: right; overflow: hidden; }
.pickup__slides { overflow: initial; }
.pickup__slide a { color: #fff; display: inline-block; position: relative; width: calc( 100% - 11em ); }
.pickup--txt { font-size: 1.6em; line-height: 1.875; font-weight: normal; display: inline-block; position: relative; }
.pickup--txt:before { content: ""; position: absolute; right: 0; width: 0; bottom: 0; background: #fff; height: 1px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }
.pickup--txt .i-icon { width: .6875em; height: .625em; margin-left: .625em; display: inline-block; vertical-align: .05em; }
#pickup .swiper-button { display: block; width: 4.6em; height: 4.6em; position: absolute; left: auto; right: 0; top: 50%; margin: 0; transform: translateY(-50%); border-radius: 50%; border: 1px solid #F4B1C3; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: linear .3s; }
#pickup .swiper-button:after { content: none; }
#pickup .swiper-button:before { content: ''; display: inline-block; width: 1.1em; height: 1em; background: url(../../img/share/arrow-box-w.svg) no-repeat; background-size: 100% 100%; transition: linear .3s; }
#pickup .swiper-button-prev { right: 5.6em; }
#pickup .swiper-button-prev:before { transform: rotate(180deg); }

    @media only screen and (min-width: 768px) {
        .pickup__slide a:hover .pickup--txt:before { left: 0; right: auto; width: 100%; }
        #pickup .swiper-button:hover { background: #fff; }
        #pickup .swiper-button:hover:before { background: url(../../img/share/arrow-box-p.svg) no-repeat; background-size: 100% 100%; }
        
    }

    @media only screen and (max-width: 768px) {
        #pickup { padding: 2em 0; }
        .pickup__block { padding: 0; }
        .pickup--lists { display: block; }
        .pickup--title { font-size: 1.8em; line-height: 1.22; border: none; text-align: center; margin-bottom: .27em; width: 100%; float: none; }
        .pickup__block { width: calc( 100% + 3em ); padding: 0; margin: 0; margin-left: -1.5em; float: none; }
        .pickup__slide a { width: 100%; padding: 0 4.2em; box-sizing: border-box; }
        .pickup--txt { font-size: 1.4em; line-height: 1.5; min-height: 3em; }
        .pickup--txt .i-icon { width: .7857em; height: .7142em; margin-left: .33em; }
        #pickup .swiper-button { width: 3em; height: 3em; }
        #pickup .swiper-button:before { width: .8em; height: .7em; margin-right: -.2em; }
        #pickup .swiper-button-prev { left: 0; right: auto; }
        #pickup .swiper-button-prev:before { margin-right: .2em; }
    }

/* section about */
#about { padding-top: 14em; }
#about:before { height: 138.6em; top: auto; bottom: -80.3em; background-image: url(../../img/top/bg-cloud-01.png); }
#about:after { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 20em ); left: 50%; top: 0; bottom: auto; transform: translateX(-50%); background: #FCF9F5; }
.about--title { font-size: 4em; font-weight: bold; line-height: 1.5; color: #EB6D8E; margin-bottom: 1em; }
.about--desc { font-size: 2em; line-height: 2; width: 43.56%; }
.about__pops { width: 50.5%; position: absolute; right: 5.2em; top: 0; }
.about__pop { width: 19.08%; text-align: center; }
.about__pop:nth-child(2n) { margin-top: 6em; }
.about__pop--txt { font-size: 1.4em; margin-top: .57em; display: block; }

    @media only screen and (min-width: 768px) {
        .about__pops { opacity: 1; }
        .about__pops .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
    }

    @media only screen and (max-width: 768px) {
        #about { padding-top: 7em; padding-bottom: 25em; background: #FCF9F5; }
        #about:before,
        #about:after { content: none; }
        .about--title { font-size: 2.2em; text-align: center; }
        .about--desc { font-size: 1.6em; width: calc( 100% + 3em ); text-align: center; margin: 0 -1.5em; }
        .about__pops { position: relative; width: 100%; margin-top: 5em; right: auto; top: auto; overflow: initial; }
        .about__pop { width: 100%; text-align: center; }
        .about__pop:nth-child(2n) { margin-top: 6.4em; }
        .about__pop--txt { font-size: 1.4em; margin-top: .35em; display: block; }
        .about__pops .swiper-scrollbar { top: calc(100% + 2em) !important; }
    }

/* section character */
#character { z-index: 100; padding-bottom: 12em; }
.character--icon { position: absolute; right: 19em; top: 5.3em; width: 41.563em; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; z-index: 5; }
.character--icon li { display: inline-block; height: 9.525em; transform-origin: -100% 100%; }
.character--icon li img { height: 100%; width: auto; }
.character--icon li:nth-of-type(1) { animation: ringTheBell3 1.5s infinite; }
.character--icon li:nth-of-type(2) { animation: none; }
.character--icon li:nth-of-type(3) { animation: ringTheBell3 2s infinite; }
.character--canvas { position: absolute; top: -34em; right: -14em; width: 110em; height: 50em; }
.character__boxs { display: flex; flex-wrap: wrap; }
.character__box { display: block; position: relative; width: 22.72%; margin-right: 3.04%; }
.character__box:nth-child(4n) { margin-right: 0; }
.character__box:nth-child(n+5) { margin-top: 3.04%; }
.character__box--click { display: block; overflow: hidden; position: relative; background: #fff; border-radius: 3em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); }
.character__box--pic { height: 20.3em; }
.character__box--desc { display: block; position: relative; padding: 3em 1.5em 7em; text-align: center; }
.character__box--cmn { font-size: 1.6em; line-height: 1.7; }
.character__box--tlt { font-size: 2.3em; font-weight: bold; margin-top: .8695em; }
.character__box .i-icon { position: absolute; right: 2em; bottom: 2em; width: 2.5em; height: 2.5em; background: #EB6D8E; }

    @media only screen and (min-width: 768px) {
        #character { margin-top: -6.4em; }
        .character__box--click:hover { transform: translate3d(0, -2em, 0); }
        .character__box--click:hover .character__box--pic img { transform: scale(1.08); }
        .character__box--click:hover .i-icon { -webkit-animation: arrow_hover .4s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; animation: arrow_hover .4s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; }
    }

    @media only screen and (max-width: 768px) {
        #character { padding-bottom: 11em; padding-top: 10em; }
        #character:before { height: 23.5em; top: auto; bottom: 1.8em; background-image: url(../../img/top/bg-cloud-01_sp.png); }
        #character .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 3em ); left: 50%; top: -10.1em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .character--icon { right: auto; left: 50%; top: -12.4em; width: 23.589em; transform: translateX(-50%); }
        .character--icon li { height: 5.406em; }
        .character--canvas { width: 41em; height: 26em; right: -1.75em; top: -32.6em; }
        .character__boxs { display: block; }
        .character__box { width: calc( 100% + 6em ); margin: 0 -3em; }
        .character__box:nth-child(n+2) { margin-top: .2em; }
        .character__box--click { border-radius: 0; }
        .character__box--pic { position: absolute; left: 0; top: 0; width: 34.66%; height: 100%; }
        .character__box--desc { width: calc( 100% - 34.66% ); padding: 1em 3.5em 1em 1.5em; margin-left: auto; text-align: left; box-sizing: border-box; }
        .character__box--cmn { font-size: 1.4em; line-height: 1.5; }
        .character__box--tlt { font-size: 1.6em; margin-top: .333em; }
        .character__box .i-icon { right: 1.5em; bottom: auto; top: 50%; transform: translateY(-50%); width: 2em; height: 2em; }
    }

/* section introduct */
#introduct {  }
#introduct:before { height: calc( 100% - 1.2em ); top: 3.6em; background-image: url(../../img/top/bg-cloud-02.png); }
.introduct__boxs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 14.8em; }
.introduct__box { padding: 4.6em 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; }
.introduct__box--cloud { position: absolute; left: 50%; top: -9em; transform: translateX(-50%); width: 23.5em; }
.introduct__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; }
.introduct__box--links { display: block; position: relative; }
.introduct__box--links li { display: block; padding: 2.8em 0; border-bottom: 1px dashed #999999; }
.introduct__box--links li a { display: flex; flex-wrap: wrap; align-items: center; }
.introduct__box--links li span { font-size: 2em; line-height: 1.5; font-weight: bold; }
.introduct__box--links li .i-icon { width: 2.5em; height: 2.5em; background: #EB6D8E; margin-right: .5em; }

.introduct__box:nth-of-type(2) .introduct__box--links li .i-icon { background: #40A598; }
.introduct__box:nth-of-type(3) .introduct__box--links li .i-icon { background: #C8883D; }

.introduct--bird { position: absolute; top: -19.6em; left: 7em; width: 43.963em; height: 14.562em; }
.introduct--bird li { position: absolute; }
.introduct--bird li:nth-of-type(1) { width: 9em; top: 0; left: 0; -moz-animation: bird01 ease 4s infinite; -webkit-animation: bird01 ease 4s infinite; -ms-animation: bird01 ease 4s infinite; -o-animation: bird01 ease 4s infinite; animation: bird01 ease 4s infinite; }
.introduct--bird li:nth-of-type(2) { width: 10.9em; bottom: 0; right: 10em; -moz-animation: bird02 ease 4s infinite; -webkit-animation: bird02 ease 4s infinite; -ms-animation: bird02 ease 4s infinite; -o-animation: bird02 ease 4s infinite; animation: bird02 ease 4s infinite; }
.introduct--bird li:nth-of-type(3) { width: 7.8em; bottom: 1em; right: 0; -moz-animation: bird03 ease 4s infinite; -webkit-animation: bird03 ease 4s infinite; -ms-animation: bird03 ease 4s infinite; -o-animation: bird03 ease 4s infinite; animation: bird03 ease 4s infinite; }

.introduct--canvas { position: absolute; top: -48.5em; left: -90em; width: 140em; height: 50em; }

.introduct--slides { position: relative; margin-top: 10em; width: 100vw; left: 50%; transform: translateX(-50%); display: block; overflow: hidden; }
.introduct--slides .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; position: relative; flex-wrap: wrap; }
.introduct--slides .swiper-slide { width: 25%; padding: 0 2em; box-sizing: border-box; }
.introduct--slides .swiper-slide img { display: block; border-radius: 3em; }
.introduct--slides .swiper-slide:nth-child(n+5) { display: none; }
.introduct--slides .swiper-initialized .swiper-wrapper { flex-wrap: initial; }
.introduct--slides .swiper-initialized .swiper-slide:nth-child(n+5) { display: block; }
.introduct--slide:not(:last-child) { margin-bottom: 4em; }

    @media only screen and (min-width: 768px) {
        .introduct__box--links li a:hover { color: #EB6D8E; }
        .introduct__box:nth-of-type(2) .introduct__box--links li a:hover { color: #40A598; }
        .introduct__box:nth-of-type(3) .introduct__box--links li a:hover { color: #C8883D; }
    }

    @media only screen and (max-width: 768px) {
        #introduct { padding-bottom: 8em; }
        #introduct:before { height: 55.8em; top: -4.5em; background-image: url(../../img/top/bg-cloud-02_sp.png); }
        #introduct:after { height: 48.9em; top: auto; bottom: -8.2em; background-image: url(../../img/top/bg-cloud-03_sp.png); }
        #introduct .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 55em ); left: 50%; top: 30em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .introduct__boxs { display: block; margin-top: 10.4em; }
        .introduct__box { padding: 6.5em 2em 4em; width: 100%; }
        .introduct__box:nth-child(n+2) { margin-top: 9em; }
        .introduct__box--cloud { top: -5em; width: 19em; }
        .introduct__box--cloud figcaption { font-size: 1.8em; line-height: 1.27; }
        .introduct__box--links li { padding: 2.2em 0; }
        .introduct__box--links li a { display: flex; flex-wrap: wrap; align-items: center; }
        .introduct__box--links li span { font-size: 1.6em; line-height: 1.7;  }
        .introduct__box--links li .i-icon { width: 2em; height: 2em; }

        .introduct--bird { position: absolute; top: -10.6em; left: 4.4em; width: 19.6em; height: 6.5em; }
        .introduct--bird li:nth-of-type(1) { width: 4em; top: 0; left: 0; }
        .introduct--bird li:nth-of-type(2) { width: 4.898em; bottom: 0; right: 4.5em; }
        .introduct--bird li:nth-of-type(3) { width: 3.492em; bottom: 1em; right: 0; }

        .introduct--canvas { top: -26em; left: -30em; width: 47.5em; height: 26em; }

        .introduct--slides { margin-top: 6em; width: 100%; left: auto; transform: none; overflow: initial; }
        .introduct--slides .swiper { overflow: initial; }
        .introduct--slides .swiper-slide { padding: 0; }
        .introduct--slides .swiper-slide img:last-child { margin-top: 2em; }
        .introduct--slides .swiper-scrollbar { top: calc(100% + 2em) !important; }

    }

/* section develop */
#develop { padding-bottom: 14em; }
#develop:before { height: calc( 100% + 19.2em ); top: -11.2em; background-image: url(../../img/top/bg-cloud-03.png); }
.develop__block { display: flex; flex-wrap: wrap; justify-content: space-between; }
.develop__desc { width: 40.15%; margin-top: 5.7em; }
.develop__desc--tlt { font-size: 2.3em; font-weight: bold; line-height: 1.5; color: #EB6D8E; margin-bottom: .826em; }
.develop__desc--links { display: flex; flex-wrap: wrap; margin: 4.7em 0; max-width: 50em; background: url(../../img/top/bg-list-links.png) no-repeat; background-size: 100% 100%; }
.develop__desc--links li { width: 50%; padding: 1.65em 0; text-align: center; }
.develop__desc--links li a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.develop__desc--links li span { font-size: 1.6em; font-weight: bold; line-height: 1.7; }
.develop__desc--links li .i-icon { width: 1.8em; height: 1.8em; margin-right: .5em; background: #EB6D8E; }
.develop__eight { display: block; position: relative; width: 55.3%; }
.develop__eight__mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.develop__eight__mid--icon { display: block; margin: 0 auto; max-width: 14.5em; margin-bottom: 1.5em; }
.develop__eight__mid--txt { font-size: 3.2em; font-weight: bold; line-height: 1.59; }
.develop__eight__mid--txt:after { content: ''; display: block; width: 6.89em; height: .75em; margin-top: .21em; background: url(../../img/top/line-eight.png) no-repeat; background-size: 100% 100%; }
.develop__eight__mid--tlt { font-size: 3em; font-weight: bold; line-height: 1; margin-top: -.5em; }
.develop__eight__mid--tlt .t-num { font-size: 2.13em; }
.develop__eight__mid--tlt .t-big { font-size: 1.4em; }
.develop__eight__links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.develop__eight__links li { position: absolute; width: 12.8em; }
.develop__eight__links li a { display: block; }
.develop__eight__links li span { display: block; max-width: 90%; margin: 0 auto; }
.develop__eight__links li strong { font-size: 1.6em; font-weight: bold; margin-top: .333em; line-height: 1.3; color: #707070; text-align: center; display: block; }
.develop__eight__links li:nth-of-type(8) { bottom: 66.43%; left: 15.89%; }
.develop__eight__links li:nth-of-type(7) { top: 50%; left: 5.1%; transform: translateY(-50%); }
.develop__eight__links li:nth-of-type(6) { bottom: 16.71%; left: 15.89%; }
.develop__eight__links li:nth-of-type(5) { bottom: 5.89%; left: 50%; transform: translateX(-50%); }
.develop__eight__links li:nth-of-type(4) { bottom: 16.71%; right: 15.89%; }
.develop__eight__links li:nth-of-type(3) { top: 50%; right: 5.61%; transform: translateY(-50%); }
.develop__eight__links li:nth-of-type(2) { bottom: 66.43%; right: 15.89%; }
.develop__eight__links li:nth-of-type(1) { top: 6.71%; left: 50%; transform: translateX(-50%); }

    @media only screen and (min-width: 768px) {
        .develop__desc--links li a:hover { color: #EB6D8E; }
        .develop__eight__links li a:hover { opacity: .75; }
    }

    @media only screen and (max-width: 768px) {
        #develop { padding-bottom: 21em; }
        #develop:before { height: 55.6em; top: 2.2em; background-image: url(../../img/top/bg-cloud-04_sp.png); }
        #develop:after { height: 48.7em; top: auto; bottom: -6.5em; background-image: url(../../img/top/bg-cloud-05_sp.png); }
        #develop .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 40em ); left: 50%; top: 30em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .develop--canvas { position: absolute; top: -18em; right: -27em; width: 47.5em; height: 26em; }
        .develop__desc { width: 100%; margin-top: 5.4em; }
        .develop__desc--tlt { font-size: 1.8em; margin-bottom: .77em; text-align: center; }
        .develop__desc--links { margin: 3.7em  auto; max-width: 31em; background: url(../../img/top/bg-list-links_sp.png) no-repeat; background-size: 100% 100%; }
        .develop__desc--links li { width: 50%; padding: 0 1em 0 2em; min-height: 5.9em; display: flex; align-items: center; box-sizing: border-box; }
        .develop__desc--links li:nth-child(2n) { padding-left: 2.7em; }
        .develop__desc--links li span { line-height: 1.3; text-align: left; }
        .develop__eight { width: calc( 100% + 3em ); margin: 4.5em -1.5em 0; }
        .develop__eight__mid--icon { max-width: 18.13vw; margin-bottom: 1.86vw; }
        .develop__eight__mid--txt { font-size: 4vw; line-height: 1.6; }
        .develop__eight__mid--txt:after { margin-top: .69vw; background: url(../../img/top/line-eight_sp.png) no-repeat; background-size: 100% 100%; }
        .develop__eight__mid--tlt { font-size: 3.73vw; margin-top: -.5em; }
        .develop__eight__links li { position: absolute; width: 21.6vw; }
        .develop__eight__links li span { max-width: 65%; }
        .develop__eight__links li strong { font-size: 2.66vw; margin-top: .333em; }
        .develop__eight__links li:nth-of-type(8) { bottom: 66.66%; left: 12.75%; }
        .develop__eight__links li:nth-of-type(7) { top: 49%; left: 2.1%; transform: translateY(-50%); }
        .develop__eight__links li:nth-of-type(6) { bottom: 16.81%; left: 12.75%; }
        .develop__eight__links li:nth-of-type(5) { bottom: 2.6%; left: 50%; transform: translateX(-50%); }
        .develop__eight__links li:nth-of-type(4) { bottom: 16.81%; right: 12.75%; }
        .develop__eight__links li:nth-of-type(3) { top: 50%; right: 3%; transform: translateY(-50%); }
        .develop__eight__links li:nth-of-type(2) { bottom: 66.66%; right: 12.75%; }
        .develop__eight__links li:nth-of-type(1) { top: 5.21%; left: 50%; transform: translateX(-50%); }

    }

#developpop { background: url(../../img/top/bg-intelligences-slide.jpg) no-repeat center; background-size: cover; }
#developpop .popup--frame { padding: 0; max-width: 141em; background: none; }
.develop__slides { overflow: initial; }
.develop__slide { padding: 0 10.5em; box-sizing: border-box; }
.develop__slide--frame { background: #fff; display: block; overflow: hidden; border-radius: 3em; box-shadow: 0 .2em 2.6em rgba(64, 165, 152, .16); }
.develop__slide--head { display: flex; flex-wrap: wrap; border-bottom: 1px solid #66B7AC; }
.develop__slide--icon { width: 15em; min-height: 15em; display: flex; align-items: center; justify-content: center; position: relative; background: #66B7AC; }
.develop__slide--icon img { width: 11.4em; }
.develop__slide__tlt { width: calc( 100% - 15em ); padding: 3em 5em 1em; box-sizing: border-box; }
.develop__slide__tlt--small { font-size: 1.6em; font-weight: bold; line-height: 2.125; display: inline-block; background: #40A598; color: #FFFF57; padding: 0 1.25em; margin-bottom: 1.1875em; border-radius: 10em; }
.develop__slide__tlt--big { font-size: 3.8em; font-weight: bold; line-height: 1.3; }
.develop__slide--cont { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; }
.develop__slide--cont:before,
.develop__slide--cont:after { content: ''; display: block; height: 100%; position: absolute; top: 0; left: 48.33%; width: calc( 100% - 48.33% ); background: #FAFAFA; }
.develop__slide--cont:after { width: 3.33%; margin-left: -.1em; background: url(../../img/top/polygon-intelligences-slide.png) no-repeat; background-size: 100% 100%; }
.develop__slide--desc { position: relative; width: 48.33%; padding: 6em 8em; box-sizing: border-box; z-index: 2; }
.develop__slide--open { display: none; }
.develop__slide--cmn { font-size: 1.6em; line-height: 1.7; }
.develop__slide--cmn p + ul { margin-top: 2.125em; }
.develop__slide--cmn ul li { display: block; position: relative; padding-left: .625em; }
.develop__slide--cmn ul li:before { content: ''; display: block; width: .33em; height: .33em; position: absolute; left: 0; top: .7em; border-radius: 50%; background: #4C4948; }
.develop__slide--cmn ul li:not(:first-child) { margin-top: 1.25em; }
.develop__slide--desc--hihu { display: block; max-width: 11.8em; margin: 0 auto .9em; }
.develop__slide--desc--tlt { font-size: 2.3em; font-weight: bold; color: #EB6D8E; text-align: center; margin-bottom: 1.23em; }
.develop__slide--desc--lists ul li:before { background: #EB6D8E; }
.develop__slides .swiper-button { display: block; width: 3.5em; height: 11.4em; position: absolute; left: auto; right: -1em; top: 50%; margin: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: linear .3s; }
.develop__slides .swiper-button:after { content: none; }
.develop__slides .swiper-button:before { content: ''; display: inline-block; width: 100%; height: 100%; background: url(../../img/share/arrow-slide-big.svg) no-repeat; background-size: 100% 100%; transition: linear .3s; }
.develop__slides .swiper-button-prev { left: -1em; }
.develop__slides .swiper-button-prev:before { transform: rotate(180deg); }
.develop__slides .swiper-pagination { font-family: 'Barlow', sans-serif; font-size: 2.2em; font-weight: bold; line-height: 1.2; bottom: -2.7em; color: #707070; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.develop__slides .swiper-pagination .dashed { display: block; width: .9em; height: 1px; margin: 0 .45em; background: #707070; }

    @media only screen and (min-width: 768px) and (min-height: 1px) and (max-height: 1080px) {
        #developpop .popup--frame { max-width: 130.55vh; }
        .develop__slide { padding: 0 9.722vh }
        .develop__slide--frame { border-radius: 2.77vh; }
        .develop__slide--icon { width: 13.88vh; min-height: 13.88vh; }
        .develop__slide--icon img { width: 10.55vh; }
        .develop__slide__tlt { width: calc( 100% - 13.88vh ); padding: 2.77vh 4.62vh .92vh; }
        .develop__slide__tlt--small { font-size: 1.48vh; }
        .develop__slide__tlt--big { font-size: 3.51vh; }
        .develop__slide--desc { padding: 5.55vh 7.4vh; }
        .develop__slide--cmn { font-size: 1.48vh; }
        .develop__slide--cmn ul { height: initial !important; }
        .develop__slide--desc--hihu { max-width: 10.92vh; margin-bottom: .83vh; }
        .develop__slide--desc--tlt { font-size: 2.12vh; }
        .develop__slides .swiper-button { width: 3.24vh; height: 10.55vh; }
        .develop__slides .swiper-pagination { font-size: 2.03vh; }
    }

    @media only screen and (min-width: 768px) {
        .develop__slide--cmn ul { height: initial !important; }
    }
    @media only screen and (max-width: 768px) {
        #developpop { padding: 3em 0; background: url(../../img/top/bg-intelligences-slide_sp.jpg) no-repeat center; background-size: cover; }
        #developpop .popup--close { background: none; top: 3em; right: 1.5em; }
        #developpop .popup--close span { background: #4C4948; width: 2.8em; }
        .develop__slide { padding: 0 1.5em; overflow: initial; }
        .develop__slide--icon { width: 8em; min-height: 9em; }
        .develop__slide--icon img { width: 6em; }
        .develop__slide__tlt { width: calc( 100% - 8em ); padding: 1.2em 2em 1em; }
        .develop__slide__tlt--small { font-size: 1.3em; line-height: 1.53; padding: 0 1.15em; margin-bottom: .38em; }
        .develop__slide__tlt--big { font-size: 1.6em; }
        .develop__slide--cont { height: calc(100vh - 18em) !important; margin: 3em 0 0; padding: 0 2em; padding-bottom: 0; -webkit-overflow-scrolling: touch; overflow: auto; -ms-overflow-style: none; scrollbar-width: none; }
        .develop__slide--cont::-webkit-scrollbar { display: none; }
        /*.develop__slide--cont::-webkit-scrollbar-track { border-radius: 4px; background-color: #EDEDED; }
        .develop__slide--cont::-webkit-scrollbar { width: 4px; border-radius: 4px; background-color: #EDEDED; }
        .develop__slide--cont::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #4C4948; }
        .develop__slide--cont::-ms-scrollbar-track { border-radius: 4px; background-color: #EDEDED; }
        .develop__slide--cont::-ms-scrollbar { width: 4px; border-radius: 4px; background-color: #EDEDED; }
        .develop__slide--cont::-ms-scrollbar-thumb { border-radius: 4px; background-color: #4C4948; } */
        .develop__slide--cont:before,
        .develop__slide--cont:after { content: none; display: block; height: 100%; position: absolute; top: 0; left: 48.33%; width: calc( 100% - 48.33% ); background: #FAFAFA; }
        .develop__slide--cont:after { width: 3.33%; margin-left: -.1em; background: url(../../img/top/polygon-intelligences-slide.png) no-repeat; background-size: 100% 100%; }
        .develop__slide--desc { position: relative; width: 100%; padding: 0; }
        .develop__slide--desc:not(:last-child) { margin-bottom: 2em; }
        .develop__slide--desc:last-child { background: #fafafa; width: calc( 100% + 4em ); margin: 0 -2em; padding: 4.5em 2em 5em; }
        .develop__slide--desc:last-child:before { content: ''; display: block; position: absolute; top: -1px; left: 0; border-left: 46vw solid transparent; border-right: 46vw solid transparent; border-top: 2.1em solid #fff; }
        .develop__slide--cmn { font-size: 1.4em; }
        .develop__slide--cmn p + ul { margin-top: 1.7em; }
        .develop__slide--cmn ul li:not(:first-child) { margin-top: 1em; }
        .develop__slide--desc--tlt { font-size: 1.8em; margin-bottom: 1em; }

        .develop__slide--desc:first-child .develop__slide--cmn ul { overflow: hidden; transition: linear .3s; }
        .develop__slide--open { display: block; text-align: right; margin-top: 1em; text-decoration: underline !important; }

        .develop__slides .swiper-button,
        .develop__slides .swiper-pagination { display: none; }
    }

/* section project */
#project { padding-bottom: 2em; }
#project:before { height: calc( 100% + 7.4em ); top: 3em; background-image: url(../../img/top/bg-cloud-02.png); }
.project--canvas { position: absolute; top: -33em; right: -24em; width: 130em; height: 70em; }
.project__block { margin-top: 5.7em; height: 50.9em; }
.project__boxs { position: relative; width: 166em; left: calc( 50% - 86em ); padding: 0 3em; display: flex; flex-wrap: wrap; justify-content: space-between; }
.project__box { display: block; position: relative; width: 30.66%; }
.project__box--click { display: block; position: relative; }
.project__box--bg { display: block; }
.project__box--bg img { width: 100%; -webkit-filter: drop-shadow(0 .2em 1.3em rgba(200, 136, 61, .26)); filter: drop-shadow(0 .2em 1.3em rgba(200, 136, 61, .26)); }
.project__box--pic { -webkit-clip-path: url(#clippath1); clip-path: url(#clippath1); position: absolute; top: -.5px; left: -.5px; width: calc( 100% - 1px ); }
.project__box--pic img { width: 101%; height: auto; object-fit: cover; object-position: center; display: block; max-width: initial; position: relative; -webkit-transition: linear .3s; transition: linear .3s; }
.project__box--desc { position: absolute; width: 100%; height: 34.18%; left: 0; bottom: 0; color: #fff; text-align: center; padding: 2.5em 1.5em 2em; box-sizing: border-box; }
.project__box--cmn { font-size: 1.6em; line-height: 1.7; margin-bottom: .6875em; }
.project__box--btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.project__box--btn span { font-size: 2.3em; line-height: 1.3; font-weight: bold; display: inline-block; }
.project__box--btn .i-icon { width: 2.5em; height: 2.5em; margin-left: .5em; background: #fff; }

.project--bird { position: absolute; bottom: -9.4em; left: 27em; width: 20.9em; height: 13.14em; }
.project--bird li { position: absolute; }
.project--bird li:nth-of-type(1) { width: 11.3em; top: 0; left: 0; -moz-animation: bird01 ease 4s infinite; -webkit-animation: bird01 ease 4s infinite; -ms-animation: bird01 ease 4s infinite; -o-animation: bird01 ease 4s infinite; animation: bird01 ease 4s infinite; }
.project--bird li:nth-of-type(2) { width: 6.9em; bottom: 0; right: 0; -moz-animation: bird02 ease 4s infinite; -webkit-animation: bird02 ease 4s infinite; -ms-animation: bird02 ease 4s infinite; -o-animation: bird02 ease 4s infinite; animation: bird02 ease 4s infinite; }

.project__interview { display: block; position: relative; max-width: 72.72%; height: 32.5em; margin: 11em auto 0; border-radius: 3em; box-sizing: border-box; background: #fff; }
.project__interview:before { content: ''; display: block; position: absolute; left: -.8em; top: -.8em; width: calc( 100% + 1.6em ); height: calc( 100% + 1.6em ); border: .8em solid #66B7AC; box-sizing: border-box; border-radius: 3em; z-index: 1; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); transition: linear .3s; }
.project__interview--stamp { position: absolute; left: -4.8em; top: -3.8em; width: 12.8em; z-index: 2; }
.project__interview--stamp img:last-child { position: absolute; left: 0; top: 0; opacity: 0; z-index: 2; transition: linear .3s; }
.project__interview--pic { position: absolute; right: -.8em; top: -.8em; width: 38.54%; height: calc( 100% + 1.6em ); z-index: 0; display: block; overflow: hidden; border-top-right-radius: 3em; border-bottom-right-radius: 3em; }
.project__interview--pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: linear .3s; }
.project__interview--desc { display: block; padding: 5em 0 0 10em; position: relative; width: 62.5%; height: 100%; box-sizing: border-box; z-index: 2; }
.project__interview--tlt { font-size: 1.8em; font-weight: normal; line-height: 1.5; color: #40A598; transition: linear .3s; }
.project__interview--tlt strong { font-size: 2.11em; font-weight: bold; line-height: 1.3; margin-top: .1315em; display: block; }
.project__interview--name { font-size: 1.6em; font-weight: normal; line-height: 1.7; margin-top: 1.4375em; }
.project__interview--name strong { font-size: 1.75em; line-height: 1.5; margin-right: .357em; margin-top: .2142em; display: inline-block; }
.project__interview--btn { display: flex; align-items: center; justify-content: center; position: absolute; left: -.8em; bottom: -.8em; width: calc( 100% + 1.6em ); height: 6em; z-index: 2; background-image: url(../../img/top/educational-bg-bow.png); background-repeat: repeat-x; background-position: top center; background-size: 3.43em 100%; border-bottom-right-radius: 3em; border-bottom-left-radius: 3em; transition: linear .3s; }
.project__interview--btn p { display: flex; flex-wrap: wrap; align-items: center; margin-top: .5em; }
.project__interview--btn span { font-size: 2.3em; font-weight: bold; color: #fff; display: inline-block; }
.project__interview--btn .i-icon { width: 2.5em; height: 2.5em; background: #fff; margin-left: .5em; }

	@media only screen and (min-width: 768px) and (max-height: 1660px) {
		.project__block  { height: 30.66vw; }
	}

    @media only screen and (min-width: 768px) {
        .project__boxs { font-size: 10px; }
        .project__box--click:hover { transform: translate3d(0, -2em, 0); }
        .project__box--click:hover .project__box--pic img { transform: scale(1.08); }
        .project__box--click:hover .project__box--btn .i-icon { -webkit-animation: arrow_hover .4s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; animation: arrow_hover .4s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; }
        
        .project__interview:hover:before { border-color: #40A598; }
        .project__interview:hover .project__interview--tlt { color: #40A598; }
        .project__interview:hover .project__interview--stamp img:last-child { opacity: 1; }
        .project__interview:hover .project__interview--pic img { transform: scale(1.08); }
        .project__interview:hover .project__interview--btn { background-image: url(../../img/top/educational-bg-bow-h.png); }

    }

    @media only screen and (max-width: 768px) {
        #project { padding-bottom: 3em; }
        #project:before { height: 55.8em; top: -1.5em; background-image: url(../../img/top/bg-cloud-02_sp.png); }
        #project:after { height: 48.9em; top: auto; bottom: -9.7em; background-image: url(../../img/top/bg-cloud-03_sp.png); }
        #project .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 55em ); left: 50%; top: 30em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .project__block { height: initial !important; margin-top: 5.4em; }
        .project__boxs { display: block; width: 124vw; left: calc( 50% - 62vw ); padding: 0; z-index: 2; transform: none !important; transform-origin: initial !important; }
        .project__box { width: 73.11%;  }
        .project__box:nth-child(2n) { margin-left: auto; }
        .project__box--desc { padding: 1.5em 1em 1.5em; }
        .project__box--cmn { font-size: 1.4em; line-height: 1.42; margin-bottom: .142em; }
        .project__box--btn span { font-size: 1.8em; line-height: 1.38; }
        .project__box--btn .i-icon { width: 2em; height: 2em; }

        .project--bird { bottom: auto; left: auto; top: 70.9vw; right: -1.5em; width: 24.9vw; height: 15.6vw; }
        .project--bird li:nth-of-type(1) { width: 13.48vw; }
        .project--bird li:nth-of-type(2) { width: 9.25vw; }

        .project--canvas { width: 37.5em; height: 26em; right: 0; top: -31em; }
        .project__block--canvas { position: absolute; top: 0; width: 47.5em; height: 26em; }
        .project__block--canvas-01 { left: -35em; top: 100vw; }
        .project__block--canvas-02 { right: -35em; }

        .project__interview { margin-top: 3.8em; max-width: calc( 100% - 1em ); height: initial; }
        .project__interview:before { left: -.5em; top: -.5em; width: calc( 100% + 1em ); height: calc( 100% + 1em ); border: .5em solid #66B7AC; }
        .project__interview--stamp { left: auto; right: -2em; top: -3.6em; width: 10em; }
        .project__interview--pic { right: -.5em; top: -.5em; width: calc( 100% + 1em ); height: calc( 53.33vw + .5em ); border-radius: 0; border-top-right-radius: 3em; border-top-left-radius: 3em; }
        .project__interview--pic img { object-position: top center; margin-top: -.5em; }
        .project__interview--desc { padding: calc( 53.33vw + 2.5em ) 1em 6.5em; position: relative; width: 100%; height: initial; text-align: center; }
        .project__interview--tlt { font-size: 1.4em; }
        .project__interview--tlt strong { font-size: 1.57em; line-height: 1.36; margin-top: .1315em; }
        .project__interview--name { font-size: 1.4em; line-height: 1.5; margin-top: 1.14em; }
        .project__interview--name strong { font-size: 1.4285em; line-height: 2; margin-right: .357em; margin-top: 0; }
        .project__interview--btn { left: -.5em; bottom: -.5em; width: calc( 100% + 1em ); height: 5em; background-size: 2.8em 100%; }
        .project__interview--btn a { display: flex; flex-wrap: wrap; align-items: center; margin-top: .5em; }
        .project__interview--btn span { font-size: 1.6em; }
        .project__interview--btn .i-icon { width: 2em; height: 2em; }
    }


/* section lunch */
#lunch { padding-bottom: 10em; }
#lunch:before { height: 100%; top: 2.3em; background-image: url(../../img/top/bg-cloud-04.png); }
.lunch--canvas { position: absolute; top: -48.7em; right: -90em; width: 140em; height: 78em; }
.lunch__interview { display: block; position: relative; padding: 4.8em 11.2em 4.8em 13.2em; margin: 12em auto 0; width: 72.72%; background: #fff; border: .8em solid #66B7AC; border-radius: 3em; box-sizing: border-box; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); }
.lunch__interview--tlt { font-size: 2.3em; font-weight: bold; line-height: 1.5; color: #40A598; margin-bottom: .86em; }
.lunch__interview--stamp { position: absolute; left: -4em; top: -3em; width: 12.8em; }
.lunch__boxs { margin-top: 6.7em; }
.lunch__box { width: 76.51%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; position: relative; padding: 5em; border: 1px solid #EB6D8E; border-radius: 3em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); background: #fff; box-sizing: border-box; }
.lunch__box:nth-child(2n) { margin-left: auto; }
.lunch__box:not(:last-child) { margin-bottom: 4em; }
.lunch__box:after,
.lunch__box:before { content: ''; display: inline-block; position: absolute; right: 0; bottom: 0; height: 9.525em; background-repeat: no-repeat; background-size: 100% 100%; }
.lunch__box:after { content: none; transform-origin: top center; }
.lunch__box:before { right: -3.134em; bottom: 8.3em; width: 3.134em; height: 2.954em; background-image: url(../../img/top/hahu-arrow-pink.png); }
.lunch__box:after { right: -15.4em; bottom: 4.6em; width: 12.392em; animation: ringTheBell1 1.5s infinite ease-in-out; }
.lunch__box--hahi { display: inline-block; position: absolute; right: 0; bottom: 0; height: 9.525em; background-repeat: no-repeat; background-size: 100% 100%; transform-origin: top center; }
.lunch__box--hahi { right: -15.4em; bottom: 4.6em; width: 12.392em; }
.lunch__box--hahi span { animation: ringTheBell2 2.6s infinite ease-in-out; display: block; position: absolute; bottom: 0; right: 0; height: 100%; width: 100%; }
.lunch__box--hahi img { width: 100%; height: 100%; }
.lunch__box--pic { width: 42.73%; display: block; overflow: hidden; border-radius: 3em; }
.lunch__box--desc { width: 52.86%; }
.lunch__box--tlt { font-size: 2.3em; font-weight: bold; line-height: 1.5; color: #EB6D8E; margin-bottom: .86em; }

.lunch__box:nth-of-type(1) .lunch__box--hahi span { animation-delay: 1s; }
.lunch__box:nth-of-type(2) { border-color: #40A598; }
.lunch__box:nth-of-type(2) .lunch__box--tlt { color: #40A598; }
.lunch__box:nth-of-type(2):before { right: auto; left: -3.134em; background-image: url(../../img/top/hahu-arrow-blue.png);  }
.lunch__box:nth-of-type(2):after,
.lunch__box:nth-of-type(2) .lunch__box--hahi { right: auto; left: -14.4em; width: 11.427em; }
.lunch__box:nth-of-type(3) { border-color: #C8883D; }
.lunch__box:nth-of-type(3) .lunch__box--tlt { color:#C8883D; }
.lunch__box:nth-of-type(3):before { background-image: url(../../img/top/hahu-arrow-yellow.png);  }
.lunch__box:nth-of-type(3):after,
.lunch__box:nth-of-type(3) .lunch__box--hahi { right: -16.2em; bottom: 5em; width: 13.152em; }
.lunch__box:nth-of-type(3) .lunch__box--hahi span { animation-delay: 1.5s; }
    
    @media only screen and (min-width: 768px) {
        .lunch__box--desc .txt-box__child { height: initial !important; }
        .lunch__box--desc .txt-box--btn { display: none; }
    }

    @media only screen and (max-width: 768px) {
        #lunch { padding-bottom: 8em; }
        #lunch:before { height: 55.6em; top: 2.2em; background-image: url(../../img/top/bg-cloud-04_sp.png); }
        #lunch:after { height: 48.7em; top: auto; bottom: -4.8em; background-image: url(../../img/top/bg-cloud-05_sp.png); }
        #lunch .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 40em ); left: 50%; top: 30em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .lunch--canvas { top: -18em; right: -27em; width: 47.5em; height: 26em; }
        .lunch__interview { padding: 9em 1.5em 2.7em 1.5em; width: 100%; border-width: .5em; margin-top: 8em; }
        .lunch__interview--tlt { font-size: 1.8em; line-height: 1.27; margin-bottom: .61em; text-align: center; }
        .lunch__interview--stamp { position: absolute; top: -3.5em; left: 50%; transform: translateX(-50%); width: 10em; }
        .lunch__boxs { margin-top: 10em; }
        .lunch__box { width: 100%; display: block; padding: 3em 2em 2.4em; }
        .lunch__box:not(:last-child) { margin-bottom: 10em; }
        .lunch__box:after,
        .lunch__box:before,
        .lunch__box--hahi { bottom: auto !important; top: -5em; height: 5.387em; }
        .lunch__box:before { right: 9.8em; top: -2.266em !important; width: 3.266em !important; height: 3.266em !important; background-image: url(../../img/top/hahu-arrow-pink_sp.png); }
        .lunch__box:after,
        .lunch__box--hahi { right: 3.9em; width: 7.092em; }
        .lunch__box--pic { width: 100%; margin-bottom: 2.5em; }
        .lunch__box--desc { width: 100%; }
        .lunch__box--desc .txt-box__child { height: 8.5em; display: block; overflow: hidden; transition: linear .2s; }
        .lunch__box--desc .txt-box--btn { display: block; text-align: right; margin-top: 2.625em; text-decoration: underline; }
        .lunch__box--tlt { font-size: 1.8em; line-height: 1.5; text-align: center; margin-bottom: .61em; }

        .lunch__box:nth-of-type(2):before { right: auto !important; left: 9.8em; background-image: url(../../img/top/hahu-arrow-blue_sp.png);  }
        .lunch__box:nth-of-type(2):after,
        .lunch__box:nth-of-type(2) .lunch__box--hahi { right: auto !important; left: 4em; width: 6.446em; }
        .lunch__box:nth-of-type(3):before { background-image: url(../../img/top/hahu-arrow-yellow_sp.png);  }
        .lunch__box:nth-of-type(3):after,
        .lunch__box:nth-of-type(3) .lunch__box--hahi { right: 4em; width: 7.519em; }
            
    }

/* section security */
#security { padding-bottom: 11em; }
#security:before { height: 114.3em; top: 3em; background-image: url(../../img/top/bg-cloud-05.png); }
.security--canvas { position: absolute; top: -94.5em; left: -90em; width: 140em; height: 60em; }
.security__lists { margin-top: 6.7em; overflow: initial; opacity: 1; }
.security__list { display: block; position: relative; overflow: hidden; border-radius: 3em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); background: #fff; }
.security__list--desc { padding: 4em 2.5em 4.5em; }
.security__list--pic { height: 26em; }
.security__list--tlt { font-size: 2.3em; font-weight: bold; line-height: 1.2; color: #EB6D8E; margin-bottom: .6956em; text-align: center; }

    @media only screen and (min-width: 768px) {
        .security__lists .swiper-wrapper { display: flex; flex-wrap: wrap; }
        .security__list { width: 28.78%; height: auto; margin-right: 4.54% }
        .security__list:nth-child(3n) { margin-right: 0; }
    }
    @media only screen and (max-width: 768px) {
        #security { padding-bottom: 7.2em; }
        #security:before { height: 55.8em; top: -1.5em; background-image: url(../../img/top/bg-cloud-02_sp.png); }
        #security:after { height: 48.9em; top: auto; bottom: -8.3em; background-image: url(../../img/top/bg-cloud-03_sp.png); }
        #security .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 55em ); left: 50%; top: 30em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .security--canvas { top: -26em; left: -30em; width: 47.5em; height: 26em; }
        .security__lists { margin-top: 5.4em; }
        .security__lists .swiper-scrollbar { top: calc( 100% + 3em ) !important; }
        .security__list { display: block; position: relative; overflow: hidden; border-radius: 3em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); background: #fff; }
        .security__list--desc { padding: 2.2em 2em 2em; }
        .security__list--pic { height: 51.2vw; }
        .security__list--tlt { font-size: 1.8em; margin-bottom: .61em; }

    }

/* section message */
#message {  }
.message--canvas { position: absolute; top: -48.7em; right: -90em; width: 140em; height: 78em; }
.message__block { background: #fff; padding: 6em 10em 5.5em; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; border-radius: 3em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .26); }
.message--head { width: 19.65%; display: block; position: relative; }
.message--head:after { content: ''; display: block; position: absolute; top: 0; right: -7.6em; width: 1px; height: 100%; background: rgba(244, 177, 195, .3); }
.message--desc { font-size: 2em; line-height: 1.7; width: 66.96%; }
.message--name { font-size: 1.6em; line-height: 1.7; text-align: center; margin-top: 1.375em; }
.message--name strong { font-size: 1.4375em; display: block; margin-top: .6em; }

    @media only screen and (max-width: 768px) {
        #message:before { height: 55.6em; top: 2.2em; background-image: url(../../img/top/bg-cloud-04_sp.png); }
        #message .wrap:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 25em ); left: 50%; top: 30em; bottom: auto; transform: translateX(-50%); background: #FCF9F5; z-index: 0; }
        .message--canvas { top: -18em; right: -27em; width: 47.5em; height: 26em; }
        .message__block { flex-direction: column-reverse; padding: 4em 2em; }
        .message--head { width: 100%; max-width: 22em; margin: 3.4em auto 0; }
        .message--head:after { content: none; }
        .message--desc { font-size: 1.6em; width: 100%; }
        .message--name { font-size: 1.4em; line-height: 1.5; margin-top: 1.42em; }
        .message--name strong { font-size: 1.42em; margin-top: .25em; }
    }

/* section information */
#information { padding-bottom: 20em; }
#information:before { height: 191.5em; top: -78.5em; background-image: url(../../img/top/bg-cloud-06.png); }
#information:after { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 20em ); left: 50%; bottom: 0; transform: translateX(-50%); background: #FCF9F5; }
.information__lists { display: block; position: relative; }
.information__list { display: block; position: relative; }
.information__list:not(:last-child) { margin-bottom: 2em; }
.information__list--click { position: relative; display: flex; flex-wrap: wrap; overflow: hidden; padding: 2.5em 4em 2.5em 3em; background: #fff; border-radius: 1em; box-shadow: 0 .2em 1.3em rgba(200, 136, 61, .16); }
.information__list--click:after { content: ''; display: inline-block; width: 1.1em; height: 1em; position: absolute; top: 50%; right: 2em; transform: translateY(-50%); background: url(../../img/share/arrow-box-p.svg) no-repeat; background-size: 100% 100%; }
.information__list--cate { display: block; width: 24em; }
.information__list--cate span { font-size: 1.3em; font-weight: bold; line-height: 2.307; color: #EB6D8E; display: block; }
.information__list--date { font-size: 1.3em; line-height: 2.307; width: 8.46em;  box-sizing: border-box; }
.information__list--tlt { font-size: 1.6em; font-weight: normal; line-height: 1.875; width: calc( 100% - 21.875em ); transition: all .3s ease; }
.information--btn { margin-left: auto; margin-right: auto; }

.information__list--click.no-post { background: #fff !important; }
.information__list--click.no-post:after { content: none; }

    @media only screen and (min-width: 768px) {
        .information__list--click:hover { background: #F9F3EB; }
    }

    @media only screen and (max-width: 768px) {
        #information { padding-bottom: 8em; background: #FCF9F5; }
        #information:before,
        #information:after { content: none; }
        #information .wrap { padding: 0 1.5em; }
        .information__list:not(:last-child) { margin-bottom: 1em; }
        .information__list--click { padding: 1.5em 3.5em 1.1em 1.5em; }
        .information__list--click:after { right: 1.5em; }
        .information__list--cate { width: calc( calc( 100% - 10.5em ) ); }
        .information__list--cate span { font-size: 1.2em; line-height: 1.66; }
        .information__list--date { font-size: 1.2em; line-height: 1.66; width: 8.66em; }
        .information__list--tlt { font-size: 1.4em; line-height: 1.5; width: 100%; margin-top: .71em; }
        .information--btn { margin-top: 5em; }
    }

/* section recruit */
#recruit { padding: 0; height: 54em; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../../img/top/bg-recruit.jpg); background-attachment: fixed; }
#recruit .wrap { height: 100%; }
#recruit .section--desc { margin-top: -2.0625em; }
.recruit__block { position: absolute; right: 3em; top: 50%; transform: translateY(-50%); width: 44.8em; height: 44.8em; }
.recruit--bgflower { display: block; position: relative; width: 100%; height: 100%; }
.recruit--bgflower img { width: 100%; height: 100%; -webkit-filter: drop-shadow(0 .2em 1.3em rgba(200, 136, 61, .26)); filter: drop-shadow(0 .2em 1.3em rgba(200, 136, 61, .26)); }
.recruit__desc { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); text-align: center; color: #fff; }
.recruit--btn { margin: 4.7em auto 0; text-align: left; }
.recruit--btn a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; background: #fff; color: #EB6D8E; border-color: #fff; }
.recruit--btn .i-links { width: 1em; height: 1em; margin-left: .3em; }
.recruit--btn .i-links:before { background-image: url(../../img/share/icon-links-p.svg); }
.recruit--btn .i-arrow { width: .6875em; height: .625em; position: absolute; right: 1.1875em; top: 50%; transform: translateY(-50%); }
.recruit--btn .i-arrow:before { background-image: url(../../img/share/arrow-box-p.svg); }

    @media only screen and (min-width: 768px) {
        .recruit--btn a:hover { background: none; border-color: #fff; color: #fff; }
        .recruit--btn a:hover .i-links:before { background-image: url(../../img/share/icon-links-w.svg); }
        .recruit--btn a:hover .i-arrow:before { background-image: url(../../img/share/arrow-box-w.svg); }
    }

    @media only screen and (max-width: 768px) {
        #recruit { height: 40em; background-image: url(../../img/top/bg-recruit_sp.jpg); }
        #ft-recruit { display: block; position: relative; z-index: 2; margin-top: -20em; }
        #ft-recruit .section--desc { margin-top: -.625em; }
        .recruit__block { position: relative; right: auto; left: 50%; top: auto; transform: translateX(-50%); width: 31.5em; height: 31.5em; }
        .recruit__desc { top: 52%; }
        .recruit--cmn { font-size: 1.4em; line-height: 1.5; }
        .recruit--btn { margin-top: 2.7em; max-width: 20em; }
        .recruit--btn a { padding: .4em 1.25em; }
    }



@keyframes arrow_hover { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(.5); transform: scale(.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } }

@-webkit-keyframes bird01 { 0% { top: 0em;  } 50% { top: 2.7em;  } 100% { top: 0em;  } }    
@-o-keyframes bird01 { 0% { top: 0em;  } 50% { top: 2.7em;  } 100% { top: 0em;  } }
@-ms-keyframes bird01 { 0% { top: 0em;  } 50% { top: 2.7em;  } 100% { top: 0em;  } }
@keyframes bird01 { 0% { top: 0em;  } 50% { top: 2.7em;  } 100% { top: 0em;  } }
@-moz-keyframes bird01 { 0% { top: 0em;  } 50% { top: 2.7em;  } 100% { top: 0em;  } }

@-webkit-keyframes bird02 { 0% { bottom: 0em;  } 50% { bottom: 2.7em;  } 100% { bottom: 0;  } }    
@-o-keyframes bird02 { 0% { bottom: 0em;  } 50% { bottom: 2.7em;  } 100% { bottom: 0;  } }
@-ms-keyframes bird02 { 0% { bottom: 0em;  } 50% { bottom: 2.7em;  } 100% { bottom: 0;  } }
@keyframes bird02 { 0% { bottom: 0em;  } 50% { bottom: 2.7em;  } 100% { bottom: 0;  } }
@-moz-keyframes bird02 { 0% { bottom: 0em;  } 50% { bottom: 2.7em;  } 100% { bottom: 0;  } }

@-webkit-keyframes bird03 { 0% { bottom: 1em;  } 50% { bottom: 0em;  } 100% { bottom: 1em;  } }    
@-o-keyframes bird03 { 0% { bottom: 1em;  } 50% { bottom: 0em;  } 100% { bottom: 1em;  } }
@-ms-keyframes bird03 { 0% { bottom: 1em;  } 50% { bottom: 0em;  } 100% { bottom: 1em;  } }
@keyframes bird03 { 0% { bottom: 1em;  } 50% { bottom: 0em;  } 100% { bottom: 1em;  } }
@-moz-keyframes bird03 { 0% { bottom: 1em;  } 50% { bottom: 0em;  } 100% { bottom: 1em;  } }

@keyframes ringTheBell2 {
	0% { transform: translateY(0); }
	10% {transform: translateY(0em);height: 103%;}
	25% {transform: translateY(0);height: 85%;}
	40% { transform: translateY(0); height: 107%; }
	55% { transform: translateY(0); height: 90%; }
	70% { transform: translateY(0); height: 100%; }
	100% { transform: translateY(0); }
}