/* CSS Document */


/* --------------------------------------------------
programs
-------------------------------------------------- */


/* ttl-main-area */

.ttl-main-area {
    margin: 2rem;
}

.img-main img {
	width:auto;
	height:auto;
	max-width:100%;
}

.ttl-main {
	text-align:center;
}
.ttl-main img {
	width:auto;
	height:auto;
	max-width:100%;
}


/* sentence 共通部分 */

.s-contents-area {
	background:#F5F7F9;
	width:50%;
}
.s-ttl {
	margin-bottom:1.5rem;
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","メイリオ",Meiryo,Osaka,sans-serif;
	letter-spacing:.2rem;
	font-size:2.2rem;
	position:relative;
	padding-left:56px;
}

.s-ttl span{
	font-size:1.6rem;
	color:#266BA5;
	display:block;
	line-height:1.2;
}

.s-ttl img{
	position:absolute;
	top:10px;
	left:0;
	width:44px;
}

.s-txt {
	margin-bottom:2rem;
	padding-left:20px;
}
.s-data {
	display:table;
	margin-bottom:5px;
}
.s-data dt {
	display:table-cell;
	width:8em;
	padding:0.3em 0.5em;
	background:#518BBD;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
}
.s-data dd {
	display:table-cell;
	word-break:break-all;
	padding:0.25em 0.5em;
}

.s-img-area {
	width:50%;
}

.s-img-area img {
	width: auto;
	height: auto;
	max-width:100%;
}

/* sentence-area01 */


.sentence-area01 {
	margin-bottom:12rem;
	position:relative;
}
.sentence-area01 .s-contents-area {
	float:left;
	padding:4% 10% 4% 3%;
}
.sentence-area01 .s-img-area {
	float:right;
}
.sentence-area01 .s-main-img {
	position:relative;
	top:0;
	left:-15%;
	width:100%;
	padding-top:8%;
}
.sentence-area01 .s-sub-img01 {
	position:absolute;
	top:-10%;
	right:-15%;
	width:45%;
}
.sentence-area01 .s-sub-img02 {
	position:absolute;
	bottom:-10%;
	right:-10%;
	width:40%;
}

/* sentence-area02 */

.sentence-area02 {
	margin-bottom:12rem;
	position:relative;
}
.sentence-area02 .s-contents-area {
	float:right;
	padding:4% 3% 4% 10%;
}
.sentence-area02 .s-img-area {
	float:left;
}
.sentence-area02 .s-main-img {
	position:relative;
	top:0;
	right:-15%;
	width:100%;
	padding-top:8%;
}
.sentence-area02 .s-sub-img01 {
	position:absolute;
	top:-10%;
	left:-10%;
	width:45%;
}
.sentence-area02 .s-sub-img02 {
	position:absolute;
	bottom:-10%;
	left:-15%;
	width:40%;
}


/* btn-more */

.btn-more{
	margin:50px 0;
	text-align:center;
}
.btn-more a{
	color:#000;
	text-decoration:none;
	display:inline-block;
	vertical-align: middle;
	padding:5px 30px;
	border:#000 solid 2px;
}
.btn-more a:after{
	content:"\f0da";
	font-family:fontawesome;
	margin-left:2rem;
}
.btn-more a:hover{
	background:#000;
	color:#FFF;
}


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



/* ttl-main-area */


/* sentence 共通部分 */



.s-ttl {
	font-size:2.0rem;
}

.s-ttl span{
	font-size:1.4rem;
}

.s-ttl img{
	top:5px;
}

/* sentence-area01 */


.sentence-area01 .s-img-area {
	padding-top:10%;
}

/* sentence-area02 */

.sentence-area02 .s-img-area {
	padding-top:10%;
}


/* btn-more */

	.btn-more{
		margin:20px 0;
	}

}










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


/* ttl-main-area */

.ttl-main-area {
	margin-bottom:3rem;
}

.ttl-main img {
	max-width:80%;
}

/* sentence 共通部分 */

.s-ttl {
	font-size:1.8rem;
}
.s-ttl img{
	top:3px;
}
.s-ttl span{
	font-size:1.2rem;
}

.s-contents-area {
	background:#F5F7F9;
	width:100%;
}

.s-txt {
	width:100%;
}

.s-img-area {
	width:100%;
	padding:40px 20px;
}


/* sentence-area01 */

.sentence-area01 {
	margin-bottom:6rem;
}
.sentence-area01 .s-contents-area {
	float:none;
	padding:4% 3% 8%;
}
.sentence-area01 .s-img-area {
	position:relative;
	float:none;
	padding-top: 0;
}


.sentence-area01 .s-main-img {
	top: auto;
	left: auto;
	width:90%;
}




/* sentence-area02 */

.sentence-area02 {
	margin-bottom:6rem;
}
.sentence-area02 .s-contents-area {
	float:none;
	padding:4% 3% 8%;

}
.sentence-area02 .s-img-area {
	position:relative;
	float:none;
	padding-top: 3%;
}

.sentence-area02 .s-main-img {
	top: auto;
	right: auto;
	width:90%;
	margin-left:10%;
}


/* btn-more */


}