@charset "utf-8";
/* CSS Document */
.breadcrumb {
   padding: 0 10px;
   font-size: 0.9em;
   width: inherit;
   color: rgb(98 134 172);
}
.breadcrumb ul {
   display: flex;
   justify-content: flex-end;
}
.breadcrumb ul li {
}
.breadcrumb ul li a {
   color: inherit;
   text-decoration: none;
   font-weight: 700;
}
.breadcrumb ul li a:after {
   content: "-";
   padding-inline:0.5em;
}
.breadcrumb ul li:nth-child(2) a:after {
   content: "●";
   padding-inline:0.5em;
}
.breadcrumb ul li span {
   display: inline-block;
   font-weight: 700;
}

.breadcrumb ul li span:after {
   content: "●";
   padding-inline:0.5em;
}
#contents h1 {
   font-size: 1.9em;
   letter-spacing: 2px;
   font-weight: 900;
   font-family: 'Noto Sans JP';
   width: inherit;
}
#contents h1 span {
   color: rgb(98 134 172);
   text-decoration: none;
   font-weight: 700;
   font-size: 0.7em;
   display: block;
}
#contents .titleBox {
   max-width: 1400px;
   width: calc(98% - 20px);
   text-align: left;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   align-content: center;
   margin: auto;
   padding: 4em 0;
   gap: 20px;
}
.contents {
   max-width: 1200px;
   width: calc(98% - 20px);
   margin: auto;
   padding: 2em 0;
   text-align: left;
}
.contents .lead {
   margin-bottom: 2em;
   line-height: 1.8;
}
.contents h2.ttl {
   background-color: #d9e2e7;
   color: #4c606a;
   padding: 1em;
   font-size: 18px;
   font-weight: bold;
   border-radius: 20px;
   margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
   #contents h1 {
      font-size: 2.1em;
   }
   #contents .titleBox {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      margin: auto;
      padding: 4em 0;
   }
   .breadcrumb {
      text-align: right;
      max-width: 520px;
   }
}
/************************************************/
/*****************.okomari***********************/
/************************************************/
.okomari .inner {
   text-align: left
}
.okomari .jirei {
   margin: 1em 0;
   background: #f2f9ff;
   border-radius: 20px;
   padding-bottom: 0.5em;
}
.okomari .jirei .ttl {
   background-color: #0066cb;
   background-image: url(../okomari/img/icon_komaru.png);
   background-repeat: no-repeat;
   background-position: -17px 50%;
   color: #FFF;
   padding: 1em;
   font-size: 18px;
   font-weight: bold;
   border-radius: 20px;
   margin-bottom: 0px;
   padding-left: 60px;
   background-size: 66px;
}
.okomari .jirei .wrap_flex {
   display: flex;
   flex-direction: column;
   gap: 30px;
   justify-content: center;
   margin: 2vw;
}
.okomari .jirei .wrap_flex .kaiketsu {
   flex-basis: 60%;
   display: flex;
   flex-direction: column;
   font-size: 1.1em;
   background-image: url("../okomari/img/icon_clear.png");
   background-repeat: no-repeat;
   background-size: 50px;
   padding-left: 60px;
   min-height: 50px;
   line-height: 1.8;
}
.okomari .jirei .wrap_flex .kaiketsu a {
   font-weight: 900;
   font-size: 1.1em
}
.okomari .jirei .wrap_flex .cliant {
   flex-basis: 40%;
   padding: 0.7em;
   background: #FFF;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.okomari .jirei .wrap_flex .cliant .photo {
   margin-bottom: 0.5em;
}
.okomari .jirei .wrap_flex .cliant p {}
.okomari .jirei ul.tag {
   display: flex;
   margin-top: auto;
   flex-wrap: wrap;
}
.okomari .jirei ul.tag li {
   padding: 0.2em 0.5em;
   border-radius: 20px;
   color: #7b7b7b;
   font-size: 0.8em;
}
@media screen and (max-width: 768px) {
   .okomari .jirei .wrap_flex .kaiketsu {
      justify-content: center;
   }
}
@media screen and (min-width: 769px) {
   .okomari .jirei .wrap_flex {
      display: flex;
      flex-direction: row;
      gap: 30px;
      justify-content: center;
      margin: 1.52em;
   }
}
/***********************
業務内容
***********************/
.info .infoSec {
   margin: 0px 1em 2em;
}
.info #service .flex {
   display: flex;
   justify-content: center;
}
.info #service .flex .item:first-child {
   flex-basis: 70%;
}
.info #service .flex .item:last-child {
   display: flex;
   justify-content: space-between;
   gap: 30px;
   align-items: anchor-center;
}
.info #service .flex .item:last-child p {
   flex: 1;
   font-size: 0.8em;
   margin-bottom: 1em;
}
.info #service .flex .item:last-child p img {
   display: block;
}
.info .infoSec ul.disc {
   margin-left: 2em;
}
.info .infoSec ul.disc li {
   list-style-type: disc;
   list-style-position: outside;
}
.info .infoSec ul.pickup {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   flex-direction: column;
}
.info .infoSec ul.pickup li {
   flex: 1 calc(33% - 20px);
   padding: 0.3em;
   /*background: #edf6fb;*/
   border-radius: 10px;
}
.info .infoSec ul.pickup li a {
   text-decoration: none;
}
.info .infoSec ul.pickup li p {
   padding: 0.3em;
  font-size: 0.8em;;
}
.info.infoSec ul.exsample {
   margin: 2em;
}
.info .infoSec ul.exsample li {
   background: linear-gradient(45deg, #009fd7 0%, #2062ff 52%, #0014c9 90%);
   padding: 0.5em 1em;
   border-radius: 20px;
   text-decoration: none;
   font-weight: 900;
   font-size: 1.1em;
   color: #FFF;
   display: inline-block;
   margin: 0.4em;
}
@media (min-width: 768px) {
   .info #service .flex {
      flex-wrap: nowrap;
   }
   .info #service .flex .item:last-child {
      display: inline;
   }
   .info #service .flex .item:last-child p img {
      max-width: 160px;
   }
   .info .infoSec ul.pickup {
      flex-direction: row;
   }
   .info .infoSec ul.pickup {
      flex-direction: row;
      margin: 4em 0;
   }
}
/***********************
会社案内
***********************/
#company #companyMain {
   display: flex;
   flex-direction: column;
   align-items: end;
}
#company #companyMain div {
   padding: 1em 0;
   width: calc(100% - 5vw);
}
#company #companyMain div img {
   border-radius: 15px 0 0 15px;
   object-fit: cover;
}
#company #companyMain p {
   margin-top: 1em;
   font-size: 1.2em;
   align-self: center;
}
.company .lead {
   margin: 0px 1em 2em;
}
.company .companySec {
   margin: 0px 1em 4em;
}
.company .companySec dl {
   text-align: left;
}
.company #syamei .flex {
   justify-content: center;
   gap: 20px;
   align-items: center;
}
.company #syamei .flex > div:last-child {
   text-align: center;
	flex-basis:calc(40% - 20px);
}.company #syamei .flex > div:first-child{
   text-align:justify;
	flex-basis: 60%
}
.company #syamei .flex > div img {
   max-height: 200px;
   width: 60%;
   height: 200px;
}
@media (min-width: 768px) {
   .company .companySec dl dt {
      width: 200px;
      float: left;
      padding: 10px;
   }
   .company .companySec dl dd {
      padding: 10px 10px 10px 200px;
      border-bottom: 1px dotted #CCC;
      margin-bottom: 10px;
   }
}
@media (max-width: 767px) {
   .company .companySec dl dt {
      font-weight: bold;
      color: #004080;
   }
   .company .companySec dl dd {
      padding: 0 0 10px 1em;
      border-bottom: 1px dotted #CCC;
      margin-bottom: 10px;
   }
}
/***********************
個人情報保護方針
***********************/
.policy .inner {
   line-height: 1.8;
}
.policy .inner p {
   width: calc(95% - 20px);
   margin: 0 auto 3em auto;
}
.policy dl {
   width: calc(95% - 20px);
   margin: auto;
}
.policy dl dt {
   font-weight: bold;
   color: #004080;
   font-size: 1.2em;
   margin-bottom: 0.5em;
}
.policy dl dd {
   margin-bottom: 2em;
   padding-left: 1em;
}
/***********************
制作データの取扱い
***********************/
.copyright .inner .lead P {
   margin-left: 2em;
   margin-top: 1em;
}
.copyright .qaContainer {
   margin-left: 2em;
   margin-top: 1em;
}
.copyright .qaContainer > dl > dt {
   padding: 10px 10px 10px 35px;
   border-radius: 5px;
   background: #e8edf2;
   text-indent: -25px;
}
.copyright .qaContainer dt:before {
   content: "Q.";
   font-weight: bold;
   margin-right: 7px;
}
.copyright .qaContainer > dl > dd {
   margin: 20px 10px 40px 35px;
   padding: 0;
   text-indent: -25px;
}
.copyright ol {
   list-style: auto;
    margin-left: 3em;
}
.copyright ol li{
   margin-bottom: 0.6em;
}

/***********************
お問い合わせ
***********************/
.toiawase .lead {
   margin: 0px 1em 2em;
}
.toiawase dl dt span.hissu {
   padding: 1px 1em 0px;
   border-radius: 20px;
   background-color: #F00;
   color: #FFF;
   font-size: 11px;
}
@media (min-width: 768px) {
   .toiawase dl dt {
      float: left;
      padding: 10px;
      border-left: 3px solid #39C;
   }
   .toiawase dl dd {
      padding: 10px 10px 10px 220px;
      margin-bottom: 20px;
      border-bottom: 1px dotted #CCC;
   }
   .toiawase dl dd:last-child {
      border-bottom: none;
   }
}
.toiawase .err {
   border: 1px solid #CCC;
   background-color: #F1F1F1;
   padding: 10px 20px;
   margin-bottom: 50px;
}
.toiawase .err p {
   margin-bottom: 0.5em;
}
.toiawase .err ul {
   background-color: #FFF;
   padding: 10px 10px 10px 1.5em;
   border-radius: 5px;
}
.toiawase .err ul li {
   list-style-type: disc;
   list-style-position: outside;
   color: #F00;
}
/***********************
ラップニュース
***********************/
.rapnews .archive {
   padding: 2em;
   border: 1px solid #bfbfbf;
   background: #f9f9f9;
   max-width: 1000px;
   margin: 0 auto 4em;
   position: relative;
}
.rapnews .archive::after {
   position: absolute; /* 絶対位置指定 */
   content: ''; /* 擬似要素にコンテンツを表示しない */
   right: -1px; /* 右端に配置 */
   top: -1px; /* 上端に配置 */
   border-width: 0 25px 25px 0; /* 形状 */
   border-style: solid; /* 線の種類 */
   border-color: #ccc #fff #ccc; /* 線の色 */
   box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影*/
}
/* ボックス内の段落 */
.cstm-box-paper p {
   margin: 0;
}
.rapnews .archive > h2 {
   background: #0053a9;
   padding: 0.4em;
   color: #FFF;
   margin-bottom: 0.5em;
   font-size: 1.8em;
   font-weight: 900;
   font-family: 'Noto Sans JP';
}
.rapnews .archive .date {
   text-align: right;
   margin-bottom: 0.5em;
}
.rapnews .archive .date span {
   margin-right: 20px;
}
.rapnews .archive .par {
   padding: 1em 0;
}
.rapnews .archive p {
   line-height: 1.8;
   letter-spacing: 1px;
   text-align: justify;
   text-indent: 1em;
   padding: 0 1em;
}
@media (min-width: 768px) {
   .rapnews .archive .title {
      flex-direction: row;
      justify-content: space-between;
   }
}
.rapnews .rapnewsSec {
   max-width: 1000px;
   margin: 0 auto 2em;
}
.rapnews .backnumber {
   margin-bottom: 1em;
}
.rapnews .back_list {
   margin-bottom: 20px;
}
.rapnews .backnumber h5 {
   font-weight: bold;
}
.rapnews .backnumber .newest li {
   float: right;
   text-align: center;
}
.rapnews .backnumber ul li {
   font-size: 12px;
   float: left;
   margin: 3px;
}
.rapnews .backnumber ul li a {
   display: block;
   padding: 1px 15px;
   background-color: #EEF7FF;
   color: #004080;
   border: 1px solid #004080;
}
.rapnews .backnumber ul li a:hover {
   background-color: #004080;
   color: #FFF;
   border: 1px solid #004080;
}
.rapnews table {
   width: 100%;
   margin-bottom: 10px;
}
.rapnews table caption {
   text-align: left;
   font-size: 20px;
   color: #004080;
   font-weight: bold;
}
.rapnews table tr th {
   padding: 10px;
   border: 1px solid #CCC;
   background-color: #F2F2F2;
}
.rapnews table tr th.num {
   width: 20%;
}
.rapnews table tr td {
   padding: 10px;
   border: 1px solid #CCC;
}
.rapnews table tr td.read {
   text-align: center;
   width: 10%;
   min-width: 50px;
}
.rapnews table.backnumber-table {
   max-width: 1000px;
   margin: 0 auto 4em;
}
.rapnews table.backnumber-table tr td a {
   display: block;
   text-decoration: none;
}
.rapnews .photo {
   max-width: 750px;
   margin: 0 auto 2em;
   border: 2px solid #CCC;
}
.rapnews .pdf {
   max-width: 750px;
   margin: 0 auto 2em;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
@media (min-width: 768px) {
}
.anq {
   background: #ecf3fe;
   padding: 1em;
   text-align: center;
   background-color: #ffffff;
   border: 1px solid #bcbcbc;
   margin-top: 2em;
}
.anq h2 {
   font-size: 1.3em;
   text-align: left;
}
.anq p {
   font-size: 1.0em;
}
.anq table.answer th {
   padding: 0;
   text-align: center;
   border: none;
   background-color: #ffffff;
}
.anq table.answer td {
   padding: 0;
   text-align: center;
   border: none;
   background-color: #ffffff;
}
.anq table.answer td input {
   font-size: 1.3em;
}
.anq table.answer label {
   padding: 0.2em;
}
.submit input {
   font-size: 1.2em;
   padding: 0.5em 1em;
   line-height: 1;
}
label:hover {
   background-color: rgba(128, 180, 251, 1.00);
   padding: 0.2em;
}
@media (max-width: 767px) {
   .anq h2 {
      text-align: left
   }
   .anq p {
      text-align: left
   }
   .anq table.answer {
      margin: 1em;
      width: auto;
   }
   .anq table.answer tbody {
      display: flex;
      flex-direction: row-reverse;
   }
   .anq table.answer tbody tr {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
   }
}
@media (min-width: 768px) {
   .anq table.answer {
      margin: 2em auto 0.5em auto;
   }
   .anq table.answer th {
      padding: 0 1em;
      text-align: center;
   }
   .anq table.answer td {
      padding: 0 1em;
      text-align: center;
   }
   .anq table.answer td input {
      font-size: 1.3em;
   }
}
/***********************
採用情報
***********************/
.saiyou .lead {
   margin: 0px 1em 2em;
}
.saiyou .saiyouSec dl {
   margin: 2em
}
.saiyou .saiyouSec dl dt {
   font-size: 20px;
   font-weight: bold;
   color: #339;
}
.saiyou .saiyouSec dl dd {
   padding: 0px 0px 20px 20px;
}
/***********************
制作実績
***********************/
.jisseki .lead {
   margin: 0px 1em 2em;
}
.jisseki .lead p {
   margin-bottom: 1em;
}
.jisseki .pager_btm {}
.jisseki .pager_btm ul {
   display: table;
   margin: 0 auto 10px;
}
.jisseki .pager_btm ul li {
   display: table-cell;
   border: 3px solid #FFF;
   margin: 3px;
   width: 30px;
   text-align: center;
}
.jisseki .pager_btm ul li.here {
   background-color: #f0ad4e;
   color: #FFF;
}
.jisseki .pager_btm ul li a {
   display: block;
   border: 1px solid #CCC;
}
.jisseki .pager_btm ul li a:hover {
   background-color: #F2F2F2;
}
.jisseki .pagelink {
   margin: 10px 0;
}
.jisseki .pagelink .kensuu {
   float: left;
}
.jisseki .pagelink .nextprev {
   float: right;
   text-align: right;
}
@media (min-width: 768px) {
   .jisseki .web .list > li {
      width: 33.3%;
      float: left;
   }
   .jisseki .web .list > li:nth-child(3n+1) {
      clear: left;
   }
}
@media (max-width: 767px) {
   .jisseki .web .list > li {
      width: 50%;
      float: left;
   }
   .jisseki .web .list > li:nth-child(2n+1) {
      clear: left;
   }
   .jisseki .web .list li .txt h3 {
      font-size: 12px;
      line-height: 1.4;
   }
   .jisseki .web .list li .details {
      display: none;
   }
}
.jisseki .web .list > li > div {
   margin: 10px;
}
.jisseki .web .list li .img {}
.jisseki .web .list li .txt {
   padding: 5px;
   min-height: 100px;
}
.jisseki .web .list li .txt h3 {
   font-weight: bold;
   margin-bottom: 10px;
}
.jisseki .web .list li .txt .icon:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.jisseki .web .list li .txt .icon > li {
   padding: 0px 10px;
   color: #FFF;
   border-radius: 10px;
   font-size: 12px;
   font-weight: bold;
   float: left;
   margin: 1px;
}
.jisseki .web .list li .txt .icon li.ico_web {
   background-color: #F881A2;
}
.jisseki .web .list li .txt .icon li.ico_print {
   background-color: #3C9;
}
.jisseki .web .list li .txt .icon li.ico_logo {
   background-color: #2AA9E8;
}
.jisseki .web .list li .txt .icon li.ico_promo {
   background-color: #FC0;
}
.jisseki .j_detail .detail_head .ttl {
   display: flex;
   flex-direction: column-reverse;
   gap: 10px;
}
.jisseki .j_detail .detail_head .ttl h2 {
   font-size: 1.6em;
   font-weight: 900;
   font-family: 'Noto Sans JP', sans-serif;
}
.jisseki .j_detail .detail_head .ttl h3 {
   font-weight: bold;
}
.jisseki .j_detail .detail_head .cate p {
   background-color: #000;
   color: #FFF;
}
.jisseki .j_detail .detail_main .txt {
   border-top: 1px solid #999;
   padding: 20px 0px;
}
.jisseki .j_detail .detail_foot .syousai h3 {
   font-weight: 900;
}
.jisseki .j_detail .detail_foot .syousai dl {
   border-top: 1px solid #999;
}
.jisseki .j_detail .detail_foot .syousai dl dt {
   padding-top: 5px;
   color: #777575;
   font-size: 0.8em;
}
.jisseki .j_detail .detail_foot .syousai dl dd {
   padding: 5px;
   border-bottom: 1px solid #999;
}
.jisseki .j_detail .detail_foot .tag ul li {
   text-align: center;
   background-color: #999;
   color: #FFF;
   border-radius: 20px;
   padding: 0 1em;
   margin-left: 10px;
   margin-bottom: 10px;
   display: block;
   float: left;
}
.jisseki .j_detail .detail_foot .tag ul li a {
   display: block;
   color: #FFF;
}
.jisseki .j_detail .prev-next {
   margin: 50px 0;
}
.jisseki .j_detail .prev-next ul li.prev {
   float: left;
}
.jisseki .j_detail .prev-next ul li.next {
   float: right;
}
.jisseki .j_detail .prev-next ul li {
   border: 1px solid #CCC;
   text-align: center;
}
.jisseki .j_detail .prev-next ul li a {
   display: block;
   padding: 10px;
   text-decoration: none;
}
.jisseki .j_detail .prev-next ul li a:hover {
   background-color: #E8ECFB;
}
.jisseki .j_detail .prev-next ul li.prev a:before {
   content: "\f137 ";
   font-family: FontAwesome;
   padding-right: 1em;
}
.jisseki .j_detail .prev-next ul li.next a:after {
   content: "\f138 ";
   font-family: FontAwesome;
   padding-left: 1em;
}
@media (min-width: 768px) {
   .jisseki .j_detail .detail_head {
      display: table;
      width: 100%;
      margin-bottom: 50px;
   }
   .jisseki .j_detail .detail_head .ttl h2 {
      font-size: 2em;
      margin-right: 2em;
   }
   .jisseki .j_detail .detail_head .ttl h3 {
      font-size: 1em;
      font-weight: 900;
      color: #8d8d8d;
   }
   .jisseki .j_detail .detail_head .cate {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 200px;
   }
   .jisseki .j_detail .detail_head .cate p {
      padding: 10px;
   }
   .jisseki .j_detail .detail_main {
      margin-bottom: 50px;
   }
   .jisseki .j_detail .detail_main .img {
      float: right;
      width: 600px;
      margin-left: 30px;
   }
   .jisseki .j_detail .detail_main .txt {}
   .jisseki .j_detail .detail_foot {
      margin-bottom: 50px;
   }
   .jisseki .j_detail .detail_foot .syousai {
      float: left;
      width: 50%;
   }
   .jisseki .j_detail .detail_foot .syousai dl {
      margin-right: 50px;
   }
   .jisseki .j_detail .detail_foot .tag {
      float: left;
      width: 50%;
   }
   .jisseki .j_commons {
      margin-bottom: 50px;
      text-align: center;
   }
   .jisseki .j_commons ul {
      display: flex;
      justify-content: center;
      margin: auto;
      width: calc(90% - 20px);
      margin-top: 20px;
   }
   .jisseki .j_commons ul li {
      flex: 1 50%;
      text-align: center;
   }
   .jisseki .j_commons ul li a {
      font-size: 1.32em;
   }
   .jisseki .j_detail .prev-next ul li {
      width: 300px;
   }
}
@media (max-width: 767px) {
   .jisseki .j_detail .detail_head {
      margin-bottom: 30px;
   }
   .jisseki .j_detail .detail_head .ttl h3 {
      color: #8d8d8d;
   }
   .jisseki .j_detail .detail_head .cate {
      float: right;
      margin-top: 1em;
   }
   .jisseki .j_detail .detail_head .cate p {
      width: 200px;
      text-align: center;
   }
   .jisseki .j_detail .detail_main {
      margin-bottom: 30px;
   }
   .jisseki .j_detail .detail_main .img {
      margin-bottom: 20px;
   }
   .jisseki .j_detail .detail_foot {
      margin-bottom: 30px;
   }
   .jisseki .j_detail .detail_foot .syousai dl {
      margin-bottom: 30px;
   }
   .jisseki .j_detail .prev-next ul li {
      width: 48%;
   }
   .jisseki .j_commons {
      margin-bottom: 30px;
   }
   .jisseki .j_commons ul li {
      text-align: center;
      margin-bottom: 10px;
   }
}
/*** 	Push Button  ***/
@media (min-width: 768px) {
   ul.jireiMenu {
      width: 900px;
      margin-bottom: 30px;
   }
   ul.jireiMenu li {
      width: 170px;
      float: left;
      padding: 5px;
   }
}
@media (max-width: 767px) {
   ul.jireiMenu {
      display: table;
      width: 100%;
   }
   ul.jireiMenu li {
      display: table-cell;
      padding: 3px;
   }
}
ul.jireiMenu li a:hover {
   color: #FFFFFF;
}
ul.jireiMenu li a.push_buttonAll:hover {
   color: #666666;
}
.push_buttonAll {
   position: relative;
   color: #666666;
   font-weight: bold;
   display: block;
   border: solid 1px #BCCDDE;
   background: #EBF0F5;
   text-decoration: none;
   margin: 0 auto;
   border-radius: 5px;
   text-align: center;
   padding: 5px 2px;
   -webkit-transition: all 0.1s;
   -moz-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-box-shadow: 0px 5px 0px #BCCDDE;
   -moz-box-shadow: 0px 5px 0px #BCCDDE;
   box-shadow: 0px 5px 0px #BCCDDE;
}
.push_buttonAll:active {
   -webkit-box-shadow: 0px 2px 0px #BCCDDE;
   -moz-box-shadow: 0px 2px 0px #BCCDDE;
   box-shadow: 0px 2px 0px #BCCDDE;
   position: relative;
   top: 7px;
   color: #666666;
}
.push_buttonWeb {
   position: relative;
   color: #FFF;
   font-weight: bold;
   display: block;
   border: solid 1px #DD4F81;
   background: #F881A2;
   text-decoration: none;
   margin: 0 auto;
   border-radius: 5px;
   text-align: center;
   padding: 5px 2px;
   -webkit-transition: all 0.1s;
   -moz-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-box-shadow: 0px 5px 0px #DD4F81;
   -moz-box-shadow: 0px 5px 0px #DD4F81;
   box-shadow: 0px 5px 0px #DD4F81;
}
.push_buttonWeb:active {
   -webkit-box-shadow: 0px 2px 0px #DD4F81;
   -moz-box-shadow: 0px 2px 0px #DD4F81;
   box-shadow: 0px 2px 0px #DD4F81;
   position: relative;
   top: 7px;
   color: #FFF;
}
.push_buttonPrint {
   position: relative;
   color: #FFF;
   font-weight: bold;
   display: block;
   border: solid 1px #279E78;
   background: #33CC99;
   text-decoration: none;
   margin: 0 auto;
   border-radius: 5px;
   text-align: center;
   padding: 5px 2px;
   -webkit-transition: all 0.1s;
   -moz-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-box-shadow: 0px 5px 0px #279E78;
   -moz-box-shadow: 0px 5px 0px #279E78;
   box-shadow: 0px 5px 0px #279E78;
}
.push_buttonPrint:active {
   -webkit-box-shadow: 0px 2px 0px #279E78;
   -moz-box-shadow: 0px 2px 0px #279E781;
   box-shadow: 0px 2px 0px #279E78;
   position: relative;
   top: 7px;
   color: #FFF;
}
.push_buttonLogo {
   position: relative;
   color: #FFF;
   font-weight: bold;
   display: block;
   border: solid 1px #1E83B7;
   background: #2AA9E8;
   text-decoration: none;
   margin: 0 auto;
   border-radius: 5px;
   text-align: center;
   padding: 5px 2px;
   -webkit-transition: all 0.1s;
   -moz-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-box-shadow: 0px 5px 0px #1E83B7;
   -moz-box-shadow: 0px 5px 0px #1E83B7;
   box-shadow: 0px 5px 0px #1E83B7;
}
.push_buttonLogo:active {
   -webkit-box-shadow: 0px 2px 0px #1E83B7;
   -moz-box-shadow: 0px 2px 0px #1E83B7;
   box-shadow: 0px 2px 0px #1E83B7;
   position: relative;
   top: 7px;
   color: #FFF;
}
.push_buttonOther {
   position: relative;
   color: #FFF;
   font-weight: bold;
   display: block;
   border: solid 1px #F0A501;
   background: #FFCC00;
   text-decoration: none;
   margin: 0 auto;
   border-radius: 5px;
   text-align: center;
   padding: 5px 2px;
   -webkit-transition: all 0.1s;
   -moz-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-box-shadow: 0px 5px 0px #F0A501;
   -moz-box-shadow: 0px 5px 0px #F0A501;
   box-shadow: 0px 5px 0px #F0A501;
}
.push_buttonOther:active {
   -webkit-box-shadow: 0px 2px 0px #F0A501;
   -moz-box-shadow: 0px 2px 0px #F0A501;
   box-shadow: 0px 2px 0px #F0A501;
   position: relative;
   top: 7px;
   color: #FFF;
}
/***********************
更新サポートプラン
***********************/
.update #main {
   max-width: 1200px;
   margin: auto;
   /*background: rgba(216, 208, 209, 1.00);*/
}
.update .updataSec h2 {
   font-size: 2em;
   font-weight: 900;
   font-family: 'Noto Sans JP';
   margin: auto;
   text-align: center;
}
.update .updataSec ul.nayami {
   margin-bottom: 2em;
}
.update .updataSec ul.nayami li {
   font-size: 1.1em;
   font-weight: bold;
   padding-left: 1.5em;
   color: #03526e;
}
.update .updataSec ul.point {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
}
.update .updataSec ul.point li {
   flex: 1 calc(50% - 30px);
   text-align: center;
}
.update ul.updateMenu li {
   margin-bottom: 10px;
   background: none;
   overflow: hidden;
   width: 90%;
   margin: 20px auto;
}
.update ul.updateMenu dl dt {
   color: #FFFFFF;
   font-size: 20px;
   padding: 10px;
   background: #3EADE8;
   text-align: center;
   font-weight: 900;
   font-family: 'Noto Sans JP';
}
.update ul.updateMenu dl dd {
   padding: 10px;
   background: #F2F6F9;
}
.update ul.updateMenu li dl dd h3 .price {
   font-size: 14px;
   border: none;
   display: inline;
}
.update ul.updateMenu li span {
   font-size: 90%;
   display: block;
   border-top: 1px solid #CCCCCC;
   margin-top: 5px;
   padding-top: 3px;
}
.update .updataSec p {
   margin: 2em auto;
   max-width: 1000px;
}
p.pink {
   color: #FF3399;
   font-weight: bold;
}
.update .updataSec {
   margin-bottom: 30px;
}
.update .updataSec p.font25 {
   font-size: 25px;
   font-weight: bold;
   margin: 30px 0;
   clear: both;
   text-align: center;
}
.update .notes {
   margin: 30px;
}
.update .kanren_jisseki {
   padding-block: 30px;
}
.update .kanren_jisseki ul {
   margin-block: 8px;
   display: flex;
   gap: 8px;
}
.update .kanren_jisseki ul li {
   display: flex;
   flex-direction: column;
}
.update .kanren_jisseki ul li a {
   flex-grow: 2;
   display: flex;
   flex-direction: column;
   border: 1px solid #F3F3F3;
}
.update .kanren_jisseki ul li a .img {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}
.update .kanren_jisseki ul li a .text {
   flex-grow: 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0.5em;
   color: #000;
   background-color: #F3F3F3;
   line-height: 1.2;
}
@media (max-width: 767px) {
.update .kanren_jisseki ul {
   flex-wrap: wrap;
}
.update .kanren_jisseki ul li {
   flex-basis: calc(50% - 4px);
}
.update .kanren_jisseki ul li a .img {
   flex-basis: 120px;
}
}
@media (min-width: 768px) {
   .update .updataSec h2 {
      font-size: 50px;
   }
   .update .updataSec h3.ttl {
      font-size: 35px;
      font-weight: 900;
      font-family: 'Noto Sans JP';
      margin: auto;
      text-align: center;
      margin-top: 2em;
   }
   .update .updataSec ul.nayami {
      margin: auto;
      width: fit-content;
   }
   .update .updataSec ul.nayami li {
      font-size: 1.3em;
      font-weight: bold;
   }
   .update .updataSec ul.nayami li:before {
      content: "\f0da";
      font-family: FontAwesome;
      padding: 0 5px;
      color: #3EADE8;
   }
   .update .updataSec ul.point {
      width: 940px;
      flex-wrap: nowrap;
      margin: auto;
   }
   .update .updataSec ul.point li {
      float: left;
      margin: 15px;
   }
   .update ul.updateMenu li dl {
      display: flex;
      justify-content: center;
   }
   .update ul.updateMenu dl dt {
      width: 30%;
      color: #FFFFFF;
      font-size: 20px;
      float: left;
      padding: 20px;
   }
   .update ul.updateMenu dl dd {
      width: 70%;
      float: left;
      padding: 20px;
   }
   .update ul.updateMenu dl dd h3 {
      font-size: 30px;
      font-weight: 900;
      font-family: 'Noto Sans JP';
      color: #333333;
   }
   .update ul.updateMenu li dl dd h3 .price {
      font-size: 14px;
      border: none;
      display: inline;
   }
   .update .kanren_jisseki ul {
      gap: 15px;
   }
   .update .kanren_jisseki ul li {
      flex: 1 0 0;
   }
   .update .kanren_jisseki ul li a .img {
      flex-basis: 250px;
   }
}
.update ul.step {
   margin-bottom: 20px;
}
.update ul.step li {
   margin-bottom: 10px;
   width: 90%;
   margin: 20px auto;
}
.update ul.step li dt {
   background: #FFF200;
   padding: 20px;
   font-weight: bold;
   font-size: 18px;
}
.update ul.step li dd {
   padding: 20px;
   background: #FFFFCC;
}
.update ul.step li dt span {
   padding: 5px;
   background: #3EADE8;
   color: #FFFFFF;
   font-size: 14px;
   width: 60px;
   border-radius: 5px;
   font-weight: bold;
}
.update ul.step li dd a {
   background: #ffcc35;
   padding: 0.2em;
   color: #000000;
   font-size: 1.1em;
   font-weight: 900;
   line-height: 1;
   text-decoration: none;
   border-radius: 10px;
   display: inline-block;
   margin: 0 0.5em;
}
.update ul.step li dd strong {
   color: #e91e63;
   font-size: 1.2em;
   font-weight: 900
}
.update .smp {
   display: none;
}
@media (min-width: 768px) {
   .update ul.step dl {
      display: flex;
      justify-content: center;
   }
   .update ul.step dl dt {
      width: 30%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: space-evenly;
      justify-content: center;
      gap: 10px;
   }
   .update ul.step dl dd {
      width: 70%
   }
}
@media (max-width: 767px) {
   .update .updataSec h3 {
      font-size: 20px;
      font-weight: bold;
      text-align: left;
   }
   .update .updataSec ul.nayami li:before {
      content: "\f0da";
      font-family: FontAwesome;
      padding: 0 5px;
      color: #3EADE8;
      margin-left: -1.3em;
      display: inline-block;
   }
   .update ul.updateMenu dl dd h3 {
      font-size: 20px;
      text-align: center;
      display: block;
      font-weight: bold;
      color: #333333;
      margin: 0.8em;
   }
   .update ul.step li {
      margin: 20px auto;
      width: 90%;
   }
   .update ul.step li dt span {
      padding: 5px;
      background: #3EADE8;
      color: #FFFFFF;
      font-size: 14px;
      margin-right: 10px;
      border-radius: 5px;
      font-weight: bold;
      display: inline-block;
      text-align: center;
      margin-bottom: 0;
   }
   .update .pc {
      display: none;
   }
}
.update ul.step li dd span {
   display: block;
   font-size: 90%;
}
.update .massage p {
   margin: 10px 20px;
}
.update .server_plan {
   margin-bottom: 20px;
}
.update .server_plan img {
   margin-bottom: 10px;
}
#update .fax {}
#update .dw {
   width: 500px;
   margin: auto;
   margin-bottom: 50px;
   margin-top: 20px;
}
@media (max-width: 767px) {
   #update .dw {
      width: 100%;
      margin: auto;
      margin-bottom: 50px;
   }
}
#update .dw .fax a {
   color: #FFF;
   text-decoration: none;
   font-weight: bold;
   font-size: 24px;
}
@media (max-width: 767px) {
   #update .dw .fax a {
      font-size: 20px;
   }
}
#update .dw p {
   text-align: center;
}
.main .contents.update .inner div .updateMenu li dl dt .last {
   font-weight: bold;
   color: #FF0;
}
.main .contents.update .inner div .updateMenu li dl dt img {
   margin-top: 10px;
   margin-left: 20px;
}
.main .contents.saiyou .inner .saiyouSec dl dt a {
   font-weight: bold;
}
/***********************
recruit
***********************/
.googleRec section{
	margin: 2em 0;
}
.googleRec .recruit_menu{
	display: flex;
    gap: 1px;
    flex-wrap: wrap;
    margin: 2em 0;
}.googleRec .recruit_menu li{
	flex: 1 calc(30% - 20px);
	background: #4281e9;
}.googleRec .recruit_menu li a{
	padding: 0.5em;
    color: #FFF;
    text-decoration: none;
	position: relative;
  display: inline-block;
  padding-left: 20px;
	width: 100%;
}
.googleRec .recruit_menu li a:before{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #FFF;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.googleRec .recruit_menu li a:hover{
	background:#1f57b2;
	display: block;
}
@media (max-width: 767px) {
	.googleRec .recruit_menu{
	flex-direction: column;
}
}
.googleRec p{
	margin: 1em;
}
.googleRec p span{
	background:linear-gradient(transparent 60%, #f881a26b 60%);
	font-weight: bold;
	font-size: 1.2em;
}.googleRec .dw p span{
	background:none;
}
.googleRec h3.ttl{
	font-size: 1.6em;
    font-weight: 900;
    font-family: 'Noto Sans JP';
    padding: 1em 0;
}
.googleRec h4{
	padding:0 10px;
	margin: 20px 0;
    border-left: 3px solid #39C;
	color: #39C;
	font-weight: 900;
	margin-bottom: 10px;
	}
.googleRec dl.merit{
	margin:1em 0;
	padding: 2em;
	}
.googleRec dl.merit dt{
	background: #4285F4;
	border-radius: 5px;
	padding: 10px 20px;
	color: #FFF;
	font-weight: 900;
}
.googleRec dl.merit dd div:last-child{
	text-align: center
}
.googleRec dl.merit dd div:last-child img{
	margin: 0.5em;
	max-width: 250px;
}
.googleRec .wrapList{
	border: rgba(12,109,150,1.00) 2px solid;
	padding: 15px;
	border-radius: 10px;
	margin: 10px 10px 2em;
}
.googleRec .wrapList ul li{
	margin: 10px;
	font-weight: bold;
}
.googleRec .wrapList ul li:before{
	content: "\f0da";
    font-family: FontAwesome;
    padding: 0 5px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    color: rgba(12,109,150,1.00);
}
.googleRec .sample li{
	text-align: center;
	margin-bottom: 10px;
}
.googleRec .sample li div{
	text-align: left;
}
@media (min-width: 768px) {
	.googleRec h4{
	font-size:2.2rem;
	 margin: 2em 0 1em;
}
	.googleRec dl.merit dt{
		font-size: 1.2em;
	}
	.googleRec dl.merit dd{
	font-size: 1.1em;
}
	.googleRec dl.merit dd{
	padding: 10px;
		display: flex;
		gap:20px;
}.googleRec dl.merit dd div{
	flex: 4 20%;
}.googleRec dl.merit dd div:last-child{
	flex: 1 20%;
}
	.googleRec .sample li{
	display: inline-block;
	width: 33%;
    padding: 1%;
}
}
/***********************
err_doc
***********************/
.err_doc .lead {
   margin: 0px 1em 2em;
}
.err_doc .sitemap {
   margin: 0px 1em 2em;
}
.sitemap ul li > ul {
   margin-left: 1em;
}
.sitemap ul li ul li span {
   border-bottom: 1px dotted #CCC;
}
.sitemap ul li span {
   display: block;
   font-weight: bold;
   color: #3EADE8;
}
.sitemap ul li a {
   display: block;
   border-bottom: 1px dotted #CCC;
}
@media (max-width: 767px) {
   .sitemap ul li span, .sitemap ul li a {
      padding: 8px;
   }
}
@media (min-width: 768px) {
   .err_doc .sitemap {
      font-size: 18px;
   }
   .contents .sitemap > ul {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 50px;
   }
   .sitemap > ul > li {
      flex: calc(50% - 50px) 1;
   }
   .sitemap ul li span, .sitemap ul li a {
      padding: 8px 15px;
   }
}

/***********************
voice
***********************/
#voice .voce_contents{
	max-width: 1100px;
    width: calc(100% - 10px);
    margin: auto;
    padding: 2em 0;
    text-align: left;}
#voice .voce_contents h2{
	font-size: 2em;
	font-weight: 700;
	font-family: 'Noto Sans JP';
	padding:3.2vw;
}
#voice .voce_contents .inner{
padding:0 3.2vw 1em;
}
#voice .voce_contents #data{
	padding: 0.8em;
	border: 10px solid #eeeeee;
	 letter-spacing: 1px;
}
#voice .voce_contents #data dl{
	display: flex;
    flex-wrap: wrap;
}
#voice .voce_contents #data dl dt{
	flex-basis: 30%;
    align-self: end;
    text-align: right;
    padding-right: 20px;
	font-weight: 600;
}
#voice .voce_contents #data dl dd{
	 flex-basis: 70%;
}
#voice .voce_contents #lead{
	border-bottom: 1px solid #A4A4A4;
	padding: 2em 0;
}#voice .voce_contents #lead p{
	margin: 1em 0;
}
#voice .voce_contents #article{
	letter-spacing: 1px;
}
#voice .voce_contents #article h3{
	font-size: 1.2em;
	font-weight: 900;
	font-family: 'Noto Sans JP';
	margin: 1em 0;
}
#voice .voce_contents #article h3 span{
	font-family: 'Noto Sans JP';
	font-weight: 700;
}
#voice .voce_contents #article h3::before{
	content: '';
	display: block;
	height: 2em;
}
#voice .voce_contents #article p{
	margin-bottom: 1em;
}#voice .voce_contents #article .point{
	background: #f1f6fb;
    margin-bottom: 1em;
	display: inline-block;
}#voice .voce_contents #article .point p{
	margin: 1.5em;
    font-size: 0.9em;
    color: #46535a;
}#voice .voce_contents #article ul{
	font-weight: 900;
	margin: 2em ;
}#voice .voce_contents #article ul.circle li{
	position: relative;
	padding-left: 0.3em;
}#voice .voce_contents #article ul.circle li::before{
	position: absolute;
    content: '●';
    font-size: 0.7em;
    left: -0.9em;
    line-height: 2;
}
#voice .voce_contents #article ul li{
	padding: 0.2em;
	font-weight: 700;
}
#voice .voce_contents #article .flex{
	display: flex;
	flex-direction: column;
}
#voice .voce_contents #article .center{
	text-align: center;
}
#voice .voce_contents #article .flex div>p{
	display: block;
    padding: 0.2em;
    font-size: 0.9em;
	}
@media (min-width: 768px) {
#voice .voce_contents #article .flex{
	flex-direction:row;
	gap:30px;
	flex-wrap: nowrap;
	}
	#voice .voce_contents #article .flex div.h400 img{
	height: 400px;
    object-fit: cover;
	}
#voice .voce_contents #article .flex div{
	flex: 1 50%;
	}
#voice .voce_contents #article .flex div.item2_5{
	flex: 2 20%
	}
#voice .voce_contents #article .flex div.item3_5{
	flex: 3 20%;
	}
}