@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォンおよび小型タブレット向けレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/

/*==========================================
 メインイメージのスタイル
===========================================*/
section {
	padding: 20px 0 0;
}

div#top-mv-area {
	width: 100%;
  height: auto;
}
div#top-mv-area img {
	width: 100%;
	height: auto;
}


/*==========================================
 コンテンツエリア -> 『チャイルドサポーターとは』のスタイル
===========================================*/
#top-about-con {
  padding: 5% 0;
  background: #FF3366;
  color: #FFF;
}
#top-about-con-box {
  width: 560px;
	margin: 0 auto;
}
#top-about-con h3 {
	padding: 0 0 20px;
	font-size: 26px;
	line-height: 1.2;
	text-align: center;
}
#top-about-con h3 {
	padding: 0 0 20px;
	font-size: 26px;
	line-height: 1.2;
	text-align: center;
}
#top-about-con-movie {
	width: 560px;
	height: 315px;
	margin: 30px 0 0;
}
#top-about-con-movie iframe {
	width: 560px;
	height: 315px;
}
/*==========================================
 コンテンツエリア -> 『お知らせ』のスタイル
===========================================*/
#news-area {
	background: #EEE;
}
#news-area #top-news-con .content-inner a {
	width: 445px;
	height: 130px;
	margin: 0 0 30px 30px;
	padding: 10px;
	display: block;
	float: left;
	background: #FFF;
	border: solid 1px #CCC;
}
#news-area #top-news-con .content-inner a .columnBlock01 { width: 130px; }
#news-area #top-news-con .content-inner a .columnBlock02 { width: 298px; }
#news-area #top-news-con .content-inner a .columnBlock02 p {
	font-size: 14px;
	line-height: 1.6;
}

#news-area a h3 {
	margin: 0 0 0.5em;
	font-size: 16px;
	color: #FF3366;
	line-height: 1.3;
}
#news-area a h3 span {
	display: block;
	color: #212121;
	font-size: 12px;
}
#top-news-con {
	width: 964px;
	margin: 0 auto;
	padding: 0 0 80px;
}
#top-news-con .content-inner {
	margin: 0 0 0 -30px;
}
#top-news-btn,
#top-notice-btn {
	text-align: center;
}

#top-notice-con {
	width: 964px;
	margin: 0 auto;
	padding: 0 0 80px;
}
#top-notice-con .content-inner a {
	color: #FF3366;
	text-decoration: none;
}
#top-notice-con .content-inner a:hover {
	text-decoration: underline;
}
#top-notice-con ul li {
	margin: 0 0 20px;
	padding: 23px;
	font-size: 16px;
	background: #FFF;
	color: #FF3366;
	border: solid 1px #CCC;
}
#top-notice-con ul li span {
	padding: 0 1em 0 0;
	display: inline-block;
	color: #212121;
}


#sdgs_bana {
  width: 980px;
  margin: 30px auto 0;
}
#sdgs_bana img.pcView {
  display: block;
  width: 100%;
  height: auto;
}
#sdgs_bana img.spView {
  display: none;
}
/* PC向けレイアウトの指定：981px以上では固定レイアウト */
@media only screen and (max-width: 767px) {
	div#top-mv-area {
		width: 100%;
	  height: auto;
	}
	div#top-mv-area img {
		width: 100%;
		height: auto;
	}


/*==========================================
 コンテンツエリア -> 『チャイルドサポーターとは』のスタイル
===========================================*/
#top-about-con {
  padding: 5% 0;
}
#top-about-con-box {
  width: 80%;
	margin: 0 auto;
}
#top-about-con h3 {
	padding: 0 0 15px;
	font-size: 20px;
}
#top-about-con-movie {
	position: relative;
  width: 100%;
  height: 0;
	margin: 20px 0 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
#top-about-con-movie iframe {
	width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/*==========================================
 コンテンツエリア -> 『お知らせ』のスタイル
===========================================*/
	section#top-news {
		padding: 3% 0 0;
	}
	#news-area {
		padding: 0 3% 0;
	}
	#news-area #top-news-con .content-inner a {
		width: 100%;
		height: auto;
		margin: 0 0 3%;
		text-decoration: none;
		float: none;
		-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	#news-area #top-news-con .content-inner a .columnBlock01 { width: 100%; text-align: center; margin: 0 0 3%; }
	#news-area #top-news-con .content-inner a .columnBlock02 { width: 100%; }

	#top-news-con {
		width: 100%;
		padding: 0 0 3%;
	}
	#top-news-con .content-inner {
		margin: 0;
	}
	#top-news-btn,
	#top-notice-btn {
		text-align: center;
	}

	#top-notice-con {
		width: 100%;
		padding: 0 0 40px;
	}
	#top-notice-con ul li {
		margin: 0 0 3%;
		padding: 3%;
		font-size: 14px;
	}
	#top-notice-con ul li span {
		padding: 0 0 0.5em 0;
		display: block;
	}

	#sdgs_bana {
		width: 90%;
		margin: 5% 5% 0;
	}
	#sdgs_bana img.pcView {
		display: none;
	}
	#sdgs_bana img.spView {
		display: block;
		width: 100%;
		height: auto;
	}
}