#container {
  max-width: 960px;
  margin: 0 auto;
}
#main {
  width: 100%;
  font-family:  "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#container #main h1 img{
	max-width:100%;
}

#container #main .text1{
	font-size: 1.8rem;
	font-weight: bold;
	 border: 4px double #ddd;
    margin: 1em 0;
    padding: 1em;
}

#container #main .box1 {
    margin: 1em 0;
    /*background: #FDFFE6;*/
}
#container #main .box1 .box-title {
    font-size: 1.2em;
    padding: 4px;
    color: #000000;
    font-weight: bold;
    letter-spacing: 0.05em;
	text-decoration: underline 4px #ffc600;
}
#container #main .box1 ul {
    padding: 5px 20px;
    margin: 0;
}

#container #main .box1 ul li{
    padding-left:1em;
    text-indent:-1em;
}

#container #main .box2 {
    margin: 2em 0;
    /*background: #FFDFDF;*/
}
#container #main .box2 .box-title {
    font-size: 1.2em;
    padding: 4px;
    color: #000000;
    font-weight: bold;
    letter-spacing: 0.05em;
	text-decoration: underline 4px #ff0000;
}
#container #main .box2 ul {
    padding: 5px 20px;
    margin: 0;
}
#container #main .box2 ul li{
    padding-left:1em;
text-indent:-1em;
}
.bordertext {
 padding: .25em 0 .25em .75em;
  border-left: 6px solid #ccc;
	text-align: left;
	font-weight: bold;
	font-size: 1.5rem;
}

.redtext{
	color: red;
	font-size: 1.2rem;
	margin: 0 1.0rem;
	text-align: left;
}

.textbox{
	width: 90%;
	margin: 0 auto;
	padding-left:1em;
text-indent:-1em;
}	  
.textbox2{
	width: 90%;
	margin: 0 auto;
	padding-left:1em;
}	  



#use{
	text-align: center;
}

*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
		flex-wrap: wrap;
	-ms-flex-wrap: wrap; 
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}

.col_3 div p{	text-align: left;
}
.col_3_2 > div{
	width: 33.33333%;
	padding: 10px;
}

.col_3_2 div p{	text-align: left;
}

@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
#container #main .box1 ul {
    padding: 5px 10px;
    margin: 0;
}
#container #main .box2 ul {
    padding: 5px 10px;
    margin: 0;
}


	
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}

}

@media only screen and (max-width: 768px){
	#container #main{
		width: 90%;
		margin: 0 auto;
	}
#container #main .text1{
		font-size: 1.2rem;
	}
#container #main .redtext{
	font-size: 1.1rem;
}
.col_3_2 > div{
		width: 50%;
/*		padding: 10px;
*/	}	
	
}