@charaset"UTF-8";

/*==================================================================*/
/* css */
/*==================================================================*/
:root{
	--color_main:#f1ad3f;
	--color_first:#f06c6e;
	--color_second:#f1ad3f;
	--color_third:#2975d6;
	--color_first_back:#fbd2d3;
	--color_second_back:#fbe8bf;
	--color_third_back:#b2d6f4;
	--size_sp_s:280px;
	--size_sp:300px;
	--size_tab:600px;
	--size_pc:840px;
	}

#certificate{display:none;}

#mainvisual{
	margin:0;
	padding:0;
	background-image:url('./image/ptn.png'), url('./image/mainvisual_back.png');
	background-position:50% 50%, 50% 50%;
	background-repeat:repeat-x, no-repeat;
	background-color:#ece9f3;
	background-size:cover, cover;
	}

#mainvisual h1{
	position:relative;
	}

#mainvisual h1::before,
#mainvisual h1::after{
	content:"";
	margin:auto;
	position:absolute;
	bottom:-5px;
	left:0;
	right:0;
	width:90%;
	height:40px;
	}

#mainvisual h1::before{
	background:url('./image/robo1.png') no-repeat 50% 50%;
	background-size:100%;
	animation:robo1 1.5s ease-in-out infinite;
	}
#mainvisual h1::after{
	background:url('./image/robo2.png') no-repeat 50% 50%;
	background-size:100%;
	animation:robo2 1.5s ease-in-out infinite;
	}

@keyframes robo1{
	0%  {transform:translate(0,0);}
	20%  {transform:translate(0,-50%);}
	40% {transform:translate(0,0);}
	}
@keyframes robo2{
	0%  {transform:translate(0,0);}
	40%  {transform:translate(0,0);}
	60%  {transform:translate(0,-50%);}
	80% {transform:translate(0,0);}
	}

/* 640 *//* ------- */@media print, screen and (min-width:640px){
#mainvisual img{width:100%;}
#mainvisual h1::before,
#mainvisual h1::after{
	bottom:-2px;
	height:50px;
	}
}
/* 840 *//* ------- */@media print, screen and (min-width:840px){
#mainvisual{background-size:auto, auto;}
#mainvisual img{width:auto;}
#mainvisual h1::before,
#mainvisual h1::after{
	bottom:0;
	width:auto;
	height:76px;
	background-size:auto;
	}
}

/* -------------------------------------------------------------- */
/* contents */
/* -------------------------------------------------------------- */
#contents{
	margin:0;
	padding:0;
	background:none;
	}
br.sp1{display:block;}
br.sp2{display:none;}

/* 840 *//* ------- */@media print, screen and (min-width:840px){
br.sp1{display:none;}
br.sp2{display:block;}
}

/* -------------------------------------------------------------- */
/* lead */
/* -------------------------------------------------------------- */
#lead{
	margin:0 auto;
	padding:40px 0;
	line-height:2;
	text-align:center;
	}
#lead .inner{
	margin:0 auto;
	width:var(--size_sp);
	}

#lead p{
	margin:0 0 1.5em;
	padding:0;
	text-align:left;
	}

#lead p.news{
	margin:0 auto;
	padding:0 0 0 20px;
	position:relative;
	line-height:1.4;
	text-align:left;
	}
#lead p.news span{color:var(--color_main);}
#lead p.news span:after{
	content:'';
	position:absolute;
	left:0;
	top:0;
	height:0;
	width:0;
	border-top:10px solid var(--color_main);
	border-left:6px solid var(--color_main);
	border-right:6px solid var(--color_main);
	border-bottom:6px solid transparent;
	}

/* 340 *//* ------- */@media screen and (max-width:340px){#lead .inner{width:var(--size_sp_s);}}
/* 640 *//* ------- */@media print, screen and (min-width:640px){
#lead .inner{width:var(--size_tab);}
#lead p.news{
	padding:0 0 0 40px;
	line-height:1.6;
	}
#lead p.news span:after{
	top:-4px;
	border-top:24px solid var(--color_main);
	border-left:12px solid var(--color_main);
	border-right:12px solid var(--color_main);
	border-bottom:8px solid transparent;
	}
#lead p.news br{display:none;}
}
/* 840 *//* ------- */@media print, screen and (min-width:840px){#lead .inner{width:var(--size_pc);}}

/* -------------------------------------------------------------- */
/* about */
/* -------------------------------------------------------------- */
#about *{margin:0;padding:0;}
#about{
	margin:0 auto 20px;
	padding:20px 0 0;
	background:var(--color_main);
	text-align:center;
	}

#about .inner{
	margin:0 auto 60px;
	padding:0 0 10px;
	border-radius:6px;
	position:relative;
	width:var(--size_sp);
	}
#about .inner:after{
	content:" ";
	position:absolute;
	right:-20px;
	bottom:-10px;
	width:88px;
	height:76px;
	background:url('./image/robo.png') no-repeat 0 0;
	background-size:100%;
	}

#about h2{
	margin:0 auto;
	color:#fff;
	text-align:center;
	font-weight:500;
	font-size:30px;
	letter-spacing:0.5em;
	}

#about h3{
	margin:0 0 30px;
	color:#fff;
	font-weight:500;
	}
#about h3 span{display:block;}

#about dl{
	margin:0 15px;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items:flex-start;
	text-align:left;
	}
#about dt{
	margin:0 0 10px;
	border-radius:40px;
	width:70px;
	color:var(--color_main);
	background:#fff;
	font-weight:500;
	text-align:center;
	}

#about dd{
	margin:0 0 10px;
	width:190px;
	color:#fff;
	}

/* 340 *//* ------- */@media screen and (max-width:340px){#about .inner{width:var(--size_sp_s);}}
/* 640 *//* ------- */@media print, screen and (min-width:640px){
#about .inner{width:var(--size_tab);background-size:auto;}
#about .inner:after{
	content:" ";
	position:absolute;
	right:10px;
	bottom:-10px;
	}
#about .inner div{
	display:flex;
	justify-content:space-between;
	}
#about dl{width:var(--size_sp_s);}
}

/* 840 *//* ------- */@media print, screen and (min-width:840px){
#about .inner{width:var(--size_pc);}
#about h3 span{padding-left:0.5em;display:inline;}
#about .inner div{}
#about dl{margin:0;width:380px;}
#about dt{width:100px;}
#about dd{width:260px;}
}

/* -------------------------------------------------------------- */
/* result */
/* -------------------------------------------------------------- */
#result *{margin:0;padding:0;}
#result{
	margin:0 auto;
	padding:0;
	}
#result #inner-first{}
#result #inner-second{}
#result #inner-third{}

#result .award{
	margin:0 auto;
	padding:0 0 80px;
	}
#result #first{}
#result #second{}
#result #third{}

#result h2{
	margin:0 auto 20px;
	text-align:center;
	width:var(--size_sp);
	}

#result .award .block_inner{}

#result .award .block_inner{background:url('./image/ptn.png') repeat-x 49% 120px,url('./image/award_back1.png') no-repeat 50% 87px;background-size:110%,110%;}
#result #first .block_inner{background:url('./image/ptn.png') repeat-x 49% 120px,url('./image/award_back1.png') no-repeat 50% 87px;background-size:110%,110%;}
#result #second .block_inner{background:url('./image/ptn.png') repeat-x 49% 120px,url('./image/award_back2.png') no-repeat 50% 87px;background-size:110%,110%;}
#result #third .block_inner{background:url('./image/ptn.png') repeat-x 49% 120px,url('./image/award_back3.png') no-repeat 50% 87px;background-size:110%,110%;}

#result .block{
	margin:0 auto;
	padding:0;
	position:relative;
	width:var(--size_sp);
	text-align:center;
	}
#result #first .block{}
#result #second .block{}
#result #third .block{}

#result button{display:none;}

#result .num{
	margin:0 auto 5px;
	padding:0;
	border-radius:20px;
	width:80px;
	color:#fff;
	font-size:12px;
	}
#result #first .num{background:var(--color_first);}
#result #second .num{background:var(--color_second);}
#result #third .num{background:var(--color_third);}

#result .title{
	margin:0 0 40px;
	width:100%;
	}
#result .title dt{font-size:18px;}
#result #first .title dt span{color:var(--color_first);}
#result #second .title dt span{color:var(--color_second);}
#result #third .title dt span{color:var(--color_third);}

#result .title dd{font-size:14px;}
#result .title dd a{color:#6eb92b;}
#result .title dd a:hover{color:var(--color_first);}

/* detail */
#result .detail{
	margin:0 auto 20px;
	padding:0;
	}
#result #second .detail{}

#result .movie{
	margin:0 auto 40px;
	position:relative;
	width:auto;
	text-align:center;
	}
#result .movie p::before{
	margin:auto;
	content:" ";
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	width:70px;
	height:70px;
	background:url('/image/ic_movie.png') no-repeat 50% 50%;
	cursor:pointer;
	}
#result .movie p{
	margin:0 auto;
	width:var(--size_sp);
	height:169px;
	cursor:pointer;
	}

#result .movie iframe{
	width:var(--size_sp);
	height:169px;
	}

/* cmt */
#result .block .cmt{
	width:auto;
	z-index:1;
	position:relative;
	}
#result .cmt p{margin:0 0 2em;text-align:left;}

/* everyone */
#result .block .everyone{
	margin:0 0 30px;
	width:auto;
	z-index:1;
	position:relative;
	}

#result .everyone ul{}
#result .everyone li{
	margin:0 0 5px;
	padding:10px 15px;
	border-radius:6px;
	list-style:none;
	font-size:13px;
	text-align:left;
	}

#result .everyone li span{
	font-size:11px;
	font-weight:bold;
	}

/* winner */
#result .winner{
	position:relative;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	text-align:center;
	}	
#result .winner p.photo{margin:0 0 20px;width:var(--size_sp);}
#result .winner dl{
	z-index:1;
	position:relative;
	}

#result .winner dd{margin:0 0 10px;text-align:left;}
#result .winner ul{margin:0 0 20px;padding:0 0 0 20px;}
#result .winner li{margin:0 0 10px;}

/* award-line */
#result .award-line{
	margin:0 auto 40px;
	width:var(--size_sp);
	}
#result #second .award-line{border-top:3px solid;border-image:linear-gradient(135deg, var(--color_second), #c3d165, #1fb3d7) 1;}
#result #third .award-line{border-top:3px solid;border-image:linear-gradient(135deg, #1fb3d7, var(--color_third)) 1;}

/* 見出し */
#result .cmt h3,
#result .everyone h3,
#result .winner dt{
	margin:0 auto 10px;
	border:1px solid;
	width:200px;
	height:30px;
	line-height:30px;
	font-weight:500;
	font-size:14px;
	color:#fff;
	text-align:center;
	}
#result .cmt h3,
#result .everyone h3,
#result .winner dt,
#result #first .cmt h3,
#result #first .everyone h3,
#result #first .winner dt{border-radius:6px;color:#fff;background:linear-gradient(135deg, var(--color_first), var(--color_second));}

#result #second .cmt h3,
#result #second .everyone h3,
#result #second .winner dt{border-radius:6px;color:#fff;background:linear-gradient(135deg, var(--color_second), #c3d165, #1fb3d7);}

#result #third .cmt h3,
#result #third .everyone h3,
#result #third .winner dt{border-radius:6px;color:#fff;background:linear-gradient(135deg, #1fb3d7, var(--color_third));}

/* 生徒コメント */
#result .everyone li,
#result #first .everyone li{background:#fbd2d3;}
#result #second .everyone li{background:#fbe8bf;}
#result #third .everyone li{background:#e8f3fa;}

#result .everyone li span,
#result #first .everyone li span{color:var(--color_first);}
#result #second .everyone li span{color:var(--color_second);}
#result #third .everyone li span{color:var(--color_third);}

/* 340 *//* ------- */@media screen and (max-width:340px){
#result .h2,#result .block{width:280px;}
#result .movie p,
#result .movie iframe{width:260px;height:147px;}
#result .award-line{width:280px;}
}
/* 640 *//* ------- */@media print, screen and (min-width:640px){
#result h2{width:540px;}
#result h2 img{width:100%;}
#result .award .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px,url('./image/award_back1.png') no-repeat 50% 70px;background-size:auto,660px;}
#result #first .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px,url('./image/award_back1.png') no-repeat 50% 70px;background-size:auto,660px;}
#result #second .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px,url('./image/award_back2.png') no-repeat 50% 70px;background-size:auto,660px;}
#result #third .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px,url('./image/award_back3.png') no-repeat 50% 70px;background-size:auto,660px;}

#result .block{width:var(--size_tab);}
#result .num{
	margin:0 auto;
	padding:0;
	border-radius:20px;
	width:100px;
	color:#fff;
	font-size:16px;
	}

#result .detail{background-size:100%;}
#result .movie p{
	width:480px;
	height:270px;
	}
#result .movie iframe{
	width:480px;
	height:270px;
	}

/* 見出し */
#result .cmt h3,
#result .everyone h3,
#result .winner dt{
	margin:0 auto 10px 0;
	border:2px solid;
	width:240px;
	height:40px;
	line-height:40px;
	font-weight:600;
	font-size:16px;
	text-align:center;
	}

#result .winner p.photo{margin:0 auto 20px;}
#result .award-line{width:var(--size_tab);}
}

/* 840 *//* ------- */@media print, screen and (min-width:840px){
#result h2{width:auto;}
#result h2 img{width:auto;}
#result .award .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px;background-size:auto;}
#result #first .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px;background-size:auto;}
#result #second .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px;background-size:auto;}
#result #third .block_inner{background:url('./image/ptn.png') repeat-x 49% 105px;background-size:auto;}

#result .block{
	margin:0 auto;
	padding:0 0 20px;
	width:840px;
	}
#result .award .block{background:url('./image/award_back1.png') no-repeat 50% 74px;background-size:auto;}
#result #first .block{background:url('./image/award_back1.png') no-repeat 50% 74px;background-size:auto;}
#result #second .block{background:url('./image/award_back2.png') no-repeat 50% 74px;background-size:auto;}
#result #third .block{background:url('./image/award_back3.png') no-repeat 50% 74px;background-size:auto;}

#result button{
	display:block;
	position:absolute;
	right:0;
	top:0;
	border:none;
	border-radius:50%;
	width:70px;
	height:70px;
	color:#fff;
	background:url('./image/print.svg') no-repeat 50% 20% var(--color_first);
	background-size:50%;
	font-weight:bold;
	cursor:pointer;
	transition:all .3s;
	}
#result #first button{background-color:var(--color_first);}
#result #second button{background-color:var(--color_second);}
#result #third button{background-color:var(--color_third);}

#result button span{
	padding:24px 0 0;
	display:inline-block;
	font-size:12px;
	}

#result button:hover{
	background-color:var(--color_main);
	transition:all .3s;
	}
#result #first button:hover{background-color:var(--color_main);}
#result #second button:hover{background-color:var(--color_first);}
#result #third button:hover{background-color:var(--color_main);}

#result .num{font-size:16px;}
#result .title{}
#result .title dt{font-size:30px;}
#result .detail{background-size:auto;}

#result .movie{margin:0 0 40px;text-align:center;}
#result .movie p{
	margin:0 auto;
	width:600px;
	height:338px;
	}
#result .movie iframe{
	width:600px;
	height:338px;
	}
#result .winner dl{width:500px;}
#result .winner p.photo{margin:54px 0 20px;}

/* award-line */
#result .award-line{
	margin:40px auto 60px;
	width:840px;
	}
}

/* -------------------------------------------------------------- */
/* list */
/* -------------------------------------------------------------- */
#list *{margin:0;padding:0;}
#list{
	margin:0 auto;
	padding:60px 0 0;
	}
#list h2{
	margin:0 0 10px;
	color:var(--color_first);
	text-align:center;
	font-weight:500;
	font-size:30px;
	letter-spacing:0.5em;
	}
#list h3{
	margin:0 auto 40px;
	font-weight:400;
	text-align:center;
	font-size:15px;
	}

#list div{
	margin:0 auto 40px;
	display:flex;
	flex-wrap:wrap;
	width:95%;
	text-align:center;
	}
#list dl{
	margin:0 0 15px;
	padding:0 0 10px;
	display:flex;
	flex-wrap:wrap;
	align-content:flex-start;
	width:50%;
	}
#list dt{
	margin:0 5px 5px;
	font-size:0;
	position:relative;
	}
#list dt img{width:100%;}
#list dt span{
	position:absolute;
	top:-5px;
	left:-5px;
	padding:0 10px;
	border-radius:20px;
	color:#fff;
	background:var(--color_first);
	font-size:12px;
	z-index:5;
	font-weight:600;
	}

#list dd{
	margin:0 5px;
	line-height:1.4;
	color:#999;
	font-size:12px;
	text-align:center;
	width:100%;
	}
#list dd a{
	display:block;
	font-size:14px;
	}
#list dd a:hover{color:#f4b0c4;}
#list button{display:none;}

/* 640 *//* ------- */@media print, screen and (min-width:640px){
#list div{width:570px;}
}
/* 950 *//* ------- */@media print, screen and (min-width:950px){
#list h3{width:auto;}
#list div{width:950px;}
#list dl{
	margin:0 5px 15px;
	width:180px;
	}
#list dt{margin:0 auto 5px;width:180px;}
#list dt img{width:180px;}
#list dd{
	margin:0 10px
	width:160px;
	}
}


/* -------------------------------------------------------------- */
/* comment */
/* -------------------------------------------------------------- */
#comment *{margin:0;padding:0;}
#comment{
	background:url('./image/ptn.png') repeat-x 50% 50%;
	background-size:100%;
	text-align:center;
	}
#comment .inner{
	margin:0 auto;
	padding:40px 0;
	width:var(--size_sp);
	background:rgba(255,255,255,0.75);
	}
#comment p{
	color:var(--color_main);
	font-size:16px;
	font-weight:500;
	text-align:left;
	}
#comment br{display:none;}

/* 340 *//* ------- */@media screen and (max-width:340px){#comment .inner{width:var(--size_sp_s);}}
/* 640 *//* ------- */@media print, screen and (min-width:640px){
#comment .inner{width:var(--size_tab);}
#comment p{font-size:20px;text-align:center;}
#comment br{display:block;}
}
/* 840 *//* ------- */@media print, screen and (min-width:840px){
#comment{background-size:auto;}
#comment .inner{padding:70px 0;width:var(--size_pc);}
#comment p{font-size:24px;}
}
/* -------------------------------------------------------------- */