@charset "utf-8";

body{
    overflow-x: hidden;
    background: radial-gradient(rgb(212, 252, 217), rgb(34, 172, 56));
    font-family: 'Kosugi Maru', sans-serif;
    color: #333;
    font-size:1rem;
    line-height:1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; 
    word-wrap: break-word;
    letter-spacing: 0.1em;
}

body.appear{
    background: linear-gradient(to top, rgba(188,221,194,1) 0%, rgba(255,248,220,1) 100%);
}

ul{
    margin:0;
    padding: 0;
    list-style: none;
}

a{
    color: #333;
    text-decoration: none;
    outline: none;
}

img{
    width:100%;
    height: auto;
}

.pconly { display: none;} 
.sonly { display: flex;}

    @media only screen and (max-width: 800px) {
        .pconly{ display: flex;}
        .sonly { display: none;} 
    }


*{ box-sizing: border-box}


/* font-family */

.school-info li dl,
.header-area dl,
#oneday article time,
#page-top span,
h2 span{ font-family: 'Lato', sans-serif;}


/* color */

.f-green{ color: #00913A;}
.f-pink{ color: #ff3366;}
.f-white{color: #fff}


/* area */

.inner{
    width:100%;
    margin:0 auto;
    padding:70px;
}

    @media screen and (max-width:940px) {
        .inner{
            padding:70px 30px;
        }
    }


/* heading */

h2{
    text-align: center;
    margin: 0 0 50px 0;
    font-size: 1.1vw;
    line-height: 1.5;
}

h2 span{
    font-size: 3.5vw;
    text-transform: uppercase;
    display: block;   
}

    @media screen and (max-width:1130px) {
        h2{ font-size: 0.9rem;}

        h2 span{ font-size: 2.5rem;}
    }

    @media screen and (max-width:768px) {
        h2{ font-size: 0.8rem;}

        h2 span{ font-size: 2rem;}
    }


/* header */

#header{
    height: 100vh;
    position: relative;
}

#header h1 img,
#header h1 canvas{
    width:auto;
    position: relative;
}

#header h1{
    width: 250px;
    text-align: center;
    font-size: 1.5vw;
    color:#7F4F21;
    line-height: 1.5;
    margin: 0 0 18px 0;
    letter-spacing: 0.2em;
}

#header h1 span{
    font-size: 2.7vw;
    color:#00913A;
    display: block;
}

.header-area{
    position: relative;
    z-index:2;
    top:90px;
    left:50px;
    animation-delay: .5s;
}

    @media screen and (max-width:1200px) {
        #header h1 img,
        #header h1 canvas{ left:-10px;}

        #header h1{ font-size:2rem;}    
    }

    @media screen and (max-width:940px) {
        #header{ height: 90vh;}

        .header-area{
            top:0;
            left:0;
        }

        #header h1{
            text-align: center;
            width: 150px;
            background: #fff8dc;
            border-radius: 0 0 10px 10px;
            padding: 10px 0 10px 0;
            margin: 0 auto;
            font-size: 1.3rem;
            border-bottom: 7px solid #ffb6c1;
        }

        #header h1 img,
        #header h1 canvas{
            width:120px;
            left:inherit;
        }
    }

    @media screen and (max-width:450px) {
        #header h1 { width: 138px;}

        #header h1 img { width: 130px;}    
    }

.header-area .lead{
    position: relative;
    font-size: 2vw;
    margin: 0 0 30px 0;
}

    @media screen and (max-width:1130px) {
        .header-area .lead{ font-size: 1.4em;}    
        }

    @media screen and (max-width:940px) {
        .header-area .lead{
            font-size: 1.3em;
            padding: 28vh 0 0 7vw;
        }  
    }

    @media screen and (max-width:450px) {
        .header-area .lead {
            font-size: 1.1em;
            padding: 32vh 0 0 7vw;
        }
    }

.header-area .lead::after{
    content:'';
    position: absolute;
    top:0;
    left:-50px;
    width:10px;
    height: 100%;
    background:#ffb6c1;
}

    @media screen and (max-width:940px) {
        .header-area .lead::after{
            display: none;
        }
    }

.header-area .bg-white{
    background:rgba(255,248,220,1);
    padding: 5px;
}

.header-area .border-white {
    background: linear-gradient(transparent 60%, #fff 60%);
}

.header-area .address{
    font-size: 1.1vw;
    margin: 5.5vw 0;
}

.header-area .ad-no{ font-size: 1vw;}


    @media screen and (max-width:1300px) {
        .header-area .address{
            font-size: 1.2em;
            margin-bottom: 3.5vw;
        }
        .header-area .ad-no{ font-size:1em;}
    }

    @media screen and (max-width:940px) {
        .header-area .address{ display: none;}
    }

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

    }

    @media screen and (max-width:560px) {
        #header{ height: 70vh;}
    }

.ba_ig{
    position: absolute;
    z-index: 2;
    right:50px;
    bottom:150px;
    width:120px;
    height: 120px;
    text-align: center;
    font-weight: bold;
    transition: all .3s;
}

.ba_ig img{
    border: 7px solid #ffb6c1;
    border-radius: 10px;
    margin: -5px 0 -12px;
}

.ba_ig:hover{
    transform: scale(1.1, 1.1);
}

    @media screen and (max-width:940px) {
        .ba_ig{
            right:30px;
            bottom:70px;
            font-size:0.9rem;
            display: none;
        }
    }


/* gnavi */

#g-nav ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#g-nav.panelactive ul li{
    position: relative;
    width:40%;
    text-align: left;
    white-space: nowrap;
}

    @media screen and (max-width:960px) {
        #g-nav.panelactive ul li{
            width:48%;
        }
    }

    @media screen and (max-width:580px) {
        #g-nav.panelactive ul li{
            width:100%;
        }
    }

#g-nav li a{ padding: 15px 20px;}

#g-nav.panelactive ul li::before{
    content:'';
    width:5px;
    height: 5px;
    background:#ffb6c1;
    position: absolute;
    left:-10px;
    top:43%;
}


/* slider */

.slider{
    position: absolute;
    top:30px;
    right:30px;
    width:75%;
    border:7px solid #ffb6c1;
    border-radius: 20px;
    overflow: hidden;
}
.slider-item{ border-radius:10px;}

    @media screen and (max-width:1130px) {
        .slider{  width:70%;}
    }

    @media screen and (max-width:940px) {
        .slider{
            width: 94%;
            right: 2%;
        }
    }

    @media screen and (max-width:600px) {
        .slider{
            width: 95%;
            height: 75%;
            right: 2%;
        }
    }


/* support */

#support {
    width:1000px;
    margin: -70px auto 150px;
    padding: 20px 30px;
    word-wrap: break-word;
    font-size: 1.5em;
    font-weight: bold;
}

#support big { font-size: 1.5em;}

    @media screen and (max-width:1300px) {
        #support{
            width:100%;
        }    
    }

    @media screen and (max-width:768px) {
        #support{
            font-size: 1.0em;
            margin-bottom: 80px;
        }    
    }

    @media screen and (max-width:400px) {
        #support{
            font-size: .8em;
            margin-bottom: 40px;
        }    
    }


/* concept */

#concept{
    background: url("../img/flag_01.png") no-repeat left top,url("../img/flag_02.png") no-repeat right top;
    background-size:250px auto;
}

    @media screen and (max-width:1300px) {
        #concept{ background-size:300px auto;}    
    }

    @media screen and (max-width:768px) {
        #concept{ background-size:150px auto;}    
    }

    @media screen and (max-width:400px) {
        #concept{ background-size:130px auto;}    
    }

#concept h2 span{ color: #ffb6c1;}

#concept .concept-area{
    position: relative;
    padding: 80px 0;
}

#concept .concept-img{
    width:30%;
    margin: 0 auto;
    animation-delay: .4s;
}

#concept .concept-area img{ border-radius: 50%;}

#concept .concept-area ul{ animation-delay: .5s;}

#concept .concept-area ul li{
    position: absolute;
    font-size: 1.7vw;
}

#concept .concept-area ul li::after{
    content:'';
    position: absolute;
    width:40px;
    height: 2px;
    bottom: -10px;
    right:10px;
    background: #ffb6c1;
}

#concept .concept-area ul li:nth-child(n+4)::after{
    left:10px;
}

#concept .concept-area ul li:nth-child(1){
    top: 10%;
    left: 18%;
    transform: rotate(15deg);
    animation-delay: .1s;
}

#concept .concept-area ul li:nth-child(2){
    top: 31%;
    left: -3%;
    transform: rotate(10deg);
    animation-delay: .3s;
}

#concept .concept-area ul li:nth-child(3){
    top: 60%;
    left: 15%;
    transform: rotate(-15deg);
    animation-delay: .5s;
}

#concept .concept-area ul li:nth-child(4){
    top: 9%;
    right: 6%;
    transform: rotate(-15deg);
    animation-delay: .7s;
}

#concept .concept-area ul li:nth-child(5){
    top: 33%;
    right: 7%;
    transform: rotate(-10deg);
    animation-delay: 1.1s;
}

#concept .concept-area ul li:nth-child(6){
    top:60%;
    right: 17%;
    transform: rotate(15deg);
    animation-delay: 1.3s;
}

    @media screen and (max-width:700px) {
        #concept .concept-area{ padding: 0;}

        #concept .concept-img{
            width:50%;
            margin:0 auto 30px auto;
        }

        #concept .concept-area ul li{
            position: relative;
            font-size: 1rem;
            top:inherit!important;
            left: inherit!important;
            right:inherit!important;
            transform: none!important;
            text-align: center;
            margin: 0 0 10px 0;
        }

        #concept .concept-area ul li:after{
            display: none!important;
        }
    }

.concept-btn{
    text-align:center;
    padding: 50px 0 0 0;
}

    @media screen and (max-width:600px) {
        .btn03 span {
            font-size: .8em;
            padding: 10px 12px;
            border-radius: 25px;
        }
    }


/* oneday */

#oneday{
    position: relative;
    padding: 50px 0 100px 0;
    margin: 0 0 100px 0;
}

    @media screen and (max-width:840px) {
        #oneday{
            margin:0;
            padding: 50px 0;
        }
    }

#oneday:after{
    position: absolute;
    z-index: -1;
    content:'';
    top:10px;
    left:-30%;
    width:150%;
    height: 680px;
    background: #ffb6c1;
    transform: rotate(-5deg);
    box-shadow: 0 3px 2px rgba(0,0,0,0.2);
}

#oneday .oneday-area{
    background:#fff;
    padding: 20px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
    width:70%;
    margin: 0 auto;
    border-radius:10px;
}

#oneday h2{ color: #fff;	}

#oneday li a{ transition: all 0.3s;}

#oneday li a:hover{
    color: #666;    
}

#oneday article{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #333;
}

#oneday article time{
    padding: 0 2em 0 0;
    color: #666;
    font-size: 0.8rem;
}

#oneday article h3{ font-size: 1rem;}

    @media screen and (max-width:840px) {
        #oneday .oneday-area{ width:90%;}

        #oneday article time,
        #oneday article h3{ width:100%;}    
    }

#oneday .icon-01,
#oneday .icon-01 canvas{
    position: absolute;
    bottom:-50px;
    right:50px;
    width: 100px;
}

#oneday .icon-02,
#oneday .icon-02 canvas{
    position: absolute;
    top:-90px;
    right:88px;
    width:80px;
}

#oneday .icon-03,
#oneday .icon-03 canvas{
    position: absolute;
    bottom:-90px;
    left:80px;
    width: 300px;
}

#oneday .icon-04,
#oneday .icon-04 canvas{
    position: absolute;
    top:10px;
    left:50px;
    width: 100px;
}
    @media screen and (max-width:700px) {
        #oneday .icon-01,
        #oneday .icon-01 canvas{
            width:80px;
            bottom: inherit;
            top: -23px;
        }

        #oneday .icon-02,
        #oneday .icon-02 canvas{
            width:60px;
            right: 89px;
            top: -406px;
        }

        #oneday .icon-03,
        #oneday .icon-03 canvas{
            width:180px;
            left:10px;
            bottom: inherit;
            top: -22px;
        } 

        #oneday .icon-04,
        #oneday .icon-04 canvas{
            width:80px;
            top: -516px;
        }
    }

    @media screen and (max-width:500px) {
        #oneday .icon-01,
        #oneday .icon-01 canvas{
            width:60px;
            right: 10px;
        }

        #oneday .icon-02,
        #oneday .icon-02 canvas{
            width:45px;
            right: 10px;
            top: -489px;
        }

        #oneday .icon-03,
        #oneday .icon-03 canvas{
            width:140px;
            left: 0;
        } 

        #oneday .icon-04,
        #oneday .icon-04 canvas{
            width: 60px;
            left: 10px;
            top: -516px;
        }   
    }


/* contents */

#contents{
    position:relative;
    margin: 0 0 50px 0;
}

    @media screen and (max-width:840px) {
        #contents{ margin:0;}
    }


#contents:after {
    position: absolute;
    z-index: -1;
    content: '';
    top: 280px;
    left: -30%;
    width: 150%;
    height: 400px;
    background: #65C9F0;
    transform: rotate(5deg);
    box-shadow: 0 3px 2px rgba(0,0,0,0.2);
}

.contents-list{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.contents-list section{
    width:28%;
    background: #fff;
    position: relative;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
    margin:0 0 50px 0;
    padding:20px 20px 30px 20px;
    border-radius: 10px;
    border: solid 3px #ffb6c1;
}

.contents-list section:nth-child(2){ animation-delay: 0.2s;}

.contents-list section:nth-child(3){ animation-delay: 0.4s;}

    @media screen and (max-width:840px) {
        .contents-list section{ width:46%;}
    }

    @media screen and (max-width:545px) {
        .contents-list section{ width:100%;}
        
        .contents-list section:nth-child(2),
        .contents-list section:nth-child(3){ animation-delay: 0s;}
    }

.contents-list section .bg-yellow{
    background:#fff;
    display: inline-block;
    position: absolute;
    left: -25px;
    top: -15px;
    z-index: 2;
    padding: 2px 5px 3px;
    font-size:1.1rem;
    border-radius: 5px;
    border: solid 3px #ffb6c1;
    letter-spacing: 0;
}

.contents-list section .contents-img{
    padding-top:70%;
    background-size:cover!important;
}

.contents-list section:nth-of-type(1) .contents-img{
    background:url("../img/contents_01.png") no-repeat center;
    background-size: cover;
}

.contents-list section:nth-of-type(2) .contents-img{
    background:url("../img/contents_02.png") no-repeat center;
    background-size: cover;
}

.contents-list section:nth-of-type(3) .contents-img{
    background:url("../img/contents_03.png") no-repeat center;
    background-size: cover;
}

.contents-list section:nth-of-type(4) .contents-img{
    background:url("../img/contents_04.png") no-repeat center;
    background-size: cover;
}

.contents-list section:nth-of-type(5) .contents-img{
    background:url("../img/contents_05.png") no-repeat center;
    background-size: cover;
}

.contents-list section h3{
    font-size: 1.3rem;
    font-weight: normal;
    text-align: center;
    border-top: 5px double #ffb6c1;
    margin: 10px 0 0 0;
    padding: 8px 0 0 0;
    letter-spacing: 0.1em;
    text-align: justify;
}

    @media screen and (max-width:1090px) {
        .contents-list section h3{ font-size: 0.8rem;}    
    }


/* event */

/*
#event{
    position: relative;
    padding: 80px 0;
}
*/

/* overview */

#overview {
    position: relative;
    width:80%;
    margin: 0 auto 150px;
    padding: 20px 30px;
    word-wrap: break-word;
}

#overview:after{
    position: absolute;
    z-index: -1;
    content:'';
    top:330px;
    left:-30%;
    width:150%;
    height: 480px;
    background: #F4E692;
    transform: rotate(-5deg);
    box-shadow: 0 3px 2px rgba(0,0,0,0.2);
}

#overview .frame {
    background:#fff;
    padding: 40px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
    border: 1px solid #e3e3e3;
    margin: 0 auto;
    border-radius:10px;
    text-align: left;
}

#overview dl{
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #f0f0f0;
}

#overview dl:last-child{
    border-bottom: none;
}

#overview dt{
    width: 30%;
    float: left;
    text-align: left;
    line-height: 2.5;
    margin-left: 22px;
    font-weight: bold;
    color: #ff3366;
}

#overview dd{
    width: 100%;
    text-align: left;
    display: table-cell;
    line-height: 2.5;
}

#overview dd .under{ border-bottom: 1px dotted #ffb6c1;}

    @media screen and (max-width:1090px) {
        #overview { width: 98%}
    }

    @media screen and (max-width:840px) {
        #overview dt{
            width: 100%;
            line-height: 2.5;
            margin-left: 12px;
        }

        #overview dd{
            width: 100%;
            line-height: 1.5;
            padding: 0 0 10px 22px;
            font-size:.9rem;
        }
        
        .pconly{ display: none;}
    }

    @media screen and (max-width:500px) {
        #overview.inner{ padding:0 15px;}
        
        #overview .frame {
            width:100%;
            padding: 10px 10px;
            word-wrap: break-word;
        }

        #overview dt{
            width: 100%;
            line-height: 2.3;
            margin-left: 8px;
            font-size:.9rem;
        }

        #overview dd{
            width: 100%;
            line-height: 1.5;
            padding: 0 0 10px 22px;
            font-size:.8rem;
        }
        
        .pconly{ display: flex;}
    }

/*
@media screen and (max-width:400px) {
#overview dt{
width: 100%;
line-height: 1.5;
margin-left: 12px;
}

#overview dd{
width: 100%;
line-height: 2.5;
padding-left: 22px;
font-size:1.3rem;
}
}
*/


/* contact */

#contact{
    background:url("../img/bg_footer.jpg") no-repeat center;
    background-size: cover;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 30px;
}

#contact h2{
    font-size: 2rem;  
    position: relative;
    margin: 0 0 50px 0;
}

#contact .contact-detail br{ display: none;}

#contact li{ margin: 0 15px;}

    @media screen and (max-width:1090px) {
        #contact h2{ font-size:1.5rem;  }  
    }

    @media screen and (max-width:600px) {
        #contact .contact-detail h2 br{ display: block;}
    }

#contact h2::after{
    content: "";
    background:#fff;
    width:15%;
    height: 5px;
    position: absolute;
    left:40%;
    bottom: -20px;
}

#contact p{
    text-align: center;
    margin: 0 0 50px 0;
}

    @media screen and (max-width:400px) {
        #contact .contact-detail h2{ font-size: 1.3rem;}
        
        #contact .contact-detail p br{ display: block;}
    }

#contact ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#contact ul li{ padding: 0 0 45px;}


/* footer */

#footer{
    background: #ffb6c1;
    color: #fff;
}

#footer a{ color: #fff;}

.footer-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.school-info{ width:35%;}

.school-info span{
    display: block;
    font-size:1.7rem;
    font-weight: bold;
    line-height: 1.5;
}

/*
.school-info dt.footer-title,
.school-info li:first-of-type{
    margin: 0 0 10px 0;
}

.school-info li dt{
    margin:0 10px 0 0;
}

.school-info li dt,
.school-info li dd{
    display: inline-block;
}
*/

.footer-sitemap{ width:65%;}

.footer-sitemap ul{
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.footer-sitemap li{ padding: 10px 20px;}

.footer-sitemap li a{
    position: relative;
    padding: 0 10px;
}

.footer-sitemap li a:before{
    position: absolute;
    top:40%;
    left:-10px;
    content: '';
    width: 7px;
    height:7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

small{
    display: block;
    text-align: right;
    margin-right: 28px;
}

.footer_ig{
    width: 300px;
    height: 225px;
    right: 90px;
    bottom: 0px;
}

.footer_ig img{ width: 300px;}

    @media screen and (max-width:1090px) {
        .footer-area{ align-items: flex-start;}
        
        .school-info{ width:42%;}
        
        .footer-sitemap{ width:56%;}

        .footer_ig{
            width: 100%;
            height: 70px;
            right: 0;
            text-align: center;
        }
    }

    @media screen and (max-width:940px) {
        small{
            text-align: center;
            margin-right: 0;
        }
        
        #page-top{
            position: relative;
            text-align: center;
            right: inherit;
            bottom: inherit;
            margin: 20px auto 20px auto;
            width: 80px;
            animation: none!important;
            transform:none!important;
            opacity: 1;
        }
        
        .school-info{ width:48%;}
        
        .footer-sitemap{ width:50%;}
        
        .footer_ig{
            width: 100%;
            height: auto;
            padding: 15px 0;
        }
    }

    @media screen and (max-width:768px) {
        .school-info,
        .footer-sitemap{ width:100%;}

        .school-info{
            text-align: center;
            margin:0 0 20px 0;
            padding: 0 0 20px 0;
            border-bottom:1px solid rgba(255,255,255,0.8);
        }
        
        .school-info span{ font-size:1.3rem;}
        
        .footer_ig img{ max-width: 70%;}
    }

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

/* header
----------------------------------------------------*/
#k_header {
    width: 100%;
    height: 80px;
    background:url("../img/logo_.png") no-repeat center;
    background-size: contain;
    background-color: #ffb6c1;
    background-position: left;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

    @media screen and (max-width:700px) {
        #k_header { background-size: 80%;}
    }


/* 求人情報
----------------------------------------------------*/
.recruit { margin: 55px 0;}

.recruit p {
    margin: 10px 50px;
    text-align: left;
}

.recruit .blinking {
    font-size: 23px;
    font-weight: 600;
    margin-top: 25px;
}

.recruit_p{ float: left;}

.recruit img.ritsu {
    width: 40%;
    float: right;
    padding: 0;
    margin: -115px 0 20px 0;
    border: none;
    background-color: #fbfbfb;
    background-image: none;
    box-shadow: none;
    padding: 10px;
}

.recruit img {
    margin: 15px 10px;
    padding: 10px;
    border: solid 1px #efefef;
    box-shadow: 0 10px 8px -6px #fbfbfb;
    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
    background-color: #f5f5f5;
    background-image: repeating-linear-gradient(25deg, #fff, #fff 3px,transparent 0, transparent 6px);
    line-height:0;
}

button{
    background:#ffaf58;
    color:#fff;
    border:none;
    position:relative;
    height:60px;
    font-size:1.6em;
    padding:0 2em;
    cursor:pointer;
    transition:800ms ease all;
    outline:none;
}
button:hover{
    background:#fff;
    color:#ffaf58;
}
button:before,button:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: #ffaf58;
    transition:400ms ease all;
}
button:after{
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
}
button:hover:before,button:hover:after{
    width:100%;
    transition:800ms ease all;
}

    @media only screen and (max-width: 768px ) {
        .recruit { margin: 1px 0;}
        .recruit p {
            margin: 0 auto;
            padding: 8px;
        }
        .recruit .blinking { margin-top: 10px;}
        .recruit_p{ float: none;}
        .recruit img.ritsu {
            width: 100%;
            float: none;
            padding: 0;
            margin: 0 auto 10px;
        }    
        .recruit img {
            margin: 5px auto;
            padding: 0;
            box-shadow: 0 8px 5px -5px #fbfbfb;
            -webkit-box-shadow: 0 8px 5px -5px #8d8c8c;
            -moz-box-shadow: 0 8px 5px -5px #8d8c8c;
        }
    }












/*マーカーアニメーション*/
.marker-animation.active{ background-position: -100% .5em;}

.marker-animation {
        background-image: -webkit-linear-gradient(left, transparent 50%, rgb(247,216,200) 50%);
        background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,182,193) 50%);
        background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,182,193) 50%);
        background-image: -o-linear-gradient(left, transparent 50%, rgb(255,182,193) 50%);
        background-image: linear-gradient(left, transparent 50%, rgb(255,182,193) 50%);
        background-repeat: repeat-x;
        background-size: 200% .8em;
        background-position: 0 .5em;
        transition: all 2s ease;
        font-weight: bold;
}


/* アニメーション発火時 */
.js-marker.inview {
    background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
}


/* 点滅 */
.blinking{
    color: #fff;
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}