@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}

/* -----------------------------------------------------------
   COMMON
------------------------------------------------------------*/
a { text-decoration:none;}
a:hover { text-decoration:underline;}
a:visited { text-decoration:none;}

.alt{
	position: absolute;
	top: -5000px;
	left: -9999px;
}
.lazy img{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.small{
	font-size: 80%;
}

@media all and (min-width: 768px) {
	.smp-br{
		display: none;
	}
}
.sdgs-bg1{background-color: rgb(229,36,59);}
.sdgs-bg2{background-color: rgb(221,166,58);}
.sdgs-bg3{background-color: rgb(76,159,56);}
.sdgs-bg4{background-color: rgb(197,25,45);}
.sdgs-bg5{background-color: rgb(255,58,33);}
.sdgs-bg6{background-color: rgb(38,189,226);}
.sdgs-bg7{background-color: rgb(252,195,11);}
.sdgs-bg8{background-color: rgb(162,25,66);}
.sdgs-bg9{background-color: rgb(253,105,37);}
.sdgs-bg10{background-color: rgb(221,19,103);}
.sdgs-bg11{background-color: rgb(253,157,36);}
.sdgs-bg12{background-color: rgb(191,139,46);}
.sdgs-bg13{background-color: rgb(63,126,68);}
.sdgs-bg14{background-color: rgb(10,151,217);}
.sdgs-bg15{background-color: rgb(86,192,43);}
.sdgs-bg16{background-color: rgb(0,104,157);}
.sdgs-bg17{background-color: rgb(25,72,106);}

.sdgs-color1{color: rgb(229,36,59);}
.sdgs-color2{color: rgb(221,166,58);}
.sdgs-color3{color: rgb(76,159,56);}
.sdgs-color4{color: rgb(197,25,45);}
.sdgs-color5{color: rgb(255,58,33);}
.sdgs-color6{color: rgb(38,189,226);}
.sdgs-color7{color: rgb(252,195,11);}
.sdgs-color8{color: rgb(162,25,66);}
.sdgs-color9{color: rgb(253,105,37);}
.sdgs-color10{color: rgb(221,19,103);}
.sdgs-color11{color: rgb(253,157,36);}
.sdgs-color12{color: rgb(191,139,46);}
.sdgs-color13{color: rgb(63,126,68);}
.sdgs-color14{color: rgb(10,151,217);}
.sdgs-color15{color: rgb(86,192,43);}
.sdgs-color16{color: rgb(0,104,157);}
.sdgs-color17{color: rgb(25,72,106);}


/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
@font-face {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
}

body {
	font-family: fot-tsukuardgothic-std, sans-serif;
	-webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
}

#wrap{
	background-color: #eae4e7;
	background-repeat: repeat-x;
}
main#con-main{
	background-color: #fff;
}

#container p{
	font-family: fot-tsukuardgothic-std, sans-serif;
	color: #3c3c3c;
}


@media all and (min-width: 768px) {
	#wrap{
		padding-top: 6px;
		background-image: url(../img/top_colorbar.png);
	}
	#con-main{
		padding: 50px 0 0;
	}


}

@media all and (max-width: 767px) {
	#wrap{
		background-size: 100%;
		background-image: url(../img/top_colorbar_smp.png);
	}
	#con-main{
		padding: 20px 0 0;
	}
	#container{
		width: 95%;
		padding-bottom: 0;
		margin: 0 auto;
	}
}

/* -----------------------------------------------------------
   NAVIGATION
------------------------------------------------------------*/
nav#menu{
	background-repeat: no-repeat;
}
nav#menu ul{
	list-style:none;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
nav#menu a{
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}



@media all and (min-width: 768px) {
	nav#menu{
		padding: 20px 0;
	}
	nav#menu ul{
		width: 944px;

	}
	nav#menu li{
		width: 32%;
		margin-right: 2%;
	}
	nav#menu li:nth-child(3){margin-right: 0;}
	nav#menu a{
		padding-top: 26.315%;
		opacity: 1;
	}
	nav#menu a:hover{
		opacity: 0.7;
	}
	nav#menu #m1 a{background-image: url(../img/nav_pc_ana.png);}
	nav#menu #m2 a{background-image: url(../img/nav_pc_library.png);}
	nav#menu #m3 a{background-image: url(../img/nav_pc_contents.png);}

	nav#menu li#m4{
		width: 100%;
		margin-top: 14px;
		margin-right: 0;
	}
	nav#menu li#m4 a{
		padding-top:6.99152%;
		background-image: url(../img/nav_pc_about.png);
	}
}
@media all and (max-width: 767px) {

	nav#menu{
		width: 100%;
		padding: 10px 0;
	}
	nav#menu ul{
		width: 96%;
	}
	nav#menu li{
		width: 32.5%;
		margin-right: 1.25%;
		position: relative;
	}
	nav#menu li:nth-child(3){margin-right: 0;}
	nav#menu a{
		padding-top: 34.313%;
	}
	nav#menu #m1 a{background-image: url(../img/nav_smp_ana.png);}
	nav#menu #m2 a{background-image: url(../img/nav_smp_library.png);}
	nav#menu #m3 a{background-image: url(../img/nav_smp_contents.png);}

	nav#menu li#m4{
		width: 100%;
		margin-top: 1%;
		margin-right: 0;
	}
	nav#menu li#m4 a{
		padding-top:10.5769%;
		background-image: url(../img/nav_smp_about.png);
	}
}



@charset "UTF-8";



/* -----------------------------------------------------------
   17's SDGS-TOP
------------------------------------------------------------*/
#Ana_top{
	margin: 0 auto;
	text-align: center;
}
#Ana_top h2 span{
	display: block;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	background-image:url(../img/title_ana.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0;
	padding-top: 19.4444%;
}

#Ana_top p{
	font-weight: 700;
	text-align: center;
}
#Ana_top ul.ana-list{
	list-style: none;
	display:flex;
	flex-wrap:wrap;

}
#Ana_top ul.ana-list a:hover{
	text-decoration: none;
}
#Ana_top ul.ana-list li{
	box-sizing: border-box;
}
	#Ana_top ul.ana-list li figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 100%;
		position:relative;
		background-size: cover;
		display: block;
	}
	#Ana_top ul.ana-list li figure .lazy:hover{ opacity: 0.7;}
	#Ana_top ul.ana-list li p{
		color: #fff;
		text-align: center;
		font-weight: 700;
		line-height: 2.0;
	}



@media all and (min-width: 768px) {
	#Ana_top{
		width: 980px;
		padding-bottom: 60px;
	}
	#Ana_top h2{
		width: 40%;
		margin: 0 auto 20px;
	}
	#Ana_top h2 span{
		width: 100%;
	}
	#Ana_top h3{
		font-size: 200%;
		line-height: 1.2;
		color: #3c3c3c;
		margin-bottom: 20px;
	}
	#Ana_top h3 .sub{
		font-size: 70%;
	}
	#Ana_top p.intro-p{
		font-size: 110%;
		margin-bottom: 20px;
		color: #3c3c3c;
	}
	#Ana_top ul.ana-list li {
		width: 32%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#Ana_top ul.ana-list li:nth-child(3n){
		margin-right:0;
	}
	#Ana_top ul.ana-list li p {
		font-size: 100%;
		line-height: 1.4;
    padding: 5px 0;
	}
	#Ana_top .andmore{
		font-size:120%;
		margin-top: 30px;
	}
}
@media all and (max-width: 767px) {
	#Ana_top{
		width: 100%;
		padding-bottom: 50px;
	}
	#Ana_top h2{
		width: 50%;
		margin: 0 auto 20px;
	}
	#Ana_top h3{
		font-size: 120%;
		margin-bottom: 20px;
		color: #3c3c3c;
	}
	#Ana_top h3 .sub{
		font-size: 80%;
	}
	#Ana_top p.intro-p{
		font-size: 90%;
		margin-bottom: 20px;
		color: #3c3c3c;
		line-height: 1.4;
	}
	#Ana_top ul.ana-list{
		width: 90%;
		margin: 0 auto;
	}
	#Ana_top ul.ana-list li{
		width: 48.5%;
		margin-right: 3%;
		margin-bottom: 3%;
	}
	#Ana_top ul.ana-list li:nth-child(2n){
		margin-right:0;
	}
	#Ana_top ul.ana-list li p{
		font-size: 80%;
		line-height: 1.2;
    padding: 5px 0;
	}
	#Ana_top .andmore{
		font-size:90%;
		margin-top: 30px;
	}
}
/* ------------ IE ------------*/
@media all and (-ms-high-contrast: none) {
	#Ana_top ul.ana-list li p {
    padding: 10px 0 2px;
	}
}

/* -----------------------------------------------------------
   17's SDGS-MAIN
------------------------------------------------------------*/
.Ana_main{
	width: 100%;
}

/* ------------ profile ------------*/

#no1 .profile .text{background-image:url(../img/ana/no1.png);}
#no2 .profile .text{background-image:url(../img/ana/no2.png);}
#no3 .profile .text{background-image:url(../img/ana/no3.png);}
#no4 .profile .text{background-image:url(../img/ana/no4.png);}
#no5 .profile .text{background-image:url(../img/ana/no5.png);}
#no6 .profile .text{background-image:url(../img/ana/no6.png);}
#no7 .profile .text{background-image:url(../img/ana/no7.png);}
#no8 .profile .text{background-image:url(../img/ana/no8.png);}
#no9 .profile .text{background-image:url(../img/ana/no9.png);}
#no10 .profile .text{background-image:url(../img/ana/no10.png);}
#no11 .profile .text{background-image:url(../img/ana/no11.png);}
#no12 .profile .text{background-image:url(../img/ana/no12.png);}
#no13 .profile .text{background-image:url(../img/ana/no13.png);}
#no14 .profile .text{background-image:url(../img/ana/no14.png);}
#no15 .profile .text{background-image:url(../img/ana/no15.png);}
#no16 .profile .text{background-image:url(../img/ana/no16.png);}
#no17 .profile .text{background-image:url(../img/ana/no17.png);}

.Ana_main .profile .text h4 , .Ana_main .profile .text h5{
	color: #fff;
}
.Ana_main .profile .text p{
	color: #fff !important;
	font-weight: 700;
}
@media all and (min-width: 768px) {
	.Ana_main .inner{
		margin-bottom: 40px;
	}
	.Ana_main .profile{
		width: 980px;
		margin: 0 auto;
		display: flex;
	}

	.Ana_main .profile figure .lazy{
		width: 560px;
		height: 0;
		padding-top: 90%;
		position:relative;
		background-size: cover;
		display: block;
	}
	.Ana_main .profile .text{
		width: 420px;
		padding: 40px 35px;
		background-size: 50%;
		background-position: right 0 bottom 20px;
		background-repeat: no-repeat;
		box-sizing:border-box;
	}
	.Ana_main .profile .text h4{
		font-size: 220%;
		margin-bottom: 35px;
		border-left: 7px solid #fff;
		padding-left: 1rem;
	}
	.Ana_main .profile .text h5{
		font-size: 140%;
		margin-bottom: 10px;
	}
	.Ana_main .profile .text p{
		font-size: 100%;
    line-height: 1.6;
	}
}

@media all and (max-width: 767px) {
	.Ana_main .inner{
		margin-bottom: 20px;
	}
	.Ana_main .profile figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 100%;
		position:relative;
		background-size: cover;
		display: block;
	}
	.Ana_main .profile .text{
		width: 100%;
		padding: 20px;
		background-size: 40%;
		background-position: right 20px bottom 20px;
		background-repeat: no-repeat;
		box-sizing:border-box;
	}
	.Ana_main .profile .text h4{
		font-size: 150%;
		margin-bottom: 20px;
		border-left: 5px solid #fff;
		padding-left: 0.6rem;
	}
	.Ana_main .profile .text h5{
		font-size: 120%;
		margin-bottom: 5px;
	}
	.Ana_main .profile .text p{
		font-size: 90%;
		line-height: 1.6;
	}
}

/* ------------ theme ------------*/
.Ana_main #theme{
	background:url(../img/bg_theme.png);
	text-align: center;
}
.Ana_main #theme aside{
	background-color: #fff;
	border: 1px solid #d6d4d6;
	text-align: left;
	box-sizing: border-box;
}

@media all and (min-width: 768px) {
	.Ana_main #theme{
		width: 980px;
		margin: 0 auto 40px;
		padding: 40px;
		box-sizing: border-box;
	}
	.Ana_main #theme h4{
		font-size: 220%;
		margin-bottom: 40px;
	}
	.Ana_main #theme figure{
		width: 270px;
		margin: 0 auto 20px;
	}
	.Ana_main #theme figure .lazy{
		width: 100%;
		height: 0;
		padding-top:100%;
		position:relative;
		background-size: cover;
		display: block;
	}
	.Ana_main #theme h5{
		font-size: 140%;
		margin-bottom: 5px;
	}
	.Ana_main #theme p{
		font-size: 100%;
		font-weight: 700;
		line-height: 1.4;
	}
	.Ana_main #theme > p{
		margin-bottom: 20px;
	}
	.Ana_main #theme .btn{
		margin-bottom: 30px;
	}
	.Ana_main #theme aside{
		padding: 20px;
	}
}
@media all and (max-width: 767px) {
	.Ana_main #theme{
		width: 100%;
		margin: 0 auto 20px;
		padding: 20px;
		box-sizing: border-box;
	}
	.Ana_main #theme h4{
		font-size: 120%;
		margin-bottom: 20px;
	}
	.Ana_main #theme figure{
		width: 50%;
		margin: 0 auto 20px;
	}
	.Ana_main #theme figure .lazy{
		width: 100%;
		height: 0;
		padding-top:100%;
		position:relative;
		background-size: cover;
		display: block;
	}
	.Ana_main #theme h5{
		font-size: 120%;
		margin-bottom: 5px;
	}
	.Ana_main #theme p{
		font-size: 90%;
		font-weight: 700;
		line-height: 1.4;
	}
	.Ana_main #theme > p{
		margin-bottom: 5px;
	}
	.Ana_main #theme .btn{
		margin-bottom: 20px;
	}
	.Ana_main #theme aside{
		padding: 15px;
	}
}
/* ------------ contact ------------*/
.Ana_main #contact h4{
	color: #fff;
	display: inline-block;
}

@media all and (min-width: 768px) {
	.Ana_main #contact{
		width: 980px;
		margin: 0 auto 60px;
	}
	.Ana_main #contact h4{
		font-size: 180%;
		margin-bottom: 40px;
		padding: 0 2px;
		line-height: 1.2;
		vertical-align: middle;
	}
	.Ana_main #contact figure{
		float: right;
		margin: 60px 0 60px 30px;
	}
	.Ana_main #contact figure .lazy{
		width: 100%;
		height: 0;
		position:relative;
		background-size: cover;
		display: block;
	}


	.Ana_main #contact p{
		font-size: 100%;
		font-weight: 700;
		line-height: 1.4;
		margin-bottom: 20px;
	}
}
@media all and (max-width: 767px) {
	.Ana_main #contact{
		width: 100%;
		margin: 0 auto 20px;
		padding:10px;
		box-sizing: border-box;
		text-align: center;
	}
	.Ana_main #contact h4{
		font-size: 120%;
		margin-bottom: 20px;
		padding: 2px;
	}
	.Ana_main #contact figure{
		margin: 0 auto 20px;
	}
	.Ana_main #contact figure .lazy{
		width: 100%;
		height: 0;
		position:relative;
		background-size: cover;
		display: block;
	}

	.Ana_main #contact p{
		font-size: 90%;
		font-weight: 700;
		line-height: 1.4;
		margin-bottom: 10px;
		text-align: left;
	}
}
/* ------------ IE ------------*/
@media all and (-ms-high-contrast: none) {
	.Ana_main #contact h4{
		padding: 10px 2px 0;
}
}


@media all and (min-width: 768px) {

  #no1 #contact figure{width: 180px;}
  #no1 #contact figure .lazy{padding-top:133.333%;}

  #no2 #contact figure{width: 250px;}
  #no2 #contact figure .lazy{padding-top:133.333%;}

  #no3 #contact figure{width: 400px;}
  #no3 #contact figure .lazy{padding-top:75%;}

  #no4 #contact figure{width: 250px;}
  #no4 #contact figure .lazy{padding-top:133.333%;}

  #no5 #contact figure{width: 250px;}
  #no5 #contact figure .lazy{padding-top:133.333%;}

  #no6 #contact figure{width: 400px;}
  #no6 #contact figure .lazy{padding-top:75%;}

  #no7 #contact figure{width: 400px;}
  #no7 #contact figure .lazy{padding-top:75%;}

  #no8 #contact figure{width: 400px;}
  #no8 #contact figure .lazy{padding-top:75%;}

  #no9 #contact figure{width: 400px;}
  #no9 #contact figure .lazy{padding-top:75%;}

  #no10 #contact figure{width: 400px;}
  #no10 #contact figure .lazy{padding-top:75%;}

  #no11 #contact figure{width: 400px;}
  #no11 #contact figure .lazy{padding-top:75%;}

  #no12 #contact figure{width: 250px;}
  #no12 #contact figure .lazy{padding-top:133.333%;}

  #no13 #contact figure{width: 400px;}
  #no13 #contact figure .lazy{padding-top:75%;}

  #no14 #contact figure{width: 400px;}
  #no14 #contact figure .lazy{padding-top:75%;}

  #no15 #contact figure{width: 250px;}
  #no15 #contact figure .lazy{padding-top:133.333%;}

  #no16 #contact figure{width: 250px;}
  #no16 #contact figure .lazy{padding-top:133.333%;}

  #no17 #contact figure{width: 400px;}
  #no17 #contact figure .lazy{padding-top:75%;}
}
@media all and (max-width: 767px) {

  #no1 #contact figure{width: 50%;}
  #no1 #contact figure .lazy{padding-top:133.333%;}

  #no2 #contact figure{width: 50%;}
  #no2 #contact figure .lazy{padding-top:133.333%;}

  #no3 #contact figure{width: 100%;}
  #no3 #contact figure .lazy{padding-top:75%;}

  #no4 #contact figure{width: 50%;}
  #no4 #contact figure .lazy{padding-top:133.333%;}

  #no5 #contact figure{width: 50%;}
  #no5 #contact figure .lazy{padding-top:133.333%;}

  #no6 #contact figure{width: 100%;}
  #no6 #contact figure .lazy{padding-top:75%;}

  #no7 #contact figure{width: 100%;}
  #no7 #contact figure .lazy{padding-top:75%;}

  #no8 #contact figure{width: 100%;}
  #no8 #contact figure .lazy{padding-top:75%;}

  #no9 #contact figure{width: 100%;}
  #no9 #contact figure .lazy{padding-top:75%;}

  #no10 #contact figure{width: 100%;}
  #no10 #contact figure .lazy{padding-top:75%;}

  #no11 #contact figure{width: 100%;}
  #no11 #contact figure .lazy{padding-top:75%;}

  #no12 #contact figure{width: 50%;}
  #no12 #contact figure .lazy{padding-top:133.333%;}

  #no13 #contact figure{width: 100%;}
  #no13 #contact figure .lazy{padding-top:75%;}

  #no14 #contact figure{width: 100%;}
  #no14 #contact figure .lazy{padding-top:75%;}

  #no15 #contact figure{width: 50%;}
  #no15 #contact figure .lazy{padding-top:133.333%;}

  #no16 #contact figure{width: 50%;}
  #no16 #contact figure .lazy{padding-top:133.333%;}

  #no17 #contact figure{width: 100%;}
  #no17 #contact figure .lazy{padding-top:75%;}
}


/* ------------ starting ------------*/
.Ana_main #starting h4::before{
	display: inline-block;
	content: "";
	background-image: url(../img/fukidashi.png);
	width: 20px;
	height: 50px;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.Ana_main #starting h4::after{
	display: inline-block;
	content: "";
	background-image: url(../img/fukidashi.png);
	width: 20px;
	height: 50px;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	transform: scale(-1, 1);
}
.Ana_main #starting .inner .comment{
	position: relative;
}
.Ana_main #starting .inner .comment:after{
	content: "";
	position: absolute;
	width: 0;
  height: 0;
	margin: auto;
  border-style: solid;
  z-index: 10;
	transform: scale(1, -1);
}
#no1 #starting .inner .comment:after{border-color: transparent transparent rgb(229,36,59) transparent;}
#no2 #starting .inner .comment:after{border-color: transparent transparent rgb(221,166,58) transparent;}
#no3 #starting .inner .comment:after{border-color: transparent transparent rgb(76,159,56) transparent;}
#no4 #starting .inner .comment:after{border-color: transparent transparent rgb(197,25,45) transparent;}
#no5 #starting .inner .comment:after{border-color: transparent transparent rgb(255,58,33) transparent;}
#no6 #starting .inner .comment:after{border-color: transparent transparent rgb(38,189,226) transparent;}
#no7 #starting .inner .comment:after{border-color: transparent transparent rgb(252,195,11) transparent;}
#no8 #starting .inner .comment:after{border-color: transparent transparent rgb(162,25,66) transparent;}
#no9 #starting .inner .comment:after{border-color: transparent transparent rgb(253,105,37) transparent;}
#no10 #starting .inner .comment:after{border-color: transparent transparent rgb(221,19,103) transparent;}
#no11 #starting .inner .comment:after{border-color: transparent transparent rgb(253,157,36) transparent;}
#no12 #starting .inner .comment:after{border-color: transparent transparent rgb(191,139,46) transparent;}
#no13 #starting .inner .comment:after{border-color: transparent transparent rgb(63,126,68) transparent;}
#no14 #starting .inner .comment:after{border-color: transparent transparent rgb(10,151,217) transparent;}
#no15 #starting .inner .comment:after{border-color: transparent transparent rgb(86,192,43) transparent;}
#no16 #starting .inner .comment:after{border-color: transparent transparent rgb(0,104,157) transparent;}
#no17 #starting .inner .comment:after{border-color: transparent transparent rgb(25,72,106) transparent;}


@media all and (min-width: 768px) {
	.Ana_main #starting{
		width: 980px;
		margin: 0 auto;
	}
	.Ana_main #starting .cover{
		width: 100%;
		display: flex;
		align-items:flex-start;
	}
	.Ana_main #starting .inner{
		width: 70%;
		text-align: center;
	}
	.Ana_main #starting .inner h4{
		font-size: 220%;
		margin-bottom: 40px;
		position: relative;
    padding: 0 30px;
		display: inline-block;
	}
	.Ana_main #starting .inner .comment{
		width: 85%;
		margin: 0 auto;
		border-radius: 10px;
		color: #fff;
		padding: 30px;
		box-sizing: border-box;
		text-align: left;
	}
	.Ana_main #starting .inner .comment:after{
		bottom: -34px;
		right: 90px;
		border-width: 0 0 35px 39px;
	}
	.Ana_main #starting .inner .comment h5{
		font-size: 160%;
		margin-bottom: 10px;
	}
	.Ana_main #starting .inner .comment p{
		font-size: 100%;
		color: #fff;
		font-weight: 700;
		line-height: 1.6;
	}

	.Ana_main #starting figure{
		width: 30%;
		margin: 0 auto;
	}
	.Ana_main #starting figure .lazy{
		width: 100%;
		height: 0;
		padding-top:153%;
		position:relative;
		background-size: cover;
		display: block;
	}
}
@media all and (max-width: 767px) {
	.Ana_main #starting{
		width:90%;
		margin: 0 auto;
	}
	.Ana_main #starting .inner h4{
		font-size: 140%;
		margin-bottom: 20px;
		position: relative;
		text-align: center;
		line-height: 1.2;
	}
	.Ana_main #starting .inner .comment{
		width: 90%;
		margin: 0 auto;
		border-radius: 10px;
		color: #fff;
		padding: 20px;
		box-sizing: border-box;
	}
	.Ana_main #starting .inner .comment:after{
		bottom: -20px;
		right: 50%;
		border-width: 0 10px 20px 10px;

	}
	.Ana_main #starting .inner .comment h5{
		font-size: 120%;
		margin-bottom: 10px;
	}
	.Ana_main #starting .inner .comment p{
		font-size: 90%;
		color: #fff;
		font-weight: 700;
		line-height: 1.6;
	}
	.Ana_main #starting figure{
		width: 50%;
		margin: 30px auto 0;
	}
	.Ana_main #starting figure .lazy{
		width: 100%;
		height: 0;
		padding-top:153%;
		position:relative;
		background-size: cover;
		display: block;
	}
}

/* ------------ bottom ana-list ------------*/
#Bottom{
	text-align: center;
}
#Bottom ul.ana-list{
	list-style: none;
	display:flex;
	flex-wrap:wrap;
}
#Bottom ul.ana-list a{
	opacity: 1;
}
#Bottom ul.ana-list a:hover{
	opacity: 0.5;
	text-decoration: none;
}
#Bottom ul.ana-list li{
	box-sizing: border-box;
}
	#Bottom ul.ana-list li figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 100%;
		position:relative;
		background-size: cover;
		display: block;
	}
	#Bottom ul.ana-list li p{
		color: #fff;
		text-align: center;
		font-weight: 700;
		line-height: 2.0;
	}



@media all and (min-width: 768px) {
	#Bottom{
		padding-top: 20px;
	}
	#Bottom ul.ana-list{
		width: 980px;
		margin: 0 auto;
	}
	#Bottom ul.ana-list li {
		width: 23.5%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#Bottom ul.ana-list li:nth-child(4n){
		margin-right:0;
	}
	#Bottom ul.ana-list li p {
		font-size: 90%;
		line-height: 1.4;
    padding: 5px 0;
	}
	#Bottom .andmore{
		font-size:120%;
		margin: 10px 0 30px;
		font-weight: 700;
		color: #3c3c3c;
	}
}
@media all and (max-width: 767px) {
	#Bottom{
		padding: 20px 0 50px 0;
	}
	#Bottom ul.ana-list{
		width: 90%;
		margin: 0 auto;
	}
	#Bottom ul.ana-list li{
		width: 32%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
	#Bottom ul.ana-list li:nth-child(3n){
		margin-right:0;
	}
	#Bottom ul.ana-list li p{
		font-size: 80%;
		line-height: 1.2;
    padding: 5px 0;
	}
	#Bottom .andmore{
		font-size:90%;
		margin-top: 15px;
		font-weight: 700;
		color: #3c3c3c;
	}
}

/* ------------ IE ------------*/
@media all and (-ms-high-contrast: none) {
	#Bottom ul.ana-list li p {
    padding: 10px 0 2px;
	}
}

@charset "UTF-8";

/* -----------------------------------------------------------
   PROGRAM LIST
------------------------------------------------------------*/
#Program{
	margin: 0 auto;
	text-align: center;
}
#Program h2 span{
	display: block;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	background-image:url(../img/title_program.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0;
	padding-top: 19.4444%;
}

#Program ul.pg-list{
	list-style: none;
	display:flex;
	flex-wrap:wrap;
}
#Program ul.pg-list a{
	opacity: 1;
}
#Program ul.pg-list a:hover{
	opacity: 0.5;
	text-decoration: none;
}
#Program ul.pg-list li{
	box-sizing: border-box;
}
	#Program ul.pg-list li figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 56.25%;
		position:relative;
		background-size: cover;
		display: block;
	}
	#Program ul.pg-list li figure .lazy:hover{ opacity: 0.8;}
	#Program ul.pg-list li p{
		text-align: center;
		font-weight: 700;
	}
	#Program ul.pg-list li p .date{
		color: #3fb0e2;
	}
	#Program ul.pg-list li p .name{
		color: #e94091;
	}
	#Program ul.pg-list li p .txt{
		font-size: 90%;
	}
	#Program ul.pg-list li p .cau{
		font-size: 80%;
	}



@media all and (min-width: 768px) {
	#Program{
		width: 980px;
		padding-bottom: 40px;
	}
	#Program h2{
		width: 40%;
		margin: 0 auto 40px;
	}
	#Program h2 span{
		width: 100%;
	}
	#Program h3{
		font-size: 200%;
		line-height: 1.2;
		color: #3c3c3c;
		margin-bottom: 20px;
	}
	#Program ul.pg-list li {
		width: 32%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#Program ul.pg-list li:nth-child(3n){
		margin-right:0;
	}
	#Program ul.pg-list li p {
		font-size: 100%;
		line-height: 1.4;
    padding: 5px 0;
	}
}
@media all and (max-width: 767px) {
	#Program{
		width: 100%;
		padding-bottom: 20px;
	}
	#Program h2{
		width: 50%;
		margin: 0 auto 20px;
	}
	#Program h3{
		font-size: 120%;
		margin-bottom: 20px;
		color: #3c3c3c;
	}
	#Program ul.pg-list{
		width: 100%;
		margin: 0 auto;
	}
	#Program ul.pg-list li{
		width: 48.5%;
		margin-right: 3%;
		margin-bottom: 3%;
	}
	#Program ul.pg-list li:nth-child(2n){
		margin-right:0;
	}
	#Program ul.pg-list li p{
		font-size: 80%;
		line-height: 1.2;
    padding: 5px 0;
	}
	#Program ul.pg-list li p .date{
		font-size: 90%;
	}
}

@charset "UTF-8";

/* -----------------------------------------------------------
   CONTENTS LIST
------------------------------------------------------------*/
#Contents{
	margin: 0 auto;
	text-align: center;
}
#Contents h2 span{
	display: block;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	background-image:url(../img/title_contents.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0;
	padding-top: 19.4444%;
}

#Contents ul.cont-list{
	list-style: none;
}
#Contents ul.cont-list a{
	opacity: 1;
}
#Contents ul.cont-list a:hover{
	opacity: 0.5;
	text-decoration: none;
}
#Contents ul.cont-list li{
	box-sizing: border-box;
}
	#Contents ul.cont-list li figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 40%;
		position:relative;
		background-size: cover;
		display: block;
		border: 1px solid #a39ea0;
		box-sizing: border-box;
	}
	#Contents ul.cont-list li a figure .lazy:hover{ opacity: 0.7;}
	#Contents ul.cont-list li p{
		text-align: center;
		font-weight: 700;
		color: #3fb0e2;
	}
	#Contents ul.cont-list li p .date{
		color: #3fb0e2;
	}



@media all and (min-width: 768px) {
	#Contents{
		width: 980px;
		padding-bottom: 60px;
	}
	#Contents h2{
		width: 40%;
		margin: 0 auto 40px;
	}
	#Contents h2 span{
		width: 100%;
	}
	#Contents h3{
		font-size: 200%;
		line-height: 1.2;
		color: #3c3c3c;
		margin-bottom: 20px;
	}
	#Contents ul.cont-list{
		list-style: none;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
	}
	#Contents ul.cont-list li {
		width: 49%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#Contents ul.cont-list li:nth-child(2n){
		margin-right:0;
	}
	#Contents ul.cont-list li p {
		font-size: 120%;
		line-height: 1.4;
    padding: 5px 0;
	}
}
@media all and (max-width: 767px) {
	#Contents{
		width: 100%;
		padding-bottom: 50px;
	}
	#Contents h2{
		width: 50%;
		margin: 0 auto 20px;
	}
	#Contents h3{
		font-size: 120%;
		margin-bottom: 20px;
		color: #3c3c3c;
	}
	#Contents ul.cont-list{
		width: 90%;
		margin: 0 auto;
	}
	#Contents ul.cont-list li{
		width: 100%;
		margin-bottom: 3%;
	}
	#Contents ul.cont-list li:last-child{margin-bottom: 0;}
	#Contents ul.cont-list li p{
		font-size: 100%;
		line-height: 1.2;
    padding: 5px 0;
	}
}

@charset "UTF-8";

/* -----------------------------------------------------------
   LIBRARY
------------------------------------------------------------*/
#Library{
	margin: 0 auto;
  text-align: center;
}
#Library h2 span{
	display: block;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	background-image:url(../img/title_library.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 0;
	padding-top: 20.58%;
}
#Library p{
	font-weight: 700;
	text-align: center;
}
#Library ul#thum{
	list-style: none;
	display:flex;
	flex-wrap:wrap;
}
#Library ul#thum li{
	box-sizing: border-box;
}

	#Library ul#thum a{
		display: block;
		text-decoration: none;
	}
	#Library ul#thum a:hover{
		top:5px;
		transition: all 200ms ease-out;
	}
	#Library ul#thum li figure{
		margin-bottom: 5px;
	}
	#Library ul#thum li figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 56.25%;
		position:relative;
		background-size: cover;
		display: block;
	}
	#Library ul#thum li figure .lazy img{
		background-image:url(../img/yt_play.png);
		background-repeat: no-repeat;
		background-size: 20%;
		background-position: center center;
		background-color: rgba(0,0,0,0.4);
	}
	#Library ul#thum li figure .lazy img:hover{background-image:url(../img/yt_play_hover.png);}
	#Library ul#thum li p{
		text-align: center;
		font-weight: 700;
	}



@media all and (min-width: 768px) {
	#Library{
		width: 980px;
		padding-bottom: 60px;
	}
	#Library h2{
		width: 35%;
		margin: 0 auto 20px;
	}
	#Library h2 span{
		width: 100%;
	}
	#Library p.intro-p{
		font-size: 200%;
		margin-bottom: 20px;
	}
	#Library #yt-area{
		width: 640px;
		margin: 0 auto 20px;
	}
	#Library ul#thum li {
		width: 32%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#Library ul#thum li:nth-child(3n){
		margin-right:0;
	}
	#Library ul#thum li p {
		font-size: 100%;
		line-height: 1.4;
	}
}
@media all and (max-width: 767px) {
	#Library{
		width: 100%;
		padding-bottom: 50px;
	}
	#Library h2{
		width: 50%;
		margin: 0 auto 20px;
	}
	#Library p.intro-p{
		font-size: 120%;
		margin-bottom: 20px;
	}
	#Library #yt-area{
		width: 100%;
		margin-bottom: 10px;
	}
	#Library #yt-area .inner{
		position: relative;
		padding-top: 56.25%;
		margin-bottom: 8px;
	}
	#Library #yt-area .inner iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
	#Library ul#thum li{
		width: 49%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
	#Library ul#thum li:nth-child(2n){
		margin-right:0;
	}
	#Library ul#thum li p{
		font-size: 80%;
		line-height: 1.2;
	}

}


/* -----------------------------------------------------------
   BUTTON
------------------------------------------------------------*/
.btn {
	position: relative;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: .4s;
	vertical-align: middle;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	letter-spacing: 0.06em;
}
	.btn:after{
		display: inline-block;
    margin: 0 0 1px 0.5em;
    content: "";
    vertical-align: middle;
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
		transition: .4s;
	}
	.btn{
		background-color: #3fb0e2;
		color: #fff;
		border: 1px solid #3fb0e2;
	}
	.btn:hover {
		background-color: rgba(255,255,255);
		border: 1px solid #3fb0e2;
		color: #3fb0e2;
		text-decoration: none;
	}
	/* after*/
	.btn:after{
		border-top: 2px solid #fff;
	  border-right: 2px solid #fff;
	}
	.btn:hover:after{
		border-top: 2px solid #3fb0e2;
	  border-right: 2px solid #3fb0e2;
	}
@media all and (min-width: 768px) {
	.btn {
		width: 250px;
		padding: 15px 0;
		font-size:120%;
	}
	.btn:after{
		width: 10px;
	  height: 10px;
	}
}
@media all and (max-width: 767px) {
	.btn {
		width: 90%;
		padding: 10px 0;
		font-size:90%;
		margin-top: 10px;
	}
	.btn:after{
		width: 6px;
	  height: 6px;
	}
}

/* -----------------------------------------------------------
   SHARE BUTTON
------------------------------------------------------------*/
#share_btn{
	width: 100%;
	background-color: #d7f1fd;
}
#share_btn .inner{
  margin: 0 auto;
  position: relative;
}
#share_btn .inner ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#share_btn .inner .sbtn {
    width: 28%;
}
#share_btn .inner .sbtn a {
    width: 100%;
    height: 0;
		padding-top: 100%;
    display: block;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
		-webkit-background-size: contain;
    background-size: contain;
}
#share_btn .inner .sbtn a:hover { opacity: 0.8;}
#share_btn .inner #sh_twit a{background-image: url(../img/sbtn_twit.png);}
#share_btn .inner #sh_fb a{background-image: url(../img/sbtn_fb.png);}
#share_btn .inner #sh_line a{background-image: url(../img/sbtn_line.png);}

@media all and (min-width: 768px) {
	#share_btn{
		padding: 30px 0;
	}
	#share_btn .inner{
		width: 250px;
	}
}
@media all and (max-width: 767px) {
	#share_btn{
		padding: 10px 0;
	}
	#share_btn .inner{
		width: 50%;
	}
}

/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------*/
footer{
	width:100%;
	background-color: #3fb0e2;
}
p.copyright {
	color:#fff;
	font-size:75%;
	line-height:1.25;
	font-weight: 700;
}
p.copyright a{
	font-weight:bold;
	color:#fff;
	}
@media all and (min-width: 768px) {
	footer{
		padding:30px 0;
		border-top: 1px solid #3fb0e2;
		}
	p.copyright {
		text-align:center;
		}
	}
@media all and (max-width: 767px)  {
	footer{
		position: relative;
	}
	p.copyright{
		padding:30px 10px 80px;;
		text-align:center;
		}
}



/* -----------------------------------------------------------
   PAGETOP
------------------------------------------------------------*/
#pagetop{
	z-index: 100;
}
#pagetop a{
	display: block;
	overflow:hidden;
	background-image:url(../img/pagetop.png);
	z-index: 100;
	position: relative;
	}

@media all and (min-width: 768px) {
	#pagetop {
	  position:fixed;
	  bottom:20px;
	  right:20px;
	}
	#pagetop a {
	  width:100px;
		height:0;
		padding-top: 100%;
		text-indent:-9999px;
		background-size: cover;
	}
}
@media all and (max-width: 767px)  {
	#pagetop a {
		background:url(../img/pagetop.png) no-repeat;
		background-size:cover;
		width:15%;
		height:0;
		padding-top:15%;
		position: absolute;
		top: -25px;
		left: 42.5%;
	}
}