section {
	margin: 30px auto;
	padding: 0;
	width: 100%;
	max-width: 1100px;
}

@media screen and (max-width: 768px) {
	section {
		width: 94%;
	}
}

p {
	font-size:18px;
	line-height:180%;
}

ul.disc {
	font-size:18px;
	line-height:180%;
}

ul.number {
	list-style-type:none;
}


@media screen and (max-width: 768px) {
	p {
		font-size:14px;
		line-height:180%;
	}
	
	ul.disc {
		font-size:14px;
		line-height:180%;
	}

}

.red {
	color:#f00;
}

a {
  transition: all 0.1s ease-in-out 0.1s;
}

a:hover {
	opacity:0.7;
}

a.btn-circle {
  transition: all 0.1s ease-in-out 0.1s;
  background: #82ac02;
  border: 1px solid #fff;
padding: 5px 20px;
margin: 0 0 0 0;
  border-radius: 30px;
  color: #fff;
text-decoration:none;
}

a.btn-circle.black {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}

a.btn-circle:hover {
  background: #000;
}


img.pic01 {
	width:100%;
	max-width:1100px;
	margin: 30px auto;
	padding:0;
}

img.pic02 {
	width:40%;
	max-width:800px;
	margin: 30px auto;
}

img.pic03 {
	width:100%;
	max-width:800px;
	margin: 30px auto;
	padding:0;
}

img.pic04 {
	width:100%;
	max-width:500px;
}

img.arrow01 {
	width:18px;
	display: inline-block;
	margin: 0 5px 0 0;
	padding:0;
}


.center {
	display: block;
	margin: 10px auto 0;
	text-align:center;
}

p.text-left {
	display: block;
	text-align:left;
	margin-left: 30px;
}

small {
	font-size:12px;
}

p.text-large {
	font-size:24px;
}

@media (max-width: 768px){
	.center {
		display: block;
		margin: 10px auto 0;
		text-align:left;
	}

	small {
		font-size:10px;
	}

img.arrow01 {
	width:14px;
	display: inline-block;
	margin: 0 5px 0 0;
	padding:0;
}

}



ul.threecol {
display: flex;
align-items:center;
padding:0;
margin:0;
list-style: none;
}
ul.threecol li {
padding:0;
margin: 0;
}
ul.threecol li.item1 {
flex-basis: 40%;
  order: 1;
}
ul.threecol li.item2 {
flex-basis: 26%;
padding:2%; 
  order: 2;
}
ul.threecol li.item3 {
flex-basis: 40%;
  order: 3;
}

.centerblock {
	display:none;
}


@media (max-width: 768px){
	ul.threecol {
	display: flex;
	padding:0;
	list-style: none;
	}
	ul.threecol li {
	padding:0;
	margin: 0;
	}
	ul.threecol li.item1 {
	flex-basis: 49.5%;
	  order: 1;
	padding-right:0.5%;
	}
	ul.threecol li.item2 {
	flex-basis: 26%;
	display:none;
	padding:2%; 
	  order: 3;
	}
	ul.threecol li.item3 {
	flex-basis: 49.5%;
	  order: 2;
	padding-left:0.5%;
	}
	.centerblock {
		display:block;
		margin: 0 0 30px 0;
	}
}

/********　2列　*********/
ul.twocol {
display: flex;
align-items:center;
padding:0;
margin:0 0 30px 0;
list-style: none;
}
ul.twocol li {
padding:0;
margin: 0;
}
ul.twocol li.item1 {
flex-basis: 47%;
padding-right:3%; 
}
ul.twocol li.item2 {
flex-basis: 48%;
padding-left:2%;
}




@media (max-width: 768px){
ul.twocol {
display: block;
align-items:center;
padding:0;
margin:0;
list-style: none;
}
ul.twocol li {
padding:0;
margin: 0;
}
ul.twocol li.item1 {
flex-basis: 100%;
padding-right:0%; 
}
ul.twocol li.item2 {
flex-basis: 100%;
padding-left:0%; 
margin-bottom:30px;
}

}


/********　3列　インデックス*********/

.block-area {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 -1% 30px;
	padding: 0;
}


.block-grid li {
	flex: 0 1 31%;
	margin: 0 1% 30px;
	padding: 0 0 20px 0;
}


.block-area img {
	width: 100%;
	margin: 0 auto 10px;
	padding: 0;
}

.block-area img{
 transition:0.5s all;
}

.block-area img:hover{
  transform:scale(1.2,1.2);
  transition:0.5s all;
}


@media (max-width: 960px){
	.block-grid li {
		flex: 0 1 48%;
	}
}



@media (max-width: 768px){
	.block-grid li {
		flex: 0 1 98%;
	}
}



h3 {
	text-align:center;
	color:#000 !important;
	display:block;
	margin: 0 auto;
	font-weight:bold;
}

h3 span {
  background: linear-gradient(transparent 0%, #ff0 0%);
  padding: 10px 5px;
}


.border01 {
	border:solid 3px #f00;
	padding:5px;
}

.border02 {
	border:solid 3px #000;
	background: #ff0;
	padding:0 0 0 15px;
}

.border03 {
	border:solid 3px #000;
	background: #fff;
	padding:0 0 0 15px;
}

.border04 {
	border:solid 3px #000;
	background: #fff;
	padding:10px 10px 10px 10px;
	margin: 0 auto 60px;
}

.border05 {
	border:solid 3px #000;
	background: #ff0;
	padding:10px 10px 10px 10px;
	margin: 0 auto 60px;
}


.textbg01 {
  background: #ff0;
}


@media (max-width: 768px){
h3 {
	text-align:left !important;
}
}