@charset "UTF-8";
/***************************************************
	service.css
***************************************************/
#service .l_gNav .l_gNav_nav li:nth-child(3) {
  border-bottom-color: black; }
  @media only screen and (max-width: 767px) {
    #service .l_gNav .l_gNav_nav li:nth-child(3) {
      border-bottom-color: #666; } }
  #service .l_gNav .l_gNav_nav li:nth-child(3) a {
    background-color: black; }

#service .mainvisual {
  height: 380px;
  background: url(/img/service/index/mainvisual_bg.jpg) 50% 50% no-repeat;
  background-size: cover; }
  @media only screen and (max-width: 767px) {
    #service .mainvisual {
      height: 250px;
      background: url(/img/service/index/mainvisual_bg_sp.jpg) 50% 50% no-repeat;
      background-size: cover; } }

#service .c_titleBox01 .title {
  padding-top: 100px;
  background: url(/img/service/index/service01_ico.svg) 50% 0 no-repeat;
  background-size: 80px auto;
  font-weight: normal; }
  @media only screen and (max-width: 767px) {
    #service .c_titleBox01 .title {
      padding-top: 75px;
      background-size: auto 60px; } }

/* #service.index
------------------------------------------------------------ */
#service.index #serviceList .inn .text {
  padding: 80px 40px 0 40px; }
  @media only screen and (max-width: 767px) {
    #service.index #serviceList .inn .text {
      padding: 0; } }
#service.index #serviceList .service_box {
  border-top: 1px solid #000;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    #service.index #serviceList .service_box {
      border-top: none;
      margin: 0 20px; } }
  #service.index #serviceList .service_box_item {
    position: relative;
    display: inline-block;
    width: 300px;
    margin: 0 10px 35px;
    padding-top: 14px;
    text-align: left;
    vertical-align: top; }
    @media only screen and (max-width: 767px) {
      #service.index #serviceList .service_box_item {
        display: block;
        width: 100%;
        border: 1px solid #000;
        margin: 0 0 5px; } }
    #service.index #serviceList .service_box_item::before {
      display: block;
      content: "";
      position: absolute;
      top: -1px;
      left: 50%;
      width: 30px;
      height: 15px;
      margin-left: -15px;
      background: url(/img/service/index/arr_bg.png) 0 0 no-repeat; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item::before {
          top: 17px;
          left: -1px;
          margin-left: 0;
          background: url(/img/service/index/arr_bg_sp.png) 0 0 no-repeat;
          background-size: 8px 14px; } }
    #service.index #serviceList .service_box_item dt {
      padding-bottom: 95px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item dt {
          padding-bottom: 14px;
          margin: 0 10px 14px;
          border-bottom: 1px solid #000; } }
    #service.index #serviceList .service_box_item.homepage dt {
      background: url(/img/service/index/service01_ico.svg) 50% 90% no-repeat;
      background-size: auto 75px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item.homepage dt {
          background: url(/img/service/index/service01_ico.svg) 100% 5% no-repeat;
          background-size: auto 40px; }
          #service.index #serviceList .service_box_item.homepage dt img {
            width: 160px; } }
    #service.index #serviceList .service_box_item.responsive dt {
      background: url(/img/service/index/service02_ico.svg) 50% 90% no-repeat;
      background-size: auto 75px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item.responsive dt {
          background: url(/img/service/index/service02_ico.svg) 100% 5% no-repeat;
          background-size: auto 40px; }
          #service.index #serviceList .service_box_item.responsive dt img {
            width: 187px; } }
    #service.index #serviceList .service_box_item.cms dt {
      background: url(/img/service/index/service03_ico.svg) 50% 90% no-repeat;
      background-size: auto 75px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item.cms dt {
          background: url(/img/service/index/service03_ico.svg) 100% 5% no-repeat;
          background-size: auto 40px; }
          #service.index #serviceList .service_box_item.cms dt img {
            width: 202px; } }
    #service.index #serviceList .service_box_item.marketing dt {
      background: url(/img/service/index/service04_ico.svg) 50% 90% no-repeat;
      background-size: auto 75px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item.marketing dt {
          background: url(/img/service/index/service04_ico.svg) 100% 5% no-repeat;
          background-size: auto 40px; }
          #service.index #serviceList .service_box_item.marketing dt img {
            width: 90px; } }
    #service.index #serviceList .service_box_item.writing dt {
      background: url(/img/service/index/service05_ico.png) 50% 90% no-repeat;
      background-size: auto 75px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item.writing dt {
          background: url(/img/service/index/service04_ico.svg) 100% 5% no-repeat;
          background-size: auto 40px; }
          #service.index #serviceList .service_box_item.writing dt img {
            width: 157px; } }
    #service.index #serviceList .service_box_item dd {
      padding: 0 8px; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item dd {
          margin: 0 10px 15px;
          padding: 0 10px; } }
      #service.index #serviceList .service_box_item dd .title {
        color: #d34629;
        font-size: 20px;
        font-size: 2rem;
        line-height: 1.2; }
        @media only screen and (max-width: 767px) {
          #service.index #serviceList .service_box_item dd .title {
            font-size: 14px;
            font-size: 1.4rem;
            line-height: 1.3; } }
      #service.index #serviceList .service_box_item dd .text {
        margin-top: 10px;
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.5; }
        @media only screen and (max-width: 767px) {
          #service.index #serviceList .service_box_item dd .text {
            font-size: 11px;
            font-size: 1.1rem;
            /*padding-bottom: 45px;*/ } }
    #service.index #serviceList .service_box_item dd.button {
      padding-top: 25px;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        #service.index #serviceList .service_box_item dd.button {
          /*position: absolute;*/
          margin: 0;
          padding: 0 1px 1px;
          text-align: left;
          /*					padding: 1px;
          					width: 100%;
          					left: 0;
          					bottom: 0;*/ } }
      #service.index #serviceList .service_box_item dd.button a {
        display: inline-block;
        position: relative;
        padding: 8px 0;
        width: 60%;
        border: 2px solid #000;
        color: #000;
        font-size: 14px;
        font-size: 1.4rem;
        text-decoration: none; }
        @media only screen and (max-width: 767px) {
          #service.index #serviceList .service_box_item dd.button a {
            display: block;
            padding: 8px;
            width: 100%;
            border: none;
            background: #000;
            color: #fff;
            font-size: 12px;
            font-size: 1.2rem; } }
        #service.index #serviceList .service_box_item dd.button a::before {
          display: block;
          content: "";
          position: absolute;
          right: 1px;
          bottom: 1px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0 17px 17px;
          border-color: transparent transparent #000 transparent; }
          @media only screen and (max-width: 767px) {
            #service.index #serviceList .service_box_item dd.button a::before {
              border-width: 0 0 8px 8px;
              border-color: transparent transparent #fff transparent; } }
#service.index #servicePrice {
  background-color: #000;
  color: #fff; }
  #service.index #servicePrice .inn {
    padding: 40px 0; }
  #service.index #servicePrice .text {
    padding: 0 30px 30px; }
    @media only screen and (max-width: 767px) {
      #service.index #servicePrice .text {
        padding: 0 20px 20px; } }
  #service.index #servicePrice .tb_title {
    padding: 10px;
    border-top: 3px solid #ccc;
    border-bottom: 4px double #ccc;
    font-weight: normal;
    text-align: left; }
    @media only screen and (max-width: 767px) {
      #service.index #servicePrice .tb_title {
        margin: 0 20px; } }
  #service.index #servicePrice .scrollTb01 {
    padding: 0 10px; }
    @media only screen and (max-width: 767px) {
      #service.index #servicePrice .scrollTb01 {
        position: relative;
        padding: 0 20px 0; }
        #service.index #servicePrice .scrollTb01::before {
          display: block;
          content: "";
          position: absolute;
          top: 15px;
          right: 25px;
          width: 34px;
          height: 39px;
          background: url(/img/common/swipe_r.png) 50% 50% no-repeat;
          background-size: auto 39px;
          opacity: .4;
          z-index: 100; }
        #service.index #servicePrice .scrollTb01.middle::before {
          background-image: url(/img/common/swipe_lr.png); }
        #service.index #servicePrice .scrollTb01.end::before {
          background-image: url(/img/common/swipe_l.png); } }
    @media only screen and (max-width: 767px) {
      #service.index #servicePrice .scrollTb01 .scrollTb01_inn {
        padding-bottom: 3px;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; }
        #service.index #servicePrice .scrollTb01 .scrollTb01_inn::-webkit-scrollbar {
          height: 5px; }
        #service.index #servicePrice .scrollTb01 .scrollTb01_inn::-webkit-scrollbar-track {
          border-radius: 5px;
          background: #eee; }
        #service.index #servicePrice .scrollTb01 .scrollTb01_inn::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background: #666; } }
    #service.index #servicePrice .scrollTb01 table {
      width: 100%; }
      @media only screen and (max-width: 767px) {
        #service.index #servicePrice .scrollTb01 table {
          width: auto;
          margin-right: 50px; } }
      #service.index #servicePrice .scrollTb01 table thead {
        border-bottom: 2px solid #ccc; }
        #service.index #servicePrice .scrollTb01 table thead th {
          padding: 10px;
          border-right: 1px solid #ccc;
          font-size: 12px;
          font-size: 1.2rem;
          font-weight: normal; }
          #service.index #servicePrice .scrollTb01 table thead th:first-child {
            border-right: 3px solid #ccc; }
          #service.index #servicePrice .scrollTb01 table thead th:last-child {
            border-right: none; }
          #service.index #servicePrice .scrollTb01 table thead th.category {
            width: 160px; }
            @media only screen and (max-width: 767px) {
              #service.index #servicePrice .scrollTb01 table thead th.category {
                width: auto; } }
          #service.index #servicePrice .scrollTb01 table thead th.items {
            width: 200px; }
          #service.index #servicePrice .scrollTb01 table thead th.unit {
            width: 120px; }
          #service.index #servicePrice .scrollTb01 table thead th.price {
            width: 140px; }
          #service.index #servicePrice .scrollTb01 table thead th.remarks {
            width: 335px; }
          @media only screen and (max-width: 767px) {
            #service.index #servicePrice .scrollTb01 table thead th {
              font-size: 9px;
              font-size: 0.9rem; } }
      #service.index #servicePrice .scrollTb01 table tbody th {
        padding: 10px;
        border-right: 3px solid #ccc;
        border-bottom: 3px solid #ccc;
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: normal; }
        @media only screen and (max-width: 767px) {
          #service.index #servicePrice .scrollTb01 table tbody th {
            font-size: 10px;
            font-size: 1rem; } }
      #service.index #servicePrice .scrollTb01 table tbody td {
        padding: 10px;
        border-right: 1px solid #ccc;
        border-bottom: 1px dashed #ccc;
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: normal; }
        #service.index #servicePrice .scrollTb01 table tbody td:last-child {
          border-right: none; }
        #service.index #servicePrice .scrollTb01 table tbody td:nth-of-type(2) {
          text-align: right; }
        #service.index #servicePrice .scrollTb01 table tbody td:nth-of-type(3) {
          text-align: right; }
        @media only screen and (max-width: 767px) {
          #service.index #servicePrice .scrollTb01 table tbody td {
            font-size: 10px;
            font-size: 1rem; } }
      #service.index #servicePrice .scrollTb01 table tbody .last td {
        border-bottom: 3px solid #ccc; }
      #service.index #servicePrice .scrollTb01 table tbody .remarks_text {
        padding-left: 5px;
        font-size: 12px;
        font-size: 1.2rem; }
        @media only screen and (max-width: 767px) {
          #service.index #servicePrice .scrollTb01 table tbody .remarks_text {
            font-size: 10px;
            font-size: 1rem; } }
      #service.index #servicePrice .scrollTb01 table.table02 th.items {
        width: 360px; }
      #service.index #servicePrice .scrollTb01 table.table02 th:first-child {
        border-right: 1px solid #ccc; }
#service.index .c_contentsNav01_nav {
  padding-top: 80px; }
  @media only screen and (max-width: 767px) {
    #service.index .c_contentsNav01_nav {
      padding-top: 40px; } }

/* #service.homepage
------------------------------------------------------------ */
#service.homepage .c_titleBox01 .title {
  background-image: url(/img/service/index/service01_ico.svg); }
#service.homepage #introduction .text {
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    #service.homepage #introduction .text {
      padding: 0; } }
#service.homepage #introduction .image {
  padding: 40px 0; }
  @media only screen and (max-width: 767px) {
    #service.homepage #introduction .image {
      padding: 20px 0 40px; } }
#service.homepage #strategy .textBox {
  line-height: 1.7; }
#service.homepage #management .textBox {
  line-height: 1.7; }
#service.homepage #management .stext {
  font-size: 12px;
  font-size: 1.2rem;
  margin-top: 35px; }

/* #service.responsive
------------------------------------------------------------ */
#service.responsive .c_titleBox01 .title {
  background-image: url(/img/service/index/service02_ico.svg); }
#service.responsive #introduction .text {
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    #service.responsive #introduction .text {
      padding: 0; } }
#service.responsive #introduction .c_emBox {
  margin-top: 70px; }
  @media only screen and (max-width: 767px) {
    #service.responsive #introduction .c_emBox {
      margin-top: 35px; } }
#service.responsive #section01 .textBox {
  line-height: 1.7; }
#service.responsive #section02 .inn {
  padding-bottom: 20px; }
#service.responsive #section02 .textBox {
  margin-bottom: 40px;
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.responsive #section02 .textBox {
      padding: 0; } }
#service.responsive #section03 .image {
  margin-bottom: 35px; }
#service.responsive #section03 .textBox {
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.responsive #section03 .textBox {
      padding: 0; } }
  #service.responsive #section03 .textBox blockquote {
    position: relative;
    margin: 25px 0 5px;
    z-index: 1; }
    #service.responsive #section03 .textBox blockquote p {
      position: relative;
      z-index: 2; }
    #service.responsive #section03 .textBox blockquote::before {
      content: "“";
      position: absolute;
      top: -15px;
      left: -5px;
      font-size: 80px;
      line-height: 0.8em;
      font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
      color: #e2e2e2;
      z-index: 2; }
    #service.responsive #section03 .textBox blockquote::after {
      content: "”";
      position: absolute;
      right: -15px;
      bottom: -5px;
      font-size: 80px;
      line-height: 0;
      font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
      color: #e2e2e2;
      z-index: 2; }
  #service.responsive #section03 .textBox .origin {
    margin-bottom: 25px; }
    #service.responsive #section03 .textBox .origin a {
      text-decoration: underline; }
      #service.responsive #section03 .textBox .origin a:hover {
        text-decoration: none; }
#service.responsive #section04 .textBox {
  line-height: 1.7; }
#service.responsive #section04 .stext {
  font-size: 12px;
  font-size: 1.2rem;
  margin-top: 35px; }

/* #service.cms
------------------------------------------------------------ */
#service.cms .c_titleBox01 .title {
  background-image: url(/img/service/index/service04_ico.svg); }
#service.cms #introduction .text {
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    #service.cms #introduction .text {
      padding: 0; } }
#service.cms #introduction .c_emBox {
  margin-top: 70px; }
  @media only screen and (max-width: 767px) {
    #service.cms #introduction .c_emBox {
      margin-top: 35px; } }
#service.cms #section01 .imgBox {
  margin-bottom: 35px; }
  @media only screen and (max-width: 767px) {
    #service.cms #section01 .imgBox {
      margin-bottom: 15px; } }
#service.cms #section01 .textBox {
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.cms #section01 .textBox {
      margin-top: 15px;
      padding: 0; } }
#service.cms #section02 .image {
  margin-top: 35px; }
  @media only screen and (max-width: 767px) {
    #service.cms #section02 .image {
      margin-top: 20px; } }
#service.cms #section02 .textBox {
  margin-top: 35px;
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.cms #section02 .textBox {
      margin-top: 15px;
      padding: 0; } }
#service.cms #section02 .caption_text {
  width: 720px;
  margin: 10px auto 0;
  font-size: 14px;
  font-size: 1.4rem; }
  @media only screen and (max-width: 767px) {
    #service.cms #section02 .caption_text {
      width: auto;
      font-size: 11px;
      font-size: 1.1rem; } }
#service.cms #section03 .textBox {
  margin-bottom: 20px;
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.cms #section03 .textBox {
      margin-bottom: 10px;
      padding: 0; } }
  #service.cms #section03 .textBox:last-child {
    margin-bottom: 0; }
#service.cms #section03 .image {
  margin-bottom: 20px; }
  @media only screen and (max-width: 767px) {
    #service.cms #section03 .image {
      margin-bottom: 10px; } }

/* #service.cmsmarketing
------------------------------------------------------------ */
#service.marketing .c_titleBox01 .title {
  background-image: url(/img/service/index/service04_ico.svg); }
#service.marketing #introduction .text {
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    #service.marketing #introduction .text {
      padding: 0; } }
#service.marketing #introduction .c_emBox {
  margin-top: 70px; }
  @media only screen and (max-width: 767px) {
    #service.marketing #introduction .c_emBox {
      margin-top: 35px; } }
#service.marketing #section01 .textBox {
  line-height: 1.7; }
#service.marketing #section02 .textBox {
  line-height: 1.7; }
#service.marketing #section03 .textBox {
  margin-bottom: 20px;
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.marketing #section03 .textBox {
      margin-bottom: 10px;
      padding: 0; } }
  #service.marketing #section03 .textBox:last-child {
    margin-bottom: 0; }
#service.marketing #section03 .image {
  margin-bottom: 20px; }
  @media only screen and (max-width: 767px) {
    #service.marketing #section03 .image {
      margin-bottom: 10px; } }

/* #service.writing
------------------------------------------------------------ */
#service.writing .c_titleBox01 .title {
  background-image: url(/img/service/index/service05_ico.svg); }
#service.writing #introduction .text {
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    #service.writing #introduction .text {
      padding: 0; } }
#service.writing #introduction .c_emBox {
  margin-top: 70px; }
  @media only screen and (max-width: 767px) {
    #service.writing #introduction .c_emBox {
      margin-top: 35px; } }
#service.writing #section01 .textBox {
  line-height: 1.7; }
#service.writing #section02 .textBox {
  margin-top: 35px;
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.writing #section02 .textBox {
      margin-top: 15px;
      padding: 0; } }
#service.writing #section03 .textBox {
  padding: 0 30px;
  line-height: 1.7; }
  @media only screen and (max-width: 767px) {
    #service.writing #section03 .textBox {
      padding: 0; } }

/* extend
------------------------------------------------------------ */
.clearfix {
  *zoom: 1; }
  .clearfix:after {
    content: "";
    display: block;
    clear: both; }