@charset "UTF-8";

/* CSS Document 11:11 */

/* =========================================================
 ■usual
========================================================= */

.pcOnly {
}

.spOnly {
	display:none;
}
 @media (max-width: 699px) {
.pcOnly {
 display:none;
}
 .spOnly {
 display:block;
}
}

.tx-c {
	text-align:center;
}

.tx-l {
	text-align:left;
}

.tx-r {
	text-align:right;
}

/* =========================================================
 ■
========================================================= */
.main-wrap {
	margin:0 auto 50px;
	max-width:1000px;
	text-align:center;
}

@media (max-width: 699px) {
.main-wrap {
	/*margin-bottom:50px;*/
}
}

/**/
.btn-kirikami {
	margin-top:13px;
}
 @media (max-width: 699px) {
.btn-kirikami {
 margin:15px 15px 0;
}
}

/**/
.intro-txt1 {
	margin:40px auto 35px;
	font-size:2.4rem;
	font-weight:bold;
	line-height:1.4;
}

.intro-txt2 {
	margin:0 auto 0;
	width:830px;
	text-align:left;
	line-height:2.0;
}
 @media (max-width: 699px) {
.intro-txt1 {
 margin:35px 15px;
 font-size:1.8rem;
 font-weight:bold;
 line-height:1.4;
 text-align:left;
}
 .intro-txt2 {
 margin:0 15px 0;
 width:inherit;
 text-align:left;
 line-height:1.6;
}
}

/**/
.problem-list {
	margin:50px auto 0;
	width:880px;
	display:flex;
	justify-content:space-between;
}

.problem-list li {
	width:50%;
	height:432px;
	text-align:center;
}

.problem-list li .txt {
	margin:30px auto 0;
	width:360px;
	text-align:left;
}

.problem-list li.area1 {
	background:url(../img/sec1_bg_pla.jpg) no-repeat bottom center;
}

.problem-list li.area2 {
	background:url(../img/sec1_bg_gutaiteki.jpg) no-repeat bottom center;
}
 @media (max-width: 699px) {
.problem-list {
 margin:0px 15px 0;
 width:inherit;
 display:block;
 box-sizing:border-box;
}
 .problem-list li {
 margin-top:60px;
 width:inherit;
 height:auto;
 padding-bottom:160px;
 box-sizing:border-box;
}
 .problem-list li.area1 {
 background:url(../img/sec1_bg_pla.jpg) no-repeat bottom center;
 background-size:contain;
}
 .problem-list li.area2 {
 background:url(../img/sec1_bg_gutaiteki.jpg) no-repeat bottom center;
 background-size:contain;
}
 .problem-list li .txt {
 margin:20px 20px 0;
 width:inherit;
}
}

/**/
.re-style-area {
	margin:45px auto 0;
	padding:20px 34px;
	width:880px;
	background:#e5eece;
	/*background:#396;*/
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-radius:10px;
	box-sizing:border-box;
}

.re-style-area .pic {
	width:169px;
}

.re-style-area .txt-area {
	width:605px;
	text-align:left;
}

.re-style-area .txt-area .txt {
	margin-top:15px;
	line-height:1.6;
}

.re-style-area .txt-area .txt span {
	font-size:1.25rem;
}
 @media (max-width: 699px) {
.re-style-area {
 margin:60px 15px 0;
 padding:30px 30px 30px;
 width:inherit;
 display:block;
 border-radius:10px;
}
 .re-style-area .pic {
 display:none;
}
 .re-style-area .txt-area {
 width:inherit;
}
 .re-style-area .txt-area .ttl {
 padding:27px 10px 27px 100px;
 background:url(../img/re_style.png) no-repeat left center;
 background-size:80px;
}
 .re-style-area .txt-area .txt {
 margin-top:20px;
}
 .re-style-area .txt-area .txt span {
 display:block;
 text-align:right;
 font-size:100%;
}
}

/**/
/*.package-area {
	margin:0 auto 0;
	max-width:1000px;
}*/

.package-area a {
	display:block;
	color:#262626;
	text-decoration:none;
	transition:0.2s;
}

.package-area a:hover {
	opacity:0.7;
}

.package-txt {
	margin-left:auto;
	margin-right:130px;
	margin-top:15px;
	display:table;
	font-size:1.4rem;
	text-align:left;
	line-height:1.6;
}
 @media (max-width: 699px) {
.package-area {
 margin:20px 15px 0;
}
 .package-txt {
 margin:0px auto 0;
 font-size:inherit;
 line-height:1.6;
}
}

/**/
.play-ttl {
	margin-top:60px;
}

.play-flow-area {
	margin:30px auto 0;
}

.play-flow {
	margin:0 auto;
	display:flex;
	justify-content:center;
}
 @media (max-width: 699px) {
.play-ttl {
	margin:60px 15px 0;
}
.play-flow-area {
 margin:40px auto 0;
}
.play-flow {
 margin:0 auto;
 display:flex;
 flex-wrap:wrap;
}
.play-flow li {
 width:50%;
}
}

/**/
.btn-detail {
	margin:0 auto 0;
	display:table;
	width:360px;
}

.btn-detail p {
	height:60px;
	background:#0068b7;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:2.0rem;
	color:#fff;
	position:relative;
}

.btn-detail p::after {
	content: '';
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	right:35px;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
}

.btn-detail a {
	display:block;
}

.btn-detail a:hover {
	text-decoration:none;
}

@media (max-width: 699px) {
.btn-detail {
	margin:0 40px 0;
	display:block;
	width:inherit;
}

.btn-detail p {
	height:60px;
	font-size:1.8rem;
}

}

/**/
.add-btn {
	width:360px !important;
	padding:20px 0 !important;
	/*min-height:60px !important;*/
	border-radius:10px;
	font-size:2.0rem;
}

@media (max-width: 699px) {
.add-btn {
	padding:0 90px !important;
	width:inherit !important;
	font-size:1.8rem;
}	
}

/**/
.intro-sdgs {
	margin:0 auto 0;
	width:830px;
	display:flex;
	justify-content:space-between;
	text-align:left;
}

.sdgs-icon {
	width:85px;
}

.sdgs-icon li {
	margin-bottom:5px;
}

.sdgs-icon li:last-child {
	margin-bottom:0;
}

.intro-sdgs p {
	width:725px;
	line-height:1.6;
}

@media (max-width: 699px) {
.intro-sdgs {
	margin:0 15px 0;
	width:inherit;
	display:block;
}

.sdgs-icon {
	margin:0 auto 15px;
	width:150px;
	display:flex;
}

.sdgs-icon li {
	margin-bottom:0;
	margin-right:10px;
}

.sdgs-icon li:last-child {
	margin-right:0;
}

.intro-sdgs p {
	width:inherit;
	line-height:1.6;
}
}