body{
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight:500;
}

p{
  font-size:1.3em;
}


h1.company-name img{
  background:rgba(252, 252, 255, 0.3);
  padding:10px;
}

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  color: inherit;
  background-color: #ecf0f1;
  margin-bottom:70px;
}

.jumbotron-top{
  background:url(../images/main.png); 
  background-size:cover;
}

.jumbotron > hr {
  border-top-color: #cfd9db;
}
.container .jumbotron, .container-fluid .jumbotron {
  border-radius: 4px;
}
.jumbotron .container {
  max-width: 1320px;
}

.contact-panel{
  background-color:#f4f1f8;
}

.contact-panel h5{
  font-size: 20px;
  font-weight:600
}

section {
  max-width: 300px;
}
.contact-panel a.link {
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #83037c;
  border: 1px solid #740883;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
.contact-panel a.link:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -6px;
}
.contact-panel a.link:hover {
  background: #fff;
  color: #7c077c;
}
.contact-panel a.link:hover:before {
  border-top: 2px solid #8f058f;
  border-right: 2px solid #ac0487;
}

.navbar .active{
  color:#860044 !important;
  --d: 100%;
  margin: 0px 10px;
  background: 
    linear-gradient(currentColor 0 0) 
    3px 
    no-repeat;
    --d: 100%;
}

.navbar .nav-link{
  margin: 0px 10px;
  background: 
    linear-gradient(currentColor 0 0) 
    0 100% /var(--d, 0) 3px 
    no-repeat;
  transition:0.5s;
}

.navbar .nav-link{
  font-size: 24px;
}
.navbar .nav-link:hover{
  color:black !important;
  --d: 100%;
}
.navbar .nav-link:hover{
  color:black !important;
}

.navbar .active:hover{
  color:#8C00A3 !important;
}

.copyrights{
  color:#8C00A3 !important;
}

.nav li{
  font-size:1.2em;
}
.nav-item a{
  color:#7c6d7e;
}

.nav-item a:hover{
  color:#580458;
}

.accodion{
  width: 90%;
  color: #333;
}

.accodion .menu {
  display: flex;
  width: 100%;
}

.accodion .menu>li{
  width: 250px;
  position: relative;
  text-align: center;
}

.accodion .menu li a{
  padding: 1em;
  display: block;
}

.accodion .menu .menu-title{
  text-align: center;
}

.accodion .menu .sub-menu{
  list-style: none;
  position: absolute;
  z-index: 1;
  width: 260px;
  top: 100%;
  left: -23px;
}

.accodion .menu .sub-menu li{
  border-top: solid 1px #fef2ff;
  width: 100%;
}


.accodion .menu .sub-menu li a{
  text-decoration: none;
  background-color: #fff;
  padding: 1em;
  width: 100%;
}

.accodion .menu .sub-menu li a:hover{
  background-color: #fffbff;
}

.service-link a {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  background: transparent;
  padding: 18px 30px;
  border: 2px solid #9b018e;
  position: relative;
  z-index: 1;
  transition: .3s;
  text-decoration:none;
}
.service-link a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #9b018e;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}
.service-link a:hover {
  color: #fff;
}
.service-link a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.service-link a span{
  color: #9b018e;
}

.service-link a:hover span{
  color: #fff;
}

.jumbotron-company{
  background:url(../images/company_top.jpg); 
  background-size:cover;
  min-height:200px;
  padding-bottom: 0px;
}

.jumbotron-company .text-block{
  background:rgba(255, 255, 255, 0.9);
}

.top h2.top-heading {
  font-size:2.3em;
  font-weight:700;
  color:#a7019e;
  padding:0.2em 0;
  border-bottom:2px solid #a7019e;
  margin-bottom:0.3em;
}

.top p.top-lead {
  font-size:1.4em;
  color:#070069;
}

.top h3 {
  font-size:2.0em;
  font-weight:600;
  background:#8800a3;
  position: relative;
  padding: 5px 5px 5px 8px;
  background: #8800a3;
  color: white;
  margin-left: -5px;
  line-height: 1.3;
  z-index:-2;
}

.top h3:before {
  position: absolute;
  content: '';
  right: -2px;
  top: -2px;
  border: none;
  border-right: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-3
}
.top h3:after {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 55px #1f0a7c;
  border-bottom: solid 58px transparent;
  z-index:-1
}

.service .service-text{
    font-size:1.3em;
  color:#070069;
}

.company-info h1 {
  color:#6e137c;
  position: relative;
  border-bottom: 1px solid #ccc;
  padding-bottom:0.5em;
  margin-bottom:0.5em;
}
.company-info h1::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 3px;
  background-color: #8C00A3;
}

.company-info .info-main dl dt{
  font-size:20px;
  padding:10px;
  color:#470056;
  padding-left:0.5em;
  border-bottom:#470056 1px solid;
}
.company-info .info-main dl dd{
  font-size:20px;
  padding:10px;
}

.catch .lead{
  font-size:21px;
}

.jumbotron-services{
  background:url(../images/main.jpg); 
  background-size:cover;
  min-height:200px;
  padding-bottom: 0px;
}
.policy{
  padding-left:2em;
  padding-right:2em;
}
.policy h2 {
  color:#1b001f;
  padding-bottom:0.2em;
  margin-bottom:0.2em;
  border-bottom: 1px solid rgb(92, 90, 90);
}
.policy p {
  color:#1b001f;
  margin-bottom:1em;
  padding-bottom:1em;
}
.jumbotron-company .text-block{
  background:rgba(255, 255, 255, 0.9);
}

.setting_example p.child{
  padding-left:20px;
}

.services h1 {
  color:#6e137c;
  position: relative;
  border-bottom: 1px solid #ccc;
  padding-bottom:0.5em;
  margin-bottom:0.5em;
  font-size:2.7em;
}

.services h1::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 3px;
  background-color: #8C00A3;
}

.services .title-text{
  font-size:24px;
  color:#14042e;
}

.services h2 {
  border-left:7px solid #d60059;
  border-bottom:3px solid #d60059;
  padding-left:10px;
  font-size:2.6em;
  margin:50px 0px 30px 0px;
  font-weight: 700;
  color:#250101;
}

.services .najm-logo{
  margin:50px 0px;
}

.services .najm .item p {
  position: relative;
  padding: 0 45px;
  margin:70px 0px;
  text-align: center;
  color: #dd6300;
  font-weight:900;
  font-size:1.8em;
}

.services .najm .item p:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #dd6300;
}

.services .najm .item p span {
  position: relative;
  padding: 0 1em;
  background: #fff;
  display:inline-block;
}

.services .basic-card{
  margin:10px 0;
  padding:1em 0.5em;
  border:2px solid #d5d8da;
}

.services .basic-card h4{
  color:#6a03be;
  font-weight: 700;
}

.services .basic-card p{
  margin:0;
}


.services .card-top{
  margin-top:0;
}

.services .card-bottom{
  margin-bottom:0;
}

.services .target h4 {
  width:100%;
  background-color:#470056;
  padding:10px;
}

.services .target h4 {
  margin:20px 0px;
  position: relative;
  padding: 10px 26px 5px 42px;
  background: #470056;
  font-size: 1.3em;
  font-weight:900;
  color: #ffffff;
  margin-left: -12px;
  line-height: 1.3;
  z-index:-2;
  height:50px;
}

.services .target h4:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

.services .target h4:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}

.services  h3 {
  color:#4e0058;
  font-weight: 600;
  padding: 1rem 0.2rem;
  border-top: 6px double #9703aa;
  border-bottom: 6px double #9703aa;
  margin-top:70px;
  margin-bottom:30px;
}

.services h3:before {    position:relative;
  bottom:3px;
  content: '■';
  font-weight: 600;
}

.services .others h4 {
  font-weight: 500;
  margin-top:30px;
  margin-bottom:20px;
}

.services .others h4 span{
  color:#ffffff;
  border-radius: 3px;
  font-weight: 500;
  background-color: #4e0196;
  padding:5px;
}

.services .merit .card{
  border:solid 2px #4e0196;
  position: relative;
}
.services .merit .card .triangle {/*三角形左上*/
  position: absolute;
  top: 0;
  left: 0;
  border-left: 20px solid #ec00b9;
  border-bottom: 20px solid transparent;
}

.services .card p{
  color:#4e0196;
  font-size:1.3em;
  font-weight: 800;
  margin:0;
}

.services .card .card-body{
  padding:1.2em 0.5em;
}

.services .others ul {
  box-shadow :0px 0px 3px silver;
  border: solid 1px whitesmoke;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  background: #fafafa;
}

.services .others ul li {
  font-size:1.3em;
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.services .others ul li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0da";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: gray; /*アイコン色*/
}

.services .others p.comment{
  font-size:1.4em;
  color:#750079;
}

.services .making_plan p {
  color:#333;
  margin:0;
  padding-left: 20px;
  padding-right: 20px;
  
}

.services .making_plan .first {
  color: hsl(243, 97%, 56%);
}

.services .making_plan .second {
  color: hsl(0, 98%, 36%);
}

.services .making_plan .third {
  color: hsl(121, 97%, 26%);
}

.contact-panel span{
  color:#9e00a3;
}


.divider{
  margin:70px 0;
}

@media screen and (min-width: 300px) {
  .accodion .menu>li{
    width:100%;
  }
  .accodion .menu .sub-menu{
    width: 103%;
  }
  .jumbotron .container {
    height:100px;
  }
}

@media screen and (min-width: 400px) {
  img.main-logo{
    width:150px;
   }
  .jumbotron .container {
    height:200px;
  }
}

@media screen and (min-width: 768px) {
  .top h2.top-heading {
    font-size:2.6em;
  }
  .jumbotron {
    padding-top: 48px;
  }
  .jumbotron .container {
    height:300px;
  }
  .container .jumbotron, .container-fluid .jumbotron {
    padding-left: 60px;
    padding-right: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 52px;
  }

  .company-info .info-main{
    padding: 0px 150px;
  }

  .services .najm h3 {
    font-weight:900;
    font-size:2em;
  }

  .services .target {
    padding: 0px 50px;
  }
  .services .target h4 {
    font-size:1.9em;
    padding: 10px 26px 5px 42px;
    height:65px;
    letter-spacing:2px;
  }
  .services .card p{
    font-size:1.5em;
  }
}

  

@media screen and (min-width: 1000px) {
  .accodion .menu>li{
    width:248px;
  }
  .accodion .menu .sub-menu{
    width: 260px;
  }
  .top h2.top-heading {
    font-size:3em;
  }
  .jumbotron .container {
    height:300px;
  }
  
  .services .target {
    padding: 0px 120px;
  }
  
  .services .target h4 {
    letter-spacing:8px;
    font-size:1.9em;
  }

  .services .service-divider{
    margin:100px 0;
  }
}

@media screen and (min-width: 1200px) {
  
  img.main-logo{
   width:250px;
  }

  .jumbotron .container {
    height:400px;
  }
  
  .services .target h4 {
    letter-spacing:10px;
    font-size:2em;
  }
}