@charset "shift_jis";

/* ======================================================
	* PC
====================================================== */
@media print,screen and (min-width: 751px) {
	/* ------------------------------------------------------
	 * contents
	------------------------------------------------------ */
	/* main */
	.MainBody {
		background:url(../img/index_bg01.png) repeat;
		background-position:left top;
		padding-bottom:80px;
	}
	.pageHead {
		padding-top:40px;
		text-align:center;
	}
	.pageHead h1 + p {
		margin-top:40px;
	}
	[data-sidebar="true"] .contents {
		float:none;
		margin-left:auto;
		margin-right:auto;
		width:750px;
	}
	.icn_pdf {
		background:url(../img/ic_pdf.png) no-repeat;
		background-position:left top;
		background-size:100% auto;
		display:inline-block;
		height:20px;
		margin:0 2px;
		vertical-align:middle;
		width:17px;
	}
	.contents > :first-child {
		margin-top:30px !important;
	}
	
	.box_teacher {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.btn_list {
		letter-spacing:-0.4em;
	}
	.btn_list > * {
		display:inline-block;
		letter-spacing:normal;
		margin-top:30px !important;
		margin-left:10px !important;
		margin-right:10px !important;
		vertical-align:middle;
	}
	
	.box_contents .box_inner {
		background-color:#fff;
	}
	
	.worksheet {
		margin-top:50px;
	}
	.worksheet .box_inner {
		padding:30px 30px 40px;
	}
	.worksheet .each_howto {
		margin-top:50px;
	}
	.worksheet .each_howto:first-child {
		margin-top:0;
	}
	.worksheet .each_howto h3 + p {
		margin-top:20px;
		margin-left:35px;
	}
	.worksheet .each_howto .each_step {
		margin-top:35px;
	}
	.worksheet .each_howto .each_step.step1 {
		margin-top:25px;
	}
	.worksheet .each_howto .each_step h4 ~ * {
		margin-top:25px;
		text-align:center;
	}
	.worksheet .each_howto .each_step p[class^="img"] {
		display:inline-block;
		margin-left:5px;
		margin-right:5px;
		vertical-align:middle;
	}
	.worksheet .each_howto .each_step p[class^="img"].single {
		display:table;
		margin-left:auto;
		margin-right:auto;
	}
	.worksheet .each_howto .box_message {
		background-color:#fff5d8;
		border-radius:8px;
		margin-top:40px;
		padding:20px;
		text-align:center;
	}
	.worksheet .each_howto .box_message > p {
		color:#5c3210;
		display:table;
		line-height:1;
		letter-spacing:-0.8px;
		font-size:1.7rem;
		font-weight:bold;
		margin-left:auto;
		margin-right:auto;
		position:relative;
	}
	.worksheet .each_howto .box_message > p .tx {
		display:inline-block;
		position:absolute;
		top:37px;
		right:0;
		width:357px;
	}
	.worksheet .each_howto .box_message > p a {
		display:inline-block;
		padding-bottom:5px;
		position:relative;
		text-decoration:none;
	}
	.worksheet .each_howto .box_message > p a:after {
		background:url(../img/index_bdr01.png) repeat-x;
		background-position:left top;
		background-size:auto 100%;
		content:"";
		height:3px;
		position:absolute;
		bottom:2px;
		left:0;
		width:100%;
	}
	
	.challenge {
		margin-left:auto;
		margin-right:auto;
		margin-top:40px;
		width:630px;
	}
	.challenge .box_inner {
		padding:20px 48px 40px;
	}
	.challenge .box_banner {
		margin-top:30px;
	}
	.challenge .box_banner dt {
		font-size:2.0rem;
		font-weight:bold;
		line-height:1.4;
		text-align:center;
	}
	.challenge .box_banner dd {
		margin-top:25px;
	}
	.challenge .box_banner dd > ul:after {
		clear:both;
		content:"";
		display:block;
	}
	.challenge .box_banner dd > ul li {
		float:right;
		margin-bottom:10px;
	}
	.challenge .box_banner dd > ul li:nth-child(1) {
		float:left;
	}

	.challenge .box_banner dd>ul li a {
		-webkit-transition: all .2s ease-out 0s;
		transition: all .2s ease-out 0s;
	}

	.challenge .box_banner dd>ul li a:hover {
		opacity: .6;
	}
	
	.other {
		margin-top:35px;
	}
	.other .list_banner {
		margin-top:10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.other .list_banner li a {
		-webkit-transition: all .2s ease-out 0s;
		transition: all .2s ease-out 0s;
	}

	.other .list_banner li a:hover {
		opacity: .6;
	}
	
	ruby rt {
		font-size: 50%;
		/* font-size: 62.5%; */
	}
	
	/* btn */
	.btn_download {
		margin-top:20px;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		width:350px;
		z-index:0;
	}
	.btn_download a {
		background-color:#f47d0e;
		border-radius:8px;
		color:#fff;
		display:block;
		font-size:1.7rem;
		font-weight:bold;
		line-height:72px !important;
		position:relative;
		text-align:center;
		text-decoration:none;
		width:100%;
	}
	.btn_download a:hover {
		background-color:#f4c60e;
	}
	.btn_download a:before {
		background-color:#ca6400;
		border-radius:8px;
		content:"";
		height:100%;
		position:absolute;
		left:0;
		bottom:-3px;
		width:100%;
		z-index:-1;
	}
	.btn_download a:hover:before {
		background-color:#c09a05;
	}
	.btn_download a > span {
		display:inline-block;
		line-height:1.5;
		min-width:300px;
		padding-left:40px;
		position:relative;
		vertical-align:middle;
	}
	.btn_download a > span:before,
	.btn_download a > span:after {
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.btn_download a > span:before {
		background-color:#fc9a01;
		border:2px solid #fff;
		border-radius:50%;
		height:30px;
		left:0;
		width:30px;
		z-index:1;
	}
	.btn_download a > span:after {
		border-color: transparent transparent transparent #fff;
		border-style:solid;
		border-width:5px 0 5px 8px;
		height:0;
		left:12px;
		width:0;
		z-index:2;
	}
	.btn_download a .small {
		font-size:1.5rem;
	}
	.btn_download a > .icn_pdf {
		margin-left:5px;
	}
}

/* ======================================================
 * PC Media Queries
====================================================== */
/***
@media screen and (min-width: 1921px) {
}
@media screen and (min-width: 751px) and (max-width: 1920px) {
}
***/

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 750px) {
	/* ------------------------------------------------------
	 * contents
	------------------------------------------------------ */
	/* main */
	.MainBody {
		background:url(../img/index_bg01.png) repeat;
		background-position:left top;
		padding-bottom:40px;
	}
	.pageHead {
		padding:25px 15px 0;
		text-align:center;
	}
	.pageHead h1 + p {
		margin:15px 15px 0;
	}
	.icn_pdf {
		background:url(../img/ic_pdf.png) no-repeat;
		background-position:left top;
		background-size:100% auto;
		display:inline-block;
		height:16px;
		margin:0 2px;
		vertical-align:middle;
		width:13px;
	}
	
	.box_teacher {
		margin-top:20px;
	}
	.box_teacher .movie {
		padding-top:70%;
		position:relative;
	}
	.box_teacher .movie iframe {
		height:100% !important;
		position:absolute;
		top:0;
		left:0;
		width:100% !important;
	}
	.box_teacher .img_profile {
		margin-top:15px;
	}
	
	.btn_list {
		margin-top:15px;
		margin-left:4%;
		margin-right:4%;
	}
	.btn_list > * {
		margin-top:10px !important;
		margin-left:auto !important;
		margin-right:auto !important;
	}
	
	.box_contents .box_inner {
		background-color:#fff;
	}
	
	.worksheet {
		margin-top:20px;
	}
	.worksheet .box_inner {
		padding:20px 10px 10px;
	}
	.worksheet .each_howto {
		margin-top:50px;
	}
	.worksheet .each_howto:first-child {
		margin-top:0;
	}
	.worksheet .each_howto h3 + p {
		margin-top:15px;
		margin-left:17px;
		margin-right:17px;
	}
	.worksheet .each_howto .each_step {
		margin-top:15px;
	}
	.worksheet .each_howto .each_step h4 ~ * {
		margin-top:10px;
		text-align:center;
	}
	/* .worksheet .each_howto .each_step p[class^="img"] {
		margin-left:50px;
		margin-right:50px;
	} */
	.worksheet .each_howto .each_step .img2 {
		margin-left:90px !important;
		margin-right:90px !important;
	}
	.worksheet .each_howto .box_message {
		background-color:#fff5d8;
		border-radius:8px;
		margin-top:15px;
		padding:12px;
		text-align:center;
	}
	.worksheet .each_howto .box_message > p {
		color:#5c3210;
		display:table;
		line-height:1;
		letter-spacing:-0.8px;
		font-size:1.0rem;
		font-weight:bold;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		width:250px;
	}
	.worksheet .each_howto .box_message > p .tx {
		display:inline-block;
		position:absolute;
		top:18px;
		right:0;
		width:188px;
	}
	.worksheet .each_howto .box_message > p a {
		display:inline-block;
		padding-bottom:5px;
		position:relative;
		text-decoration:none;
	}
	.worksheet .each_howto .box_message > p a:after {
		background:url(../img/index_bdr01.png) repeat-x;
		background-position:left top;
		background-size:auto 100%;
		content:"";
		height:1px;
		position:absolute;
		bottom:2px;
		left:0;
		width:100%;
	}
	
	.challenge {
		margin-top:15px;
	}
	.challenge .box_inner {
		padding:15px 25px 20px;
	}
	.challenge .box_banner {
		margin-top:15px;
	}
	.challenge .box_banner dt {
		font-size:1.4rem;
		font-weight:bold;
		line-height:1.4;
		text-align:center;
	}
	.challenge .box_banner dd {
		margin-top:15px;
	}
	.challenge .box_banner dd > ul:after {
		clear:both;
		content:"";
		display:block;
	}
	.challenge .box_banner dd > ul li {
		float:right;
		margin-bottom:7px;
		width:48%;
	}
	.challenge .box_banner dd > ul li:nth-child(1) {
		float:left;
		margin-right:4%;
	}
	
	.other {
		margin-top:25px;
	}
	.other .list_banner {
		margin-top:5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.other .list_banner li {
		margin-top:10px;
		width:48%;
	}
	
	ruby rt {
		font-size: 50%;
		/* font-size: 62.5%; */
	}
	
	/* btn */
	.btn_download {
		margin-top:15px;
		position:relative;
		width:100%;
		z-index:0;
	}
	.btn_download a {
		background-color:#f47d0e;
		border-radius:8px;
		color:#fff;
		display:table;
		font-size:1.4rem;
		font-weight:bold;
		line-height:60px;
		height:60px;
		position:relative;
		text-align:center;
		text-decoration:none;
		width:inherit;
	}
	.btn_download a:before {
		background-color:#ca6400;
		border-radius:8px;
		content:"";
		height:100%;
		width:100%;
		position:absolute;
		left:0;
		bottom:-3px;
		z-index:-1;
	}
	.btn_download a > span {
		display:inline-block;
		line-height:1.5;
		min-width:90%;
		padding-left:30px;
		position:relative;
		vertical-align:middle;
	}
	.btn_download a > span:before,
	.btn_download a > span:after {
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.btn_download a > span:before {
		background-color:#fc9a01;
		border:1px solid #fff;
		border-radius:50%;
		height:22px;
		left:7px;
		width:22px;
		z-index:1;
	}
	.btn_download a > span:after {
		border-color: transparent transparent transparent #fff;
		border-style:solid;
		border-width:4px 0 4px 7px;
		height:0;
		left:15px;
		width:0;
		z-index:2;
	}
	.btn_download a .small {
		font-size:1.2rem;
	}
	.btn_download a > .icn_pdf {
		margin-right:10px;
	}
}

/* ======================================================
 * SP Media Queries
====================================================== */
/***
@media only screen and (min-width: 320px) and (max-width: 750px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}
***/


/* ======================================================
 * Print
====================================================== */
@media print {
	.sp-hidden {
		display:block !important;
	}
}