@charset "UTF-8";

/*******************************
TopCss 
*******************************/
#hero{
    overflow: hidden;
}
/* .メインイメージ */
.box-mainslide{
    margin-bottom: 40px;
}
.box-mainslide:after{
    content: "";
    display: block;
    width: 100%;
    max-width: 972px;
    height: 20px;
    background: url(../img/top/ico-slide-bottom.png) repeat-x center top;
    margin: auto;
}
.box-mainslide .item img{
    border-radius: 10px;
}


/* .sec-intro */
.sec-intro {
    background: url(../img/top/bg-38.png) no-repeat right top;
    padding: 10px 0 90px;
}
.sec-intro .box01{
    max-width: 281px;
}
.sec-intro .box02{
    margin-top: 10px;
    max-width: 690px;
}
.sec-intro .box02 .txt{
    padding: 20px 0 10px 10px;
}
.sec-intro .box02 h2{
    margin: 10px 0;
}
.sec-intro .box02 p{
    color: #5f3c13;
}



/* .sec-contents */
.sec-contents {
	position: relative;
}
.sec-contents h1{
	position: absolute;
	left: 74px;
	top: 10%;
    transform: rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform-origin: left top 0;
    -webkit-transform-origin:left top 0;
    
}

/* 六角形コンテンツ */
.box-hex{
	font-size: 0;
}
.box-hex .item-hex{
	display: inline-block;
	vertical-align: baseline;
	padding: 10px;
}
.box-hex .item-hex.size-5{ width: 42%; }
.box-hex .item-hex.size-4{ width: 31%; }
.box-hex .item-hex.size-3{ width: 27%; }

.box-hex .item-hex a{
	display: block;
	position: relative;
	cursor: url(../img/common/cursor.cur),pointer;
	transform: translateY(0px);
}

.box-hex .item-hex a span{
	font-size: 56px;
	line-height: 0;
	color: #fff;
	position: absolute;
	right: 25px;
	bottom: 35%;
}

.box-hex .item-hex a:before{
	content: " ";
    display: block;
	height: 11px;
    background-size: 261px auto;
    background-repeat: repeat-x;
    background-position: left top;
    pointer-events: none;
    width: 100%;
    background-image: url(../img/top/wave_contents.png);
    position: absolute;
    bottom: 28%;
	-webkit-animation: waving 4s linear 0s infinite normal;
    animation: waving 4s linear 0s infinite normal;
}
.box-hex .item-hex.size-4 a:before,
.box-hex .item-hex.size-3 a:before{
    bottom: 27%;
}

.box-hex .item-hex a:hover{
	-webkit-animation: bun .3s linear 2 alternate;
	animation: bun .3s linear 2 alternate;
}
@-webkit-keyframes bun {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes bun {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@-webkit-keyframes waving{
	from{background-position:0 0}to{background-position:261px 0}
}
@keyframes waving{
	from{background-position:0 0}to{background-position:261px 0}
}


/* 境界線波アニメーション */
.anime-wave{
    line-height: 0;
}
.anime-wave canvas{
    width: 100%;
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}
.anime-wave canvas.is-top{
    transform: none;
    -webkit-transform: none;
}


/* BEE HAPPY */
.sec-about{
	background: url(../img/top/bg_pink.jpg);
}



/* STAFF */
.sec-staff{
	background: #e6e669;
}



/* WORKS */
.sec-works{
	background: #ddfdda;
}



/* ACTIVITIES */
.sec-ac{
	background: url(../img/top/bg_blue.jpg);
}



/*******************************
headerCss
*******************************/
header .inner{
	position: relative;
}

/*　ふきだし　*/
header h2{
	display: block;
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	margin: auto;
}

/*　写真装飾　*/
header .i-cline-l, header .i-cline-r{
	position: absolute;
	top: 20px;
	z-index: 2;
}
header .i-cline-l{
	left: -50px;
    -webkit-animation: cline-l .6s linear infinite alternate;
	animation: cline-l .6s linear infinite alternate;
}
header .i-cline-r{
	right: -50px;
    -webkit-animation: cline-r .5s linear infinite alternate;
	animation: cline-r .5s linear infinite alternate;
}
header .i-honey01{
	display: block;
	text-align: left;
	padding-left: 100px;
}
@-webkit-keyframes cline-l{
	100% {-webkit-transform: translate3d(-5px, -5px, 5px);}
}
@keyframes cline-l{
	100% {transform:translate3d(-5px, -5px, 5px);}
}
@-webkit-keyframes cline-r{
	100% {-webkit-transform: translate3d(5px, -5px, 5px);}
}
@keyframes cline-r{
	100% {transform:translate3d(5px, -5px, 5px);}
}


/*　雲　*/
header .i-cloud01,header .i-cloud02,header .i-cloud03{
	position: absolute;
}
header .i-cloud01{
	top: -100px;
	left: 40px;
	-webkit-animation: fuwafuwa1 1.8s linear infinite alternate;
	animation: fuwafuwa1 1.8s linear infinite alternate;
}
header .i-cloud02{
	top: -20px;
	left: -80px;
	-webkit-animation: fuwafuwa2 1.3s linear infinite alternate;
	animation: fuwafuwa2 1.3s linear infinite alternate;
}
header .i-cloud03{
	top: 0;
	left: 10px;
	-webkit-animation: fuwafuwa3 1.5s linear infinite alternate;
	animation: fuwafuwa3 1.5s linear infinite alternate;
}

@-webkit-keyframes fuwafuwa1{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@keyframes fuwafuwa1{
	0% {transform:translate(0, 0);}
	50% {transform:translate(0, -10px);}
	100% {transform:translate(0, 0);}
}
@-webkit-keyframes fuwafuwa2{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -5px);}
	100% {-webkit-transform:translate(0, 0);}
}
@keyframes fuwafuwa2{
	0% {transform:translate(0, 0);}
	50% {transform:translate(0, -5px);}
	100% {transform:translate(0, 0);}
}
@-webkit-keyframes fuwafuwa3{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -3px);}
	100% {-webkit-transform:translate(0, 0);}
}
@keyframes fuwafuwa3{
	0% {transform:translate(0, 0);}
	50% {transform:translate(0, -3px);}
	100% {transform:translate(0, 0);}
}


/*　公式トップボタン　*/
header .link-official{
	display: block;
	position: absolute;
	top: -90px;
	right: 30px;
}
header .link-official:hover{
	-webkit-animation: yurayura .5sa 2 ease-out;
	animation: yurayura .5s 2 ease-out;
}
@-webkit-keyframes yurayura {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes yurayura {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}




/*******************************
footerCss
*******************************/
footer{
	background-color: #fff6dd;
    margin-top: -1px;
}



/*============================================

SP用CSS

============================================*/
@media screen and (max-width: 767px){
    /*******************************
    TopCss 
    *******************************/
    /* .メインイメージ */
    .box-mainslide {
        margin-bottom: 0;
    }
    .box-mainslide:after{
        width: 98%;
        height: 10px;
        background-size: 485px auto;
        background-position: left top;
    }
    
    
    /* .sec-intro */
    .sec-intro {
        padding: 10px 0 0;
        background-size: 40%;
        background-position: right 20px;
    }
    .sec-intro .box01 {
        max-width: 30%;
        margin: auto;
        margin-top: -50px;
        position: relative;
        z-index: 2;
    }
    .sec-intro .box02{
        margin-top: 0;
    }
    
    
    /* .sec-contents */
    .sec-contents h1 {
    position: static;
    transform: rotate(0deg);
    -webkit-transform:rotate(0deg);
        
    }
    .sec-contents h1 img{
        height: auto;
        max-height: 39px;
    }
    
    
    /* 六角形コンテンツ */
	.box-hex .item-hex{
		width: 50%!important;
        padding: 10px 5px;
	}
    .box-hex .item-hex a:before{
        bottom: 26%!important;
    }
    .box-hex .item-hex a span{
        font-size: 36px;
    }
    
    
    
    /* STAFF */
    #staff{
        display: block;
        margin-top: -80px;
        padding-top: 80px;
    }
    
    
    
    /*******************************
    headerCss
    *******************************/
    /*　ふきだし　*/
    header h2{
        top: 25%;
        width: 80%;
    }

    /*　写真装飾　*/
    header .i-cline-l, header .i-cline-r{
        top: 30px;
        width: 15%;
    }
    header .i-cline-l{
        left: -10px;
    }
    header .i-cline-r{
        right: -10px;
    }
    header .i-honey01{
        padding-left: 25%;
        width: 50%;
    }
    
    /*　雲　*/
    header .i-cloud01{
        display: none;
    }
    header .i-cloud02{
        width: 15%;
        top: -4px;
        left: 0;
    }
    header .i-cloud03{
        left: 15%;
        top: 18px;
    }
    
    /*　公式トップボタン　*/
    header .link-official{
        max-width: 115px;
        top: -20px;
        right: 0;
        z-index: 2;
        width: 25%;
    }
    
    
}