@charset "UTF-8";
.basic-in {
  background-color: #fff;
  border-radius: 10px;
  color: #000;
  max-width: 920px;
  margin: auto;
  width: 90%;
  position: relative;
  padding: 60px 0 0; }
  @media (min-width: 768px) {
    .basic-in {
      width: 80%; } }
  @media (min-width: 1024px) {
    .basic-in {
      border-radius: 20px;
      padding: 100px 0 0; } }
  .basic-in .agenda-title {
    position: absolute;
    top: -2.5em; }
    @media (min-width: 768px) {
      .basic-in .agenda-title {
        writing-mode: vertical-rl;
        top: 0;
        left: -3em; } }
    @media (min-width: 1250px) {
      .basic-in .agenda-title {
        left: -5em; } }
    .basic-in .agenda-title h2 {
      font-size: 1.6em;
      color: #fff; }
      @media (min-width: 768px) {
        .basic-in .agenda-title h2 {
          font-size: 2.4em; } }
      @media (min-width: 1250px) {
        .basic-in .agenda-title h2 {
          font-size: 4.0em; } }
      .basic-in .agenda-title h2 .ye {
        color: #F1FF4E; }
  .basic-in .txt-common.center {
    max-width: 560px;
    margin: auto;
    width: 90%; }
  .basic-in .txt-common h4 {
    font-size: 1.0em; }
    @media (min-width: 768px) {
      .basic-in .txt-common h4 {
        font-size: 1.125em; } }
    @media (min-width: 1250px) {
      .basic-in .txt-common h4 {
        font-size: 1.25em; } }
  .basic-in .txt-common h2 {
    font-size: 2.2em;
    line-height: 1.25em;
    margin-top: 5px; }
    @media (min-width: 768px) {
      .basic-in .txt-common h2 {
        font-size: 3em;
        margin-top: 10px; } }
    @media (min-width: 1250px) {
      .basic-in .txt-common h2 {
        font-size: 4.25em;
        margin-top: 20px; } }
    .basic-in .txt-common h2 span.marker {
      background: linear-gradient(180deg, #fff 0%, #fff 70%, #F1FF4E 70%, #F1FF4E 90%, #fff 90%, #fff 100%); }
  .basic-in .txt-common h3 {
    font-size: 1.8em;
    margin-top: 10px; }
    @media (min-width: 1024px) {
      .basic-in .txt-common h3 {
        font-size: 2.0em; } }
    @media (min-width: 1250px) {
      .basic-in .txt-common h3 {
        font-size: 2.5em; } }
  .basic-in .txt-common p {
    font-size: 0.9em;
    text-align: justify;
    line-height: 1.8em;
    margin-top: 20px; }
    @media (min-width: 768px) {
      .basic-in .txt-common p {
        font-size: 1.0em;
        margin-top: 30px; } }
    @media (min-width: 1250px) {
      .basic-in .txt-common p {
        font-size: 1.125em;
        margin-top: 40px; } }

#about, #work, #data, #support, #capabilities {
  position: relative;
  padding-top: 100px; }
  @media (min-width: 1024px) {
    #about, #work, #data, #support, #capabilities {
      padding-top: 140px; } }

/*
---------------------------------------------------------------------------------------------------------------------
どんな会社？
---------------------------------------------------------------------------------------------------------------------
*/
#about .basic-in {
  padding: 40px 0; }
  @media (min-width: 768px) {
    #about .basic-in {
      padding: 60px 0; } }
  @media (min-width: 1250px) {
    #about .basic-in {
      padding: 100px 0; } }
#about .president {
  margin-top: 40px; }
  @media (min-width: 1024px) {
    #about .president {
      display: flex;
      margin-top: 60px; } }
  @media (min-width: 1024px) {
    #about .president .president-L {
      width: 50%;
      position: relative;
      left: -5%; } }
  #about .president .president-L .president-ph {
    position: relative; }
    #about .president .president-L .president-ph .photo {
      width: 80%;
      margin: 0 0 0 -10%; }
      @media (min-width: 768px) {
        #about .president .president-L .president-ph .photo {
          width: 60%; } }
      @media (min-width: 1024px) {
        #about .president .president-L .president-ph .photo {
          width: 100%;
          margin: 0; } }
      #about .president .president-L .president-ph .photo img {
        border-radius: 10px; }
        @media (min-width: 1024px) {
          #about .president .president-L .president-ph .photo img {
            border-radius: 20px; } }
    #about .president .president-L .president-ph .fukidashi {
      position: absolute;
      top: 50%;
      left: 15%; }
      @media (min-width: 768px) {
        #about .president .president-L .president-ph .fukidashi {
          left: 5%; } }
      @media (min-width: 1024px) {
        #about .president .president-L .president-ph .fukidashi {
          left: 20%; } }
      #about .president .president-L .president-ph .fukidashi img {
        width: 44px; }
        @media (min-width: 768px) {
          #about .president .president-L .president-ph .fukidashi img {
            width: 60px; } }
  #about .president .president-L .movie {
    width: 90%;
    margin: -6em auto 0; }
    @media (min-width: 768px) {
      #about .president .president-L .movie {
        width: 80%;
        margin: -10em -2em 0 auto; } }
    @media (min-width: 1024px) {
      #about .president .president-L .movie {
        width: 100%;
        margin: -20% 10% 0 -10%; } }
    #about .president .president-L .movie .movie-in {
      position: relative; }
      #about .president .president-L .movie .movie-in .thumbnail img, #about .president .president-L .movie .movie-in .thumbnail video {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        border-radius: 10px; }
        @media (min-width: 768px) {
          #about .president .president-L .movie .movie-in .thumbnail img, #about .president .president-L .movie .movie-in .thumbnail video {
            border-radius: 20px; } }
      #about .president .president-L .movie .movie-in .video-play-button img {
        border-radius: 0; }
      #about .president .president-L .movie .movie-in .video-play-button:after {
        background-color: #F1FF4E; }
      #about .president .president-L .movie .movie-in .video-play-button:before {
        background-color: #F1FF4E; }
      #about .president .president-L .movie .movie-in p {
        font-size: 0.8em;
        text-align: right;
        margin-top: 2px; }
        @media (min-width: 768px) {
          #about .president .president-L .movie .movie-in p {
            position: absolute;
            bottom: -1.8em;
            right: 10%; } }
        @media (min-width: 1024px) {
          #about .president .president-L .movie .movie-in p {
            left: 20%;
            right: inherit; } }
        @media (min-width: 1250px) {
          #about .president .president-L .movie .movie-in p {
            left: 25%; } }
    #about .president .president-L .movie .fukidashi-sp {
      position: relative;
      text-align: right;
      margin: 0 0 10px 0; }
      @media (min-width: 768px) {
        #about .president .president-L .movie .fukidashi-sp {
          margin: 0 10% 10px 0; } }
      @media (min-width: 1024px) {
        #about .president .president-L .movie .fukidashi-sp {
          display: none; } }
      #about .president .president-L .movie .fukidashi-sp img {
        width: 140px; }
    #about .president .president-L .movie .fukidashi-pc {
      display: none; }
      @media (min-width: 1024px) {
        #about .president .president-L .movie .fukidashi-pc {
          margin: 10px 0 0 75%;
          display: block; } }
      #about .president .president-L .movie .fukidashi-pc img {
        width: 160px; }
  #about .president .president-R {
    padding: 0 5%;
    margin-top: 20px; }
    @media (min-width: 1024px) {
      #about .president .president-R {
        width: 50%;
        padding: 0 5% 0 0;
        margin-top: 0; } }
    #about .president .president-R .txt-common:last-child {
      margin-top: 60px; }
#about .about-txt-shita {
  margin-top: 60px; }
  #about .about-txt-shita .txt-common:nth-child(2) {
    margin-top: 60px; }
#about table {
  border-top: 1px solid #979BA0;
  max-width: 560px;
  margin: 40px auto 0;
  width: 90%; }
  @media (min-width: 768px) {
    #about table {
      margin: 80px auto 0; } }
  #about table tr th, #about table tr td {
    display: block; }
    @media (min-width: 768px) {
      #about table tr th, #about table tr td {
        display: table-cell; } }
  #about table tr th {
    font-size: 1.0em;
    line-height: 1.4em;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
    width: 100px;
    padding: 10px 0 0 0; }
    @media (min-width: 768px) {
      #about table tr th {
        font-size: 1.125em;
        border-bottom: 1px solid #979BA0;
        width: 160px;
        padding: 20px 0; } }
  #about table tr td {
    font-size: 0.85em;
    line-height: 1.8em;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #979BA0;
    color: #000; }
    @media (min-width: 768px) {
      #about table tr td {
        font-size: 1.0em;
        padding: 20px 0; } }
#about .common-btn-type1 {
  margin: 30px;
  display: flex;
  justify-content: center; }
  @media (min-width: 768px) {
    #about .common-btn-type1 {
      margin: 60px; } }

/*
---------------------------------------------------------------------------------------------------------------------
どんな仕事？
---------------------------------------------------------------------------------------------------------------------
*/
#work {
  padding-bottom: 10%; }
  #work .work-sab-title {
    text-align: center;
    margin: 40px auto 10px; }
    @media (min-width: 768px) {
      #work .work-sab-title {
        margin: 80px auto 10px; } }
    #work .work-sab-title h3 {
      font-size: 1.25em; }
      @media (min-width: 768px) {
        #work .work-sab-title h3 {
          font-size: 1.45em; } }
      @media (min-width: 1024px) {
        #work .work-sab-title h3 {
          font-size: 1.75em; } }
    #work .work-sab-title .line {
      position: relative;
      border-bottom: 2px solid #000;
      max-width: 560px;
      margin: 10px auto 0;
      width: 90%; }
      #work .work-sab-title .line img {
        width: 30px;
        position: absolute; }
  #work .work-kinds {
    position: relative;
    bottom: -2em; }
    @media (min-width: 768px) {
      #work .work-kinds {
        bottom: -5em; } }
    #work .work-kinds .work-kinds-ue {
      margin: 0 5%; }
      @media (min-width: 768px) {
        #work .work-kinds .work-kinds-ue {
          margin: 0 -10%; } }
      @media only screen and (min-width: 768px) {
        #work .work-kinds .work-kinds-ue .o-6column .col-lg-6 {
          padding: 0 10px; }
        #work .work-kinds .work-kinds-ue .o-6column {
          margin: 0 -10px; } }
      @media only screen and (min-width: 1024px) {
        #work .work-kinds .work-kinds-ue .o-6column .col-lg-6 {
          padding: 0 15px; }
        #work .work-kinds .work-kinds-ue .o-6column {
          margin: 0 -15px; } }
      #work .work-kinds .work-kinds-ue .kinds-box {
        margin-bottom: 20px; }
        @media (min-width: 1024px) {
          #work .work-kinds .work-kinds-ue .kinds-box {
            margin-bottom: 30px; } }
    #work .work-kinds li, #work .work-kinds .kinds-box {
      background-color: #F1FF4E;
      padding: 20px;
      border-radius: 20px;
      margin-bottom: 20px; }
      @media (min-width: 768px) {
        #work .work-kinds li, #work .work-kinds .kinds-box {
          display: flex;
          margin-bottom: 30px;
          padding: 30px; } }
      #work .work-kinds li .icon, #work .work-kinds .kinds-box .icon {
        width: 80px;
        margin: auto; }
        @media (min-width: 1250px) {
          #work .work-kinds li .icon, #work .work-kinds .kinds-box .icon {
            width: 100px; } }
      #work .work-kinds li .txt, #work .work-kinds .kinds-box .txt {
        margin-top: 10px; }
        @media (min-width: 768px) {
          #work .work-kinds li .txt, #work .work-kinds .kinds-box .txt {
            width: calc(100% - 80px);
            padding-left: 5%;
            margin-top: 0; } }
        @media (min-width: 1250px) {
          #work .work-kinds li .txt, #work .work-kinds .kinds-box .txt {
            width: calc(100% - 120px); } }
        #work .work-kinds li .txt h3, #work .work-kinds .kinds-box .txt h3 {
          font-size: 1.125em; }
          @media (min-width: 1024px) {
            #work .work-kinds li .txt h3, #work .work-kinds .kinds-box .txt h3 {
              font-size: 1.25em; } }
        #work .work-kinds li .txt p, #work .work-kinds .kinds-box .txt p {
          font-size: 0.9em;
          text-align: justify;
          line-height: 1.6em;
          margin-top: 10px; }
          @media (min-width: 1024px) {
            #work .work-kinds li .txt p, #work .work-kinds .kinds-box .txt p {
              font-size: 1.0em; } }
    #work .work-kinds .work-kinds-shita {
      max-width: 560px;
      width: 90%;
      margin: 0 auto; }

/*
---------------------------------------------------------------------------------------------------------------------
データで見る岡田電気工事
---------------------------------------------------------------------------------------------------------------------
*/
#data .basic-in {
  padding: 40px 0; }
  @media (min-width: 768px) {
    #data .basic-in {
      padding: 60px 0; } }
  @media (min-width: 1250px) {
    #data .basic-in {
      padding: 100px 0; } }
#data .data-area {
  max-width: 560px;
  margin: 30px auto 0;
  width: 90%; }
  @media (min-width: 768px) {
    #data .data-area {
      margin: 60px auto 0; } }
  #data .data-area .o-6column .col-lg-6 {
    padding: 0 7px; }
  #data .data-area .o-6column {
    margin: 0 -7px; }
  @media only screen and (min-width: 1024px) {
    #data .data-area .o-6column .col-lg-6 {
      padding: 0 15px; }
    #data .data-area .o-6column {
      margin: 0 -15px; } }
  #data .data-area .data-box {
    border: 1px solid #000;
    position: relative;
    width: 100%;
    border-radius: 20px;
    text-align: center;
    padding: 0 0 20px 0;
    margin-bottom: 14px;
    box-shadow: 3px 3px 0 #000; }
    @media (min-width: 1024px) {
      #data .data-area .data-box {
        border-radius: 30px;
        margin-bottom: 30px;
        box-shadow: 5px 5px 0 #000; } }
    #data .data-area .data-box .kome {
      margin: auto; }
      #data .data-area .data-box .kome p {
        font-size: 0.8em;
        font-feature-settings: "palt";
        letter-spacing: 0.05em;
        text-align: center; }
        @media (min-width: 1024px) {
          #data .data-area .data-box .kome p {
            font-size: 0.9em; } }
  #data .data-area .title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media (min-width: 1024px) {
      #data .data-area .title {
        height: 130px; } }
    #data .data-area .title.type2 {
      height: 80px; }
      @media (min-width: 1024px) {
        #data .data-area .title.type2 {
          height: 100px; } }
    #data .data-area .title h3 {
      font-size: 1.35em;
      margin-bottom: 5px; }
      @media (min-width: 1024px) {
        #data .data-area .title h3 {
          font-size: 1.5em; } }
    #data .data-area .title h4 {
      font-size: 0.8em; }
      @media (min-width: 1024px) {
        #data .data-area .title h4 {
          font-size: 1.0em; } }
  #data .data-area .title-shita {
    margin-top: 100px; }
    @media (min-width: 1024px) {
      #data .data-area .title-shita {
        margin-top: 120px; } }
    #data .data-area .title-shita.type2 {
      margin-top: 60px; }
      @media (min-width: 1024px) {
        #data .data-area .title-shita.type2 {
          margin-top: 80px; } }
    #data .data-area .title-shita img {
      width: 80px;
      margin-bottom: 5px; }
    #data .data-area .title-shita .tenn {
      margin-top: auto; }
      #data .data-area .title-shita .tenn h6 {
        font-size: 4.0em;
        font-feature-settings: "palt";
        margin: 0 -40px; }
    #data .data-area .title-shita .kome {
      width: 80%;
      margin: auto; }
      #data .data-area .title-shita .kome p {
        font-size: 0.8em;
        font-feature-settings: "palt";
        letter-spacing: 0.05em;
        text-align: left;
        margin-top: 20px; }
        @media (min-width: 1024px) {
          #data .data-area .title-shita .kome p {
            margin-top: 40px;
            font-size: 0.9em; } }
    #data .data-area .title-shita .other {
      width: 90%;
      margin: auto;
      padding: 0 0 20px 0; }
      @media (min-width: 1024px) {
        #data .data-area .title-shita .other {
          width: 60%;
          margin-left: 60px; } }
      #data .data-area .title-shita .other ul {
        text-align: left; }
        #data .data-area .title-shita .other ul li {
          font-size: 0.8em;
          display: inline-block;
          margin-right: 8px; }
          @media (min-width: 1024px) {
            #data .data-area .title-shita .other ul li {
              font-size: 0.9em;
              margin-right: 15px; } }
          #data .data-area .title-shita .other ul li:last-child {
            margin-right: 0; }
  #data .data-area .data-type1 {
    display: flex;
    justify-content: center; }
    #data .data-area .data-type1 h4 {
      font-family: bebas-kai, sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #BC1B21;
      font-size: 3.5em;
      font-weight: 900;
      line-height: 1.0em; }
      @media (min-width: 1250px) {
        #data .data-area .data-type1 h4 {
          font-size: 5.0em; } }
      #data .data-area .data-type1 h4 .small {
        font-size: 0.5em; }
    #data .data-area .data-type1 h5 {
      font-size: 1.0em;
      font-weight: 900;
      margin: 30px 0 0 3px; }
      @media (min-width: 1250px) {
        #data .data-area .data-type1 h5 {
          font-size: 1.5em;
          margin: 42px 0 0 5px; } }
  #data .data-area .data-type2 {
    display: flex;
    justify-content: center; }
    #data .data-area .data-type2 ul {
      display: inline-block;
      width: 80%; }
      #data .data-area .data-type2 ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px; }
        #data .data-area .data-type2 ul li:last-child {
          margin-bottom: 0; }
        #data .data-area .data-type2 ul li h3 {
          font-size: 1.0em;
          margin-right: 10px; }
          @media (min-width: 1024px) {
            #data .data-area .data-type2 ul li h3 {
              font-size: 1.125em; } }
        #data .data-area .data-type2 ul li .koumoku {
          display: flex;
          align-items: center; }
          #data .data-area .data-type2 ul li .koumoku h3 {
            margin-right: 10px;
            text-align: left; }
          #data .data-area .data-type2 ul li .koumoku img {
            width: 40px;
            margin: 0 10px 0 0; }
        #data .data-area .data-type2 ul li .number {
          display: flex;
          justify-content: flex-end;
          color: #BC1B21; }
          #data .data-area .data-type2 ul li .number h4 {
            font-family: bebas-kai, sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 2.6em; }
          #data .data-area .data-type2 ul li .number h5 {
            font-size: 1.0em;
            margin: 22px 0 0 2px; }
    #data .data-area .data-type2.hobby ul {
      width: 90%; }
      @media (min-width: 1024px) {
        #data .data-area .data-type2.hobby ul {
          width: 80%; } }
  #data .data-area .data-item {
    display: flex;
    justify-content: space-evenly;
    margin: 20px 0 0; }
    #data .data-area .data-item p {
      font-size: 0.9em;
      line-height: 1.0em;
      text-align: center; }
      @media (min-width: 1024px) {
        #data .data-area .data-item p {
          font-size: 1.0em; } }
    #data .data-area .data-item img {
      width: 40px;
      height: auto; }
    #data .data-area .data-item h6 {
      font-size: 0.8em;
      font-weight: 400;
      margin-top: 4px; }
#data .license-area {
  max-width: 560px;
  margin: 20px auto 0;
  width: 90%;
  border: 1px solid #000;
  border-radius: 20px;
  box-shadow: 3px 3px 0 #000;
  padding: 20px; }
  @media (min-width: 1024px) {
    #data .license-area {
      border-radius: 30px;
      padding: 30px;
      box-shadow: 5px 5px 0 #000; } }
  #data .license-area h2 {
    font-size: 1.375em; }
  @media (min-width: 1024px) {
    #data .license-area ul.license-list {
      margin-top: 20px; } }
  #data .license-area ul.license-list li {
    border-bottom: 1px solid #C4CBD3;
    padding: 15px 0; }
    @media (min-width: 768px) {
      #data .license-area ul.license-list li {
        display: flex;
        align-items: center;
        justify-content: space-between; } }
    #data .license-area ul.license-list li .item {
      display: flex;
      align-items: center; }
      @media (min-width: 768px) {
        #data .license-area ul.license-list li .item {
          width: calc(100% - 170px); } }
      #data .license-area ul.license-list li .item h3 {
        font-size: 1.0em;
        width: calc(100% - 80px); }
        @media (min-width: 768px) {
          #data .license-area ul.license-list li .item h3 {
            font-size: 1.125em; } }
      #data .license-area ul.license-list li .item .total {
        display: flex;
        justify-content: end;
        width: 80px; }
        #data .license-area ul.license-list li .item .total h4 {
          font-family: bebas-kai, sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 2.0em; }
          @media (min-width: 768px) {
            #data .license-area ul.license-list li .item .total h4 {
              font-size: 2.8em; } }
        #data .license-area ul.license-list li .item .total h5 {
          font-size: 0.8em;
          margin-top: 17px; }
          @media (min-width: 768px) {
            #data .license-area ul.license-list li .item .total h5 {
              font-size: 0.9em;
              margin-top: 27px; } }
    #data .license-area ul.license-list li h6 {
      font-size: 0.7em;
      font-weight: normal;
      text-align: right; }
      @media (min-width: 768px) {
        #data .license-area ul.license-list li h6 {
          font-size: 0.9em;
          width: 170px; } }

/*
---------------------------------------------------------------------------------------------------------------------
サポート体制
---------------------------------------------------------------------------------------------------------------------
*/
#support .basic-in {
  padding: 40px 0; }
  @media (min-width: 768px) {
    #support .basic-in {
      padding: 60px 0; } }
  @media (min-width: 1250px) {
    #support .basic-in {
      padding: 100px 0; } }
#support .support-contents {
  max-width: 560px;
  width: 90%;
  margin: 20px auto 0; }
  #support .support-contents .support-box {
    margin-top: 30px; }
    @media (min-width: 1024px) {
      #support .support-contents .support-box {
        margin-top: 40px; } }
    #support .support-contents .support-box h3 {
      font-size: 1.25em; }
      @media (min-width: 1024px) {
        #support .support-contents .support-box h3 {
          font-size: 1.75em; } }
    #support .support-contents .support-box ul {
      border-top: 1px solid #979BA0;
      margin-top: 4px;
      padding-top: 10px; }
      @media (min-width: 1024px) {
        #support .support-contents .support-box ul {
          margin-top: 8px; } }
      #support .support-contents .support-box ul li {
        display: inline-block;
        font-size: 0.9em;
        margin: 0 10px 2px 0; }
        @media (min-width: 1024px) {
          #support .support-contents .support-box ul li {
            font-size: 1.0em;
            margin: 0 20px 5px 0; } }
        #support .support-contents .support-box ul li:last-child {
          margin-right: 0; }

/*
---------------------------------------------------------------------------------------------------------------------
資格取得を支援
---------------------------------------------------------------------------------------------------------------------
*/
#capabilities .basic-in {
  padding: 40px 0; }
  @media (min-width: 768px) {
    #capabilities .basic-in {
      padding: 60px 0; } }
  @media (min-width: 1250px) {
    #capabilities .basic-in {
      padding: 100px 0; } }
#capabilities ul {
  margin-top: 30px; }
  @media (min-width: 1024px) {
    #capabilities ul {
      margin-top: 60px; } }
  #capabilities ul li {
    font-size: 1.125em;
    font-weight: bold;
    width: 130px;
    text-align: center;
    max-width: 440px;
    margin: 0 auto 20px;
    padding: 10px 0;
    width: 90%;
    border-radius: 20px;
    background-color: #F1FF4E;
    border: 1px solid #222324; }
    @media (min-width: 1024px) {
      #capabilities ul li {
        font-size: 1.5em; } }
    #capabilities ul li:last-child {
      margin-bottom: 0; }