@charset "utf-8";
/* CSS Document */

/****活動用****/
.blackbarnew{
    top:0;
	left:0;
	width:100%;
	height:30px;
    padding:0 10px;
	background-color:#000;
	position: fixed;
	z-index:999;
	overflow: hidden;}

.yeslogo{font-size: 12px; color: #fff; line-height: 30px; letter-spacing: 2px; float: left;}

.yeslogo i{margin-right: 8px; float: left;}

.yeslogo i img{width: 10px; margin-top: 10px;}

.yesgogo{font-size: 12px; color: #fff; line-height: 30px; letter-spacing: 2px; float: right;}

.yesyes{font-size: 15px; color: #fff; font-weight: bold; line-height: 30px; letter-spacing: 1px; margin-right: 4px;}



/*box01*/
.box01{ width: 100%;margin-top: 30px; background-image: url("../img/bg.jpg"); background-size: cover; background-repeat: no-repeat;
    overflow: hidden; position: relative; z-index: 88;}

.people_left{position: absolute; left: 30px; bottom: -66px;z-index: -1;}
.people_right{position: absolute;right: 30px; bottom: -60px; z-index: -1;}

.bf{max-width: 650px; margin: 0 auto -3px;z-index: 88;}

.bf950{max-width: 650px; margin: 0 auto -3px;z-index: 88;display:none;}

@media screen and (max-width: 980px) {
.people_left{display: none;}
.people_right{display: none;}    
.bf{display: none;}
.bf950{display: block;}
.box01{ min-height: auto;}
}

/*box02*/
.box02{width:100%; background-color: #fff; padding: 40px 20px 60px; position:relative; z-index: 88;}

.abc{max-width: 950px; text-align: center; margin: 0 auto;}

.abc h1{font-size: 24px; color: #5d4ab3; font-weight: bold; margin-bottom: 10px; line-height: 1.5;}

.abc h2{ font-size: 20px;  color: #656565; line-height: 1.5; margin-bottom: 20px;}

@media screen and (max-width: 736px) {
.abc h1{font-size: 22px;}
.abc h2{ font-size: 18px;}
}

.aboutbox{width: 100%;overflow: hidden;background-color: #fff;}

.about_img{width: 430px; overflow: hidden; float: left;  transition: all .3s; border-radius: 6px;}

.about_font{width: calc(100% - 540px); float: left; padding: 20px 24px;color: #545454; text-align: left; line-height: 1.5; position: relative; z-index: 88;}

.buttonbox{width: 100%; left:0;}

.buttonbox ul{overflow:hidden;}

.buttonbox li{float: left; width: calc(100% / 2 - 6px);  }

.buttonbox li:nth-child(1){margin-right:12px;}

@media screen and (max-width: 980px) {
.about_img{width: 380px;}
.about_font{width: calc(100% - 380px);  padding: 0px 24px;}
}

@media screen and (max-width: 736px) {
.buttonbox li{width: calc(100% / 2 - 12px);}
}

.button01{padding:8px 16px;font-size: 18px;  background-color: #fff; color: #764ec4; border-radius: 6px; /*font-weight: bold;*/
border: 1px #764ec4 solid; transition: all .3s; text-align: center;}

.button02{padding:8px 16px;font-size: 18px;  background-color: #ff809b; color: #FFFFFF; border-radius: 6px; /*font-weight: bold;*/ 
transition: all .3s; text-align: center;}

/*.button01:hover{background-color: #FF8EA6; color: #FFFFFF;border: 1px #FF7592 solid;}*/

.button01:hover{background-color: #764ec4;  color: #FFFFFF;border: 1px #6D3EC8 solid;}
.button02:hover{background-color: #FF5D7F; }

@media screen and (max-width: 736px) {
    .about_font{width:100%;  height: auto; padding: 12px 0; }
    .about_img{ max-width: 100%;   height: auto; }
    
}


/*box03*/
.box03{width:100%; background-color: #efe4ff; padding: 40px 20px 60px; position:relative; z-index: 88; background-image: url("../img/flower.png"); background-repeat: repeat;}

.timeline{width: 100%; position: relative; z-index: 88;}

.timelinebox{position: relative; z-index: 88; /*margin-top: 20px;	margin-bottom: 20px;*/padding-top: 40px;}

.timelinebox::before {
	content: "";
	display: block;
	width: 2px;
	height: 100%;
	background: rgba(255, 142, 166, 0.5);
	position: absolute;
	left: 50%;
	top: 0;
    animation: scaleVertical 3s 1s ease both 1;
     transition: all .3s;
}

@media screen and (max-width: 736px) {
    .timelinebox::before {left:14px;}
}

.start{width: 15px; height: 15px; border-radius: 50px; background-color: #ff6182; position: absolute; z-index: 999; margin: 0 auto;
    transition: all .3s;     left: 469px; }

.circle{width: 50px; height: 50px; border-radius: 50px; border:3px #FF8EA6 solid; background-color: #fff; position: absolute; z-index: 999;  left: 489px; margin-left:-2.4rem; transition: all .3s; font-size: 16px; color: #ff6182; text-align: center; padding-top:14px;}

.storyicon{border-radius:6px;}

@media screen and (max-width: 980px) {
    .start{ left: 357px; }
}

@media screen and (max-width: 760px) {
    .start{ left: 8px; }
}

.timeline_block{ position: relative; /*padding-top: 44px;*/}

.timelinebox h3{font-size: 18px; color: #414141; line-height: 1.5;} 

.timeline_img_l{min-height: 290px;width: 430px; float:left; display: inline-block;  padding-top: 2px; transition: all .3s; border-radius: 6px;}
.timeline_font_r{margin-left: 50%; padding-left: 40px; text-align: left;min-height: 290px; transition: all .3s;}
.timeline_img_r{ min-height: 290px;width: 430px; margin-left: 9%; /*padding-left: 60px;*/ display: inline-block;  padding-top: 2px; transition: all .3s; border-radius: 6px;}
.timeline_font_l{min-height: 290px;width: 430px; float:left; display: inline-block; text-align: left; transition: all .3s;}


@media screen and (max-width: 980px) {
.circle{ left: 377px; margin-left:-2.4rem;  padding-top:14px;}
    
/*.timeline_img_l{width: 320px; float:left;   padding-top: 2px; min-height: 180px; display: inline-block;}
.timeline_font_r{margin-left: 50%; padding-left: 40px; text-align: left; min-height: 180px;}
.timeline_img_r{width: 320px; margin-left: 12%; /*padding-left: 60px;  padding-top: 2px;min-height: 180px;}
.timeline_font_l{width: 320px; float:left; text-align: left; min-height: 180px; }*/
.timeline_img_l{min-height: 220px;width: 320px; float:left; display: inline-block;  padding-top: 2px;}
.timeline_font_r{min-height: 220px;margin-left: 50%; padding-left: 40px; text-align: left;}
.timeline_img_r{ min-height: 220px;width: 320px; margin-left: 9%; /*padding-left: 60px;*/ display: inline-block;  padding-top: 2px;}
.timeline_font_l{min-height: 220px;width: 320px; float:left; display: inline-block; text-align: left;}
}


@media screen and (max-width: 736px) {
.timeline_block{display: inline-block; margin-bottom: 28px;}
.circle{width: 40px; height: 40px; left: 33px; font-size: 14px; padding-top: 11px; padding-right: 2px;}
    
.timeline_img_l{ min-height: auto;width: 82%; margin-left: 48px; }    
.timeline_font_r{ min-height: auto;width: 82%; margin-left: 48px; padding-left: 0px; margin-top: 12px; display: inline-block;}
.timeline_img_r{  min-height: auto;width: 82%; margin-left: 48px;}
.timeline_font_l{ min-height: auto;width: 82%; margin-left: 48px; margin-top: 12px; }  
}

/*box04*/
.box04{width:100%;/* background-color: #fff;*/ background-image: url("../img/bg02.png"); padding: 40px 20px 40px; position:relative; z-index: 88;}

.contrast{width: 100%;  margin-top: 20px;  transition: all .3s;}

.contrast ul{overflow: hidden;}

.contrast li{float: left; width: 50%; margin-bottom: 40px;text-align: center;} 
.contrast li:nth-child(1){ border-radius: 6px 0 0 6px; background-color: #ff86a9;}
.contrast li:nth-child(2){ border-radius: 0 6px 6px 0; background-color: #a18cf8;}

.contrastbox{text-align: center; padding: 40px 32px;  transition: all .3s;}

.contrastbox > p{font-size: 20px; line-height: 1.5; margin-bottom: 20px;   color: #FFFFFF; font-weight: bold;}

.contrast_img {width: 150px; margin: 0 auto; margin-bottom: 28px; transition: all .3s;}

@media screen and (max-width: 736px) {
    .contrast li{width: 100%;}
    .contrast li:nth-child(1){ border-radius: 6px; background-color:#ffb0c7;}
    .contrast li:nth-child(2){ border-radius: 6px; background-color: #a18cf8;}
      
}

.slogan h3{font-size: 20px;  color: #414141; line-height: 1.5; margin-bottom: 20px; font-weight: bold; transition: all .3s;}


/*video*/
.box05{width:100%; background-color: #efe4ff; padding: 40px 20px 60px; position:relative; z-index: 88; background-image: url("../img/flower.png"); background-repeat: repeat;}

.videobox{max-width: 650px; margin:0 auto; z-index: 99; margin-top: 20px;}

.videobox > p{color: #414141; font-size: 16px; text-align: left; line-height: 1.5;margin-top: 8px;}

@media screen and (max-width: 950px) {
    .videobox{margin-top: 0px;}
}



/*youtube*/
.video-container {
position: relative;
padding-bottom: 53.25%;
margin-bottom:0px;
height: 0;
overflow: hidden;
border: 3px #e8bfff solid;
border-radius: 6px;
z-index: 88;

}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
 }




/*box06*/
.box06{width:100%;/* background-color: #fff;*/ background-image: url("../img/bg02.png"); padding: 40px 20px 40px; position:relative; z-index: 88;}

.writingbox{width: 100%;  margin: 0 auto; overflow: hidden; text-align: center; /*background-color: #FFFFFF;*/}



.namebox{width: 100%; height: 240px; background-color:#eeeeee;position: relative; z-index: 88;text-align: left;}

.namebox h2{font-size: 18px; color: #ff4e00;  margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;/* margin-top: 16px;*/}

.namebox p{font-size: 16px; color: #414141; line-height: 1.5; padding:8px;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}

@media screen and (max-width: 736px) {
    .namebox{height: 268px;} 
    .namebox p{font-size: 18px;}
}

@media screen and (max-width: 320px) {
    .namebox{height: 220px;} 
    .namebox p{font-size: 16px;}
}

.writing_img{width: 100%; overflow: hidden;}