@charset "utf-8";
@import url("sp-io.css");
/* CSS Document */

body {
font-family: 'メイリオ', Meiryo,'TsukuARdGothic-Regular','ヒラギノ明朝 ProN','Hiragino Mincho ProN', 
sans-serif;
}

.logo{
	margin-top: 20PX;
	width : 50%;
}

.io1{
	display: flex;
	justify-content: space-between;
	list-style: none;
}
.wrapper{
	max-width: 1200px;
	margin:0 auto;
    padding: 0 4%}

.btn-square-mail {
  width:150px;
  font-size:16px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  margin-left: 	10px;
  background:#6495ed;
  border-radius: 4px;
}

.btn-square-mail:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
.btn-square-tel {
  width:150px;
  font-size:16px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  margin-left: 	10px;
  background:#6495ed;
  border-radius: 4px;
}

.btn-square-tel:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
	
.io2{
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io2-pc{
     display: block !important;
     margin:　0　auto;
	 width : 100%; 
	 height: auto; 
}

.io2-sp { 
	 display: none!important;
}

.io3{
    margin:0 auto;
	width: 850px;
	height: auto;
}

.io3 h1{
text-align:center;
font-size:35px;
color:#0071BC;	
line-height: 2.0;
}	

.io3 p{
line-height: 1.7;
}

.io3 p span{
color:#0071BC
}	

.io4{
	width: 850px;
	height: auto;
	margin:0 auto;
}

.io4 h2{
  	text-align:center;
    font-size:35px;
    color:#0071BC;
	line-height: 1.7;
}

.io4 p1{
	text-align:center;
    line-height: 1.7;
}

.io4 img{
	 display: block;
     margin:auto;
	 width : 50vw ; 
}

.io4 p2{
	line-height: 1.7;
	text-align:center;	
}

.color{
    color:#0071BC;	
}	

.io5{
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io5-pc{
     display: block !important;
     margin:　0　auto;
	 width : 100%; 
	 height: auto; 
}

.io5-sp { 
	 display: none!important;
}

.io6{
	width: 850px;
	height: 430px;
	margin : 0 auto;
}

.io6 img{
 display: block;
 margin: 0 auto;
 margin-left : auto;
 margin-right : auto; 
}

.io6 h3{
	font-size:35px;
    color:black;	
    line-height: 1.7;
}

.io6 p{
	font-size:px;
    color:black;	
    line-height: 1.7;
	text-align: center;
	}

.io7{
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io7-pc{
     display: block !important;
     margin:　0　auto;
	 width : 100%; 
	 height: auto; 
}

.io7-sp { 
	 display: none!important;
}

.io8{
    margin:0 auto;
	width: 850px;
	height: auto;
}

.io8 h3{
text-align:center;
line-height: 1.0;
font-size:30px;
}

.io8 p{
text-align:center;
line-height: 1.7;
font-size:20px;
}

.g2{
display: flex;
justify-content: center;
gap:20px;
margin-bottom: 35PX;
}

.io9{
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io9-pc{
     display: block !important;
     margin:　0　auto;
	 width : 100%; 
	 height: auto; 
}

.io9-sp { 
	 display: none!important;
}

	
	
.io10{
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io10-pc{
     display: block !important;
     margin:　0　auto;
	 width : 100%; 
	 height: auto; 
}

.io10-sp { 
	 display: none!important;
}

.io11{
	text-align:center;
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io11 img {
	 text-align:center;
　　  display: block;
  　  margin:auto;
	  width : 60vw;
	}

.io12{
	margin:0 auto;
	width: 850px;
	height: auto;
}

.io12-pc{
     display: block !important;
     margin:　0　auto;
	 width : 100%; 
	 height: auto; 
}

.io12-sp { 
	 display: none!important;
}

#io2{
width: 40px;
height: 40px;
position: fixed;
right: 0;
bottom: 10px;
background: #89c7de;
opacity: 0.6;
}
#io2 a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#io2 a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

.io13 {
　　 width: 850px;
	margin:0 auto;
	height: auto;
	color: black;
	}

.io13 img {
	margin:0 auto;
	display: block;
	}

/* スマホ版 */
@media (max-width: 600px){
	
body {
font-family: 'メイリオ', Meiryo,'TsukuARdGothic-Regular','ヒラギノ明朝 ProN','Hiragino Mincho ProN', 
sans-serif;
}

.logo{
	margin-top: 20PX;
	width : 50%;
}

.io1{
	display: flex;
	justify-content: space-between;
	list-style: none;
}
.wrapper{
	max-width: 600px;
	margin:0 auto;
    padding: 0 4%}

.btn-square-mail {
  width:150px;
  font-size:16px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  margin-left: 	10px;
  background:#6495ed;
  border-radius: 4px;
}

.btn-square-mail:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
.btn-square-tel {
  width:150px;
  font-size:16px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  margin-left: 	10px;
  background:#6495ed;
  border-radius: 4px;
}

.btn-square-tel:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
	
.io2{
    margin:0 auto;
	width: 600px;
	height: auto;
}
.io2{
	max-width: 100%; 
    height:auto;
}

.io3{
    margin:0 auto;
	width: 600px;
	height: auto;
}

.io3 h1{
text-align:center;
font-size:35px;
color:#0071BC;	
line-height: 2.0;
}	

.io3 p{
line-height: 1.7;
}

.io3 p span{
color:#0071BC
}	

.io4{
	width: auto;
	height: auto;
	margin:0 auto;
}

.io4 h2{
  	text-align:center;
    font-size:35px;
    color:#0071BC;
	line-height: 1.7;
}

.io4 p1{
	text-align:center;
    line-height: 1.7;
}

.io4 img{
	 display: block;
     margin:auto;
	 width : 50vw ; 
}

.io4 p2{
	line-height: 1.7;
	text-align:center;	
}

.color{
    color:#0071BC;	
}	

.io5 {
     display: block;
     margin:auto;
	 width : 60vw; 
}

.io6{
	width: auto;
	height: 430px;
	margin : 0 auto;
}

.io6 img{
 display: block;
 margin:auto;
 max-width: 100%
}

.io6 h3{
	font-size:35px;
    color:black;	
    line-height: 1.7;
	text-align: center;
	}

.io6 p{
	font-size:px;
    color:black;	
    line-height: 1.7;
	text-align: center;
	}

.io7{
	text-align:center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.io8{
    margin:0 auto;
	width: auto;
	height: auto;
}

.io8 h3{
text-align:center;
line-height: 1.0;
font-size:30px;
}

.io8 p{
text-align:center;
line-height: 1.7;
font-size:20px;
}

.g2{
display: flex;
justify-content: center;
gap:20px;
margin-bottom: 35PX;
}

.io9{
   width: 850px;
   height: 1000px;
   margin :auto;
}

.io9 img{
text-align: center;

}
	
	
.io10 {
　  width: auto;
	height: auto;
	}

.io10 img{
	display: block;
  　margin:auto;
	width : 65vw;
	max-width: 100%;
	}


.io11{
	margin:0 auto;
	width: auto;
	height: auto;
}

.io11 img {
　　  display: block;
  　  margin:auto;
	  width : 60vw;
	}

.io12{
	text-align:center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#io2{
width: 40px;
height: 40px;
position: fixed;
right: 0;
bottom: 10px;
background: #89c7de;
opacity: 0.6;
}
#io2 a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#io2 a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

.io13 {
　　 width: auto;
	margin:0 auto;
	height: auto;
	color: black;
	}

.io13 img {
	margin:0 auto;
	display: block;
	max-width: 100%
	}
}