@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
img {
  max-width: 100%;
  height: auto; }

video {
  max-width: 100%;
  height: auto; }

/*
.effect-fade {
  opacity : 0;
  transform : translate(0, 45px);
  transition : all 1200ms;
}
.effect-fade.effect-scroll {
  opacity : 1;
  transform : translate(0, 0);
}*/
body {
  font-family: 'Noto Sans JP', sans-serif;
  position: relative;
  margin: 0;
  width: 100%;
  line-height: 1.6;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

/*定義*/
.top-h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px; }
  .top-h2 span {
    font-size: 14px;
    display: block;
    letter-spacing: 1px; }
  @media screen and (max-width: 768px) {
    .top-h2 {
      font-size: 22px; }
      .top-h2 span {
        font-size: 10px; } }

.page-h1 {
  background: linear-gradient(to bottom, #FFEC00 0%, #FFEC00 62%, #fff 62%, #fff 100%);
  font-size: 30px;
  padding: 18px 0 0 0;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px; }
  @media screen and (max-width: 768px) {
    .page-h1 {
      background: linear-gradient(to bottom, #FFEC00 0%, #FFEC00 70%, #fff 70%, #fff 100%);
      padding-top: 20px;
      line-height: 1.2em; } }
  .page-h1 span {
    font-size: 14px;
    display: block;
    letter-spacing: 1px; }

.h1btm {
  font-size: 14px;
  font-weight: bold;
  display: block;
  text-align: center;
  letter-spacing: 1px; }

.page-h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-top: 93px;
  margin-bottom: 40px; }
  @media screen and (max-width: 768px) {
    .page-h2 {
      font-size: 22px;
      margin-top: 30px;
      margin-bottom: 30px; } }
  .page-h2 span {
    font-size: 14px;
    letter-spacing: 1px;
    display: block; }
    @media screen and (max-width: 768px) {
      .page-h2 span {
        font-size: 10px; } }

.page-h2-line {
  position: relative;
  top: -20px;
  padding: 0 30px;
  margin: 0 auto;
  font-size: 26px;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  z-index: 2;
  background-color: #fff; }
  .page-h2-line span {
    font-size: 14px;
    display: block;
    letter-spacing: 1px; }
    @media screen and (max-width: 768px) {
      .page-h2-line span {
        font-size: 10px;
        line-height: 1.6em; } }
  @media screen and (max-width: 768px) {
    .page-h2-line {
      font-size: 24px;
      padding: 0 20px;
      top: -24px; } }

@media screen and (max-width: 768px) {
  .ippatsu {
    top: -44px; } }

@media screen and (max-width: 768px) {
  .ippatsuwrap {
    margin-bottom: 80px !important; } }

.page-h2-line2 {
  position: relative;
  padding: 0 30px;
  top: -20px;
  margin: 0 auto;
  font-size: 30px;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  z-index: 2;
  background-color: #F8F8EF; }
  .page-h2-line2 span {
    font-size: 14px;
    display: block; }
  @media screen and (max-width: 768px) {
    .page-h2-line2 {
      font-size: 24px;
      padding: 0 20px; } }

.h2wrap {
  margin-bottom: 100px;
  margin-top: 160px;
  padding: 0 55px;
  position: relative;
  content: '';
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #707070; }
  @media screen and (max-width: 768px) {
    .h2wrap {
      margin-bottom: 20px;
      margin-top: 80px;
      padding: 0; } }

.page-h3 {
  font-size: 20px;
  text-align: left;
  margin-top: 60px;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .page-h3 {
      font-size: 18px;
      margin-top: 30px; } }

.navlink a {
  color: #FFEC00 !important; }

.linkbtn1-2, .navlink {
  display: inline-block;
  margin: 20px 0; }
  .linkbtn1-2 a, .navlink a {
    background-color: #423F3E;
    border: 1px solid #423F3E;
    color: #FFEC00;
    font-size: 14px;
    font-weight: bold;
    display: block;
    padding: 15px 50px;
    text-align: center; }
  .linkbtn1-2 a:hover, .navlink a:hover {
    background-color: #FFEC00;
    border: 1px solid #423F3E;
    color: #423F3E !important;
    display: block;
    text-align: center;
    opacity: 1; }
  @media screen and (max-width: 768px) {
    .linkbtn1-2, .navlink {
      width: 190px;
      margin: 0 auto;
      display: block;
      margin-top: 20px; }
      .linkbtn1-2 a, .navlink a {
        padding: 15px; } }

@media screen and (max-width: 768px) {
  .navlink {
    width: calc(100% - 60px); } }

/*#doui{
  label {
    padding: 10px 40px;
    color: #ffffff;
    margin-top: 20px;
    display: inline-block;
    text-align:center;
    border-radius: 6px;
    background-color: $gray;
    cursor: pointer;
}

input[type="file"] {
    display: none;
}

p {
    margin: 10px 0 0 0;
    display: inline-block;
}
}*/
.linkbtn1 {
  display: inline-block;
  margin: 20px 0; }
  .linkbtn1.mt40 {
    margin-top: 40px; }
  .linkbtn1.mt10 {
    margin-top: 10px; }
  .linkbtn1 a {
    background-color: #423F3E;
    color: #FFEC00;
    font-size: 14px;
    font-weight: bold;
    display: block;
    padding: 15px 50px;
    text-align: center; }
  .linkbtn1 a:hover {
    background-color: #FFEC00;
    color: #423F3E;
    display: block;
    text-align: center;
    opacity: 1; }
  @media screen and (max-width: 768px) {
    .linkbtn1 {
      width: 190px;
      margin: 0 auto;
      display: block;
      margin-top: 30px; }
      .linkbtn1 a {
        padding: 15px; } }

@media screen and (max-width: 768px) {
  .w90 {
    width: 90%;
    margin-top: 20px; } }
.navlink a:before {
  content: url("../img/common/mail2.png");
  display: inline-block;
  margin-right: 10px;
  vertical-align: -4px; }
@media screen and (max-width: 768px) {
  .navlink a:hover:before {
    content: url("../img/common/mail3.png"); } }

.linkbtn2 {
  display: inline-block;
  margin: 20px 0; }
  .linkbtn2 a {
    background-color: #FFEC00;
    border: 1px solid #FFEC00;
    color: #423F3E;
    display: block;
    font-weight: bold;
    padding: 15px 50px;
    text-align: center; }
  .linkbtn2 a:hover {
    background-color: #423F3E;
    color: #FFEC00;
    display: block;
    text-align: center;
    opacity: 1; }
  @media screen and (max-width: 768px) {
    .linkbtn2 {
      width: 190px;
      margin: 0 auto;
      display: block;
      margin-top: 20px; }
      .linkbtn2 a {
        padding: 15px; } }

.linkbtn2-2 {
  display: inline-block;
  margin: 20px 0; }
  .linkbtn2-2 a {
    background-color: #FFEC00;
    color: #423F3E;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 50px;
    text-align: center; }
  .linkbtn2-2 a:hover {
    background-color: #423F3E;
    color: #FFEC00;
    display: block;
    text-align: center;
    opacity: 1; }
  @media screen and (max-width: 768px) {
    .linkbtn2-2 {
      width: 190px;
      margin: 0 auto;
      display: block;
      margin-top: 20px; }
      .linkbtn2-2 a {
        padding: 15px; } }

.beige-h3 {
  text-align: center;
  font-size: 18px;
  margin-top: 60px;
  margin-bottom: 0;
  padding: 7px;
  background-color: #F8F8EF; }
  @media screen and (max-width: 768px) {
    .beige-h3 {
      margin-bottom: 20px;
      padding: 13px; } }

@media screen and (min-width: 769px) {
  .flex3 {
    display: flex;
    justify-content: space-around; }

  .flex2 {
    display: flex;
    justify-content: space-between; }
    .flex2 div {
      width: 48%; } }
.fixnav {
  width: 100%;
  padding: 14px 20px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; }
  @media screen and (max-width: 768px) {
    .fixnav {
      z-index: 100;
      position: fixed; } }

.back-yellow {
  background-color: #FFEC00; }
  .back-yellow .wrap {
    padding-top: 10px;
    padding-bottom: 30px; }
    @media screen and (max-width: 768px) {
      .back-yellow .wrap {
        padding-top: 10px;
        padding-bottom: 50px; } }

.back-neji {
  background: url(../img/common/back.png) center no-repeat;
  background-size: cover; }
  @media screen and (max-width: 768px) {
    .back-neji {
      background: url(../img/common/back2.png) center no-repeat;
      background-size: cover; } }

/*反社の画像*/
@media screen and (max-width: 768px) {
  .page-template-page-contact .cboxPhoto {
    max-width: 90% !important;
    height: auto !important; } }
@media screen and (min-width: 769px) {
  .page-template-page-contact .cboxPhoto {
    max-width: 700px !important;
    height: auto !important; } }
.page-template-page-contact #cboxClose {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #000;
  background: url(../img/common/close10.png) no-repeat 0 0;
  width: 250px;
  height: 80px;
  text-indent: -9999px; }

/*TOP*/
.top header .fixnav {
  background: linear-gradient(to bottom, #000 20%, transparent);
  position: absolute; }
  @media screen and (max-width: 768px) {
    .top header .fixnav {
      background-color: #fff;
      background: #fff;
      position: fixed; } }
.top .slidewrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh; }
  .top .slidewrap .bx-wrapper {
    border: none;
    box-shadow: none; }
.top .box {
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center; }
.top .box2 {
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center; }
.top .slidewrwr {
  position: relative;
  width: 100vw;
  height: 100vh; }
  .top .slidewrwr > div {
    width: 100%;
    height: 100%; }
  .top .slidewrwr .toplogo {
    position: absolute;
    top: 47%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 475px;
    height: auto; }
    @media screen and (max-width: 768px) {
      .top .slidewrwr .toplogo {
        width: 85%; } }
  .top .slidewrwr .toplogo2 {
    position: absolute;
    bottom: 100px;
    left: 100px;
    width: 300px;
    height: auto; }
    @media screen and (max-width: 768px) {
      .top .slidewrwr .toplogo2 {
        bottom: 130px;
        left: 30px;
        width: 60%;
        height: auto; } }
.top .topbtn {
  width: 180px;
  height: auto;
  bottom: 40px;
  position: absolute;
  right: 60px;
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .top .topbtn {
      right: 20px;
      width: 150px;
      bottom: -70px; } }
  .top .topbtn a {
    display: block; }
.top .topbtn2 {
  width: 180px;
  height: auto;
  bottom: 40px;
  position: absolute;
  right: 264px;
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .top .topbtn2 {
      left: 20px;
      width: 150px;
      bottom: -70px; } }
  .top .topbtn2 a {
    display: block; }
.top .topscroll {
  width: 40px;
  position: absolute;
  height: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -10px; }
  @media screen and (max-width: 768px) {
    .top .topscroll {
      display: none; } }
@media screen and (max-width: 768px) {
  .top .topscroll2 {
    width: 42px;
    position: absolute;
    height: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -140px; } }
.top .mainspace {
  margin-top: 100px;
  margin-bottom: 100px;
  display: flex; }
  @media screen and (max-width: 768px) {
    .top .mainspace {
      display: block;
      margin-top: 130px;
      margin-bottom: 10px; } }
  .top .mainspace div.back {
    width: 50%;
    background: url("../img/top/lead.jpg") center no-repeat;
    background-size: cover; }
    @media screen and (max-width: 768px) {
      .top .mainspace div.back {
        background-size: cover;
        width: 100%;
        height: 235px; } }
  .top .mainspace div.lead {
    padding: 0 120px 0 90px;
    width: 50%; }
    .top .mainspace div.lead h2 {
      font-size: 26px;
      margin-bottom: 30px; }
      @media screen and (max-width: 768px) {
        .top .mainspace div.lead h2 {
          font-size: 24px;
          margin-bottom: 15px; } }
    @media screen and (max-width: 768px) {
      .top .mainspace div.lead {
        padding: 30px 30px 90px 30px;
        width: 100%; } }
.top .creativework {
  margin-top: 100px;
  margin-bottom: 100px;
  display: flex; }
  @media screen and (max-width: 768px) {
    .top .creativework {
      display: block;
      margin-top: 130px;
      margin-bottom: 10px; } }
  .top .creativework div.back {
    width: 50%;
    background: url("../img/top/lead2.jpg") center no-repeat;
    background-size: cover; }
    @media screen and (max-width: 768px) {
      .top .creativework div.back {
        background-size: cover;
        width: 100%;
        height: 180px; } }
  .top .creativework div.lead {
    padding: 0 120px 30px 90px;
    width: 50%; }
    .top .creativework div.lead h2 {
      font-size: 26px;
      margin-bottom: 30px; }
      @media screen and (max-width: 768px) {
        .top .creativework div.lead h2 {
          font-size: 24px;
          margin-bottom: 15px; } }
    @media screen and (max-width: 768px) {
      .top .creativework div.lead {
        padding: 30px 30px 90px 30px;
        width: 100%; } }
.top .top3btn {
  margin-bottom: 56px; }
  .top .top3btn p {
    padding-top: 24px;
    padding-left: 40px;
    padding-bottom: 55px;
    font-size: 22px; }
    @media screen and (max-width: 768px) {
      .top .top3btn p {
        padding-bottom: 38px;
        font-size: 14px; } }
  .top .top3btn li {
    background-color: #EBEBEB;
    width: 33%; }
    @media screen and (max-width: 768px) {
      .top .top3btn li {
        width: 100%; } }
    .top .top3btn li h2 {
      text-align: left;
      padding-left: 40px; }
    .top .top3btn li a {
      display: block;
      padding-top: 76px;
      text-align: left; }
      @media screen and (max-width: 768px) {
        .top .top3btn li a {
          padding-top: 38px; } }
    .top .top3btn li div {
      position: relative; }
    .top .top3btn li img.arrow {
      width: 46px;
      position: absolute;
      top: -25px;
      z-index: 2;
      left: 0;
      right: 0;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        .top .top3btn li img.arrow {
          top: -20px; } }
    .top .top3btn li img.image {
      width: 100%;
      vertical-align: bottom; }
.top .back-pc {
  background: url(../img/top/online.jpg) center no-repeat;
  background-size: cover;
  padding-top: 20px;
  padding-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .top .back-pc {
      background: url(../img/top/sp2.png) center no-repeat;
      padding-top: 20px;
      padding-bottom: 50px;
      background-size: cover; }
      .top .back-pc span {
        font-weight: normal; } }
.top .toprecruit {
  text-align: center;
  color: #fff;
  background: url(../img/top/toprec.jpg) center no-repeat;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 70px; }
  @media screen and (max-width: 768px) {
    .top .toprecruit {
      background: url(../img/top/sp1.png) top no-repeat;
      padding-top: 40px;
      padding-bottom: 40px;
      background-size: cover; }
      .top .toprecruit .page-h2 {
        margin-top: 20px;
        margin-bottom: 20px; }
      .top .toprecruit h3, .top .toprecruit p {
        line-height: 1.6em; } }
  .top .toprecruit h3 {
    font-size: 20px;
    letter-spacing: 2px;
    padding-bottom: 10px; }
    @media screen and (max-width: 768px) {
      .top .toprecruit h3 {
        font-size: 18px;
        line-height: 1.6em;
        margin-top: 60px; } }
    .top .toprecruit h3 + p {
      font-size: 15px;
      margin-bottom: 20px; }
      @media screen and (max-width: 768px) {
        .top .toprecruit h3 + p {
          font-size: 14px; } }
  .top .toprecruit .page-h2 {
    margin-bottom: 20px; }
.top .news {
  margin: 100px 0; }
  @media screen and (max-width: 768px) {
    .top .news {
      margin: 60px 0; } }
  .top .news .newsul {
    margin-top: 30px;
    margin-bottom: 30px; }
    .top .news .newsul li {
      padding-top: 20px;
      letter-spacing: 2px;
      border-bottom: 1px solid #000; }
      @media screen and (max-width: 768px) {
        .top .news .newsul li {
          font-size: 14px; } }
      .top .news .newsul li img {
        width: 22px;
        vertical-align: -6px;
        height: auto; }
      .top .news .newsul li .date {
        padding-left: 20px;
        font-weight: bold;
        padding-right: 20px;
        margin-bottom: 15px;
        display: inline-block;
        border-right: 1px solid #000; }
        @media screen and (max-width: 768px) {
          .top .news .newsul li .date {
            padding-left: 10px; } }
      .top .news .newsul li .cat {
        padding-left: 20px;
        font-weight: bold; }
        @media screen and (max-width: 768px) {
          .top .news .newsul li .cat {
            padding-left: 10px; } }
      .top .news .newsul li .title {
        display: block;
        padding-bottom: 20px;
        padding-left: 40px;
        line-height: 1.4em; }
        @media screen and (max-width: 768px) {
          .top .news .newsul li .title {
            padding-left: 10px; } }

@media screen and (max-width: 768px) {
  .spmt20 {
    margin-top: 20px !important; } }

@media screen and (max-width: 768px) {
  .sppt20 {
    padding-top: 20px !important; } }

.kanri .bx-wrapper {
  border: none;
  padding: 0;
  box-shadow: none; }
  @media screen and (min-width: 769px) {
    .kanri .bx-wrapper {
      display: none; } }
  .kanri .bx-wrapper .bx-pager {
    text-align: right; }
    .kanri .bx-wrapper .bx-pager .bx-default-pager a {
      background-color: #FFEC00; }
  @media screen and (max-width: 768px) {
    .kanri .bx-wrapper {
      margin-bottom: 50px; }
      .kanri .bx-wrapper .bx-default-pager a {
        background-color: #EBEBEB; }
        .kanri .bx-wrapper .bx-default-pager a.active {
          background-color: #FFEC00; } }

/*page*/
.blog .page-top {
  position: relative;
  margin-bottom: 85px; }
  .blog .page-top .h1wrap {
    position: absolute;
    top: 40%;
    right: 0;
    left: 0;
    margin: 0 auto; }
    .blog .page-top .h1wrap h1, .blog .page-top .h1wrap p {
      color: #fff; }
    .blog .page-top .h1wrap .page-h1 {
      background: none; }
.blog section.news {
  margin-bottom: 95px; }

.newsul3 {
  display: flex;
  gap: 0 4.3333%;
  flex-wrap: wrap; }
  @media screen and (max-width: 768px) {
    .newsul3 {
      gap: 0 8%; } }
  .newsul3 li {
    width: 21.75%;
    margin-bottom: 30px; }
    @media screen and (max-width: 768px) {
      .newsul3 li {
        width: 46%;
        margin-bottom: 15px; } }
    .newsul3 li img {
      width: 100%;
      height: auto; }
    .newsul3 li .title {
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 10px;
      display: block; }
    .newsul3 li .postdate {
      font-size: 11px; }
    .newsul3 li .kiji {
      font-size: 12px;
      line-height: 1.8em; }

/*ブログの下線*/
.head-border {
  display: flex;
  align-items: center; }

.head-border:before,
.head-border:after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #707070; }

.head-border:before {
  margin-right: 1rem; }

.head-border:after {
  margin-left: 1rem; }

.single {
  margin-top: 60px; }
  @media screen and (max-width: 768px) {
    .single {
      margin-top: 30px; } }
  .single .date {
    font-size: 14px;
    letter-spacing: 1px; }
    .single .date span {
      padding-left: 10px;
      margin-left: 10px;
      border-left: 1px solid #000; }
  .single h2 {
    font-size: 22px;
    letter-spacing: 1px;
    padding-top: 10px;
    padding-bottom: 40px; }
    @media screen and (max-width: 768px) {
      .single h2 {
        padding-bottom: 30px; } }
  .single .blogcontent p {
    font-size: 16px;
    letter-spacing: 0.5px; }

.pagetemp header {
  padding-top: 80px;
  background-color: #fff; }
  @media screen and (max-width: 768px) {
    .pagetemp header {
      padding-top: 50px; } }
  .pagetemp header .fixnav {
    background: rgba(255, 255, 255, 0.9); }
    @media screen and (max-width: 768px) {
      .pagetemp header .fixnav {
        background: #fff; } }
    .pagetemp header .fixnav .main-nav p a {
      color: #000;
      border-color: #000; }
    .pagetemp header .fixnav a {
      color: #000; }
.pagetemp .page-top img {
  width: 100%;
  vertical-align: top; }
  @media screen and (max-width: 768px) {
    .pagetemp .page-top img {
      width: 100%; } }

.kanri h3 {
  font-size: 20px;
  padding-bottom: 12px;
  margin-top: 40px; }

.cad p {
  margin-bottom: 13px;
  margin-top: 30px; }

/*company*/
.companytable {
  margin: 50px 0;
  width: 100%;
  font-size: 16px;
  letter-spacing: 1px; }
  @media screen and (max-width: 768px) {
    .companytable {
      margin: 0; } }
  .companytable th {
    text-align: left;
    vertical-align: top;
    padding: 38px 0 0 0;
    width: 190px; }
    .companytable th span.th {
      display: block;
      position: relative;
      padding: 0 0 12px 12px;
      margin-bottom: 12px;
      border-left: 9px solid #FFEC00; }
      @media screen and (max-width: 768px) {
        .companytable th span.th {
          margin-right: -12px; } }
      .companytable th span.th:after {
        content: "";
        height: 12px;
        width: 100%;
        background-color: #fff;
        display: block;
        position: absolute;
        left: -12px;
        bottom: 0;
        border-bottom: 1px solid #707070; }
    @media screen and (max-width: 768px) {
      .companytable th {
        font-weight: 500;
        width: 100%;
        display: block; }
        .companytable th span.th:after {
          border-bottom: 1px solid #CFD2D3; } }
  .companytable td {
    font-weight: bold;
    padding: 30px 12px 15px 30px; }
    .companytable td span {
      display: block;
      padding-bottom: 10px; }
    .companytable td.place {
      font-size: 14px;
      font-weight: normal; }
      @media screen and (max-width: 768px) {
        .companytable td.place {
          font-size: 12px; }
          .companytable td.place span {
            font-size: 16px; } }
    @media screen and (max-width: 768px) {
      .companytable td {
        width: 100%;
        display: block;
        padding: 5px 0px 12px 0px; } }

.mapwrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  margin-top: 40px; }
  .mapwrap .map {
    width: 110%;
    margin-right: 30px; }
    @media screen and (max-width: 768px) {
      .mapwrap .map {
        width: 100%;
        display: block; } }
  @media screen and (max-width: 768px) {
    .mapwrap .photo {
      width: 100%;
      display: block; } }
  .mapwrap .photo img {
    width: 100%;
    display: block; }
  .mapwrap .photo dl {
    padding-top: 20px; }
    .mapwrap .photo dl dt {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 20px; }
      @media screen and (max-width: 768px) {
        .mapwrap .photo dl dt {
          letter-spacing: 1px;
          margin-bottom: 10px; } }
    .mapwrap .photo dl dd {
      font-size: 13px; }
      @media screen and (max-width: 768px) {
        .mapwrap .photo dl dd {
          letter-spacing: 1px;
          line-height: 1.8em; } }
  @media screen and (max-width: 768px) {
    .mapwrap {
      width: 100%;
      display: block; } }

.back-beige {
  background-color: #F8F8EF;
  margin: 150px 0;
  padding-bottom: 130px;
  padding-top: 40px; }
  .back-beige .h2wrap {
    margin-top: 80px;
    margin-bottom: 130px; }
  @media screen and (max-width: 768px) {
    .back-beige {
      margin: 80px 0;
      padding-bottom: 30px; }
      .back-beige .h2wrap {
        margin-top: 40px;
        margin-bottom: 70px; } }

.kei {
  border: 1px solid #CFD2D3; }

.back-beige2 {
  background-color: #F8F8EF;
  margin: 60px 0 0;
  padding-bottom: 30px;
  padding-top: 30px; }

.back-clip1 {
  padding-top: 50px;
  position: relative; }
  @media screen and (max-width: 768px) {
    .back-clip1 {
      padding-bottom: 50px; } }
  .back-clip1::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .back-clip1-middle1::before {
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); }
    @media screen and (max-width: 768px) {
      .back-clip1-middle1::before {
        clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); } }
  .back-clip1-middle2 {
    padding-top: 100px;
    padding-bottom: 50px; }
    @media screen and (max-width: 768px) {
      .back-clip1-middle2 {
        padding-top: 50px; } }
    .back-clip1-middle2::before {
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); }
      @media screen and (max-width: 768px) {
        .back-clip1-middle2::before {
          clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); } }
  .back-clip1-middle3 {
    padding-top: 50px; }
    .back-clip1-middle3::before {
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); }
      @media screen and (max-width: 768px) {
        .back-clip1-middle3::before {
          clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); } }
  .back-clip1-middle4 {
    padding-top: 100px; }
    @media screen and (max-width: 768px) {
      .back-clip1-middle4 {
        padding-top: 50px; } }
    .back-clip1-middle4::before {
      clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%); }
      @media screen and (max-width: 768px) {
        .back-clip1-middle4::before {
          clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); } }
  .back-clip1-yellow::before {
    background-color: #FFEC00; }
  .back-clip1-yellowwhite {
    background-color: #FFF; }
  .back-clip1-gray::before {
    background-color: #EBEBEB; }
  .back-clip1-grayyellow {
    background-color: #FFEC00; }
  .back-clip1-white::before {
    background-color: #FFF; }
  .back-clip1-whitegray {
    background-color: #EBEBEB; }
  .back-clip1-whiteyellow {
    background-color: #FFEC00; }

.back-photo1 {
  margin-top: 100px; }
  .back-photo1 img {
    width: 100%; }

.staff {
  margin: 40px 0; }
  .staff div:first-child {
    margin-right: 30px; }
    @media screen and (max-width: 768px) {
      .staff div:first-child {
        margin-right: 0px; } }
  .staff p {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-top: 10px; }
  .staff h4 {
    font-size: 20px;
    letter-spacing: 1px; }
    @media screen and (max-width: 768px) {
      .staff h4 {
        font-size: 18px;
        margin-top: 10px; } }
  .staff span.f14 {
    display: block;
    font-size: 14px;
    font-weight: normal; }
    @media screen and (min-width: 769px) {
      .staff span.f14 {
        margin-bottom: -4px; } }
  .staff span.f12 {
    padding-left: 20px;
    font-weight: normal; }
  .staff .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7em;
    margin: 20px 0 14px 0; }
    @media screen and (max-width: 768px) {
      .staff .title {
        margin: 10px 0;
        line-height: 1.6em; } }
  .staff .txt_underline {
    font-weight: bold;
    display: inline-block;
    border-bottom: 1px solid #000;
    text-decoration: none !important; }

.staffonly p {
  margin-top: 10px;
  line-height: 2; }

.bottom30 {
  margin: 30px 0 !important;
  font-size: 12px !important; }
  @media screen and (max-width: 768px) {
    .bottom30 {
      margin: 70px 0 40px 0 !important; } }

.interview-staff img {
  vertical-align: middle; }
.interview-staff-pagetitle {
  padding: 0 30px 75px;
  background: #423f3e;
  position: relative; }
  .interview-staff-pagetitle span {
    display: block; }
  .interview-staff-pagetitle01 {
    color: #FFEC00;
    font-size: 26px;
    line-height: 1.5;
    margin-bottom: 20px;
    transform: translateY(-20px); }
  .interview-staff-pagetitle02 {
    color: #FFEC00;
    font-size: 16px; }
  .interview-staff-pagetitle03 {
    color: #FFF;
    font-size: 26px;
    margin-right: 10px;
    display: inline-block !important; }
  .interview-staff-pagetitle04 {
    color: #FFF;
    font-size: 14px;
    display: inline-block !important; }
  .interview-staff-pagetitle05 {
    color: #FFF;
    font-size: 16px; }
.interview-staff-flex {
  display: flex;
  flex-flow: wrap row;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .interview-staff-flex {
      display: block; } }
.interview-staff-reverse {
  flex-direction: row-reverse; }
.interview-staff-txt {
  width: calc(45% - 30px); }
  @media screen and (max-width: 768px) {
    .interview-staff-txt {
      width: 100%; } }
  .interview-staff-txt01 {
    margin-top: 120px; }
    @media screen and (max-width: 768px) {
      .interview-staff-txt01 {
        margin-top: 0; } }
.interview-staff-pic {
  width: calc(55% - 35px); }
  @media screen and (max-width: 768px) {
    .interview-staff-pic {
      width: 100%; } }
  .interview-staff-pic01 {
    margin-top: 80px; }
    @media screen and (max-width: 768px) {
      .interview-staff-pic01 {
        margin-top: 30px; } }
  .interview-staff-pic02 {
    margin-top: 120px; }
    @media screen and (max-width: 768px) {
      .interview-staff-pic02 {
        margin-top: 30px; } }
  .interview-staff-picpl {
    padding-left: 85px;
    padding-right: 10px; }
    @media screen and (max-width: 768px) {
      .interview-staff-picpl {
        margin-top: 40px;
        padding-left: 7.5vw;
        padding-right: 7.5vw; }
        .interview-staff-picpl img {
          width: 100%;
          max-width: 400px;
          margin: auto;
          display: block; } }
.interview-staff-q {
  font-size: 130px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 60px;
  position: relative; }
  @media screen and (max-width: 768px) {
    .interview-staff-q {
      font-size: 100px;
      margin-bottom: 40px; } }
  .interview-staff-q01 {
    color: #fff; }
  .interview-staff-q02 {
    color: #FFEC00; }
  .interview-staff-q span {
    color: #000;
    font-size: 20px;
    position: absolute;
    left: 150px;
    bottom: 5px; }
    @media screen and (max-width: 768px) {
      .interview-staff-q span {
        left: 100px; } }
.interview-staff-head {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px; }
.interview-staff-body {
  font-size: 16px;
  line-height: 1.8; }
.interview-staff-msg {
  padding: 50px 80px;
  background-color: #423F3E;
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  @media screen and (max-width: 768px) {
    .interview-staff-msg {
      padding: 50px 30px;
      border-radius: 70px;
      display: block; } }
  .interview-staff-msg::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 52px 30px 0 30px;
    border-color: #423F3E transparent transparent transparent;
    position: absolute;
    top: 95%;
    right: 80px; }
    @media screen and (max-width: 768px) {
      .interview-staff-msg::after {
        margin: auto;
        top: 97.5%;
        left: 0;
        right: 0; } }
  .interview-staff-msgpic {
    width: 280px; }
    @media screen and (max-width: 768px) {
      .interview-staff-msgpic {
        width: 85%;
        margin: auto; } }
  .interview-staff-msgtxt {
    color: #fff;
    width: 450px; }
    @media screen and (max-width: 768px) {
      .interview-staff-msgtxt {
        width: 100%; } }
  .interview-staff-msghead {
    font-size: 24px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    position: relative; }
    @media screen and (max-width: 768px) {
      .interview-staff-msghead {
        font-size: 22px;
        text-align: center;
        margin-bottom: 30px; } }
    .interview-staff-msghead::after {
      content: "";
      width: 80px;
      height: 2px;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: 0; }
      @media screen and (max-width: 768px) {
        .interview-staff-msghead::after {
          margin: auto;
          right: 0; } }
  .interview-staff-msgbody {
    font-size: 16px;
    line-height: 1.8; }
    @media screen and (max-width: 768px) {
      .interview-staff-msgbody {
        margin-top: 20px; } }

.autovideo {
  width: 780px;
  margin: auto;
  aspect-ratio: 16 / 9; }
  @media screen and (max-width: 768px) {
    .autovideo {
      width: 100%; } }

.autovideo-wrap {
  width: 100%;
  height: 100%; }

/*実績*/
.jisseki-wrap p.page-p {
  font-size: 13px;
  padding-top: 10px;
  text-align: left; }

.jisseki {
  background-size: cover;
  margin-top: 50px;
  font-size: 30px;
  font-weight: bold; }
  @media screen and (max-width: 768px) {
    .jisseki {
      font-size: 16px; } }
  @media screen and (min-width: 769px) {
    .jisseki {
      padding: 120px 0;
      background-size: 780px; } }
  @media screen and (max-width: 768px) {
    .jisseki {
      padding: 70px 0; } }
  .jisseki p span {
    font-size: 100px;
    vertical-align: -20px;
    padding: 0 5px 0 5px; }
    @media screen and (max-width: 768px) {
      .jisseki p span {
        font-size: 46px;
        vertical-align: -10px;
        padding: 0 4px; } }

.jisseki1 {
  background: url("../img/page/jisseki1.jpg") center no-repeat; }

.jisseki2 {
  background: url("../img/page/jisseki2.jpg") center no-repeat; }

.jisseki3 {
  background: url("../img/page/jisseki3.jpg") center no-repeat; }

@-webkit-keyframes zoom {
  50% {
    -webkit-transform: scale(2.05); } }
@keyframes zoom {
  50% {
    transform: scale(2.05); } }
.effect-nansaku {
  -webkit-animation: zoom .3s;
  animation: zoom .3s; }

.red {
  color: #C13838;
  font-weight: bold;
  font-size: 1.6em; }
  @media screen and (max-width: 768px) {
    .red {
      font-size: 1.3em; } }

/*技術*/
.nejiwrap {
  margin: 50px 0; }
  @media screen and (min-width: 769px) {
    .nejiwrap img {
      width: 100%; } }
@media screen and (min-width: 769px) and (max-width: 768px) {
  .nejiwrap {
    margin: 0 !important; } }

/*対談*/
@media screen and (max-width: 768px) {
  .sashi {
    position: relative;
    margin-bottom: 50px; }
    .sashi h1 {
      position: absolute;
      bottom: -5px;
      left: 0;
      line-height: 1.5em;
      font-weight: bold;
      font-size: 22px; }
      .sashi h1 .h1sashi1 {
        display: inline-block;
        background-color: #fff;
        padding: 10px 20px;
        margin-bottom: 8px; }
      .sashi h1 .h1sashi2 {
        display: inline-block;
        padding: 10px 20px;
        background-color: #FFEC00; }
    .sashi p {
      font-weight: bold;
      font-size: 14px;
      padding-left: 20px;
      position: absolute;
      bottom: -35px; } }
.taidan-wrap {
  padding-top: 20px; }
  @media screen and (max-width: 768px) {
    .taidan-wrap {
      padding-top: 0; }
      .taidan-wrap .mt60 {
        margin-top: 40px; }
      .taidan-wrap dl {
        font-weight: 500; }
        .taidan-wrap dl dt {
          font-size: 14px;
          padding-bottom: 5px;
          padding-top: 20px; }
        .taidan-wrap dl dd {
          display: inline-block;
          padding-bottom: 4px;
          font-size: 17px;
          border-bottom: 2px solid #ccc; }
          .taidan-wrap dl dd span {
            font-size: 12px;
            display: inline-block;
            padding-left: 20px; } }
  .taidan-wrap img {
    margin-top: 50px;
    margin-bottom: 70px; }
    @media screen and (max-width: 768px) {
      .taidan-wrap img {
        margin-top: 30px;
        margin-bottom: 30px; } }
  .taidan-wrap h2 {
    font-size: 26px;
    line-height: 1.4em; }
    .taidan-wrap h2 span {
      font-size: 10px;
      line-height: 3em;
      padding: 0.5px 10px;
      vertical-align: 4px;
      background-color: #FFEC00;
      display: inline-block;
      margin-right: 20px; }
      @media screen and (max-width: 768px) {
        .taidan-wrap h2 span {
          padding: 0 14px;
          margin-bottom: 10px; } }
    @media screen and (max-width: 768px) {
      .taidan-wrap h2 {
        font-size: 22px;
        letter-spacing: 1px; } }
  .taidan-wrap ol li {
    margin-top: 40px;
    display: flex;
    align-items: flex-start; }
    .taidan-wrap ol li .who {
      font-size: 16px;
      text-align: left;
      letter-spacing: 2px;
      font-weight: 500;
      width: 20%; }
      @media screen and (max-width: 768px) {
        .taidan-wrap ol li .who {
          font-size: 16px;
          width: 15%; } }
    .taidan-wrap ol li div {
      display: flex;
      width: 80%; }
      .taidan-wrap ol li div p:first-child {
        display: inline-block;
        border-top: 1px solid #707070;
        border-left: 1px solid #707070;
        border-bottom: 1px solid #707070;
        width: 10px;
        margin-right: 30px; }
      .taidan-wrap ol li div p {
        font-size: 14px;
        line-height: 2;
        width: 90%; }
      @media screen and (max-width: 768px) {
        .taidan-wrap ol li div {
          width: 84%; }
          .taidan-wrap ol li div p:first-child {
            width: 15px;
            margin-right: 10px; }
          .taidan-wrap ol li div p {
            font-size: 14px;
            width: 90%; } }
  @media screen and (max-width: 768px) {
    .taidan-wrap .mb60 {
      text-align: left !important;
      margin-bottom: 20px; } }

/*flow*/
@media screen and (min-width: 769px) {
  .cont {
    text-align: center; } }

.contact-notice {
  border: 1px solid #707070;
  margin-top: 30px;
  padding: 0px 0 30px; }
  @media screen and (max-width: 768px) {
    .contact-notice {
      border: 1px solid #707070;
      margin-top: 20px;
      padding-bottom: 0; } }
  .contact-notice h2 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #F8F8EF; }
  .contact-notice dl {
    display: flex;
    justify-content: space-between;
    margin-top: 30px; }
    .contact-notice dl dt {
      padding: 0 40px;
      width: 25%;
      font-size: 14px;
      margin-top: 10px; }
    .contact-notice dl dd {
      padding: 0 40px;
      width: 75%;
      line-height: 2em;
      border-left: 1px solid #707070;
      font-size: 13px; }
    @media screen and (max-width: 768px) {
      .contact-notice dl {
        display: block;
        padding: 0 20px 10px; }
        .contact-notice dl:last-child {
          margin-top: 0; }
        .contact-notice dl dt {
          width: 100%;
          border-bottom: 1px solid #707070;
          padding: 0; }
        .contact-notice dl dd {
          width: 100%;
          padding: 10px 0;
          line-height: 2em;
          border-left: none; } }

.recruittable {
  margin: 0; }
  .recruittable td {
    padding: 20px 12px 12px 30px !important;
    line-height: 2em;
    font-weight: 500; }
    @media screen and (max-width: 768px) {
      .recruittable td {
        padding: 5px 0px 12px 0px !important; } }
  @media screen and (max-width: 768px) {
    .recruittable th {
      padding: 0; } }

.flowtable td {
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.8em;
  padding-left: 0; }
  .flowtable td img {
    float: left;
    width: 254px;
    height: auto;
    margin-right: 40px; }
@media screen and (max-width: 768px) {
  .flowtable td img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px; } }

/*telarea*/
.telarea {
  text-align: center;
  margin-top: 60px; }
  .telarea .underline {
    display: inline-block;
    font-size: 14px;
    border-bottom: 1px solid #707070; }
  .telarea img {
    width: 242px;
    display: block;
    padding-top: 25px;
    margin: 0 auto;
    height: auto; }
    @media screen and (max-width: 768px) {
      .telarea img {
        padding-top: 15px; } }
  .telarea p.f13 {
    padding-top: 10px;
    font-size: 13px; }

/*設備*/
.setsubi {
  margin: 50px 0 100px 0;
  border: 1px solid #707070;
  font-size: 16px;
  border-collapse: collapse;
  width: 100%; }
  .setsubi th {
    text-align: left;
    background-color: #EBEBEB;
    border: 1px solid #707070;
    padding: 10px 20px; }
    .setsubi th.center {
      text-align: center;
      width: 20%; }
  @media screen and (max-width: 768px) {
    .setsubi th {
      font-weight: 500;
      padding: 10px; }
      .setsubi th.center {
        text-align: center;
        width: 25%; } }
  .setsubi td {
    border: 1px solid #707070;
    padding: 10px; }
    .setsubi td.center {
      text-align: center;
      width: 20%; }

/*オンライン*/
.hr {
  border-top: 1px solid #000;
  padding-top: 30px; }
  @media screen and (max-width: 768px) {
    .hr {
      dborder-top: none; } }

.onlnetable {
  padding-left: 0 !important; }
  .onlnetable td {
    padding-left: 0; }

.online {
  padding-top: 20px;
  margin-bottom: 50px; }
  .online p {
    font-weight: bold;
    font-size: 20px;
    text-align: center; }
  @media screen and (max-width: 768px) {
    .online {
      text-align: center;
      display: block !important; }
      .online .tabs img {
        max-width: 80px; }
      .online p {
        font-weight: bold;
        text-align: center;
        font-size: 18px; } }
  .online div {
    width: 50%; }
    @media screen and (max-width: 768px) {
      .online div {
        width: 100%; } }
    .online div img {
      padding: 30px;
      display: block; }

@media screen and (max-width: 768px) {
  .left {
    text-align: left !important; }

  .step {
    display: flex !important;
    align-items: flex-start; } }
.online-image .step {
  font-size: 13px;
  display: flex;
  align-items: flex-start; }
  .online-image .step img {
    width: 60px;
    height: auto;
    float: left;
    margin-right: 20px; }
  .online-image .step span {
    display: block;
    font-weight: bold;
    font-size: 15px; }

/*タブ*/
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  margin: 0 auto; }

/*タブのスタイル*/
.tab_item {
  width: calc(99%/2);
  /* border-bottom: 3px solid #FFEC00; */
  margin-bottom: 3px;
  background-color: #CFD2D3;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 14px;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  padding: 10px;
  transition: all 0.2s ease; }

.tab2 {
  float: right; }

.tab_item:hover {
  opacity: 0.75; }

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none; }

/*タブ切り替えの中身のスタイル*/
@media screen and (min-width: 769px) {
  .online-image {
    position: relative; }
    .online-image .tateline {
      border-right: 1px solid #707070;
      position: absolute;
      left: -145px;
      top: 33%;
      z-index: -1;
      height: 280px; } }
.tab_content_description {
  position: relative; }
  .tab_content_description .tateline {
    border-right: 1px solid #707070;
    position: absolute; }
    @media screen and (max-width: 768px) {
      .tab_content_description .tateline {
        left: 26px;
        top: 30px;
        z-index: -1;
        height: 260px; } }

.tab_content {
  display: none;
  border: 8px solid #FFEC00;
  padding: 24px;
  clear: both;
  overflow: hidden; }
  .tab_content img {
    width: 50px;
    height: auto;
    /*padding-bottom: 60px;*/
    float: left;
    margin-right: 20px; }
  .tab_content p {
    font-size: 14px;
    line-height: 1.4em; }
    .tab_content p span {
      font-size: 16px;
      font-weight: bold; }

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block; }

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #FFEC00;
  margin-bottom: -3px;
  border-bottom: 3px solid #FFEC00;
  color: #000; }

/*faq-wrap*/
.faq-wrap {
  margin-top: 70px; }
  @media screen and (max-width: 768px) {
    .faq-wrap {
      margin-top: 0; } }
  .faq-wrap dl.faq {
    margin-top: 20px;
    border: 1px solid #707070; }
    .faq-wrap dl.faq dt {
      display: flex;
      align-items: flex-end;
      padding: 18px;
      font-weight: bold;
      font-size: 16px;
      border-bottom: 1px solid #707070; }
      @media screen and (max-width: 768px) {
        .faq-wrap dl.faq dt {
          align-items: flex-start; } }
      .faq-wrap dl.faq dt img {
        padding-right: 10px;
        margin-top: -8px;
        width: 30px;
        height: auto; }
    .faq-wrap dl.faq dd {
      display: flex;
      align-items: flex-start;
      padding: 18px;
      font-size: 12px; }
      @media screen and (min-width: 769px) {
        .faq-wrap dl.faq dd .pcpt8 {
          padding-top: 8px; } }
      .faq-wrap dl.faq dd a {
        color: #4AA8CB; }
      .faq-wrap dl.faq dd img {
        padding-right: 10px;
        margin-top: -4px;
        width: 30px;
        height: auto; }
      @media screen and (max-width: 768px) {
        .faq-wrap dl.faq dd {
          line-height: 1.8em; } }

/*formwrap*/
.formwrap {
  margin-top: 40px;
    /*  .mw_wp_form_confirm{
      .ko:after{
        content:"個";
      }
      .yen:after{
        content: "円";
      }
      .year:after{
        content: "年";
      }
      .month:after{
        content: "月";
      }
      .dayday:after{
        content: "日";
      }
    }
*/
      /*.img-add input{
        background-color: $midgray;
        border-radius: 10px;
        margin-top: 30px;
        padding: 10px;
        @include mobile{
          text-align: center;
        }
        @include desktop{
          display: inline-block;
          width: 290px;
          text-align: center;
        }

      }*/
  /* ラベルのスタイル　*/
  /* ボックスのスタイル */
  /* 元のチェックボックスを表示しない */
  /* チェックした時のスタイル */ }
  .formwrap input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 290px; }
  .formwrap select {
    display: inline-block;
    width: 290px; }
  .formwrap input, .formwrap textarea, .formwrap select, .formwrap button {
    font-size: 14px;
    width: 100%;
    padding: 15px;
    border: 1px solid #707070; }
    .formwrap input[type="submit"], .formwrap textarea[type="submit"], .formwrap select[type="submit"], .formwrap button[type="submit"] {
      background-color: #C13838;
      color: #fff;
      border: none; }
    .formwrap input[type="file"], .formwrap textarea[type="file"], .formwrap select[type="file"], .formwrap button[type="file"] {
      border: none; }
    .formwrap input.year, .formwrap textarea.year, .formwrap select.year, .formwrap button.year {
      width: 35%;
      display: inline-block; }
      @media screen and (min-width: 769px) {
        .formwrap input.year, .formwrap textarea.year, .formwrap select.year, .formwrap button.year {
          width: 25%; } }
    .formwrap input.day, .formwrap textarea.day, .formwrap select.day, .formwrap button.day {
      width: 18%;
      display: inline-block; }
      @media screen and (min-width: 769px) {
        .formwrap input.day, .formwrap textarea.day, .formwrap select.day, .formwrap button.day {
          width: 9%; } }
    .formwrap input.tanka, .formwrap textarea.tanka, .formwrap select.tanka, .formwrap button.tanka {
      width: 60%;
      display: inline-block; }
      @media screen and (min-width: 769px) {
        .formwrap input.tanka, .formwrap textarea.tanka, .formwrap select.tanka, .formwrap button.tanka {
          width: 40%; } }
  .formwrap .hissu {
    color: #C13838; }
  .formwrap .tani {
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    vertical-align: bottom; }
  .formwrap .hansya {
    text-decoration: underline;
    font-size: 13px;
    margin: 30px 0; }
  .formwrap h3 {
    font-size: 16px;
    padding-left: 20px;
    border-left: 10px solid #FFEC00;
    margin-top: 40px;
    letter-spacing: 1px; }
  .formwrap dl {
    font-size: 14px; }
  .formwrap p {
    padding-top: 10px;
    font-size: 14px;
    letter-spacing: 1px; }
  .formwrap input[type="checkbox"] {
    padding: 0;
    font-size: 10px; }
    @media screen and (min-width: 769px) {
      .formwrap input[type="checkbox"] {
        padding: 5px; } }
  @media screen and (max-width: 768px) {
    .formwrap .soushin {
      text-align: center; } }
  .formwrap #checkBtn-1 {
    width: 30px; }
  .formwrap #checkBtn-1 {
    margin: 0 0 10px 20px; }
  .formwrap label #checkBtn-1 {
    padding-left: 38px;
    /* ラベルの位置 */
    font-size: 32px;
    line-height: 32px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    margin-right: 10px; }
  .formwrap #checkBtn-1 {
    content: '';
    width: 32px;
    /* ボックスの横幅 */
    height: 32px;
    /* ボックスの縦幅 */
    display: inline-block;
    position: absolute;
    left: 0;
    background-color: #fff;
    box-shadow: inset 1px 2px 3px 0px #000;
    border-radius: 6px 6px 6px 6px; }
  .formwrap input[type=checkbox] {
    display: none; }
  .formwrap input[type=checkbox]:checked + #checkBtn-1 {
    content: '\2713';
    /* チェックの文字 */
    font-size: 34px;
    /* チェックのサイズ */
    color: #fff;
    /* チェックの色 */
    background-color: #06f;
    /* チェックした時の色 */ }

/*.selectbox{
  position: relative;
}
.selectbox::after{
  content:"";
  display:block;
  width:7px;
  height:7px;
  position:absolute;
  right:5%;
  top:65%;
  border-bottom:#333 2px solid;
  border-right:#333 2px solid;
  transform:rotate(45deg)translateY(-30%);
  pointer-events: none;
}
.formwrap .selectbox:focus +.selectbox::after{
  top: 80%;
}*/
@media screen and (min-width: 769px) {
  .kakunin-p {
    padding-left: 20%; } }
.kakunin-p h3 {
  font-size: 16px;
  color: #423F3E;
  margin-top: 20px; }
.kakunin-p p {
  padding-left: 20px; }
.kakunin-p p.p {
  padding-left: 0;
  font-weight: bold;
  padding-top: 10px; }
.kakunin-p .content, .kakunin-p .hansya, .kakunin-p p span.hissu {
  display: none; }

.sousin button {
  font-size: 14px;
  width: 290px;
  text-align: center;
  padding: 15px;
  background-color: #C13838;
  color: #fff;
  border: none;
  cursor: pointer; }
.sousin .back {
  font-size: 14px;
  width: 290px;
  text-align: center;
  padding: 15px;
  background-color: #4AA8CB;
  color: #fff;
  border: none;
  cursor: pointer; }

.mwform-radio-field {
  margin-left: 0 !important; }
  .mwform-radio-field label {
    display: inline-block;
    vertical-align: top;
    padding-bottom: 5px;
    width: 100%; }
    .mwform-radio-field label input {
      width: 20px;
      margin-top: 6px;
      float: left; }

.formul {
  display: flex;
  flex-flow: wrap column;
  gap: 15px; }

.formbtnul {
  margin-top: 45px;
  display: flex;
  justify-content: center;
  gap: 10px 20px; }
  @media screen and (max-width: 768px) {
    .formbtnul {
      margin-top: 30px;
      flex-flow: wrap column;
      align-items: center; } }

/*bloglist*/
.bloglist {
  padding: 40px 0; }
  @media screen and (min-width: 769px) {
    .bloglist li {
      display: inline-block;
      vertical-align: top;
      width: 48%; } }

.back button {
  font-size: 14px;
  width: 290px;
  text-align: center;
  padding: 15px;
  background-color: #4AA8CB;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 30px; }

/*ネジイラスト*/
.neji-detail {
  border-radius: 30px;
  background-color: #FFEC00;
  padding: 30px 50px 30px 50px;
  margin: 50px 0; }
  @media screen and (max-width: 768px) {
    .neji-detail {
      margin: 0 !important;
      padding: 10px 30px 20px 30px; } }
  .neji-detail dt {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 5px;
    margin-bottom: 5px;
    font-weight: bold;
    border-bottom: 1px solid #707070; }
    @media screen and (min-width: 769px) {
      .neji-detail dt {
        pointer-events: none; } }
  .neji-detail dd {
    font-size: 14px;
    padding-bottom: 10px;
    letter-spacing: 1px; }
  @media screen and (min-width: 769px) {
    .neji-detail span {
      display: none; } }

@media screen and (max-width: 768px) {
  .toggle_title {
    position: relative;
    cursor: pointer; }

  .toggle_btn {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 50%; }

  .toggle_btn:before, .toggle_btn:after {
    display: block;
    content: '';
    background-color: #000;
    position: absolute;
    width: 10px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

  .toggle_btn:before {
    width: 2px;
    height: 10px; }

  .toggle_title.selected .toggle_btn:before {
    content: normal; }

  .toggle_contents dd {
    display: none; } }
/*モーダル*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

.content {
  margin: 0 auto;
  padding: 20px; }

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000; }

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%; }

.modal__content {
  background: #fff;
  padding: 80px 20px 20px 20px;
  position: absolute;
  width: 90%;
  right: 5px;
  left: 5px;
  margin: 0 auto; }
  .modal__content h2 {
    font-size: 15px; }
  .modal__content p {
    font-size: 12px; }

#checkBtn {
  width: 30px;
  display: inline-block;
  vertical-align: -5px; }
  @media screen and (max-width: 768px) {
    #checkBtn {
      float: left; } }

@media screen and (max-width: 768px) {
  .doui {
    display: inline-block;
    float: left;
    width: 80%; } }
/* 送信ボタン */
input[type="submit"] {
  padding: 15px 0;
  border: none;
  color: #fff; }
  @media screen and (min-width: 769px) {
    input[type="submit"] {
      display: inline-block; } }

/* 送信ボタン - マウスオーバー時 */
input[type="submit"]:hover {
  opacity: 0.8; }

/* 送信ボタン - 押せないとき */
input[type="submit"][disabled] {
  background-color: #888;
  cursor: default; }

/*footer*/
footer {
  margin-top: 120px;
  padding: 20px;
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    footer {
      margin-top: 0px;
      margin-bottom: 50px; }
      footer .inner-big {
        padding: 10px !important; } }
  footer .footnav {
    padding-bottom: 20px; }
    footer .footnav ul {
      padding-bottom: 20px; }
      footer .footnav ul li {
        display: inline-block; }
        footer .footnav ul li a {
          display: block;
          line-height: 1em;
          font-size: 12px;
          padding-left: 1em;
          padding-right: 1em;
          border-right: 1px solid #000; }
        footer .footnav ul li:first-child a {
          padding-left: 0; }
  footer .footlogo {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 200px;
    height: auto; }
  footer .address1 {
    padding-bottom: 30px; }
    @media screen and (max-width: 768px) {
      footer .address1 {
        padding-bottom: 20px; } }
  footer .address2 {
    border-left: 2px solid #CFD2D3;
    padding-left: 20px;
    padding-right: 0; }
    @media screen and (max-width: 768px) {
      footer .address2 {
        border-left: none;
        border-top: 1px solid #707070;
        padding-left: 0px;
        padding-top: 20px; } }
  footer dl {
    padding-right: 20px;
    display: inline-block;
    vertical-align: top; }
    @media screen and (max-width: 768px) {
      footer dl {
        padding-right: 0px; } }
    footer dl dt {
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 10px; }
    footer dl dd {
      font-size: 13px;
      letter-spacing: 1px;
      font-weight: normal; }
      @media screen and (max-width: 768px) {
        footer dl dd {
          font-size: 12px; } }
  footer .right {
    float: right;
    margin-top: 28px; }
    @media screen and (max-width: 768px) {
      footer .right {
        float: none;
        margin-top: 30px; } }
    footer .right .footlink {
      margin-bottom: 5px; }
      @media screen and (max-width: 768px) {
        footer .right .footlink {
          margin-bottom: 0; } }
      footer .right .footlink:nth-child(2) {
        margin-bottom: 15px; }
        footer .right .footlink:nth-child(2) li:last-child {
          vertical-align: middle;
          margin-left: 15px;
          margin-right: 0; }
          @media screen and (max-width: 768px) {
            footer .right .footlink:nth-child(2) li:last-child {
              float: right;
              transform: translateY(-5px); } }
      footer .right .footlink li {
        display: inline-block;
        margin-right: 20px; }
      footer .right .footlink a {
        font-size: 12px;
        text-decoration: underline;
        display: block; }
        footer .right .footlink a .icon--instagram {
          width: 24px;
          height: 24px;
          display: inline-block; }
          @media screen and (max-width: 768px) {
            footer .right .footlink a .icon--instagram {
              width: 30px;
              height: 30px; } }
        footer .right .footlink a .icon--black path {
          fill: #000; }
  footer .copy {
    font-size: 10px; }

.fixnav {
  position: fixed;
  padding-top: 16px;
  padding-bottom: 20px; }
  .fixnav .logo {
    display: block;
    width: 190px;
    margin-left: 20px;
    padding-top: 10px; }

@media screen and (max-width: 768px) {
  .fixnav {
    background-color: #fff;
    padding-top: 8px;
    padding-bottom: 12px;
    position: fixed; }
    .fixnav p.f-left {
      margin-left: -20px; }
    .fixnav .logo {
      position: relative;
      z-index: 3;
      width: 66%;
      float: left;
      margin: 0px; }

  #mailsp {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 58px;
    right: 58px;
    background-color: #FFEC00;
    padding: 16px 16px 12px 16px; }

  .drawer-hamburger {
    width: 24px;
    height: auto;
    padding: 9px 17px 15px 17px;
    background-color: #000;
    margin-top: -3px; }
    .drawer-hamburger:hover {
      background-color: #000; }

  .drawer-open .drawer-hamburger {
    right: 0 !important; }

  .drawer-hamburger-icon {
    content: url(../img/common/menu.png) !important;
    background-color: #000;
    width: 24px;
    height: auto; }
    .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
      content: none;
      display: none !important; }

  .drawer-open .drawer-hamburger-icon {
    content: url(../img/common/menu-c.png) !important;
    background-color: #000;
    width: 24px;
    height: auto; }
    .drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after {
      content: none;
      display: none !important; }

  .drawer-close .drawer-hamburger {
    right: 0 !important; }

  .drawer-close .drawer-hamburger-icon {
    content: url(../img/common/menu.png) !important;
    background-color: #000;
    width: 24px;
    height: auto; }
    .drawer-close .drawer-hamburger-icon:before, .drawer-close .drawer-hamburger-icon:after {
      content: none;
      display: none !important; } }
/*カウントアップなど*/
.container {
  text-align: center; }
  .container span {
    font-weight: bold;
    font-size: 50px;
    display: inline-block; }

@media screen and (min-width: 769px) {
  .main-nav {
    width: calc(100% - 210px);
    float: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2.5%; }
    .main-nav ul {
      width: 65%;
      display: flex;
      justify-content: space-between; }
      .main-nav ul li a {
        font-size: 12px;
        font-weight: bold;
        color: #fff; }
      .main-nav ul li.current a {
        border-bottom: 3px solid #FFEC00; }
    .main-nav p {
      float: right; }
      .main-nav p a {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        display: block;
        padding: 10px 18px;
        border: 1px solid #fff; }
      .main-nav p a:hover {
        color: #423F3E;
        border: 1px solid #423F3E;
        background-color: #FFEC00; }
    .main-nav div {
      margin-top: 5px; }
      .main-nav div .icon--instagram {
        width: 24px;
        height: 24px;
        display: inline-block; }
      .main-nav div .icon--white path {
        fill: #fff; }
      .main-nav div .icon--black path {
        fill: #000; } }

/*dorowa*/
.drawer-nav {
  z-index: 2;
  width: 34rem; }

.drawer--right .drawer-nav {
  right: -34rem; }

.drawer--left.drawer-open .drawer-hamburger {
  right: 0; }

.drawer-menu {
  padding: 80px 30px 20px 30px; }
  .drawer-menu > li {
    padding: 10px 4px;
    border-bottom: 1px solid #CFD2D3; }
    .drawer-menu > li:last-child {
      padding: 15px 4px 0;
      border-bottom: none; }
    .drawer-menu > li a {
      display: block;
      font-weight: bold; }
      .drawer-menu > li a .icon--instagram {
        width: 24px;
        height: 24px;
        display: inline-block; }
        @media screen and (max-width: 768px) {
          .drawer-menu > li a .icon--instagram {
            width: 30px;
            height: 30px; } }
      .drawer-menu > li a .icon--black path {
        fill: #000; }

.underlink ul {
  padding: 20px 30px 30px 30px; }
  .underlink ul li {
    display: inline-block;
    vertical-align: top;
    padding: 10px 0;
    width: 48%; }
    @media screen and (max-width: 768px) {
      .underlink ul li {
        padding: 5px 0; } }
    .underlink ul li a {
      font-size: 13px;
      display: block; }
      @media screen and (max-width: 768px) {
        .underlink ul li a {
          font-weight: bold; } }
      .underlink ul li a:before {
        content: "-";
        display: inline-block;
        margin-right: 5px; }
  @media screen and (max-width: 768px) {
    .underlink ul {
      padding: 0 30px; } }

#sb_instagram svg:not(:root).svg-inline--fa {
  display: none !important; }

footer .pagetop {
  position: absolute;
  width: 80px;
  bottom: 50px;
  right: 40px; }
  @media screen and (max-width: 768px) {
    footer .pagetop {
      bottom: 415px;
      right: 20px;
      width: 70px; } }

/*# sourceMappingURL=style.css.map */