@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;700;900&display=swap');

/*----------------------------------------------------
　
------------------------------------------------------*/
.main-copy{
text-align: center;
font-weight: 300;
max-width: 1000px;
margin: 0 auto 1em;
font-size: 30px;
font-family: 'Noto Sans JP', sans-serif;
}
.main-copy br.sp700{display: none;}
@media screen and (max-width: 1000px){
.main-copy{
width: 90%;
font-size: 22px;
}
}
@media screen and (max-width: 700px){
.main-copy{
font-size: 150%;
}
.main-copy br.sp700{display: inline;}
}
@media screen and (max-width: 500px){
.main-copy{
padding: 0.5em 0;
font-size: 125%;
line-height: 1.4;
}
}
@media screen and (max-width: 420px){
.main-copy{
font-size: 112%;
}
}


/*----------------------------------------------------
　service
------------------------------------------------------*/
#about{
	width:88%;
	max-width:844px;
	margin:0 auto;
	padding:2.25em 0 0;
}
#about h2{
	font-size:100%;
	margin:0 0 1.2em;
}
#about h2 img{
	width:100%;
	max-width:422px;
}
/*  
------------------------------------------*/
#about ul{
	clear:both;
	overflow:hidden;
  width: 90%;
  max-width: 640px;
	margin:0 auto 2.6em;
}
#about ul li{
  clear: both;
  overflow: hidden;
  margin: 0 0 1.5em;
	text-align:left;
}
/*#about ul li:before{
	content:"◆ ";
	color:#17458F;
}*/
#about ul li br.sp{

}

#about ul li h3{
  float: left;
  width: 8em;
  color:#17458F;
	font-size:112%;
}
#about ul li h3 .small{font-size: 75%;}
#about ul li .text{
  float: left;
	font-size:112%;
  line-height: 1.5;
}

@media screen and (max-width: 700px){
#about ul{
  width: 100%;
}
#about ul li{
  margin: 0 0 1.6em;
}
#about ul li br.sp{
display: none;
}
#about ul li h3{
  float: none;
  width: 100%;
  text-align: left;
	font-size:112%;
}
#about ul li .text{
  float: none;
	font-size:100%;
}

}


/*  
------------------------------------------*/

#about img{
	width:100%;
}
#about .banner img.tit{
	max-width:422px;
}
#about .banner{
	clear:both;
	overflow:hidden;
	margin:0 0 2.6em;
}


#about .banner a{
display: block;
text-decoration: none;
transition: 0.3s;
}

#about .banner a .banner-text{
display: block;
position: relative;
padding: 1em;
color:#17458F;
font-size: 180%;
font-weight: 500;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
letter-spacing: 0.2em;
border: 2px solid #000;
}
#about .banner a .banner-text:before {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -0.2em;
  transform: rotate(45deg);
}


#about .banner a:hover .banner-text,
#about .banner a:active .banner-text{
  transition: 0.3s;
  background: linear-gradient(rgba(0,0,0,0),rgba(23,69,143,0.3));
}




@media screen and (max-width: 700px){
#about .banner a .banner-text{
border: 1px solid #000;
}

}

/*----------------------------------------------------
　
------------------------------------------------------*/