h1 {
	padding:15px 0px;
	margin:0px;
}
h1 p {
	width: 1100px;
	margin: 0 auto;
}
h1 img {
	width: 240px;
	height: auto;
}

.eyecatch {
	background: #f5eee8;
}
.howto_list ul {
width: 100%;
margin-top: 20px;
}
.howto_list ul li {
width: 350px;
margin-right: 20px;
margin-bottom: 10px;
box-sizing: border-box;
float: left;
}
.howto_list ul li:nth-child(3n) {
margin-right: 0;
}
.howto_list ul li img {
width: 100%;
}
.howto_title {
background: #f25555;
color: #fff;
padding: 15px 0;
border-radius: 10px 10px 0 0;
text-align: center;
font-size: 20px;
}
.howto_txt {
padding: 10px 0;
}
.howto_txt2 {
padding: 0px 0;
}
.howto_img img {
width: 100%;
height: auto;
}

@media screen and (max-width: 640px) {
h1 {
padding:8px 0px;
margin:0px;
}
.howto_list ul li {
width: 100%;
margin-right: 0px;
margin-bottom: 20px;
box-sizing: border-box;
float: none;
}
.howto_title {
font-size: 16px;
padding: 12px 0;
}
}

.txtbox {
margin-top: 20px;
margin-bottom: 40px;
border: 3px solid #11a9de;
border-radius: 20px;
box-sizing: border-box;
line-height: 1.75;
}
.txtbox2 {
background: #fff;
margin-top: 20px;
margin-bottom: 40px;
padding: 20px;
border: 2px solid #11a9de;
}
.txtbox3 {
background: #fff;
margin-top: 20px;
margin-bottom: 40px;
padding: 20px;
/*border: 2px solid #11a9de;*/
border: 3px solid #f25555;
border-radius: 20px;
box-sizing: border-box;
line-height: 1.75;
text-align: center;
}
.attention {
padding: 30px 0 10px;
text-align: center;
font-weight: 600;
font-size: 24px;
color: #f25555;
}

.contents1 {
width: 726px;
height:420px;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius: 20px;
background: #fff;
float: left;
text-align: center;
position:relative;
margin-bottom:30px;
}
.contents2 {
width: 360px;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius: 20px;
background: #fff;
float: right;
text-align: center;
margin-bottom:30px;
}
.contents3 {
position:absolute;
left:30px;
width: 320px;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius: 10px;
background: #fff;
text-align: center;
}
.contents4 {
position:absolute;
right:30px;
width: 320px;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius:10px;
background: #fff;
text-align: center;
}
.contents1 .title {
padding: 16px;
background: #93daf2;
font-size: 24px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
position: relative;
}
.contents2 .title {
padding: 16px;
background: #c0eb73;
font-size: 24px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
position: relative;
}
.contents3 .title {
padding: 16px;
background: #f1b910;
font-size: 24px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
position: relative;
}
.contents4 .title {
padding: 16px;
background: #f25555;
font-size: 24px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
position: relative;
}
.contents1 .photo {
text-align: center;
margin-bottom: 20px;
}
.contents1 .photo img {
width: 25%;
height: auto;
}
.contents1 .title .ic {
position: absolute;
bottom: 0;
left: 0;
}
.contents2 .title .ic {
position: absolute;
bottom: 0;
left: 0;
}
.contents3 .title .ic {
position: absolute;
bottom: 0;
left: 0;
}
.contents4 .title .ic {
position: absolute;
bottom: 0;
left: 0;
}
.contents1 .txt {
text-align: center;
padding: 10px;
font-size: 18px;
font-weight: 600;
color: #06356d;
margin-bottom:5px;
}
.contents2 .txt {
text-align: center;
padding: 10px;
font-size: 18px;
font-weight: 600;
color: #06356d;
margin-bottom:5px;
}
.contents3 .txt {
text-align: center;
padding: 10px;
font-size: 18px;
font-weight: 600;
color: #06356d;
}
.contents4 .txt {
text-align: center;
padding: 10px;
font-size: 18px;
font-weight: 600;
color: #06356d;
}
.contents2 img {
width:95%;
}
.thumbnail {
width: 100%;
}
.thumbnail .image {
width: 33%;
}
.thumbnail .image img {
width: 100%;
height: auto;
}
.thumbnail .txt {
text-align: left;
}
.contents2 .thumbnail {
margin: 40px 0;
}

@media screen and (max-width: 640px) {
.attention {
padding: 20px 0 0 0;
text-align: center;
font-weight: 600;
font-size: 20px;
color: #f25555;
line-height: 1.2;
}
.txtbox {
border: 2px solid #11a9de;
}
.txtbox2 {
border: 2px solid #11a9de;
}
.txtbox3 {
text-align: left;
border-radius: 10px;
margin-top: 0;
}
.bg01 img.howto {
width: 100%;
height: auto;
}






/*
.contents1 {
width: 100%;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 5px;
border-radius: 10px;
background: #fff;
float: none;
text-align: center;
}
.contents2 {
width: 100%;
box-sizing: border-box;
border: 2px solid #06356d;
margin-top: 20px;
margin-bottom: 20px;
padding: 5px;
border-radius: 10px;
background: #fff;
float: none;
text-align: center;
}
.contents1 .title {
padding: 8px;
background: #93daf2;
font-size: 18px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
}
.contents2 .title {
padding: 8px;
background: #c0eb73;
font-size: 18px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
}
.contents1 .txt {
text-align: center;
padding: 10px;
font-size: 16px;
font-weight: 600;
color: #06356d;
}
.contents2 .txt {
text-align: center;
padding: 10px;
font-size: 16px;
font-weight: 600;
color: #06356d;
}
.contents1 img {
width: 90%;
height: auto;
margin: 0 0 20px 0;
}
.contents2 img {
width: 90%;
height: auto;
}
*/

.contents1 {
width:100%;
height:330px;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius: 20px;
background: #fff;
float: left;
text-align: center;
position:relative;
margin-bottom:40px;
}
.contents2 {
width:100%;
height:auto;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius: 20px;
background: #fff;
float: right;
text-align: center;
margin-bottom:0px;
}
.contents3 {
position:absolute;
left:3%;
width:45%;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius:10px;
background: #fff;
text-align: center;
min-height:136px;
}
.contents4 {
position:absolute;
right:3%;
width:45%;
box-sizing: border-box;
border: 2px solid #06356d;
padding: 10px;
border-radius:10px;
background: #fff;
text-align: center;
min-height:136px;
}
.contents1 .title {
padding: 8px;
background: #93daf2;
font-size: 18px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
}
.contents2 .title {
padding: 8px;
background: #c0eb73;
font-size: 18px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
}
.contents3 .title {
padding: 8px;
background: #f1b910;
font-size: 16px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
}
.contents4 .title {
padding: 8px;
background: #f25555;
font-size: 16px;
border-radius: 10px;
font-weight: 600;
color: #06356d;
text-align: right;
}
.contents1 .title .ic {
left: -6px;
}
.contents2 .title .ic {
left: -6px;
}
.contents1 .title .ic img {
height: 46px;
width: auto;
}
.contents2 .title .ic img {
height: 46px;
width: auto;
}
.contents1 .txt {
text-align: center;
padding: 10px;
font-size: 16px;
font-weight: 600;
color: #06356d;
margin-bottom:0px;
}
.contents2 .txt {
text-align: left;
padding: 10px;
font-size: 16px;
font-weight: 600;
color: #06356d;
margin-bottom:0px;
}
.contents3 .txt {
text-align: center;
padding: 10px 0px 0px 10px;
font-size: 14px;
font-weight: 600;
color: #06356d;
text-align: left;
}
.contents4 .txt {
text-align: center;
padding: 10px 0px 0px 10px;
font-size: 14px;
font-weight: 600;
color: #06356d;
text-align: left;
}
.contents2 img {
width:95%;
}

}

.sub_title {
font-size: 24px;
line-height: 1.2;
}
.sub_title3 {
font-size: 24px;
text-align: center;
padding: 20px 0;
color: #06356d;
border-top: 3px double #06356d;
border-bottom: 3px double #06356d;
font-weight: 600;
line-height: 1.2;
}

@media screen and (max-width: 640px) {
.sub_title3 {
font-size: 16px;
text-align: left;
padding: 20px 0;
color: #06356d;
border-top: 3px double #06356d;
border-bottom: 3px double #06356d;
font-weight: 600;
line-height: 1.2;
}
}