/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #333;
	FONT-SIZE:20px;
    font-family:'Noto Sans JP', "Noto Serif" , sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 1600px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
    background: #fff;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#406ec8;
	font-weight: 500;
}

a:hover{
	outline:0;
	color: #ba9434;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

br.br1440,br.br1280,br.br1080,br.br835,br.br640,br.br480,br.br414{
display:none;
}
@media only screen and (max-width: 1440px) {
br.br1440{
display:inherit;
}
br.nobr1440{
display:none;
}
}
@media only screen and (max-width: 1280px) {
br.br1280{
display:inherit;
}
br.nobr1280{
display:none;
}
}
@media only screen and (max-width: 1080px) {
br.br1080{
display:inherit;
}
br.nobr1080{
display:none;
}
}
@media only screen and (max-width: 835px) {
br.br835{
display:inherit;
}
br.nobr835{
display:none;
}
}
@media only screen and (max-width: 640px) {
br.br640{
display:inherit;
}
br.nobr640{
display:none;
}
}
@media only screen and (max-width: 480px) {
br.br480{
display:inherit;
}
br.nobr480{
display:none;
}
}
@media only screen and (max-width: 414px) {
br.br414{
display:inherit;
}
br.nobr414{
display:none;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
width: 100%;
height: auto;
margin: 0;
padding: 10px 3%;
background: #f5f5f5;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
left: 0;
z-index: 9999;
}
@media only screen and (max-width: 1280px) {
header{
padding: 10px 1%;
}
}
@media only screen and (max-width: 1080px) {
header{
padding: 10px 1%;
}
}
@media only screen and (max-width: 480px) {
header{
padding: 15px 1%;
}
}

header > a {
  display: block;
  width: 35%;
  max-width: 300px;
}
header > a img {
  width: 100%; 
  height: auto;
  display: block;
}
@media only screen and (max-width: 1080px) {
header > a {
  width: 400px;
}
}
@media only screen and (max-width: 640px) {
header > a {
width: 300px;
}
}
@media only screen and (max-width: 480px) {
header > a {
width: 250px;
max-width: 250px;
}
}

#menu-box {
  width: 50%;
  height: auto;
  margin:10px 0 0;
  padding: 0;
}
@media only screen and (max-width: 1440px) {
#menu-box {
  width: 60%;
}
}
@media only screen and (max-width: 1280px) {
#menu-box {
  width: 70%;
}
}

menu {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
menu a.bno{
display: none;
}

menu ul {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
menu li {
  list-style-type: none;
  margin: 0;
  padding: 0 0 15px;
  text-align: center;
  font-size: 17px;
  line-height: 100%;
  flex: 1 0 auto;
  color: #999;
background: url(image/menu-li.png) no-repeat center bottom/70px;
}
menu li:has(a) {
  background: none;
}
menu li a:link,
menu li a:visited {
  height: auto;
  text-decoration: none;
  color: #333;
  font-weight: 400;
  line-height: 100%;
}
menu li a:hover {
  text-decoration: underline;
}
menu li:last-of-type a:link,
menu li:last-of-type a:visited {
  height: auto;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  line-height: 100%;
  background: #28a745;
  border-radius: 60px;
  padding: 10px 25px;
}
menu li:last-of-type a:hover{
background: #178831;
}
@media only screen and (max-width:1080px) {
#menu-box{
clear: both;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9999;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
position: fixed;
top: 0;
background: rgba(0,76,134,0.9);
}
menu a.bno{
display: inherit;
width: 100%;
background: #f5f5f5;
text-align: left;
padding: 5px 0 5px 1%;
}
menu a.bno img{
max-width:300px;
}
menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: -15px 0 0;
padding: 0;
text-align: center;
flex-direction: column;
}
menu li{
display: block;
border-top:1px solid #fff;
padding: 25px 0 10px;
margin: 15px 0 0;
}
menu li a:link,menu li a:visited{
display: block;
text-decoration: none;
color: #fff;
padding:0;
text-align: center;
line-height: 100%;
font-size: 17px;
}
menu li a:hover{
text-decoration: underline;
}
menu li:last-of-type a:link,
menu li:last-of-type a:visited {
width: 50%;
margin: 0 auto;
  padding: 25px 25px;
}
menu li:last-of-type a:hover{
background: #178831;
}
@media only screen and (max-width: 640px) {
menu li{
padding: 35px 0 20px;
}
}
@media only screen and (max-width: 480px) {
menu a.bno img{
max-width:250px;
}
menu li{
padding: 30px 0 15px;
}
menu li:last-of-type a:link,
menu li:last-of-type a:visited {
width: 70%;
}
menu li:last-of-type a:hover{
background: #178831;
}
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#0081cc;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 999;
  border: 2px solid #fff;
}
/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:-1px;
  left:-0px;
  font-size: 0.8rem;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
#fv{
width: 100%;
height: 750px;
margin: 0 0 100px;
padding: 0 0 0 45%; 
background: url(image/top.webp) no-repeat center bottom/cover;
}
@media only screen and (max-width: 1440px) {
#fv{
height: 700px;
}
}
@media only screen and (max-width: 1280px) {
#fv{
height: 650px;
}
}
@media only screen and (max-width: 1080px) {
#fv{
height: 550px;
padding: 0 0 0 35%; 
}
}
@media only screen and (max-width: 835px) {
#fv{
height: 450px;
margin: 0 0 80px;
padding: 0 0 0 25%; 
}
}
@media only screen and (max-width: 640px) {
#fv{
height: 450px;
margin: 0 0 60px;
padding: 0; 
background: url(image/top.webp) no-repeat center 100px/700px;
}
}
@media only screen and (max-width: 480px) {
#fv{
height: 400px;
background: url(image/top.webp) no-repeat center 90px/600px;
}
}
@media only screen and (max-width: 414px) {
#fv{
height: 330px;
margin: 0 0 60px;
background: url(image/top.webp) no-repeat center 80px/500px;
}
}

#fv h1{
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 25px 3%;
background: #0081cc;
color: #fff;
font-size: 50px;
line-height: 130%;
text-align: left;
font-weight: 700;
}
#fv p{
text-align: left;
font-size: 30px;
line-height: 150%;
margin: 0;
color: #fff;
font-weight: 600;
text-shadow: 2px 2px 5px #777,-2px -2px 5px #777,-2px 2px 5px #777,2px -2px 5px #777;
}
@media only screen and (max-width: 1440px) {
#fv h1{
font-size: 45px;
}
}
@media only screen and (max-width: 1280px) {
#fv h1{
padding: 25px 3%;
font-size: 40px;
}
#fv p{
font-size: 25px;
}
}
@media only screen and (max-width: 1080px) {
#fv h1{
padding: 20px 3%;
font-size: 35px;
}
}
@media only screen and (max-width: 835px) {
#fv h1{
font-size: 30px;
}
#fv p{
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
#fv h1{
padding: 15px 3%;
font-size: 30px;
}
#fv p{
font-size: 20px;
margin: 0 3% 0 30%;
}
}
@media only screen and (max-width: 480px) {
#fv h1{
font-size: 25px;
}
}
@media only screen and (max-width: 414px) {
#fv h1{
font-size: 22px;
}
#fv p{
font-size: 18px;
}
}

#fv-sub{
width: 100%;
height:400px;
margin: 0 0 80px;
padding: 0 0 0 3%; 
background: url(image/fv-ser.webp) no-repeat right bottom/contain,#0081cc;
display: flex;
align-items: center;
}
#fv-sub.fo{
background: url(image/fv-office.webp) no-repeat right bottom/contain,#0081cc;
}
#fv-sub.job{
background: url(image/fv-job.webp) no-repeat right bottom/contain,#0081cc;
}
#fv-sub.mail{
background: url(image/fv-mail.webp) no-repeat right bottom/contain,#0081cc;
}
#fv-sub h1{
width: 100%;
height: auto;
margin: 0;
padding: 0;
color: #fff;
font-size: 50px;
line-height: 130%;
text-align: left;
font-weight: 700;
}
@media only screen and (max-width: 1280px) {
#fv-sub{
height:350px;
}
#fv-sub h1{
font-size: 45px;
}
}
@media only screen and (max-width: 1080px) {
#fv-sub{
height:300px;
}
#fv-sub h1{
font-size: 40px;
}
}
@media only screen and (max-width: 835px) {
#fv-sub{
height:250px;
}
#fv-sub h1{
font-size:35px;
text-shadow: 2px 2px 2px #0081cc,-2px -2px 2px #0081cc,-2px 2px 2px #0081cc,2px -2px 2px #0081cc;
}
}
@media only screen and (max-width: 640px) {
#fv-sub{
height:200px;
margin: 0 0 60px;
}
#fv-sub h1{
font-size:30px;
}
}
@media only screen and (max-width: 480px) {
#fv-sub{
height:150px;
}
}

main.sub-page{
width: 100%;
height: auto;
margin: 0;
padding: 0 15% 80px;
}
@media only screen and (max-width: 1280px) {
main.sub-page{
padding: 0 10% 80px;
}
}
@media only screen and (max-width: 1080px) {
main.sub-page{
padding: 0 5% 60px;
}
}
@media only screen and (max-width: 835px) {
main.sub-page{
padding: 0 5% 40px;
}
}

#tsuyomi{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 480px) {
#tsuyomi{
padding: 0 5% 30px;
}
}

main h2{
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
text-align: center;
font-weight: 800;
line-height: 100%;
font-size: 50px;
color: #004c86;
}
@media only screen and (max-width: 1080px) {
main h2{
margin: 0 0 60px;
font-size: 45px;
}
}
@media only screen and (max-width: 835px) {
main h2{
margin: 0 0 50px;
font-size: 40px;
line-height: 120%;
}
}
@media only screen and (max-width: 640px) {
main h2{
margin: 0 0 40px;
font-size: 35px;
}
}
@media only screen and (max-width: 480px) {
main h2{
margin: 0 0 30px;
font-size: 30px;
}
}

#tsuyomi-area{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 5%;
display: flex;
justify-content:center;
gap: 80px;
}
@media only screen and (max-width: 1440px) {
#tsuyomi-area{
padding: 0;
}
}
@media only screen and (max-width: 1280px) {
#tsuyomi-area{
padding: 0 2%;
gap: 40px;
}
}
@media only screen and (max-width: 1080px) {
#tsuyomi-area{
flex-direction: column;
}
}
@media only screen and (max-width: 640px) {
#tsuyomi-area{
gap: 60px;
}
}
@media only screen and (max-width: 480px) {
#tsuyomi-area{
gap: 40px;
}
}

.tsuyomi-box{
flex: 1;
margin: 0 1%;
}
.tsuyomi-box img{
max-width:60%;
margin: 0 0 15px;
}
@media only screen and (max-width: 1440px) {
.tsuyomi-box{
margin: 0 1%;
}
@media only screen and (max-width: 1280px) {
.tsuyomi-box{
margin: 0;
}
}
}
@media only screen and (max-width: 1080px) {
.tsuyomi-box img{
max-width: 30%;
}
}
@media only screen and (max-width: 835px) {
.tsuyomi-box img{
max-width: 40%;
}
}
@media only screen and (max-width: 640px) {
.tsuyomi-box img{
max-width: 50%;
}
}
@media only screen and (max-width: 480px) {
.tsuyomi-box img{
max-width: 60%;
}
}
@media only screen and (max-width: 414px) {
.tsuyomi-box img{
max-width: 70%;
}
}

.tsuyomi-box h3{
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: center;
line-height: 130%;
font-size: 25px;
font-weight: 800;
}
.tsuyomi-box p{
text-align: center;
margin: 0;
line-height: 180%;
font-size: 18px;
}
@media only screen and (max-width: 1080px) {
.tsuyomi-box h3{
font-size: 25px;
}
.tsuyomi-box p{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
.tsuyomi-box p{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
.tsuyomi-box p{
text-align: justify;
}
}

.link-box{
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
}
.link-box a:link,.link-box a:visited{
display: block;
width: 25%;
margin: 0 auto;
background: url(image/link.png) no-repeat 15px 50%/25px,#fff;
border: 2px solid #28a745;
border-radius: 80px;
padding: 15px 30px;
text-decoration: none;
color: #28a745;
font-size: 20px;
line-height: 100%;
}
#bosyu .link-box a:link{
width: 80%;
}
@media only screen and (max-width: 1280px) {
.link-box a:link,.link-box a:visited{
width: 35%;
}
#bosyu .link-box{
margin: 0 0 40px;
}
}
@media only screen and (max-width: 1080px) {
.link-box a:link,.link-box a:visited{
width: 45%;
background: url(image/link.png) no-repeat 15px 50%/25px,#fff;
}
#bosyu .link-box{
margin: 0 0 20px;
}
}
@media only screen and (max-width: 835px) {
.link-box a:link,.link-box a:visited{
width: 60%;
}
}
@media only screen and (max-width: 640px) {
.link-box{
margin: 0 0 60px;
}
.link-box a:link,.link-box a:visited{
width: 70%;
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
.link-box{
margin: 0 0 40px;
}
.link-box a:link,.link-box a:visited{
width: 80%;
font-size: 16px;
}
#bosyu .link-box a:link{
width: 90%;
}
}
@media only screen and (max-width: 414px) {
.link-box a:link,.link-box a:visited{
width: 90%;
font-size: 16px;
}
#bosyu .link-box a:link{
width: 100%;
}
}
.link-box a:hover{
background: url(image/link.png) no-repeat 15px 50%/25px,#eee;
}

#top-service{
width: 100%;
height: auto;
margin: 0;
padding: 80px 10% 20px;
background: #f5f5f5;
}
@media only screen and (max-width: 1600px) {
#top-service{
padding: 80px 0% 20px;
}
}
@media only screen and (max-width: 480px) {
#top-service{
padding:60px 5% 20px;
}
}
@media only screen and (max-width: 835px) {
#top-service{
padding:60px 5% 5px;
}
}

#top-ser-area{
width: 100%;
height: auto;
margin: 0;
padding: 0 10%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
@media only screen and (max-width: 1600px) {
#top-ser-area{
padding: 0 5%;
}
}
@media only screen and (max-width: 1440px) {
#top-ser-area{
padding: 0;
}
}
@media only screen and (max-width: 1280px) {
#top-ser-area{
padding: 0 5%;
}
}
@media only screen and (max-width: 835px) {
#top-ser-area{
flex-direction: column;
}
}

.top-ser-box{
width: 47%;
background: #fff;
margin: 0 0 50px;
padding: 40px 30px 10px;
display: flex;
justify-content:center;
align-items: flex-start;
}
@media only screen and (max-width: 1280px) {
.top-ser-box{
width: 50%;
padding: 30px 20px 5px;
}
}
@media only screen and (max-width: 835px) {
.top-ser-box{
width: 100%;
margin: 0 0 30px;
padding: 20px 15px 5px;
}
}

.top-ser-box img{
max-width: 15%;
}
.top-ser-text{
width: 85%;
text-align: left;
padding: 0 0 0 5%;
}
.top-ser-box h3{
text-align: left;
margin: 0 0 10px;
padding: 0;
font-size: 25px;
line-height: 100%;
font-weight: 700;
}
.top-ser-text p{
text-align: justify;
font-size: 18px;
line-height: 180%;
margin: 0 0 30px;
}
.top-ser-text p strong{
font-weight: 700;
}
@media only screen and (max-width: 1280px) {
.top-ser-box img{
max-width: 20%;
max-height: 120px;
}
.top-ser-box h3{
font-size: 25px;
margin: 0 0 20px;
}
.top-ser-text p{
font-size: 18px;
margin: 0 0 20px;
line-height: 150%;
}
}
@media only screen and (max-width: 1080px) {
.top-ser-box img{
max-width: 20%;
max-height: 100px;
}
.top-ser-text p{
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
.top-ser-box img{
max-width: 15%;
max-height: 120px;
}
.top-ser-text p{
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
.top-ser-box h3{
font-size: 22px;
margin: 0 0 20px;
}
}

#aed{
width: 100%;
height: auto;
margin: 0;
padding: 80px 10% 40px;
}
@media only screen and (max-width: 1440px) {
#aed{
padding: 80px 5% 40px;
}
}
@media only screen and (max-width: 1080px) {
#aed{
padding: 80px 5% 40px;
}
}
@media only screen and (max-width: 640px) {
#aed{
padding: 60px 5% 30px;
}
}
@media only screen and (max-width: 480px) {
#aed{
padding: 40px 5% 20px;
}
}

main p{
text-align: center;
font-size: 18px;
line-height: 180%;
margin: 0 0 40px;
padding: 0;
}
main p.p1{
font-size: 25px;
}
@media only screen and (max-width: 1280px) {
main p{
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
main p{
font-size: 18px;
}
}
@media only screen and (max-width:835px) {
main p{
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
main p{
font-size: 16px;
line-height: 160%;
margin: 0 0 30px;
}
main p.p1{
font-size: 20px;
}
}

#aed-area{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 5% 0;
display: flex;
align-items: flex-start;
}
@media only screen and (max-width: 1280px) {
#aed-area{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 5% 0;
display: flex;
align-items: flex-start;
}
}
@media only screen and (max-width: 835px) {
#aed-area{
flex-direction: column;
}
}
@media only screen and (max-width: 480px) {
#aed-area{
margin: 0 0 10px;
}
}

#aed-pict{
width: 40%;
display: flex;
flex-wrap: wrap;
}
#aed-pict img{
max-width: 46%;
margin: 0 2% 20px;
}
@media only screen and (max-width: 1600px) {
#aed-pict{
width: 40%;
align-items: flex-start;
justify-content:center;
}
}
@media only screen and (max-width: 835px) {
#aed-pict{
width: 100%;
margin: 0 0 30px;
}
#aed-pict img{
max-width: 23%;
margin: 0 1% 0;
}
}
@media only screen and (max-width: 640px) {
#aed-pict img{
max-width: 46%;
margin: 0 2% 20px;
}
}

#aed-text{
width:60%;
padding: 0 0 0 5%;
}
.aed-textbox{
width: 100%;
height: auto;
margin: 0 0 60px;
}
@media only screen and (max-width: 1600px) {
#aed-text{
width:60%;
padding: 0 0 0 5%;
}
}
@media only screen and (max-width: 1080px) {
.aed-textbox{
margin: 0 0 30px;
}
}
@media only screen and (max-width: 835px) {
#aed-text{
width:100%;
padding: 0;
}
}
#aed-text h4{
width: 100%;
height: auto;
margin: 0 0 10px;
padding:0 0 10px;
text-align: left;
line-height: 120%;
font-size: 25px;
font-weight: 600;
border-bottom:3px solid #0081cc;
}
#aed-text p{
text-align: justify;
font-size: 18px;
line-height: 180%;
}
@media only screen and (max-width: 1080px) {
#aed-text h4{
font-size: 22px;
}
#aed-text p{
font-size: 18px;
line-height: 160%;
}
}
@media only screen and (max-width: 640px) {
#aed-text p{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
#aed-text h4{
font-size: 20px;
}
}

#bosyu{
width: 100%;
height: auto;
margin: 0;
padding: 50px 5% 5px 50%;
background: url(image/bosyu.webp) no-repeat left top/contain,#004c86;
}
@media only screen and (max-width: 1440px) {
#bosyu{
padding: 50px 5% 5px 40%;
}
}
@media only screen and (max-width: 1280px) {
#bosyu{
padding: 50px 5% 5px 35%;
}
}
@media only screen and (max-width: 1080px) {
#bosyu{
padding: 30px 5% 5px 25%;
}
}
@media only screen and (max-width: 835px) {
#bosyu{
padding: 30px 5% 5px 5%;
background: url(image/bosyu.webp) no-repeat left top/cover,#004c86;
}
}

#bosyu h5{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 10px;
text-align: left;
line-height: 100%;
color: #fff;
font-weight: 800;
border-bottom: 5px solid #fff;
font-size: 40px;
}
#bosyu-area{
display: flex;
margin: 0 0 30px;
}
#bosyu-area p{
text-align: left;
font-size: 20px;
color: #fff;
line-height: 180%;
margin: 0 5% 0 0;
font-weight: 600;
}
#bosyu-area p strong{
background: url(image/bosyu-l.png) no-repeat left bottom/25px,url(image/bosyu-r.png) no-repeat right bottom/25px;
padding: 0 30px;
font-size: 25px;
}
@media only screen and (max-width: 1280px) {
#bosyu h5{
font-size: 35px;
border-bottom:3px solid #fff;
}
#bosyu-area p{
font-size: 18px;
}
}
@media only screen and (max-width: 1080px) {
#bosyu-area{
margin: 0 0 5px;
}
#bosyu h5{
font-size: 30px;
}
#bosyu-area p{
font-size: 16px;
}
#bosyu-area p strong{
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
#bosyu-area{
flex-direction: column;
}
#bosyu-area p{
margin: 0 0 15px;
font-weight: 800;
}
}

/* フェードイン(基本) */
.js-fadeUp {
  opacity: 0; 
  transform: translateY(50px);
  transition: opacity .8s, transform 1.2s; 
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; 
}

#service{
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
@media only screen and (max-width: 640px) {
#service{
margin:50px 0 0;
}
}

.service-box{
margin: 0 0 50px;
display: flex;
align-items: flex-start;
}
.service-box img{
max-width: 40%;
}
@media only screen and (max-width: 1280px) {
.service-box img{
max-width: 30%;
}
}
@media only screen and (max-width: 640px) {
.service-box{
margin: 0 0 40px;
flex-direction: column;
align-items: center;
}
.service-box img{
max-width: 60%;
margin: 0 0 20px;
}
}
@media only screen and (max-width: 480px) {
.service-box img{
max-width: 70%;
}
}
@media only screen and (max-width: 414px) {
.service-box img{
max-width: 80%;
}
}

.service-text{
padding: 0 0 0 5%;
}
.service-box h3{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 5px 0 5px 15px;
text-align: left;
font-weight: 800;
line-height: 120%;
font-size: 30px;
border-left:20px solid #0081cc;
}
.service-box p{
text-align: left;
margin: 0;
}
@media only screen and (max-width: 1080px) {
.service-box h3{
font-size: 25px;
margin: 0 0 10px;
}
}
@media only screen and (max-width: 640px) {
.service-text{
padding: 0;
}
.service-box h3{
border-left:15px solid #0081cc;
}
}
@media only screen and (max-width: 480px) {
.service-box h3{
font-size: 20px;
padding: 5px 0 5px 10px;
}
}

#office{
}

#office-info{
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 40px 0 40px;
border: 1px solid #0081cc;
border-radius: 15px;
display: flex;
align-items: flex-start;
}
#office-info-text{
width: 60%;
padding: 0 5% 0 0;
}
main #office-info h2{
background: #bce6f9;
font-size: 35px;
padding: 15px;
text-align: left;
margin: 0 0 20px;
font-weight: 500;
}
main #office-info p{
margin: 0 0 0 3%;
text-align: justify;
}
#office-info img{
max-width: 35%;
}
@media only screen and (max-width: 1080px) {
#office-info{
padding: 30px 0 30px;
}
main #office-info h2{
font-size: 30px;
}
}
@media only screen and (max-width: 835px) {
#office-info{
margin: 0 0 80px;
flex-direction: column;
align-items: center;
}
#office-info-text{
width: 100%;
padding: 0;
}
main #office-info p{
margin: 0 3% 0 3%;
}
#office-info img{
max-width:60%;
margin: 30px 0 0;
}
}
@media only screen and (max-width: 640px) {
#office-info{
margin: 0 0 60px;
padding: 20px 0 20px;
}
main #office-info h2{
font-size: 25px;
}
#office-info img{
max-width:70%;
margin: 20px 0 0;
}
}
@media only screen and (max-width: 480px) {
#office-info{
margin: 0 0 40px;
}
#office-info img{
max-width:80%;
}
}
@media only screen and (max-width: 414px) {
#office-info img{
max-width:90%;
}
}

#office h3{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 10px 1% 10px;
text-align: left;
font-size: 30px;
font-weight: 400;
line-height: 100%;
color: #004c86;
border-bottom: 1px solid #004c86;
border-top: 1px solid #004c86;
background: #f5f5f5;
}
@media only screen and (max-width: 1080px) {
#office h3{
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#office h3{
font-size: 22px;
}
}

#office p{
text-align: left;
}

#office dl{
width:100%;
height: auto;
margin: 0 0 80px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#office dt{
width: 20%;
margin: 0 0 15px;
padding: 0 0 15px;
text-align: left;
font-size: 20px;
font-weight: 600;
line-height: 120%;
border-bottom: 1px dashed #999;
}
#office dd{
width: 80%;
margin: 0 0 15px;
padding: 0 0 15px 2%;
text-align: left;
font-size: 20px;
line-height: 120%;
border-bottom: 1px dashed #999;
}
@media only screen and (max-width: 835px) {
#office dt{
font-size: 18px;
}
#office dd{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
#office dt{
width: 20%;
font-size: 16px;
}
#office dd{
width: 80%;
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
#office dl{
margin: 0 0 50px;
flex-direction: column;
}
#office dt{
width: 100%;
margin: 0 0 5px;
padding: 0;
border-bottom: none;
}
#office dd{
width: 100%;
margin: 0 0 15px;
padding: 0 0 15px;
}
}

iframe{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 640px) {
iframe{
height: 400px;
}
}
@media only screen and (max-width: 480px) {
iframe{
height: 300px;
}
}

#job{
}

#job ol{
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
#job ol li{
width: 22%;
list-style-type: none;
border: 1px solid #0081cc;
color: #0081cc;
border-radius: 50px;
padding: 5px 15px;
font-size: 18px;
line-height: 100%;
}
@media only screen and (max-width: 1080px) {
#job ol li{
width: 31%;
}
}
@media only screen and (max-width: 640px) {
#job ol{
margin: 0 0 50px;
gap: 4%;
}
#job ol li{
width: auto;
flex: 1 1 calc(50% - 4%);
box-sizing: border-box;
margin: 0 0 10px;
}
}
@media only screen and (max-width: 480px) {
#job ol{
margin: 0 0 30px;
}
#job ol li{
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
#job ol li{
font-size: 14px;
padding: 5px auto;
}
}

#job ul{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
}
#job ul li{
font-size: 18px;
line-height: 120%;
margin: 0 0 15px;
text-align: left;
list-style-position: inside;
}
@media only screen and (max-width: 640px) {
#job ul{
margin: 0 0 20px;
}
#job ul li{
font-size: 16px;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 414px) {
#job ul li{
font-size: 15px;
margin: 0 0 10px;
}
}

#job h2{
font-size: 35px;
line-height: 130%;
}
@media only screen and (max-width: 640px) {
#job h2{
font-size: 30px;
}
}
@media only screen and (max-width: 480px) {
#job h2{
font-size: 25px;
text-align: left;
}
}
#job h3{
clear: both;
width: 100%;
height: auto;
margin: 80px 0 20px;
padding: 10px 10px 10px 20px;
text-align: left;
font-size: 25px;
font-weight: 500;
line-height: 120%;
background: #555;
border-left: 20px solid #0081cc;
color: #fff;
}
#job h4{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 5px;
text-align: left;
font-size: 22px;
font-weight: 500;
line-height: 120%;
border-bottom: 1px solid #333;
}
#job h5{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 15px;
text-align: left;
font-size: 22px;
border: 1px solid #ccc;
border-radius: 7px;
font-weight: 500;
color: #0081cc;
}
@media only screen and (max-width: 640px) {
#job h3{
margin: 60px 0 20px;
padding: 10px 10px 10px 20px;
font-size: 20px;
border-left: 20px solid #0081cc;
}
#job h4{
margin: 0 0 15px;
font-size: 20px;
}
#job h5{
margin: 0 0 15px;
padding: 10px;
font-size: 20px;
}
}

#job p{
text-align: left;
line-height: 200%;
font-size: 18px;
margin: 0 0 40px;
}
#job p.p-last{
text-align: center;
font-size: 30px;
line-height: 150%;
font-weight: 500;
color: #0081cc;
}
#job p strong{
font-size: 22px;
font-weight:800;
}
.f-blue{
color: #0081cc;
font-size: 27px;
font-weight: 800;
}
.f-big{
font-size: 30px;
font-weight: 500;
}
@media only screen and (max-width: 835px) {
#job p.p-last{
font-size: 25px;
}
}
@media only screen and (max-width: 640px) {
#job p{
font-size: 18px;
margin: 0 0 30px;
line-height: 190%;
text-align: justify;
}
#job p.p-last{
font-size: 22px;
font-weight: 700;
}
.f-big{
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#job p{
font-size: 16px;
line-height: 170%;
}
#job p strong{
font-size: 20px;
}
#job p.p-last{
font-size: 20px;
font-weight: 700;
}
.f-big{
font-size: 20px;
font-weight: 700;
}
.f-blue{
font-size: 25px;
line-height: 180%;
}
}

#job dl{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 40% 0 0;
display: flex;
flex-wrap: wrap;
}
#job dt{
width: 25%;
height: auto;
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px dotted #0081cc;
font-size: 18px;
line-height: 120%;
text-align:right;
}
#job dd{
text-align: left;
width: 75%;
margin: 0 0 15px;
padding: 0 0 15px 5%;
font-size: 18px;
line-height: 120%;
border-bottom: 1px dotted #0081cc;
}
@media only screen and (max-width: 1600px) {
#job dl{
padding: 0 30% 0 0;
}
}
@media only screen and (max-width: 1440px) {
#job dl{
padding: 0 20% 0 0;
}
}
@media only screen and (max-width: 1280px) {
#job dt{
width: 25%;
font-size: 17px;
}
#job dd{
width: 75%;
font-size: 17px;
}
}
@media only screen and (max-width: 1080px) {
#job dl{
padding: 0 10% 0 0;
}
}
@media only screen and (max-width: 835px) {
#job dl{
padding: 0;
}
#job dt{
width: 20%;
font-size: 16px;
}
#job dd{
width:80%;
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
#job dl{
flex-direction: column;
}
#job dt{
width: 100%;
margin: 0 0 10px;
padding: 0;
font-size: 16px;
text-align: left;
font-weight: 700;
border-bottom: none;
}
#job dd{
width:100%;
margin: 0 0 15px;
padding: 0 0 15px;
font-size: 16px;
text-indent: 1em;
}
}
@media only screen and (max-width: 480px) {
#job dl{
margin: 0;
}
}

.job-area{
width: 100%;
height: auto;
margin: 0 0 40px;
display: flex;
gap: 40px;
justify-content:space-between;
align-items: flex-start;
}
.job-box{
flex: 1;
border: 1px solid #999;
border-radius: 7px;
padding: 30px 30px 0;
align-self:stretch;
}
@media only screen and (max-width: 1080px) {
.job-area{
gap:30px;
}
.job-box{
padding: 20px 20px 0;
}
}
@media only screen and (max-width: 835px) {
.job-area{
flex-direction: column;
}
.job-box{
padding: 30px 30px 0;
}
}
@media only screen and (max-width: 640px) {
.job-area{
gap:20px;
}
.job-box{
padding: 20px 20px 0;
}
}
@media only screen and (max-width: 480px) {
.job-box{
padding: 15px 15px 0;
}
}

#mail{
clear: both;
width: 100%;
height: auto;
margin: 0 0 120px;
padding: 0;
}

main #mail h2{
font-size: 30px;
margin: 0 0 30px;
}
main #mail p{
text-align: left;
line-height: 180%;
}
@media only screen and (max-width: 835px) {
main #mail p{
font-size: 19px;
}
}
@media only screen and (max-width: 640px) {
main #mail h2{
font-size: 25px;
margin: 0 0 20px;
}
main #mail p{
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
main #mail p{
font-size: 16px;
text-align: justify;
}
}

#mail-info{
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0;
display: flex;
align-items: center;
justify-content:center;
gap: 15px;
}
#mail-info a:link,#mail-info a:visited{
font-size: 35px;
font-weight: 800;
line-height: 100%;
color: #111;
}
@media only screen and (max-width: 640px) {
#mail-info{
margin: 0 0 70px;
flex-wrap: wrap;
}
}

form{
clear: both;
width:100%;
height: auto;
margin: 0 auto;
padding: 0;
text-align: center;
}

.hissu{
font-size: 12px;
border-radius: 5px;
background: #033f7e;
color:#fff;
padding: 0 5px 1px;
margin: 0 0 0 2%;
}
#mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:10px 0 50px;
	padding:10px 0;
	text-align:center;
}
@media only screen and (max-width: 640px) {
#mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0 0 50px;
	padding:0;
	text-align:center;
}
}

table {
	clear:both;
	width:100%;
	margin:5px 0 20px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
table hr{
border-top:1px dashed #333;
border-left:none;
border-right:none;
border-bottom:none;
}

#sub-page table p{
font-size: 15px;
line-height: 120%;
margin: 0 0 10px;
padding: 0;
}

table caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:25px 0 20px;
text-align: center;
font-size: 25px;
line-height: 100%;
font-weight: 500;
border-radius: 10px 10px 0 0;
background: #9ddbf8;
}
@media only screen and (max-width: 640px) {
table caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:20px 0 15px;
text-align: center;
font-size: 20px;
line-height: 100%;
font-weight: 500;
border-radius: 10px 10px 0 0;
background: #9ddbf8;
}
}

th{
	width:30%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 17px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 17px;
}
@media only screen and (max-width: 1080px) {
th{
	width:30%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
th{
	width:40%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 14px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
th{
clear: both;
float: left;
	width:100%;
	background:#eee;
	text-align:left;
	font-weight: normal;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 15px;
	line-height: 150%;
	}
td{
clear: both;
float: left;
width: 100%;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 15px;
}
td.bno{
border-bottom:none;
}
#sub-page table p{
font-size: 13px;
line-height: 120%;
margin: 0 0 10px;
padding: 0;
}
}
@media only screen and (max-width: 480px) {
th{
clear: both;
float: left;
	width:100%;
	background:#eee;
	text-align:left;
	font-weight: normal;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 14px;
	line-height: 150%;
	}
td{
clear: both;
float: left;
width: 100%;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 14px;
}
}

textarea,input[type="text"] ,input[type="email"]{
width: 100%;
}
input[type="text"].s70{
width: 75%;
}
select{
width: 20%;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 640px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
line-height: 150%;
}
input[type="text"].s70{
width: 100%;
margin: 5px 0 0;
}
select{
width: 23%;
margin: 0 2% 0 0;
}
select.s30{
width: 35%;
margin: 0 2% 0 0;
}
}
@media only screen and (max-width: 480px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding: 5px;
}
textarea{
font-size: 14px;
}
}

input.btn_submit,input.btn_submit2{
 width:150px;
 height:50px;
 background: #ef3876;
 border-radius: 10px;
 box-shadow: 2px 2px 3px #aaa;
 border: 2px solid #fff;
 font-size: 20px;
 font-weight: 500;
 color: #fff;
 line-height: 46px;
}
input.btn_submit2{
 width:100px;
 height:40px;
  line-height: 36px;
   background: #dddddd;
 color: #555;
 font-size: 15px;
 margin: 0 0 0 2%;
}

input.btn_submit:hover {
 background: #f67ba3;
 cursor: pointer;
}

input.btn_submit2:hover {
 background: #ccc;
  cursor: pointer;
}

form strong{
color: #ef3876;
}
label{
 cursor: pointer;
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
} 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#1c9a6b;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#181f59;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
width: 100%;
height: auto;
margin: 0;
padding: 40px 5%;
background: #444444;
display: flex;
justify-content:space-between;
align-items: center;
}
address{
text-align: left;
font-style: normal;
font-size: 20px;
color: #fff;
line-height: 150%;
}
address h6{
width: 100%;
font-size: 25px;
line-height: 150%;
font-weight: 600;
margin: 0 0 15px;
}
@media only screen and (max-width: 1280px) {
footer{
padding: 30px 5%;
}
address{
font-size: 16px;
}
address h6{
font-size: 20px;
margin: 0 0 5px;
font-weight: 800;
}
}
@media only screen and (max-width: 1080px) {
footer{
flex-direction: column;
padding: 20px 5%;
}
address{
width: 100%;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
footer{
padding: 15px 5%;
}
address{
font-size: 14px;
color: #999;
}
address h6{
font-size: 16px;
color: #fff;
}
}

footer ul{
margin: 0;
padding: 0;
display: flex;
width: 50%;
justify-content:space-between;
}
footer li{
list-style-type: none;
margin: 0;
color: #999;
font-size: 16px;
line-height: 100%;
}
footer li a:link,footer li a:visited{
text-decoration: none;
color: #fff;
}
footer li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
footer ul{
width:60%;
}
}
@media only screen and (max-width: 1080px) {
footer ul{
display: none;
}
}