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

@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 100;
	src: url(/learned/cheer/satoyama/css/font/NotoSansCJKjp-Bold.woff) format('woff');
}
html,body{
     height:100%;
}
body {
	min-width: 1100px;
}
#wrap_cont{
	color:#464646;
	background: url(/learned/cheer/satoyama/images/report22/bg_top.png) no-repeat 50% 0 , url(/learned/cheer/satoyama/images/report22/bg_img01.png) repeat-x 50% 0 , url(/learned/cheer/satoyama/images/report22/bg_img02.png) repeat-x 50% 969px , #fcf89a;
	width:100%;
}
#contents{
	margin:0 auto;
	width:1100px;
}
#wrap_cont p,
#wrap_cont span,
#wrap_cont li,
#wrap_cont ruby rb,
#wrap_cont ruby rt {
	font-family:'Noto Sans Japanese';
	font-weight: 100;
	line-height:1.6;

}
/*========================================
				.ttl_area
========================================*/	
.ttl_area{
	width:950px;
	margin:0 auto 30px;
	position:relative;
	min-height:830px;
	text-align:center;
	}	
.txt_sponsor{
	margin-top:34px;
	}
.txt_subttl{
	margin-top:18px;
	}	
.h1_ttl{
	margin-top: -14px;
	margin-left: -92px;
	}
	
/*--------------------
       menu_area
*--------------------*/
.menu_area{
	width:817px;
	height:442px;
	background:url(/learned/cheer/satoyama/images/report22/bg_ttl_sketch.png) no-repeat;
	position:absolute;
	left:95px;
	}
h3{
	position:absolute;
	top:75px;
	left:42px;
	}	
.menu_area ul{
	position:absolute;
    top: 115px;	
    left: 39px;
	}
.menu_area ul li{
	text-align:left;
	padding-bottom: 14px;
	background:url(/learned/cheer/satoyama/images/report22/menu_ic01.png) no-repeat 0 3px;
	padding-left:20px;
}	
.menu_area ul li:nth-child(2n){
	text-align:left;
	padding-bottom: 14px;
	background:url(/learned/cheer/satoyama/images/report22/menu_ic02.png) no-repeat 0 3px;
	padding-left:20px;
}	
.img_ttl_photo{
	position:absolute;
    top: 131px;
    right: 109px;
	}
.link_voice{
	z-index: 999;
	position:absolute;
	top: 305px;
  right: 20px;
}	
/*========================================
				.report_area
========================================*/
.report_area{
	margin-top: 265px;
	background: url(/learned/cheer/satoyama/images/report22/bg_report_area.png) repeat-y center top ;
	position: relative;
}
.report_area:before{
	content: "";
	display: inline-block;
	/*width: 1219px;*/
	height: 254px;
	background: url(/learned/cheer/satoyama/images/report22/top_img01.png) no-repeat center top;
	position: absolute;
	top: -252px;
	right: 0;
	left: 0;
}
/*--------------------
       共通
*--------------------*/
.bg{
	margin:0 auto;
	padding-bottom:116px;
	font-size:14px;
}
.bg p{
	margin-bottom:23px;
}
.report_box{
	margin:-40px auto 0px;
	width:950px;
}	
.tab_l{
	float:left;	
}	
.tab_r{
	float:right;
}		
.report_bg_l{
	clear:both;
	position:relative;
	width:950px;
	-webkit-border-radius:0px 10px 10px 10px;  
  border-radius:0px 10px 10px 10px;
	background:#fff;
	}
	
.report_bg_r{
	clear:both;
	position:relative;
	width:950px;
	-webkit-border-radius:10px 0px 10px 10px;
  border-radius:10px 0px 10px 10px;
	background:#fff;
	}		
.report_bg_l img,
.report_bg_r img{
	position:absolute;
}
.report_txt_l{
	width:499px;
	padding: 30px 0 20px 30px;
	}
	
.report_txt_r{
	float:right;
	width:553px;
	padding: 30px 30px 20px 0px;

}
.g_txt{
	color:#1fab39;
	margin-bottom:20px;
}
.p_txt{
	color:#ee7800;
	margin-top:20px;
}
.ruby {
    display: inline-block;
    position: relative;
  }

  /* ルビに入れたい文字を括る */
  .ruby > .rt {
    position: absolute;
    font-size: 8px;
    top: -0.8em;
    left: -200%;
    right: -200%;
    text-align: center;
    white-space: nowrap;
  }

/*--------------------
       report01
*--------------------*/
.bg:first-of-type {
	padding-bottom: 80px;
}
#report01 {
	position: relative;
	top: -20px;
}
.report01{
	height:264px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report01_bg.png) no-repeat right 0;
	}
.report01_ph01{
	top: 33px;
	right: 134px;	
	}
.report01_img01{
	bottom: -10px;
	left: -19px;
}
/*--------------------
       report02
*--------------------*/
.report02{
	height:450px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report02_bg.png) no-repeat right bottom;
	}
.report02_ph01{
	top: 32px;
	left: 33px;	
	}
.report02_ph02{
	bottom: 34px;
	left: 112px;
	}

/*--------------------
       report03
*--------------------*/
.report03{
	height: 513px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report03_bg.png) no-repeat right bottom;
	}
.report03_ph01{
	top: 34px;
	right: 158px;
	}
.report03_ph02{
	top: 238px;
	right: 34px;	
	}
.report03_img01{
	bottom: -10px;
	right: -25px;
}
/*--------------------
       report04
*--------------------*/
.report04{
	height: 431px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report04_bg.png) no-repeat right bottom;
	}
.report04_ph01{
	top: 32px;
	left: 33px;
	}	
.report04_ph02{
	bottom: 29px;
	left: 106px;
}

/*--------------------
       report05
*--------------------*/
.report05{
	height: 611px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report05_bg.png) no-repeat right bottom;
	}
.report05_ph01{
	top: 42px;
	right: 52px;
}
.report05_ph02{
	top: 233px;
	right: 168px;	
}
.report05_img01{
	bottom: -9px;
	left: -35px;
}

/*--------------------
       report06
*--------------------*/
.report06{
	height:395px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report06_bg.png) no-repeat right bottom;
	}
.report06_ph01{
	top: 20px;
	left: 35px;	
}
.report06_ph02{
	bottom: 29px;
	left: 120px;
}

/*--------------------
       report07
*--------------------*/
.report07{
	height: 384px;/*角BOXの高さ*/
	background: #fff url(/learned/cheer/satoyama/images/report22/report07_bg.png) no-repeat right bottom;
	}
.report07_ph01{
	top: 30px;
	right: 182px;	
	}
.report07_ph02{
	bottom: 29px;
	right: 31px;
}

/*========================================
				#voice_wrap
========================================*/
#voice_wrap{
	text-align:center;
	margin:0 auto;
	position: relative;
}
#voice_wrap:before{
	content: "";
	display: inline-block;
	/*width: 1100px;*/
	height: 165px;
	background: url(/learned/cheer/satoyama/images/report22/img_head_voice.png) repeat-x center top;
	position: absolute;
	top: -97px;
	right: 0;
	left: 0;
}
#voice_cont{
	background: url(/learned/cheer/satoyama/images/report22/h2_voice_bg.png) no-repeat center top 22px , #f6a823 ;
	position:relative;
	width:100%;
	margin: auto 0;
	}
#voice_cont h2{
	padding: 60px 0 82px;
	}
.voice_area{
	width: 950px;
	height: 813px;
	margin: 0 auto 71px;
	text-align: center;
	position: relative;
	-webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
	background: rgba(255,255,255,0.8);
	}
.voice_inner{
	padding: 32px;
	position:relative;
}
.voice_img01{
	position:absolute;
	top: -144px;
	left: 9px;
}
.voice_img02{
	position:absolute;
	top: -146px;
	right: -32px;

}
.parents_text{
	text-align:left;
	margin-bottom:16px;
}
.parents_text li{
	font-size:16px;
	color:#f18700;
	margin-left: 2em;
	text-indent: -2em;
}
.parents_text li:nth-of-type(n+2) {
	padding-top: 20px;
}
.parents_text li:last-of-type {
	margin-bottom:20px;
}
.parents_text li:before{
	content:"";
	padding-left:10px;
	background:url(/learned/cheer/satoyama/images/report22/menu_ic01.png) no-repeat 0 50%;
	width:18px;
	height:20px;
	vertical-align:middle;
	display:inline-block;	
}
.parents_text li:nth-child(2n):before{
	background:url(/learned/cheer/satoyama/images/report22/menu_ic02.png) no-repeat 0 50%;	
}
.ttl{
	text-align:left;
	margin-bottom: 20px;

}
.children_img{
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
.children_img li{
	padding-left: 16px;
}
.children_img li:nth-child(1){
	padding-left: 0;
}
.special_text{
	position: absolute;
}
.special_text{
	top: 67px;
	left: 49px;
}
figure{
	margin: 0;
	padding: 0;
}

.btn_top_off{
	position:absolute;
	bottom:-50px;
	right:-62px;
	}

.voice_special:after{
	content: "";
	display: block;
	clear: both;
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    -ms-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -ms-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    -ms-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    -ms-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    -ms-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}
/*タブレット　iphone用*/


 @media only screen and (min-device-width: 768px)
    and (max-device-width: 1024px) {
    #contents{
		width:1206px!important;
		}
	#fancybox-overlay,	
	#footer,	
	#wrap_cont{
		width:100%!important;
		}
		
}

 @media screen and (max-device-width: 480px){
    #contents{
		width:1206px!important;
		}
	#fancybox-overlay,	
	#footer,	
	#wrap_cont{
		width:100%!important;
		}		 
	 }
	 
/* iPhone6のみ */
@media screen and (min-width: 375px) and (max-width: 413px){
	    #contents{
		width:1206px!important;
		}
	#fancybox-overlay,	
	#footer,	
	#wrap_cont{
		width:100%!important;
		}	
}
  
/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media screen and (min-width: 414px) and (max-width: 500px){
	    #contents{
		width:1206px!important;
		}
	#fancybox-overlay,	
	#footer,	
	#wrap_cont{
		width:100%!important;
		}	
}