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

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&display=swap');


*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  font-feature-settings: "palt";
  letter-spacing: .1em;
}


.sp {
  display: none;
}

.tab {
  display: none;
}

.pc {
  display: block;
}

.sp-only {
  display: none;
}


body {
  margin: 0 auto;
  max-width: 2000px;
  font-size: 15px;
  font-family: 'Roboto', 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  font-feature-settings: "palt";
  background-repeat: repeat;
  transition: 0.3s;
}

ul,
ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
}


a {
  color: #1D9BF0;
  transition: 0.3s;
}

a:hover {
  opacity: .8;
  transition: 0.3s;
}


.txt-link {
  text-align: center;
  font-weight: 500;
}

.txt-link a {
  text-decoration: underline;
}



p {
  margin-top: 20px;
  line-height: 1.8;
  color: #444;
}

p.ex {
  margin-top: 0;
}


p.ex2 {
  margin-top: 40px;
}



.center {
  text-align: center;
}


img {
  max-width: 100%;
}


.nav--ex {
  display: none;
}

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


.btn {
  display: block;
  width: 200px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-weight: 600;
  text-decoration: none !important;
  background: #1D9BF0;
  margin-top: 30px;
}

.btn.ex {
  margin-left: auto;
}

.btn.ex2 {
  margin: 0 auto;
  margin-top: 30px;
}



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

.main-visual {
  height: 800px;
  background-image: url(../img/top-back.jpg);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
}


.main-visual .inner {
  position: absolute;
  margin: auto;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 85%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
}


.top-nav {
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.top-nav li {
  background: #1D9BF0;
  width: 222px;
  padding: 10px;
  margin-bottom: 10px;
}

.top-nav li.logo {
  background: none;
  width: 320px;
  padding: 0;
  padding-left: 24px;
}


.top-nav li span {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.top-nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-nav .icon {
  height: 30px;
  margin-right: 15px;
}


img.inada {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 700px;
  padding-left: 120px;
}

img.inada-under {
  display: none;
}


img.catch {
  max-height: 700px;
  padding-top: 30px;
  padding-bottom: 60px;
}


.top-nav li.sub {
  background: none;
  padding: 0;
  margin-top: 10px;
}


.top-nav li.sub a {
  display: flex;
  justify-content: flex-start;
  font-size: 20px;
  font-weight: 500;
}


.top-nav li.sub span {
  color: #111;
  font-size: 14px;
  margin-left: 5px;
  font-weight: 500;
}



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


.under-nav {
  display: flex;
  align-items: center;
  padding: 15px 30px;
}

.under-nav .logo {
  width: 250px;
}

.under-nav li {
  margin-right: 40px;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}

.under-nav li:last-child {
  margin-right: 0;
}

.under-nav li span {
  color: #333;
  font-size: 13px;
}

header .head {
  margin: 20px;
  height: 200px;
  background-image: url(../img/top-back.jpg);
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  position: relative;
}

header .head .title-set {
  margin-left: 50px;
}

header .head .logo-line {
  width: 500px;
  position: absolute;
  bottom: 0;
  right: 30px;
}




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


.fix-bar {
  position: fixed;
  top: 0;
  right: 20px;
  display: flex;
  background: #1D9BF0;
  border-radius: 0 0 20px 20px;
  padding: 5px 20px 10px 20px;
  z-index: 999;
}

.fix-bar a {
  display: flex;
  align-items: center;
  color: #fff;
  margin-right: 20px;
}


.fix-bar a:last-child {
  margin-right: 0;
}


.fix-bar .info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fix-bar .info span:first-child {
  font-size: 22px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 1px;
  font-weight: 600;
}

.fix-bar .info span:last-child {
  font-size: 13px;
  font-weight: 600;
}


.fix-bar img.mail {
  height: 30px;
  margin-right: 10px;
}

.fix-bar img.tel {
  height: 27px;
  margin-right: 10px;
}


@keyframes shiny {
  0% {
    left: -2%;
  }

  10% {
    left: 110%;
  }

  100% {
    left: 110%;
  }
}

.fix-bar::after {
  content: '';
  position: absolute;
  top: -0%;
  left: -0%;
  width: 30px;
  height: 38px;
  transform: scale(2) rotate(10deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .3) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}



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


.title-set {}



.title-set .title {
  color: #1D9BF0;
  font-size: 60px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 0;
  font-weight: 600;
}


.title-set .sub {
  font-weight: 500;
}


.title-set.ex1 .title {
  color: #111;
  font-size: 24px;
  font-family: 'Roboto', 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  margin-bottom: 10px;
}





.title-set.ex1 .sub {
  font-size: 14px;
  color: #BCBCBC;
  font-weight: normal;
}


.title-1 {
  font-size: 30px;
  font-weight: 500;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 0;
}

.title-1.ex {
  margin-top: 30px;
}


.title-2 {
  color: #1D9BF0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 50px;
}


.title-2.ex {
  font-size: 35px;
}



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


section.gray {
  background: #FAFAFA;
  position: relative;
}




img.logo-gray {
  position: absolute;
  width: 300px;
  top: -120px;
  left: 50px;
}




.container {
  width: 1000px;
  margin: 80px auto;
}

.container.news {
  width: 850px;
}

.container.wide {
  width: 1180px;
  margin: 0 auto;
  padding: 60px 0;
}


.container.news .wrap {
  display: flex;
}


.container.news .head {
  width: 200px;
  border-right: 1px solid #ddd;
  margin-right: 50px;
}

.container.news li {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 25px;
}

.container.news li:last-child {
  margin-bottom: 0;
}

.container.news span:first-child {
  font-weight: 600;
  width: 100px;
}

.container.news span:last-child {
  width: 500px;
}

.container.news a {
  text-decoration: underline;
}


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


.txt-box {
  width: 550px;
  margin: 45px auto;
}

.txt-box a {
  text-decoration: underline;
}

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


.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.service-list.ex {
  padding-bottom: 50px;
}


.service-list .item {
  width: 30%;
  background: #fff;
  margin-right: 3.3333%;
  margin-bottom: 40px;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.1);
}

.service-list .item:nth-child(3) {
  width: 350px;
  background: #fff;
  margin-right: 0;
}

.service-list .item:last-child {
  margin-right: 0;
}


.service-list .tn {
  height: 230px;
  background-size: cover;
  background-position: 50% 50%;
}

.service-list .tn.one {
  background-image: url(../img/tn-service-1.jpg);
}

.service-list .tn.two {
  background-image: url(../img/tn-service-2.jpg);
}

.service-list .tn.three {
  background-image: url(../img/tn-service-3.jpg);
}

.service-list .tn.four {
  background-image: url(../img/tn-service-4.jpg);
}

.service-list .tn.five {
  background-image: url(../img/tn-service-6.jpg);
}

.service-list .tn.six {
  background-image: url(../img/tn-service-5.jpg);
}



.service-list .info {
  padding: 40px;
}


.service-list .icon {
  display: block;
  width: 50px;
  margin: 0 auto;
  margin-top: -55px;
  margin-bottom: 30px;
}

.service-list p {
  color: #555;
  font-size: 13px;
  margin-bottom: 20px;
}



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

section.about {
  background-image: url(../img/back-blue.jpg);
  background-size: cover;
  background-position: 50%;
  display: flex;
  justify-items: center;
  align-items: center;
  padding-top: 30px;
}



.container.about {
  background: #fff;
  padding: 60px;
  position: relative;
}

img.logo-white {
  width: 200px;
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  margin: auto;
}

img.inada-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 500px;
}

.container.about .info {
  width: 600px;

}

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


section.recruit {
  display: flex;
  align-items: center;
  padding: 60px 0;
  padding-bottom: 120px;
}

section.recruit.ex {
  padding-bottom: 180px;
}



section.recruit .tn {
  background-image: url(../img/recruit.jpg);
  background-size: cover;
  background-position: 50%;
  width: 50%;
  height: 450px;
}


section.recruit .info {
  width: 50%;
  padding: 60px;
}


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


footer {
  background: #1D9BF0;
  padding: 40px 0;
  color: #fff;
}



footer .inner {
  width: 980px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

footer .logo {
  width: 200px;
  position: absolute;
  top: -130px;
}

footer p {
  color: #fff;
  margin-top: 0;
  font-size: 13px;
}


footer .nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 600px;
}

footer .nav li {
  font-size: 14px;
  margin-right: 20px;
}


footer .nav a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
}


.contact {}


.contact {
  display: flex;
  color: #fff;
}

.contact.ex {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1D9BF0;
  margin-top: 30px;
}

.contact .number {
  font-size: 34px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 1px;
  font-weight: 600;
}

.contact.ex .number {
  font-size: 54px;
}




.contact .sub {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}


img.tel {
  height: 35px;
  margin-right: 10px;
}

img.tel-2 {
  height: 45px;
  margin-right: 10px;
  padding-bottom: 10px;
}





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

.pankuzu {
  font-size: 14px;
  margin-bottom: 50px;
  font-weight: 700;
}

.pankuzu span {
  margin-right: 10px;
}

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

.list-link {
  display: flex;
  justify-content: center;
  margin: 30px;
}

.list-link li {
  font-size: 16px;
  font-weight: 600;
  margin-right: 20px;
}

.list-link li:last-child {
  margin-right: 0;
}

.list-link li i {
  margin-right: 5px;
}


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

img.logo.service {
  display: block;
  width: 500px;
  margin: 0 auto;
  margin-bottom: 40px;
}


.service-wrap {
  margin-top: 50px;
}

.service-item {
  padding-top: 100px;
}

.service-item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.service-item .head.ex {
  flex-direction: row-reverse;
}

.service-item .head .tn {
  width: 50%;
}

.service-item .head .info {
  width: 45%;
}

.service-item .head .icon {
  display: block;
  margin: 0 auto;
  width: 50px;
  margin-bottom: 10px;
}

.service-item .head .sub {
  display: block;
  text-align: center;
  color: #BCBCBC;
  margin: 20px;
}


.service-item .foot {
  width: 850px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
}

.service-item .foot .item {
  width: 30%;
}

.service-item .foot .item span {
  display: block;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}



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


.keisen {
  width: 200px;
  border-bottom: 1px solid #ddd;
  margin: 100px auto;
}



.table-company {
  width: 600px;
  margin: 50px auto;
}


.table-company tr {
  border-bottom: 1px solid #ddd;
}

.table-company td {
  font-size: 15px;
  padding-top: 40px;
  padding-bottom: 40px;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

.table-company td:first-child {
  width: 35%;
  vertical-align: middle;
  text-align: center;
  font-weight: 600;
  color: #1D9BF0;
}

.table-company p:first-child {
  margin-top: 0;
}



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

.news-list {
  width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 9;
}


.news-list .item {
  display: flex;
  justify-content: space-between;
  padding-top: 80px;
}


.news-list .date {
  width: 20%;
  font-size: 17px;
  font-weight: 600;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
}

.news-list .info {
  display: block;
  width: 70%;
  margin-left: auto;
}

.news-list .title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.5;
}

.news-list .txt {
  line-height: 1.8;
  color: #555;
}

.news-list a {
  text-decoration: underline;
}


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


img.recruit {
  display: block;
  margin-top: 50px;
}


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


form {
  width: 700px;
  margin: 50px auto;
}

form label {
  width: 50%;
  background: #1D9BF0;
  text-align: center;
  line-height: 60px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}


form .item {
  display: flex;
  height: 60px;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.item.message,
.item.radio {
  align-items: flex-start;
  height: auto;
}

label.radio {
  height: 160px;
}

label.message {
  height: 250px;
}

form input {
  width: 60%;
  height: 60px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  line-height: 50px;
}

textarea {
  width: 60%;
  height: 250px;
  border: 1px solid #ddd;
  padding: 10px;
  color: #444;
}


::placeholder {
  color: #bbb;
}

.radio .inner {
  width: 100%;
  height: 160px;
  font-weight: 500;
  color: #444;
}

.radio .inner {
  display: flex;
  flex-direction: column;
  width: 60%;
  border: 1px solid #ddd;
  padding: 20px;
}

.radio span {
  margin-left: 5px;
}

.check {
  width: 20px;
  border: none;
}

.radio .inner div {
  display: flex;
  height: 40px;
  align-items: center;
}


.btn-form {
  text-align: center;
  display: block;
  width: 320px;
  height: 75px;
  border-radius: 36px;
  line-height: 75px;
  font-weight: 700;
  margin: 0 auto;
  font-size: 20px;
  border: none;
  background: #1D9BF0;
  margin-top: 50px;
  color: #fff;
}

.btn-form i {
  margin-right: 10px;
}

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


.form-wrap {}


.tel-wrap {}



.thanks-wrap {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}


.thanks-wrap .inner {
  width: 500px;
}


.tn-greeting {
  background-image: url(../img/inada-4.jpg);
  background-size: cover;
  height: 500px;
  background-position: 50% 30%;
}


.grecaptcha-badge {
  visibility: hidden;
}



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


.under-line {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.under-line.ex {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.under-line::after {
  position: absolute;
  bottom: -9px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #E20000;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .2s;
}

.under-line.ex::after {
  background: #000;
}

.under-line:hover::after {
  transform: scale(1, 1);
}


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


#pageTop {
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 9999;
}

#pageTop a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  background: #333;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 30px;
}

#pageTop i {
  font-size: 22px;
  font-weight: bold;
  margin-left: 3px;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


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

.fade_in_box {
  overflow: hidden;
  transition: .8s;
}


.fade_in {
  transition: 1s;
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
}

.in {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}


.fade_in.two {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}


.fade_in.three {
  -moz-transition-delay: 300ms;
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
}

.fade_in.four {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}

.fade_in.five {
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
}

.fade_in.six {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}

.fade_in.seven {
  -moz-transition-delay: 700ms;
  -webkit-transition-delay: 700ms;
  -o-transition-delay: 700ms;
  -ms-transition-delay: 700ms;
}

.fade_in.eight {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

.fade_in.nine {
  -moz-transition-delay: 900ms;
  -webkit-transition-delay: 900ms;
  -o-transition-delay: 900ms;
  -ms-transition-delay: 900ms;
}

.fade_in.ten {
  -moz-transition-delay: 1000ms;
  -webkit-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
}