@charset "utf-8";

body {
	font-family: zen-maru-gothic, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height:160%;
	color:#35308E;
	font-style: normal;
/*	font-weight: 700;*/
}

/* エピソード一覧ページ */

#Challenge {/*background: #FFFEF2;*/}
.wrapper {
	position: relative;
	width:100%;
	text-align: center;
	z-index: 20;
}

/*
.wrapper::before, .wrapper::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 2.6%;
  height: 100%;
  background-image: url("images/bodydeco-left.jpg");
  background-repeat: repeat-y;
  background-size: contain;
}
.wrapper::before { left:0; }

.wrapper::after {
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
*/
section {
	width:100%;
	margin:0 auto;
}

#EpisodeList {
	width:100%;
	text-align:center;
	padding-bottom:0;
	z-index: 10;
	position: relative;
}

#EpisodeList .logo {
	position: absolute;
	top:35px;
	right:35px;
}

#EpisodeList img {
	width:100%;
}

h1 {margin-top:-9.5%;}
h1 img {width:43.5%; max-width: 600px;}
.sch { margin:-40px auto 50px auto; width:100%; max-width: 940px; text-align: center;}
.sch img {width:100%;}
h2 {
	background: #D2EDFB;
	/*border-radius: 10px;*/
	color: #15257E;
	font-size:20px;
	font-weight:500;
	padding:25px 0 25px 0;
	margin:15px 0;
	text-align:center;
	line-height: 70% !important;
	position: relative;
	border: clamp(0px, 1.1vw, 16px) solid #ABCDD9;
	outline: clamp(0px, 0.2vw, 4px) solid #ABCDD9;
	outline-offset: clamp(-30px, -2.1vw, 0px);
}

h2 .areaname {
	display: inline-block;
	font-size:32px;
	color:#15257E;
	font-weight:bold;
	margin-top:0.75em;
}
/*
section.mv {
	max-width:none;
	margin:0 auto 40px auto;
	width:100%;
}

section.mv img {
	width:100%;
}
*/

.line-lead { width:100%; max-width:940px; margin:0 auto; border-top:#8ACAE9 4.5px solid; }
.line-lead p {
	/*background:linear-gradient(transparent 94%, rgba(22,149,212,0.5) 0%);
	display:inline;*/
	font-weight: 900;
	font-size:240%;
	color:#008ACE;
	height: 240px;
	line-height: 94px;
	background-position: 0px 0px;
	background-size: 94px 94px; /* line-height に合わせる */
	background-repeat: repeat;
	background-image:linear-gradient(transparent 95.25%, rgba(22,149,212,0.5) 0%);
	margin-top:0 !important;
}
.bg-hana {
	background-image:url("images/bg_sakura.png");
	background-repeat: repeat-y;
	background-position: center;
	background-size: contain;
}
/*.bg-hana::before, .bg-hana::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height:100%;
}

.bg-hana::before { top: 20%; left: 0.5%; background: url("images/bg_hanabira.png") left no-repeat;}
.bg-hana::after { top: 0 ; right: 0.5%; background: url("images/bg_hanabira02.png") right no-repeat;}*/

.area {
  position: relative;
  /*background: #D2EDFB;
  border-radius: 10px;*/
  padding: 40px 25px 25px 25px;
  margin: 50px auto 0 auto;
  text-align: center;
  clear: both;
  max-width:1380px;
  z-index: 8000;
}

.imgCh,
.imgCh-more {
	display: flex;
	justify-content: space-around;
	width: 100%;
	flex-wrap: wrap;
}
	
.imgCh .imgChitem,
.imgCh-more .imgChitem {
	box-sizing: border-box;
	/*padding:8px 8px 4px 8px;
	border:#CBCCE6 3px solid;
	margin:0 1.5% 30px 0;
	background: #FFF;
	width:calc(100% / 3.1);*/
	padding: 0.5em;
	width: 48%;
}

/*
.imgCh .imgChitem:nth-of-type(3n),
.imgCh-more .imgChitem:nth-of-type(3n){ margin:0 0 30px 0; }
*/
.imgCh .imgChitem img,
.imgCh-more .imgChitem img {
	width:100%;
}


/* もっと見る */
.moving-more {
	display:inline-block;
	cursor:pointer;
  transition: all 0.5s ease-in;
}
/*
.moving-more:hover {text-decoration: none;}
*/
.more {
	color:#1695D4;
	display: block;
	font-weight:600;
	font-size:180%;
	padding-bottom:10px;
	background-image:linear-gradient(transparent 94.5%, #1695D4 0%);
	text-decoration: none;
}
.more:hover {background-image:none;}


.arrow-bottom {
  display: block;
  position: relative;
  width: 26px;
  height: 26px;
  margin: -10px auto 40px auto;
  cursor:pointer;
	}
	
.arrow-bottom::after {
  display: block;
  content:" ";
  width: 26px;
  height: 26px;
  border-bottom: 4px solid #35318F;
  border-right: 4px solid #35318F;
  transform: rotate(45deg);
  /*transition: all 0.5s ease-in;*/
  right:1px;
  top:4px;
  bottom:4px;
  position:absolute;
  transition: all 0.5s ease-in;
}
	
.imgCh-moreWrap {
	display: none;
	/*margin-top:-50px;*/
}

.active-more {
	display: none;

}

/* もっと見る　ここまで */

a.toTop:hover {opacity: 0.6;}
a.toTop img.CPtop {width:80%; max-width: 500px; margin-top:20px;}
a.toTop img.NX {width:95%; max-width: 660px;}

#pageEnd {
	width: 100%;
	background:#FFF8EB;
	background-image:
    url("images/img_bottom.png?ver2"), url("images/bg_sakura.png");
  background-repeat: no-repeat, repeat-y;
  background-position: bottom center, top center;
	background-size: contain, cover;
	position: relative;
	padding-top:170px;
	padding-bottom: 400px;
	margin-top:150px;
}

#pageEnd::before {
	position: absolute;
	top:0;
	background-image:url("images/bg_sakura.png");
	background-repeat: repeat-y;
	background-position: center;
	background-size: contain;
	z-index: 50;
}

#pageEnd .botImg {
	position: absolute;
	bottom:-8px;
	left:0;
	width:100%;
	z-index: 20;
}
#pageEnd .botImg img {width:100%;}

#pageEnd a.toTop {position:relative; z-index: 60;}

#pageEnd .line-lead { position:relative; z-index: 30 !important;}
.line-lead p.end {
	height: 360px;
	line-height: 94px;
	background-position: 0px 0px;
	background-size: 94px 94px; /* line-height に合わせる */
	background-repeat: repeat;
	background-image:linear-gradient(transparent 95.5%, rgba(22,149,212,0.5) 0%);
	margin-bottom: 20px;
}

@media screen and (max-width: 853px) {.line-lead p.end {font-size:210%;}}




.entry {
	text-align:center;
	margin:0 15px 0 15px;
}

.entry p.lead { line-height:150%; margin-bottom: 10px; text-align: left; width:83%; }
.midashi {
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
	font-weight: 900;
	font-style: normal;
}
p.lead02 { margin: 0 10px 25px 15px; font-size:95%; }
p.lead03 { line-height:180%; margin: 0 auto 10px auto; font-size:120%; text-align: center; display: inline-block;}
p.lead04 { line-height:180%; margin-bottom: 10px; font-size:120%; border: #CC0000 2px solid; padding:1.5em; color:#000; font-weight: bold;}
.entry p strong,
.tx-pink { color:#E63178; }
.tx-redB { color:#CC0000; font-size:135%; }
span.notes { font-size:85%; }
.txL { font-size:135%; }
.txLL { font-size:180% !important; padding:1em 0.5em 1em 1em !important; background:rgba(230,49,120,0.1) }

.entry p.attention { 
	font-size:80%;
	color:#CC0000;
	text-align:right;
	margin-top:20px;
}

.attention02 { 
	/*color:#CC0000;*/
	line-height: 160%;
	text-indent:-1em;
	text-align: left;
	font-size: 13px;
	padding-left:1em;
	margin:0;
}

.attention03 { 
	color:#CC0000;
	line-height: 160%;
	padding:14px 14px 14px 2em;
	text-indent:-1em;
	text-align: left;
	font-size: 13px;
}


.formBtn {
	clear:both;
	margin:4em auto 0 auto;
	text-align:center;
}

.formBtn .entrybtn,
.formBtn .resetbtn {
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	-o-border-radius:30px;
	padding:0.7em 6em;
	text-decoration:none !important;
	margin-left:1em;
	margin-bottom:1em;
	font-size:120%;
	font-weight:bold;
	width:20%;
	float:left;
    box-sizing: content-box;
}

.formBtn .entrybtn { color:#FFF; border:2px solid #004098; background:#004098; }
.formBtn .resetbtn { color:#999; border:2px solid #999; background:#FFF; }


.formBtn .entrybtn:hover { color:#004098; background:#FFF; }
.formBtn .resetbtn:hover { color:#FFF; background:#999; }


.formBtn .linkngbtn,
.formBtn .linknxbtn {
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	-o-border-radius:30px;
	padding:0.7em 1em;
	text-decoration:none !important;
	margin-left:3.5%;
	margin-bottom:1em;
	font-size:110%;
	font-weight:bold;
	width:40%;
	float:left;
    box-sizing: content-box;
}

.formBtn .linkctbtn {
	border-radius:50px;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	-o-border-radius:50px;
	padding:0.7em 2em;
	text-decoration:none !important;
	margin-bottom:1em;
	font-size:110%;
	font-weight:bold;
	width:50%;
    box-sizing: content-box;
}

.formBtn .linkngbtn { color:#FFF; border:2px solid #059DD4;  background:#059DD4; }
.formBtn .linknxbtn { color:#FFF; border:2px solid #35318F; background:#35318F; }
.formBtn .linkctbtn { color:#FFF; border:2px solid #004098; background:#004098; }

.formBtn .linkngbtn:hover { color:#059DD4; background:#FFF; }
.formBtn .linknxbtn:hover { color:#35318F; background:#FFF; }
.formBtn .linkctbtn:hover { color:#004098; background:#FFF; }

.arrowWrap {
	display: inline-block;
	width: 15px;
	height: 15px;
	background:#FFF;
	border-radius: 15px;
	padding:8px 5px 3px 5px;
	margin: 0 0 -2px 20px;
}

.arrow {
	width: 8px;
	height: 8px;
	border-bottom: 3px solid #004098;
	border-right: 3px solid #004098;
	transform: rotate(-45deg);
}

.linkngbtn:hover .arrow { border-bottom: 3px solid #059DD4; border-right: 3px solid #059DD4; }
.linknxbtn:hover .arrow { border-bottom: 3px solid #35318F; border-right: 3px solid #35318F; }
.linkctbtn:hover .arrow { border-bottom: 3px solid #004098; border-right: 3px solid #004098; }
.linkctbtn:hover .arrowWrap { background:#004098;}
.linkctbtn:hover .arrow { border-bottom: 3px solid #FFF; border-right: 3px solid #FFF; }

.arrow02 {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 15px 1px 0;
	border-bottom: 3px solid #0076AC;
	border-right: 3px solid #0076AC;
	transform: rotate(-45deg);
}

.btnOther:hover .arrow02 { border-bottom: 3px solid #059DD4; border-right: 3px solid #059DD4; }

.copyright { 
	text-align:center !important;
	clear:both;
	margin-top:60px;
}

.footerCh {
	clear: both;
	background: url("images/bg_footerbar.png") bottom left repeat-x;
	width: 100%;
	margin-top:70px;
}

.footerCh .footerBooks {
	padding-bottom: 23px;
}

.footerCh .footerBooks img {
	width:40%;
}

.inq-ttl {font-size:105%; display: inline-block; font-weight: bold; margin-bottom:0.5em;}

/*-----------------------------------------------------	*/
/*	for iPad					*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 811px) {

	.SPPAD {display: none;}
}

@media screen and (max-width: 810px) {
	
	section {
    width: 95%;
    /*padding: 0 2.5%;*/
	}
	
	#EpisodeList {padding-bottom: 5px;}
	.formBtn .entrybtn,
	.formBtn .resetbtn {
	padding:0.7em 5em;
	}
	
}

@media screen and (max-width: 690px) {
	.line-lead p.end {
	font-size:180%;
	height: 165px;
	line-height: 55px;
	background-position: 0px 0px;
	background-size: 55px 55px; /* line-height に合わせる */
	background-repeat: repeat;
	background-image:linear-gradient(transparent 92.5%, rgba(22,149,212,0.5) 0%);
	}
}

/*-----------------------------------------------------	*/
/*	for - 639px					*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 641px) {

	.SP {display: none;}
	.SPpad {display: none;}
}

@media screen and (max-width: 640px) {
	
	.PC {display: none;}
	
	.wrapper::before, .wrapper::after {
	width: 4.5%;
	}
	
	section { width: 100%;}
	/*#EpisodeList {width: 95%;}*/
	#EpisodeList .logo {top:15px; right:0;}	
	#EpisodeList .logo img {width:50%;}
	h1 {margin-top:-17%;}
	h1 img {width:80%;}
	.sch { margin:-20px auto 25px auto;}
	.sch img {width:105%; margin-left:-2.5%;}
	
	.line-lead {border-top:#8ACAE9 3px solid;}
	.line-lead p {
	font-size:180%;
	height: 100px;
	line-height: 50px;
	background-position: 0px 0px;
	background-size: 50px 50px; /* line-height に合わせる */
	background-repeat: repeat;
	background-image:linear-gradient(transparent 94.5%, rgba(22,149,212,0.5) 0%);
	margin-top:0 !important;
	}
	.line-lead p.end {
	font-size:150%; 
	background-image:linear-gradient(transparent 94.0%, rgba(22,149,212,0.5) 0%);
	height: 135px;
	line-height: 45px;
	background-position: 0px 0px;
	background-size: 45px 45px; /* line-height に合わせる */
	margin-bottom:40px;
	}
	@media screen and (max-width: 424px) {.line-lead p.end {font-size:130%;}}
	
	.area {margin-top:25px; margin-left:-3.5%; padding: 30px 0 25px 0; width: 107%;}
	
	#pageEnd {
	padding-top:85px;
	padding-bottom: 230px;
	margin-top:85px;
	}

	p {
	font-size:90%;
	line-height:160%;
	 }
	
	.entry {width:88%; margin:0 auto; font-size:80%;}
	.entry p.lead,
	p.lead03 { margin:0 auto ; padding:0 10px 0 25px; font-size:100%; text-align: left;  }
	p.lead02 { margin: 0 15px 25px 15px; }
	p.lead04 { font-size:100%;}
	.tx-center { text-align:center !important; }
	.txLL { font-size:140% !important; line-height:160% !important; }

	.imgCh {
		display: block;
		/*width:80%;*/
	}
	
	.imgCh-more {
		clear: both !important;
		width:100%;
	}
	.imgCh .imgChitem,
	.imgCh-more .imgChitem {
		box-sizing: border-box;
		padding:0.5em 0;
		/*border:#CBCCE6 3px solid;
		margin:0 auto 30px auto;
		background: #FFF;*/
		width: 100%;
	}
	
	.imgCh .imgChitem img,
	.imgCh-more .imgChitem img {
		width:100%;
	}
	
	.footerCh {
	clear: both;
	background: url("images/bg_footerbar.png") bottom center repeat-x;
	}

	.footerCh .footerBooks {
	padding-bottom: 27px;
	}

	.footerCh .footerBooks img {
	width:70%;
	}
	
	.ttlsamsub { font-size: 13px; }
	.arrow02 { margin: 0 20px 1px 0; }

	.formBtn .entrybtn,
	.formBtn .resetbtn,
	.formBtn .linkngbtn,
	.formBtn .linknxbtn,
	.formBtn .linkctbtn {
	padding:0.7em 0.5em;
	margin:0 auto 1em auto;
	font-size:100%;
	width: 80%;
	float:none;
	display:block;
	}
	
	.arrowWrap {
	display: inline-block;
	width: 12px;
	height: 12px;
	background:#FFF;
	border-radius: 12px;
	padding:7px 5px 3px 5px;
	margin: 0 0 -4px 20px;
	}

	.arrow {
	width: 6px;
	height: 6px;
	border-bottom: 3px solid #004098;
	border-right: 3px solid #004098;
	}
	
	.formBtn .linkngbtn { margin-top:-1em !important; }
	
	.copyright { margin-top: 0; }
	.inq-ttl {font-size:130%; display: inline-block; margin-bottom: 0.25em;}


}

@media screen and (min-width: 475px) {

	.sp474,
	.SPsm {display: none; }
}

@media screen and (max-width: 430px) {
	#pageEnd {
    background-image:url("images/img_bottom_sp.png"), url("images/bg_sakura.png");
	padding-bottom: 190px;
	}
}

@media screen and (max-width: 375px) {
	
	.SPpad {display: none;}
	
	.txLL { font-size:125% !important; }

}

@media screen and (max-width: 360px) {


}

@media screen and (max-width: 320px) {

	body { font-size:95%; }
	.txL { font-size:120%; }
	
	.formBtn .linkngbtn,
	.formBtn .linknxbtn,
	.formBtn .linkctbtn { font-size:90%; }

}


a:link { color:#000; }
a:visited { color:#000; }

a.toMap {
	position: relative;
	display: inline-block;
	margin: 1em auto 0 auto;
	padding-right:30px;
}

footer {
	text-align: center;
	background: #35308E;
	padding:2em 1em;
}

footer p {
	color: #FFF;
	font-size:12px;
	text-align: center;
	line-height: 180%;
	margin: 0;
	font-weight: 400;
}

.bordbott {
	padding:0 1em 1em 1em;
	margin-bottom:1em;
	border-bottom:#FFF 1px solid;
	display: inline-block;
	font-weight: 400;
}
.bordbott a {color:#FFF;}

@media screen and (max-width: 640px) {
	.bordbott {
	padding:0 1em 1.5em 0;
	margin-bottom:1.5em;
	}	
}

/*-----------------------------------------------------	*/
/*	for - 768px					*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 769px) {

	.sp-only { display:none; }

}

@media screen and (max-width: 768px) {

.pc-only { display:none; }
	
	body { font-size:13px; }
	a.toMap {
	margin: 0.5em auto 0 auto;
	}
	footer {
	
	}
	
	footer p { font-size:10px; width:100%; }

}


#pagetop a {
	position:fixed;
	display:block;
	bottom:10px;
	right:10px;
	z-index:9000;
	font-size:12px;
	color: #008ACE;
	height:15px;
	padding-top:50px; 
}

#pagetop a {
	text-decoration: none;
	background:url(//www.toshocard.com/assets/images/icon_tokkun_totop.png)no-repeat  17px 0;
}
#pagetop a:hover {
	color:#0096E9;
	background:url(//www.toshocard.com/assets/images/icon_tokkun_totop_on.png)no-repeat  17px 0;
}

@media screen and (max-width: 639px) {
	#pagetop a {
	background:url(//www.toshocard.com/assets/images/icon_tokkun_totop.png)no-repeat  25px 0;
	background-size:45%;
	height:15px;
	padding-top:40px; 
	}

	#pagetop a:hover {
	background:url(//www.toshocard.com/assets/images/icon_tokkun_totop_on.png)no-repeat  25px 0;
	background-size:45%;
	}
}