@charset "utf-8";

/* ID */
#navi {
  margin : 0;
  padding : 0;
  background-color : #eee;
}
#navi a {
  margin : 0;
  padding : 0;
  font-family : a-otf-futo-go-b101-pr6n, sans-serif;
  font-size : 16px;
  color : #000;
  width : 400px;
  height : 50px;
  display : table-cell;
  text-align : center;
  vertical-align : middle;
}
#navi a:hover {
  border-bottom : 4px solid #000;
}

/* CLASS */
.border {
  border : 1px solid #999;
}
.caption {
  font-size : 12px;
  color : #999;
}
.menu {
  margin : 0 auto;
  padding : 0;
  width : 410px;
  height : 150px;
}
.btn {
  display : block;
  margin : 0;
  padding : 0;
  width : 400px;
  height : 50px;
}
.on {
  cursor : default;
  pointer-events : none;
  border-bottom : 4px solid #000;
}
.off {
  cursor : pointer;
  pointer-events : auto;
  border-bottom : 4px solid #eee;
}

/* SP */
.col_1 { width : 100%; }
.col_2 {
  width : 100%;
  /*padding-left : 10%;*/
}
.col_3 { width : 100%; }
.logo_1 {
  margin : 0 auto;
  /*padding : 25px 0px;*/
  /*width : 100%;*/
}
.logo_2 {
  margin : 0 auto;
  width : 100%;
}
.logo_3 {
  margin : 0 auto;
  width : 100%;
}
.border .col_1 {
  width : 100%;
  order : 2;
}
.border .col_2 {
  width : 100%;
  order : 1;
}

.greeting .pt40 {
  padding-top: 40px;
}
.greeting .heading {
  padding-top: 40px;
}
.greeting .col_1 {
  margin-top: 40px;
}
.greeting .col_3 {
  margin-top: 20px;
}
.greeting .hl_3 {
  margin-top: 40px;
}
.greeting .logo_1 {
  width: 80%;
  margin-top: 40px;
}
.greeting .border {
  margin-top: 40px;
  padding: 0 20px 40px;
}
.greeting .border h3 {
  text-align: center;
}
.greeting .border .logo_2 {
  margin-top: 20px;
}
.greeting .border .logo_3 {
  margin-top: 40px;
}
.greeting .logoList ul li {
  margin-top: 20px;
}
.greeting .logoList ul li img {
  width: auto;
  height: 41px!important;
  margin: 0 auto;
}
.greetingLink a {
  display: block;
  margin: 0 auto;
}
.greetingLink a em {
  display: inline-block;
  width: 12px;
  margin-left: 10px;
  transition: .5s;
}
.greetingLink a:hover em {
  fill: white;
}
.logoConcept {
  margin-top: 40px;
}
.logoConcept p {
  margin-top: 20px;
  font-size: 14px;
}

@media screen and ( min-width : 768px ) {
  /* TAB */
  .menu {
    width : 615px;
    height : 70px;
  }
  #navi a {
    width : 200px;
    height : 70px;
  }
  .btn {
    width : 200px;
    height : 70px;
    display : inline-block;
  }
  .logo_1 {
    margin : 0 auto;
    padding : 100px 0 40px;
    width : 60%;
  }
  .border .col_1 {
    width : 80%;
    order : 1;
  }
  .border .col_2 {
    width : 20%;
    order : 2;
  }
  .logo_3 { width : 30%; }
  
  .greeting .col_3 {
    margin: 0 0 0 40px;
  }
  .greeting .cols {
    flex-wrap: nowrap;
    margin-top: 40px;
  }
  .greeting .col_1 {
    margin-top: 0;
  }
  .greeting .heading {
    margin-bottom: 40px;
    padding-top: 110px;
  }
  .greeting .logo_1 {
    width: 60%;
    margin-top: 0;
  }
  .greeting .border {
    margin-top: 100px;
    padding: 0 40px 40px;
  }
  .greeting .border h3 {
    text-align: left;
  }
  .greeting .border .logo_2 {
    margin: 0 0 0 40px;
  }
  .greeting .sub_heading {
    padding-top: 110px;
  }
  .greeting .sub_headingFirst {
    padding-top: 0;
  }
  .greeting .logoList ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .greeting .logoList ul:first-child {
    margin-top: 0;
  }
  .greeting .logoList ul li {
    margin: 0 60px 0 0;
  }
  .greeting .logoList ul li:last-child {
    margin-right: 0;
  }
  .greeting .logoList ul li img {
    width: auto;
    height: 50px!important;
    margin: 0 auto;
  }
  .greetingLink a em {
    height: 12px;
  }
}
@media screen and ( min-width : 1280px ) {
  /* PC */
  .menu {
    width : 615px;
    height : 70px;
  }
  #navi a {
    width : 200px;
    height : 70px;
  }
  .btn {
    width : 200px;
    height : 70px;
    display : inline-block;
  }
}