@charset "utf-8";

/* *******************************************************************************************
*
*	親子でやってみよう sp
*
******************************************************************************************* */

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

	.challenge_container {
		width: 90%;
		margin: 0 auto;
		padding: 60px 0 100px;
		position: relative;
		z-index: 11;
	}

	.challenge_container img {
		width: 100%;
	}

	.challenge_container figure {
		margin: 0;
		padding: 0;
		display: block;
	}

	.challenge_container .boxList li figure {
		height: auto;
	}

	.pc_br {
		display: none;
	}

	.sp_br {
		display: block;
	}

	/* ----------------------------- ページタイトル ----------------------------- */

	.challenge_container .pageHeader_ttl {
		font-size: 32px;
		color: #2294e6;
		font-weight: bold;
		text-align: center;
		padding-bottom: 10px;
		text-align: center;
	}

	.challenge_container .pageHeader_ttl span {
		padding: 0 10px 8px;
		position: relative;
		display: inline-block;
	}

	.challenge_container .pageHeader_ttl span:before {
		content: '';
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		height: 3px;
		border-radius: 2.5px;
		background-color: #2294e6;
	}

	.challenge_container .pageHeader_ttl span:after {
		content: '';
		background: url(../image/baloon_bg.png) no-repeat 0 0;
		background-size: 25px;
		width: 25px;
		height: 15px;
		position: absolute;
		bottom: -15px;
		left: 50%;
		margin: 0px 0 0 -12.55px;
	}

	.challenge_container .pageHeader_ttl rt {
		font-size: 14px;
	}

	.pageHeader_lead {
		width: 100%;
		text-align: center;
		padding-top: 15px;
		font-size: 18px;
		margin-bottom: 40px;
	}

	.challenge_container .boxList {
		text-align: center;
		width: 100%;
	}

	.challenge_container .boxList ul {
		display: block;
		margin-left: 0;
		margin-bottom: -30px;
	}

	.challenge_container .boxList ul:after {
		content: "";
		clear: both;
		display: block;
	}


	.challenge_container .boxList li {
		width: 100%;
		padding-bottom: 25px;
		margin-left: 0;
		margin-bottom: 30px;
	}

	.challenge_container .boxList li p {
		text-align: left;
		padding: 0 20px;
	}

	.challenge_container .boxList li p.cat {
		text-align: center;
		font-size: 14px;
		color: #fff;
		padding: 8px 0;
		line-height: 1;
		position: relative;
		margin-bottom: 20px;
	}

	.challenge_container .boxList li h3 {
		padding: 0 20px;
		font-size: 18px;
		margin-bottom: 15px;
		text-align: left;
	}

	.challenge_container .boxList li figure img {
		width: 100%;
	}

	.challenge_container .boxList figure .new {
		background: url(/kids/image/renew/new.png) no-repeat 0 0;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 5vw;
		right: 5vw;
		display: block;
		background-size: contain;
	}

	/* -------------------------------------------------------------------------------------------
	*
	* 記事ページ
	*
	* ----------------------------------------------------------------------------------------- */

	/* ----------------------------- 共通パーツ ----------------------------- */

	.page_container {
		width: 100%;
	}

	.sec_tit {
		width: 100%;
		margin: 65px auto 40px;
		font-size: 22px;
	}

	.sec_tit.w90p {
		width: 90%;
	}

	.sponsor {
		width: 90%;
		margin: 0 auto;
	}

	.btn_back .transition {
		width: 85%;
		height: 25px;
		border-radius: 50px;
		text-align: center;
		font-size: 14px;
	}

	.btn_back .btn_back_inner {
		width: auto;
		height: 100%;
		position: relative;
		background: none;
		text-indent: 0;
		padding-left: 0%;
		display: inline-block;
		text-align: left;
	}

	.contents_header {
		border-radius: 0px;
		padding: 25px 4.7%;
	}

	/* ----------------------------- カテゴリ ----------------------------- */

	.kidsContents_cat {
		text-align: center;
		font-size: 16px;
	}

	.contents_tit {
		text-align: left;
		font-size: 32px;
		margin-bottom: 20px;
	}

	.contents_tit_sub {
		margin: 0;
	}

	.contents_read {
		text-align: left;
		padding: 20px 0 0;
	}

	.contents_cat {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		width: 155px;
		height: 33px;
		margin-bottom: 0;
		box-sizing: content-box;
		padding-top: 6px;
	}

	/* ----------------------------- detail ----------------------------- */
	.detail {
		padding: 0 5%;
	}

	.detail .detail_clm-full {
		font-size: 18px;
		text-align: center;
		margin: 30px 0 20px;
	}

	.detail ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.detail li {
		width: 30%;
	}

	.detail li img {
		width: 100%;
	}

	.detail.hb {
		margin-bottom: 40px;
	}

	.detail_hpt_ttl {
		font-size: 18px;
		font-weight: bold;
		color: #2294e6;
		padding: 10px 5% 10px 5%;
	}

	.picList {
		flex-wrap: wrap;
		margin-bottom: -20px;
		overflow: hidden;
	}

	.picList li {
		width: 100%;
		margin-bottom: 20px;
	}

	.detail.col2 .cl {
		width: 100%;
		float: none;
		margin-bottom: 40px;
	}

	.detail.col2 .cl:last-child {
		float: none;
	}

	.detail.col2 .cl h5 {
		font-size: 20px;
		color: #2294e6;
		line-height: 1.5;
		margin: 0;
		margin-bottom: 20px;
		padding: 0;
		text-align: left;
	}

	.detail.col3:after {
		content: "";
		clear: both;
		display: block;
	}

	.detail.col3 .cl {
		width: 100%;
		float: none;
		margin-bottom: 40px;
	}

	.detail.col3 .cl:after {
		content: "";
		clear: both;
		display: block;
	}

	.detail.col3 .cl:first-child {
		margin-right: 0;
	}

	.detail.col3 .cl:last-child {
		float: none;
		margin-bottom: 0;
	}

	.detail.col3 .cl .pic_read {
		width: 48%;
		float: left;
	}

	.detail.col3 .cl .pic_read.hb {
		margin-bottom: 0;
	}

	.detail.col3 .cl .ex {
		width: 48%;
		float: right;
	}

	.detail.col3 .cl .sc_tit {
		width: 48%;
		float: right;
	}

	.detail.col3 .cl .sc_tit {
		font-size: 16px;
		font-weight: bold;
		line-height: 1.5;
		margin: 0;
		margin-bottom: 10px;
		padding: 0;
		text-align: left;
	}


	/* ----------------------------- remarks ----------------------------- */
	.remarks {
		width: 100%;
		padding: 41px 20px 24px;
		border-radius: 0;
		margin: 48px 0 45px;
		position: relative;
		z-index: 100;
	}

	.remarks:before {
		width: 38px;
		height: 45px;
		top: -19px;
		left: 50%;
		margin-left: -19px;
	}

	.remarks .m_tit {
		font-size: 18px;
		line-height: 1.5;
	}

	.remarks.col2 {
		padding: 41px 20px 24px;
	}

	.remarks.hb {
		margin: 48px 0 70px;
	}

	.remarks_ttl {
		font-size: 22px !important;
		margin-bottom: 24px;
	}

	.remarks_ttl:after {
		content: "";
		width: 50px;
	}

	.remarks figure {
		border-radius: 12px;
		margin-bottom: 30px;
	}

	.remarks .textArea {
		font-size: 16px;
	}

	.remarks .textArea p {
		line-height: 1.8;
		margin-bottom: 30px;
	}

	.remarks .textArea p:last-child {
		margin-bottom: 0;
	}

	.remarks .textArea .sc_tit {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.remarks .fig_col2 {
		width: 100%;
		margin: 0 auto 0 auto;
	}

	.remarks .fig_col2 .cl {
		width: 100%;
		margin-bottom: 30px;
		float: none;
	}

	.remarks .fig_col2 .cl:last-child {
		float: none;
		margin-bottom: 0;
	}

	.remarks .fig_col2 .cl figure {
		margin-bottom: 30px;
	}

	.remarks .fig_col2 .cl .ttl {
		font-size: 16px;
		margin-bottom: 10px;
	}


	/* ----------------------------- type ----------------------------- */
	.typeList .typeBlock {
		margin-bottom: 60px;
	}

	.typeList h4 {
		font-size: 22px;
		color: #2294e6;
		text-align: center;
		border-top: 2px dotted #2294e6;
		border-bottom: 2px dotted #2294e6;
		padding: 20px 0;
		margin-bottom: 40px;
	}

	.typeList .lead {
		font-size: 18px;
		margin: 30px 0;
		text-align: left;
	}

	.typeList .ex {
		font-size: 20px;
		margin-bottom: 60px;
		text-align: center;
	}

	.typeList ul {
		display: block;
		margin-bottom: -20px;
	}

	.typeList li {
		position: relative;
		margin-bottom: 30px;
		width: 100%;
		margin-bottom: 60px;
	}

	.typeList li:before {
		content: '';
		background: url('../carnivorous-plants/image/ic_before.png') no-repeat;
		background-size: 60px;
		width: 60px;
		height: 75px;
		position: absolute;
		top: -37.5px;
		left: 50%;
		margin-left: -30px;
		display: block;
	}

	.typeList li:nth-child(2):before {
		background: url('../carnivorous-plants/image/ic_after.png') no-repeat;
		background-size: 60px;
	}

	.typeList li span {
		display: block;
		font-size: 15px;
		text-align: center;
		width: 100%;
		color: #2294e6;
		margin-top: 20px;
		font-weight: bold;
	}

	.typeList li span.note {
		margin-top: 0px;
		font-size: 12px;
		font-weight: normal;
		text-align: center;
	}

	display: block;

	.typeList p.lead {
		font-size: 16px;
		text-align: center;
		margin: 40px 0;
		line-height: 2.2;
	}

	.typeList p.txt {
		font-size: 16px;
		line-height: 2;
	}

	.typeList .note {
		margin-top: 50px;
	}

	.note {
		font-size: 14px;
		color: #333 !important;
	}

	.note ul {
		padding: 0px;
		margin: 0px;
		overflow: hidden;
	}

	.note li {
		padding: 0;
		display: block;
		margin-bottom: 5px;
		position: relative;
		padding-left: 1.2em;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0px;
	}

	.note li:first-child {
		margin-bottom: 0px;
	}

	.note li:before {
		content: '※';
		background: none;
		position: relative;
		width: auto;
		height: auto;
		top: auto;
		left: auto;
		text-align: left;
		margin: 0;
		margin-left: -1.2em !important;
		display: inline;
	}

	/* ----------------------------- sec_title ----------------------------- */
	h4.sec_tit {
		font-size: 20px;
		color: #2294e6;
		border-top: dotted 2px #2294e6;
		border-bottom: dotted 2px #2294e6;
		margin: 0;
		margin-bottom: 30px;
		padding: 0.5em 0;
		text-align: left;
		line-height: 1.5;
	}

	/* ----------------------------- pic_read ----------------------------- */
	.typeBlock .ex {
		font-size: 16px;
	}

	.typeBlock .ex.ht {
		padding-top: 30px;
	}

	.typeBlock .ex.ht {
		padding-bottom: 30px;
	}

	.pic_read {
		width: 100%;
		margin-bottom: 20px;
	}

	.pic_read.ht {
		margin-top: 30px;
	}

	.pic_read.hb {
		margin-bottom: 30px;
	}

	/* ----------------------------- Honda Golf ----------------------------- */
	.honda_link {
		width: 100%;
		background: #d9ecfa;
		padding: 32px 0 32px 0;
		box-sizing: border-box;
		border-radius: 0;
		position: relative;
		margin: 64px auto 60px;
		z-index: 100;
	}

	.honda_link .lead {
		color: #2294e6;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.6;
		margin-bottom: 20px;
		text-align: center;
	}

	.honda_link .transition {
		width: 85%;
		height: 25px;
		border-radius: 50px;
		text-align: center;
		font-size: 14px;
	}

	.honda_link .btn_back_inner {
		width: auto;
		height: 100%;
		position: relative;
		background: none;
		text-indent: 0;
		padding-left: 0%;
		display: inline-block;
		text-align: left;
	}

	/* ----------------------------- Let’s Challenge!! ----------------------------- */
	.lets_challenge {
		width: 100%;
		background: #d9ecfa;
		padding: 30px 20px;
		box-sizing: border-box;
		border-radius: 0;
		position: relative;
		margin: 40px auto 30px;
	}

	.lets_challenge h3 {
		text-align: center;
		margin-bottom: 30px;
	}

	.lets_challenge h3 img {
		width: 70%;
	}

	.lets_challenge h3:after {
		content: "";
		width: 80%;
		height: 4px;
		display: block;
		margin: 10px auto 0;
		background: url(../image/line_dot_pink_x.png) repeat-x;
		background-size: auto 100%;
	}

	.lets_challenge h4 {
		color: #2294E6;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		text-align: center;
	}

	.lets_challenge .desc {
		font-size: 13px;
		line-height: 1.6;
		padding-top: 20px;
	}

	.lets_challenge .name {
		font-size: 15px;
		line-height: 1.6;
		margin-top: 20px;
		text-align: center;
	}

	.lets_challenge .name.md {
		padding: 30% 0 0 0.7em;
		text-align: left;
	}

	.lets_challenge .col2 .cl2 {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}

	.lets_challenge .col2 .cl2:last-child {
		float: none;
	}

	.lets_challenge .cl2:after {
		content: "";
		clear: both;
		display: block;
	}

	.lets_challenge .cl2 .cl {
		width: 47%;
		float: left;
	}

	.lets_challenge .cl2 .cl:last-child {
		float: right;
	}

	.lets_challenge .cl2 .cl figure {
		width: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	.lets_challenge .cl2 .cl figure img {
		width: 100%;
	}


}