/* margin 共通設定 -------------------------------------------------*/

.m-b-10{
margin-bottom: 10px;
}

.m-b-20{
margin-bottom: 20px;
}

.m-b-30{
margin-bottom: 30px;
}

.m-b-40{
margin-bottom: 40px;
}

.m-b-50{
margin-bottom: 50px;
}

.m-b-60{
margin-bottom: 60px;
}

.m-b-70{
margin-bottom: 70px;
}

.m-b-80{
margin-bottom: 80px;
}

.m-b-90{
margin-bottom: 90px;
}

.m-b-100{
margin-bottom: 100px;
}

.red{
color: red;
}


/* xs -------------------------------------------------------------*/


.container{
   max-width: 479px;
   }

header{
padding-bottom: 50px;
}

p{
margin-bottom: 0;
}

h1{
padding: 1rem 0;
font-size: 1.2rem;
/*margin-bottom: 30px;*/
}

h2,h4{
font-size: 2.6rem;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}

h4{
font-size: 2.6rem;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}

nav.top-nav ul li a{
font-size: 1.8rem;
    font-weight: bold;
    display: block;
    /*margin: 0 10%;*/
    padding: 10px 0 15px;
    letter-spacing: 0.1em;
    transition: 0.3s;
    position: relative;
    text-align: center;
    padding: 1rem;
    color: #003D91;
    text-decoration: underline;
}

.section-area{
padding-top: 50px;
}

.logo{
margin-bottom: 50px;
}

.section-text{
font-weight: bold;
text-align: center;
}

.more-btn{
width: 280px;
text-align: center;
position: relative;
margin:40px auto 80px;
}

.more-btn i{
position: absolute;
top: 37%;
right: 10%;
}


.more-btn a{
    font-weight: bold;
    display: block;
    padding: 20px;
    font-size: 2.0rem;
    border: 3px solid #0051A4;
    letter-spacing: 0.2em;
    color: #0051A4;
    background-color: #fff;
}

.more-btn a:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0097ff+0,003d91+100 */
background: #0097ff; /* Old browsers */
background: -moz-linear-gradient(left,  #0097ff 0%, #003d91 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0097ff 0%,#003d91 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0097ff 0%,#003d91 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097ff', endColorstr='#003d91',GradientType=1 ); /* IE6-9 */

	/*transition: 0.3s;*/
    text-decoration: none;
    color: #fff;
    border:none;
    padding: 23px 20px;
}

.unit-area-01,.unit-area-02,.unit-area-03{
position: relative;
overflow: hidden;
}

.section-title{
font-family: 'Lato', sans-serif;
    background-color: #1681E6;
    padding: 5px 15% 5px 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    transform: rotate(-45deg);
    position: absolute;
    width: 50%;
    top: 0;
    left: -10%;
    z-index: 9;
}

.unit-area-02 .section-title{
background-color: #1681E6;
}

.unit-area-02 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #fff;
padding: 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0097ff+0,003d91+100 */
background: #0097ff; /* Old browsers */
background: -moz-linear-gradient(left,  #0097ff 0%, #003d91 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0097ff 0%,#003d91 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0097ff 0%,#003d91 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097ff', endColorstr='#003d91',GradientType=1 ); /* IE6-9 */

margin-bottom: 50px;
}

.unit-area-02 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #fff;
margin: 10px auto 0;
}

.recruit-list li{
font-weight: bold;
text-align: center;
line-height: 2em;
}

.unit-area-03 .section-title{
background-color: #681E6;
}

.info-area{
background-color:#e4ffff;
padding: 20px;
margin-bottom: 20px;
}

.unit-area-03{
padding-bottom: 40px;
}

.i-b{
display: inline-block;
}

.footer-logo-area{
text-align: center;
}

.footer-logo-area img{
height:65px; 
margin-bottom: 20px;
}

.unit-area-05{
background-color: #003D91;
}

footer{
padding: 30px 0 10px;
}

copy p{
text-align: center;
font-size: 1.2rem;
color: #fff;
}

.sp-footer-menu{
text-align: center;
line-height: 2em;
}

.space-adjust-01{
height: 75px;
}

.service-heading-img{
float:left;
width: 20%;
}

.service-heading-img img{
height: auto;
width: auto;
}

.service-heading-area{
float: left;
width: 80%;
padding-left: 10px;
}

.service-heading-area h3{
font-size: 1.7rem;
font-weight: bold;
color: #0051A4;
}

.heading-unit-back{
background-color: #B9DCFF;
}

.service-heading-unit{
background-color: #B9DCFF;
padding: 10px;
position: relative;
}

.service-heading-unit::before{
content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    display: block;
    background-color: #B9DCFF;
    position: absolute;
    left: 45%;
    bottom: -10px;
    z-index: -1;
}

.service-list-text-area{
padding-top: 25px;
padding-bottom: 15px;
}

h1{
color: #fff;
}

.h1-back{
background-color: #003D91;
}

nav.navbar button{
float: right;
margin-top: 15px;
}

.bg-blue{
background-color: #003D91;
}



/* mobile用(open時)　ナビゲーションカスタマイズ -------------------------- */

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid #003D91;
}

.nav-link {
    display: block;
    padding: 1.5rem 1rem;
}

.navbar-light .navbar-nav .nav-link {
    color: #003D91;
}

footer a:link{
color:#fff;
}

footer a:visited{
color:#fff;
}

footer a:hover{
color:#fff;
text-decoration: underline;
}

/* //mobile用(open時)　ナビゲーションカスタマイズ -------------------------- */

body.company .unit-area-02 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #51cfff;
padding: 20px;
background: repeating-linear-gradient(60deg, #eee, #eee 15px, #ddd 0, #ddd 30px);
margin-bottom: 50px;
}

body.company .unit-area-02 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #51cfff;
margin: 10px auto 0;
}

body.company .unit-area-03 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #51cfff;
padding: 20px;
background: repeating-linear-gradient(60deg, #eee, #eee 15px, #ddd 0, #ddd 30px);
margin-bottom: 50px;
}

body.company .unit-area-03 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #51cfff;
margin: 10px auto 0;
}

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

body.recruit .unit-area-02 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #51cfff;
padding: 20px;
background: repeating-linear-gradient(60deg, #eee, #eee 15px, #ddd 0, #ddd 30px);
margin-bottom: 50px;
}

body.recruit .unit-area-02 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #51cfff;
margin: 10px auto 0;
}

body.recruit .unit-area-03 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #51cfff;
padding: 20px;
background: repeating-linear-gradient(60deg, #eee, #eee 15px, #ddd 0, #ddd 30px);
margin-bottom: 50px;
}

body.recruit .unit-area-03 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #51cfff;
margin: 10px auto 0;
}

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

body.inquiry .unit-area-02 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #51cfff;
padding: 20px;
background: repeating-linear-gradient(60deg, #eee, #eee 15px, #ddd 0, #ddd 30px);
margin-bottom: 50px;
}

body.inquiry .unit-area-02 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #51cfff;
margin: 10px auto 0;
}

body.inquiry .unit-area-03 h3{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
color: #51cfff;
padding: 20px;
background: repeating-linear-gradient(60deg, #eee, #eee 15px, #ddd 0, #ddd 30px);
margin-bottom: 50px;
}

body.inquiry .unit-area-03 h3::after{
content: "";
display: block;
height: 5px;
width: 30px;
background-color: #51cfff;
margin: 10px auto 0;
}

/* スタッフ情報 -------------------------------- */
.name{
text-align: center;
font-weight: bold;
}

.official-position{
text-align: center;
padding: 0.5em;
color: #fff;
border-radius: 5px;
margin-bottom: 10px;
font-size: 1.3rem;
}

.bg-c-black{
background-color: #000;
}

.bg-c-light-brown{
background-color: #a7800b;
}

.bg-c-light-blue{
background-color: #19c6e6;
}

.bg-c-blue{
background-color: #1526ff;
}

.bg-c-pink{
background-color: #ff479e;
}

.bg-c-red{
background-color: #ed2e31;
}

.bg-c-green{
background-color: #41b341;
}

.bg-c-purple{
background-color: #9f56e3;
}

/* 会社概要テーブル -------------------- */

table.company-table{
width: 100%;
/*border: 2px solid #ccc;*/
}

table.company-table th{
display: block;
width: 100%;
background-color: #ccc;
padding: 1em;
}

table.company-table td{
display: block;
width: 100%;
padding: 1em;
}

.map {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* リクルートテーブル -------------------- */

table.form-table{
width: 100%;
/*border: 2px solid #ccc;*/
}

table.form-table th{
display: block;
width: 100%;
background-color: #ccc;
padding: 1em;
}

table.form-table td{
display: block;
width: 100%;
padding: 1em;
}

/* 確認ボタン --------------------------- */

#btn-companion-a{
width: 280px;
text-align: center;
position: relative;
margin:40px auto;
font-weight: bold;
    display: block;
    padding: 20px;
    font-size: 2.0rem;
    border: 3px solid #0051A4;
    letter-spacing: 0.2em;
    color: #0051A4;
    background-color: #fff;
}

#btn-companion-a:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0097ff+0,003d91+100 */
background: #0097ff; /* Old browsers */
background: -moz-linear-gradient(left,  #0097ff 0%, #003d91 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0097ff 0%,#003d91 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0097ff 0%,#003d91 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097ff', endColorstr='#003d91',GradientType=1 ); /* IE6-9 */

	/*transition: 0.3s;*/
    text-decoration: none;
    color: #fff;
    border:none;
    padding: 23px 20px;
}


/* 送信ボタン --------------------------- */

#btn-companion-c{
width: 280px;
text-align: center;
position: relative;
margin:40px auto;
font-weight: bold;
    display: block;
    padding: 20px;
    font-size: 2.0rem;
    border: 3px solid #0051A4;
    letter-spacing: 0.2em;
    color: #0051A4;
    background-color: #fff;
}

#btn-companion-c:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0097ff+0,003d91+100 */
background: #0097ff; /* Old browsers */
background: -moz-linear-gradient(left,  #0097ff 0%, #003d91 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0097ff 0%,#003d91 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0097ff 0%,#003d91 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097ff', endColorstr='#003d91',GradientType=1 ); /* IE6-9 */

	/*transition: 0.3s;*/
    text-decoration: none;
    color: #fff;
    border:none;
    padding: 23px 20px;
}

/* 戻るボタン --------------------------- */

#btn-companion-b{
width: 280px;
text-align: center;
position: relative;
margin:40px auto;
font-weight: bold;
    display: block;
    padding: 5px;
    font-size: 2.0rem;
    border: 3px solid #0051A4;
    letter-spacing: 0.2em;
    color: #0051A4;
    background-color: #fff;
}

/* sm -------------------------------------------------------------*/
@media (min-width: 480px) {
.container{
   max-width: 895px;
   }

h1{
padding: 0.5rem 0;
font-size: 1.3rem;
/*margin-bottom: 30px;*/
}

nav.top-nav ul li a{
font-size: 1.6rem;
float: left;
width: 20%;
text-decoration: none;
margin: 0 2.5%;
}



nav.top-nav ul li a::after{
content: "";
    width: 80%;
    height: 5px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0097ff+0,003d91+100 */
background: #0097ff; /* Old browsers */
background: -moz-linear-gradient(left,  #0097ff 0%, #003d91 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0097ff 0%,#003d91 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0097ff 0%,#003d91 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097ff', endColorstr='#003d91',GradientType=1 ); /* IE6-9 */

    transition: 0.3s;
    transform-origin: center;
    transform: translate(-50%, -50%);
}

nav.top-nav ul li:nth-child(2) a::after, .top_visual li:nth-child(2) a::before {
    background-color: #51cfff;
}

nav.top-nav ul li:nth-child(3) a::after, .top_visual li:nth-child(3) a::before {
    background-color: #30b2af;
}

nav.top-nav ul li:nth-child(4) a::after, .top_visual li:nth-child(4) a::before {
    background-color: #fc4a9d;
}

nav.top-nav ul li a:hover::after, nav.top-nav ul li a:hover::before {
		width: 0;
		transition: 0.3s;
		transform-origin: center;}

nav.top-nav ul{
padding: 0 5%;
}

.logo-adjust{
padding: 0 15%;
margin-bottom: 30px;
margin-top: 100px;
}

.section-title{
    padding: 5px 18% 5px 0;
}

/*.info-area{
padding:;
}*/

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

.service-heading-img{
float:left;
width: 13%;
}

.service-heading-img img{
height: auto;
width: auto;
}

.service-heading-area{
float: left;
width: 87%;
padding-left: 30px;
padding-top: 10px;
}

.service-heading-area h3{
font-size: 1.7rem;
font-weight: bold;
color: #0051A4;
}

.heading-unit-back{
background-color: #B9DCFF;
}

.service-heading-unit{
background-color: #B9DCFF;
padding: 10px 10%;
position: relative;
}

.service-heading-unit::before{
content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    display: block;
    background-color: #B9DCFF;
    position: absolute;
    left: 48%;
    bottom: -10px;
    z-index: -1;
}

.service-list-text-area{
padding-top: 25px;
padding-bottom: 15px;
padding-left: 10%;
padding-right: 10%;
}

.header-navigation-area{
height:65px;
}

.header-logo-area{
float: left;
width: 25%;
}

.header-btn-area{
float: right;
width: 75%;
}

.header-btn-area nav.top-nav ul{
padding-right: 0;
}

body.p-b-0 header{
padding-bottom: 0;
}




}

/* md (特に記載の必要無し)--------------------------------------------*/
@media (min-width: 896px) {
.container{
   max-width: 1023px;
   }
   

   
}

/* lg -------------------------------------------------------------*/
@media (min-width: 1024px) {
.container{
   max-width: 1199px;
   }
   
nav.top-nav ul{
padding: 0 10%;
}

.top-service-img-area{
padding: 0 200px;
}

h2{
margin-bottom: 100px;
}

.section-area{
padding-top: 100px;
}

.section-text{
margin-bottom: 55px;
}

.section-title{
font-family: 'Lato', sans-serif;
    background-color: #1681E6;
    padding: 10px 20% 10px 0;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    transform: rotate(-45deg);
    position: absolute;
    width: 50%;
    top: 0%;
    left: -10%;
    z-index: 9;
}

.unit-area-03{
padding-bottom: 100px;
}

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

.service-heading-img{
float:left;
width: 10%;
}

.service-heading-img img{
height: auto;
width: auto;
}

.service-heading-area{
float: left;
width: 90%;
padding-left: 30px;
padding-top: 10px;
}

.service-heading-area h3{
font-size: 1.7rem;
font-weight: bold;
color: #0051A4;
}

.heading-unit-back{
background-color:#fff;
}

.service-heading-unit{
background-color: #B9DCFF;
padding: 10px 15%;
position: relative;
}

.service-heading-unit::before{
content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    display: block;
    background-color: #B9DCFF;
    position: absolute;
    left: 48%;
    bottom: -10px;
    z-index: -1;
}

.service-list-text-area{
padding-top: 25px;
padding-bottom: 15px;
padding-left: 15%;
padding-right: 15%;
}

.service-heading-area .section-text{
margin-bottom: 0;
}

.header-logo-area{
float: left;
width: 25%;
padding-left: 5%;
}

/* 会社概要テーブル -------------------- */

table.company-table{
width: 100%;
border: 2px solid #ccc;
box-sizing: border-box;
}

table.company-table th{
display:table-cell;
width: 20%;
background-color: #ccc;
padding: 1em;
}

table.company-table td{
display:table-cell;
width:80%;
padding: 1em;
border: 2px solid #ccc;
}

.map {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.th-border{
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
}

/* リクルートテーブル -------------------- */

.table-wrap{
padding-left: 15%;
padding-right: 15%;
}

table.form-table{
width: 100%;
border: 2px solid #ccc;
box-sizing: border-box;
}

table.form-table th{
display:table-cell;
width: 25%;
background-color: #ccc;
padding: 1em;
}

table.form-table td{
display:table-cell;
width:75%;
padding: 1em;
border: 2px solid #ccc;
}

.staff-area{
padding-left: 8%;
padding-right: 8%;
}

.adjust-info{
padding: 0 15%;
}

.info-area{
background-color:#e4ffff!important;
margin-bottom: 20px;
}

.adjust-company{
padding-left: 10%;
padding-right: 10%;
}

/* xl (特に記載の必要無し)--------------------------------------------*/
@media (min-width: 1200px) {

.section-title{
font-family: 'Lato', sans-serif;
    background-color: #1681E6;
    padding: 10px 10% 10px 0;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    transform: rotate(-45deg);
    position: absolute;
    width: 50%;
    top: 0%;
    left: -18%;
    z-index: 9;
}

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

.service-heading-img{
float:left;
width: 10%;
}

.service-heading-img img{
height: auto;
width: auto;
}

.service-heading-area{
float: left;
width: 90%;
padding-left: 30px;
padding-top: 10px;
}

.service-heading-area h3{
font-size: 1.7rem;
font-weight: bold;
color: #0051A4;
}

.heading-unit-back{
background-color:#fff;
}

.service-heading-unit{
background-color: #B9DCFF;
padding: 10px 10%;
position: relative;
}

.service-heading-unit::before{
content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    display: block;
    background-color: #B9DCFF;
    position: absolute;
    left: 48%;
    bottom: -10px;
    z-index: -1;
}

.service-list-text-area{
padding-top: 25px;
padding-bottom: 15px;
padding-left: 10%;
padding-right: 10%;
}

.service-heading-area .section-text{
margin-bottom: 0;
}

.adjust-company-table{
padding-left: 6%;
padding-right: 6%;
}



}