@charset "utf-8";
/*

Theme Name: yuiworks2022
Theme URI: http://yuiworks.jp
Author: yuiworks
Author URI: http://yuiworks.jp
Description: yuiworks
Version: 1.0

*/
/*yuiworks.jpの共通*/
/*---------------------------------------------------------
  reset
---------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

section {
  padding: 0;
}

@media screen and (min-width:768px) {
  section {
    padding: 0 0 80px;
  }
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*vertical-align: baseline;*/
/*---------------------------------------------------------
  clearfix
---------------------------------------------------------*/

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

.clea {
  clear: both;
}

* html .clearfix {
  height: 1px;
  /*\*/
  /*/
    height: auto;
    overflow: hidden;
    /**/
}

body {
  -webkit-text-size-adjust: none;
  font-family: "メイリオ", "Arial", "ＭＳ ゴシック", sans-serif !important;
  font-size: 16px !important;
  color: #000;
  line-height: 160%;
  background-color: #005baa !important;
}

a {
  color: #000;
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

a.button {
  display: block;
  background: #18dfb3;
  padding: 10px 15px;
  color: #fff;
  margin-top: 20px;
}

a.button:hover {
  text-decoration: none;
  background: #19b491;
}

.wrap {
  margin-top: 50px;
  margin-bottom: 50px;
}

#contents {
  padding-top: 15vw;
}

@media screen and (min-width:768px) {
  #contents {
    padding-top: 3vw;
  }
}

.content {
  width: 1200px;
  margin: auto;
}

.fb {
  font-weight: bold;
}

.content p {
  line-height: 1.8;
}
.space_footer{
    height: 9em;
}
@media screen and (max-width:768px){
.space_footer{
    height: auto;
}
}
.display_pc{
    display: block;
}
.display_sp{
display: none;
}
@media screen and (max-width:768px){
.display_pc{
display: none !important;
}
.display_sp{
display: block;
}
}
/*=header====================*/



#menu-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  width: auto;
  height: 35px;
}

#menu-conts {
  display: none;
  position: absolute;
  top: 55px;
  width: 100%;
  z-index: 1;
  background-color: #005bab;
  left: 0;
  height: auto;
}
#menu-conts ul{
  padding: 0 !important;
  margin: 0 !important;
}
#menu-conts ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}

#menu-conts ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 50px;
}

#menu-conts a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 14px 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#menu-conts a:hover {
  opacity: 0.7;
}

#header {
  clear: both;
  z-index: 3;
  background-color: #fff;
  width: 100%;
  position: fixed;
  color: #0f3fab;
}

.hamburger-menu-title {
  position: absolute;
  top: 0vw;
  color: #fff;
  font-size: 0.5em;
}

.menu-btn {
  position: absolute;
  top: 13px;
  right: 10px;
  display: flex !important;
  height: 35px;
  width: 35px;
  justify-content: center !important;
  align-items: center !important;
  z-index: 90;
  background-color: #0e3fab;
}

@media screen and (min-width:768px) {
  .menu-btn {
    display: none!important;
  }
}

.menu-btn span, .menu-btn span:before, .menu-btn span:after {
  content: '';
  display: block;
  height: 2px;
  width: 18px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}

.menu-btn span:before {
  bottom: -6px;
}

.menu-btn span:after {
  top: 12px;
}

#menu-btn-check:checked~.menu-btn span {
  background-color: rgba(255, 255, 255, 0);
  /*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked~.menu-btn span::before {
  bottom: -4px;
  transform: rotate(45deg);
}

#menu-btn-check:checked~.menu-btn span::after {
  top: 4px;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none;
}

.menu-content ul {
  padding: 0;
  margin: 0;
}

.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}

.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 50px;
  position: relative;
}

.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}

.menu-content {
  width: 100%;
  height: auto;
  position: fixed;
  top: 14vw;
  left: 100%;
  /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #005bab;
  transition: all 0.5s;
  /*アニメーション設定*/
}

#menu-btn-check:checked~.menu-content {
  left: 0;
  /*メニューを画面内へ*/
}
/*logoとよくある質問、お問い合わせ*/

.gnav ul {
  display: flex;
  margin: 0;
  padding: 0;
  float: right;
}

.gnav ul li {
  padding: 0 10px;
  font-weight: bold;
  font-size: 1em;
}

.gnav ul li a {
  text-decoration: none;
}

.gnav ul li a:hover {
  text-decoration: underline;
  opacity: 0.7;
}

.gnav_contact {
  padding-right: 0 !important;
}

.gnav_contact a {
  color: #fff !important;
  background-color: rgba(242, 81, 0, 1);
  border-radius: 0;
}

@media screen and (min-width:768px) {
  .gnav_contact a {
    border-radius: 15px;
    padding: 1px 15px !important;
  }
}

.gnav_contact:hover {}

.gnav_contact a:hover {
  color: #fff !important;
  text-decoration: none !important;
  background-color: rgba(242, 81, 0, 0.6);
}

.header_title {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  text-align: center;
  padding-top: 15px;
}

.header_img_graphic::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 16vw;
  right: 0;
}

.header_title h1 {
  font-size: 30px;
}

.header_img_graphic {
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/sp_pageTitle_2.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 35vw;
  position: relative;
  background-size: cover;
}

.header_subtitle {
  font-size: 0.43em;
}

@media screen and (min-width:768px) {
  .header_title h1 {
    font-size: 60px;
  }
  .header_img_graphic {
    background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/pc_pageTitle_2.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 15vw;
  }
  .header_subtitle {
    font-size: 0.8em;
  }
  .header_img_graphic::after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 6.5vw;
    right: 0;
  }
}

#header-sp {
  display: none;
}

#headerTop {
  margin: 0 auto;
  padding: 15px 0;
}

@media screen and (min-width:768px) {
  #headerTop {
    padding: 10px 0;
  }
}

.rogo_pc {
  display: none;
}

.rogo_sp {
  display: block;
}

@media screen and (min-width:768px) {
  .rogo_pc {
    display: block;
  }
  .rogo_sp {
    display: none;
  }
}

#logo {
  width: 100px;
  height: 50px;
  float: left;
  margin-right: 300px;
}

#headerRight {
  width: 500px;
  float: right;
  padding-top: 13px;
}

#headerRight li {
  float: left;
  width: auto;
  text-align: center;
}

#headerRight li a {
  display: block;
  height: 20px;
  color: #0f3fab;
  font-weight: bold;
}
/*    width:150px;*/

.headerRight_I_1 {
  margin: 4px 10px 0px 0px;
}

.headerRight_I_2 {
  margin-top: 12px;
}

.headerRight_I_3 {
  margin-top: 12px;
}

.header_contact {
  text-align: right;
  margin: 0;
  font-size: 14px;
  display: none;
}

@media screen and (min-width:768px) {
  .header_contact {
    display: block;
    padding-bottom: 10px;
  }
}
/*menu*/

#header .gnav {
  width: 100%;
  position: relative;
  z-index: 3;
  color: #0f3fab;
  display: none;
}

#header_front_page .gnav {
  width: 100%;
  position: relative;
  z-index: 3;
  color: #0f3fab;
  display: none;
}

#header_front_page .gnav ul li a {
  color: #fff;
}

@media screen and (min-width:768px) {
  .gnav {
    display: block !important;
  }
}

#header #menu-global {
  width: 1200px;
  margin: 0px auto;
}

#header #menu-global ul {
  margin: 0;
  padding: 0;
}

/*ナビの横線*/

#header .menu-item-26, .menu-item-25, .menu-item-24, .menu-item-23, .menu-item-59 {
  border-left: 1px solid #ffffff;
}

#header .menu-item-59 {
  border-right: 1px solid #ffffff;
}
/*プルダウン*/

#header .sub-menu {
  width: 191px;
  height: 50px;
  position: absolute;
  top: 50px;
  width: 191px;
  height: 50px;
  background: #FFDAD7;
  display: none;
}

#header .sub-menu a:hover {
  background-color: #2888d5;
}

#header #menu-global .menu-item:hover ul {
  display: block;
}

#header #menu-global .menu-item li a:hover {
  background: #2888d5;
}

#header .menu * {
}

#header .menu ul {

}

/*=main====================*/

#main {
  padding-bottom: 40px;
  clear: both;
}
/*mainImg*/

#mainImg {
  width: 1200px;
  height: 440px;
  margin: 0px auto 30px auto;
}
/*サービス,infomation　*bgが白　詳しく見る*/

.mainTopic {
  width: 350px;
  margin: 10px auto;
  padding-top: 20px;
}

.mainContent {
  width: 960px;
  margin: 0px auto;
}

.more {
  /*margin:0px auto;
    padding:30px 0px;*/
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
}

.more a {
  /*clear:both;*/
  color: #07195b;
  width: 220px;
  height: 40px;
  margin: 0 auto;
  background: url("img/more-btn.png") no-repeat;
  display: block;
  text-decoration: none;
}

.more a:hover {
  color: #fff;
  background-position: 0 -40px;
}
/*サービス*/

.service {
  width: 300px;
  height: 400px;
  float: left;
  margin-left: 10px;
}

.service img {
  width: 300px;
  height: 220px;
  margin: 10px 0px;
}

.serviceTopic {
  width: 310px;
  height: 40px;
  background-color: #07195b;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.service p {}
/*work,blog　*bgが黒*/

.mainContentBg {
  width: 100%;
  background-color: #eeeeee;
}
/*制作実績 ブログ*/

.post {
  margin-right: -30px;
}

.work {
  width: 300px;
  min-height: 330px;
  /*background-color:#ffffff;*/
  float: left;
  margin: 20px 0px;
  padding: 0px 30px 20px 0;
}
/*
.workMore img{
    width:220px;
    height:40px;
    margin-top:20px;
}*/

.shape-img {
  position: relative;
  margin: -6px 0;
}

.shape-img img {
  border-radius: 10px 10px 0px 0px;
  width: 300px;
  height: 220px;
}

.shape-img .ico-new {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: url("./img/new.png") no-repeat 0 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.shape-preface {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(166, 166, 166);
  min-height: 144px;
}

.shape-preface .preface-frame {
  width: 280px;
  margin: 0px auto;
  padding: 10px 0px;
}

.workTopic {
  font-size: 14px;
  color: #d51a4b;
  font-weight: bold;
  text-align: center;
}

.shape-Topic {
  text-align: left;
  width: 280px;
  /*margin: 10px auto 20px;*/
  margin-bottom: 20px;
}

.shape-Topic .Topic-day {
  font-size: 11px;
  color: #808080;
  padding-bottom: 12px;
}

.shape-Topic .Topic-title {
  font-weight: bold;
  padding-bottom: 8px;
}

.shape-Topic .Topic-title a:hover {
  color: #d01d45;
  font-weight: bold;
}
/*お知らせ*/

.infoContent {
  border-bottom: 1px dashed #015ba9;
  min-height: 50px;
  width: 500px;
  text-align: center;
  margin: 0px auto;
}

.infoDay a {
  display: block;
  height: 10px;
  padding-bottom: 15px;
  font-weight: bold;
  float: left;
  margin-left: 40px;
  margin-top: 20px;
}

.infoContent2 a {
  display: block;
  float: left;
  margin-left: 40px;
  margin-top: 20px;
}
/*     color: #b2b2b2;  */
/*blog*/

.blogContentBox {
  width: 300px;
  min-height: 380px;
  float: left;
  margin-right: 10px;
  padding-bottom: 10px;
  background-color: #ffffff;
}

.blogContentBox a:hover {
  text-decoration: none;
}

.blogImg {
  position: relative;
}

.blognew {
  position: absolute;
  top: 0px;
}

.blogday {
  margin: 10px 0px;
  color: #808080;
}

.blogtitle {
  width: 290px;
  min-height: 30px;
  max-height: 40px;
  font-weight: bold;
}

.blognews {
  width: 290px;
  min-height: 50px;
  max-height: 100px;
  color: #2b2b2b;
}
/*blogカテゴリー*/

.shape-Topic .tag a {
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}

.shape-Topic .tag {
  padding-bottom: 8px;
}

.seo a {
  width: 80px;
  height: 20px;
  border-radius: 5px 5px 5px 5px;
  background-color: #6b9ace;
  text-align: center;
  /*color:#ffffff;*/
  display: table-cell;
  vertical-align: middle;
}

.seo a:hover {
  background-color: #5688BF;
}

.english a {
  width: 80px;
  height: 20px;
  border-radius: 5px 5px 5px 5px;
  background-color: #fa7381;
  text-align: center;
  /*color:#ffffff;*/
  display: table-cell;
  vertical-align: middle;
}

.english a:hover {
  background-color: #EF6270;
}

.design a {
  width: 80px;
  height: 20px;
  border-radius: 5px 5px 5px 5px;
  background-color: #fbb36b;
  text-align: center;
  /*color:#ffffff;*/
  display: table-cell;
  vertical-align: middle;
}

.design a:hover {
  background-color: #EFA65D;
}
/*top戻るボタン*/

#pageTopbtm {
  position: absolute;
  top: 90%;
  right: 5%;
}
.img-height{
  height: 370px !important;
}
@media screen and (min-width:550px){
 .img-height{
  height: auto !important;
 } 
}

/*=fotter====================*/

#page_top {
  width: 40px;
  height: 40px;
  bottom: 30px;
  background: #ddd;
  opacity: 0.7;
  border-radius: 50%;
  position: fixed;
  right: 2vw;
  z-index: 3;
}

@media screen and (min-width:768px) {
  #page_top {
    right: 3vw;
    bottom: 3vw;
  }
}
#page_top a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  text-decoration: none;
}

#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #000;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -13px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.page_top_box {
  position: relative;
  display: none;
}
.page_top_box_display{
  display: inline;
}
.fotter_mx-width {
  max-width: 970px;
  margin: 0 auto !important;
}

.fotter {
  width: 100%;
  background-image: url("https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/footer/sp_bg_footer.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  z-index: 1;
  padding-top: 40px;
  height: 100%;
}

@media screen and (min-width:768px) {
  .fotter {
    width: 100%;
    background-image: url("https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/footer/pc_bg_footer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    background-position: center calc(50% - 10px)!important;
    background-attachment: fixed;
    z-index: 1;
  }
}

.fotter ul li {
  padding: 5px 0;
}

.fotter ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 0.85em;
}

@media screen and (min-width:768px) {
  .fotter ul li a {
    font-size: 1em;
  }
}

.fotter ul li a:hover {
  text-decoration: underline;
}

.fotter_Company {
      text-align: center;
}

.fotter_Company h3 {
  font-size: 0.9em;
}

@media screen and (min-width:768px) {
  .fotter_Company h3 {
    font-size: 1em;
  }
}

.fotter_con {
  text-align: center;
}

.fotter_tell_fax {
  color: #fff !important;
  text-decoration: none;
}
.fotter_con a{
  font-size: 0.9em;
}
@media screen and (min-width:768px) {
  .fotter_con {
    text-align: left;
  }
  .fotter_con a{
      font-size: 1em;
  }
}

.fotter_Company_sp {
  font-size: 0.9em;
  display: inline-block;
}

.fotter_Company span {
  display: block;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  padding-bottom: 25px;
}
.footer_logo_img{
    display: inline-block;
    max-width: 47%;
    margin: 0;
}
@media screen and (max-width:768px){
.footer_logo_img{
    max-width: 100%;
}
.fotter_Company span{
    padding-bottom: 0;
}
}
@media screen and (min-width:768px) {
  .fotter_Company_sp {
    display: none;
  }
}

.btn--orange, a.btn--orange {
  color: #fff;
  background-color: rgba(242, 81, 0, 1);
  width: 200px;
}

@media screen and (min-width:768px) {
  .btn--orange, a.btn--orange {
    width: 320px;
  }
}

.btn--orange:hover, a.btn--orange:hover {
  color: #fff;
  background: #f56500;
  text-decoration: none;
  background-color: rgba(242, 81, 0, 0.6);
}

a.btn--radius {
  border-radius: 100vh;
  margin-bottom: 25px;
}

@media screen and (min-width:768px) {
  .fotter_Company h3 {
    font-size: 1.5em;
  }
}

#fotterRight p span {
  font-weight: bold;
}

#fotterRight ul {
  margin-top: 10px;
}

.fotterContent {
  width: 150px;
  min-height: 200px;
  margin-right: 20px;
  float: left;
}

.fotterTopic a {
  display: block;
  height: 20px;
  width: 150px;
  color: #ffffff;
  font-weight: bold;
  background: url("./img/footer_arrow.png") no-repeat;
  padding-left: 20px;
  margin: 10px 0px;
}

.fotterTopic2 a {
  display: block;
  height: 20px;
  width: 150px;
  color: #ffffff;
  background: url("./img/footer_arrow2.png") no-repeat;
  padding-left: 20px;
}
/*コピーライト*/

.fotterBottom {
  width: 100%;
  background-color: #015ba9;
  clear: both;
  color: #fff;
  text-align: center;
  font-size: 0.8em;
}

@media screen and (min-width:768px) {
  .fotterBottom {
    font-size: 1em;
  }
}

#BottomContent {
  width: 960px;
  margin: 0px auto;
  padding: 30px 0px;
}

#bottomLeft {
  float: left;
}

#bottomRight {
  float: right;
  margin-right: 80px;
}
/* 固定ページのスタイル=========================================== */
/*共通*/

.MainContentBox01 {
  max-width: 960px;
  margin: 0px auto;
}

.PageImge {
  width: 100%;
  /*height:300px;
    margin:0px;
    text-align:center;*/
  background-color: #ccc;
}

.PageImge .img-forth {
  text-align: center;
  position: relative;
  z-index: 2;
}

.PageImge .img_main {
  position: relative;
  max-width: 1200px;
  width: 100%;
  height: 280px;
  /*background-image: url("http://yuiworks.jp/new/wp-content/uploads/2016/04/Top_Image1.jpg");*/
  background-repeat: no-repeat;
  margin: auto;
  z-index: -1;
  background-position: 50%;
  background-size: cover;
}

/* お問い合わせ */

.PageImge .bg1 {
  background-image: url("img/Contact-Us.jpg");
}
/* ゆいワークスとは */

.PageImge .bg2 {
  background-image: url("img/Yuiworks-The.jpg");
}
/* サービス */

.PageImge .bg3 {
  background-image: url("img/Service.jpg");
}
/* 実績 */

.PageImge .bg4 {
  background-image: url("img/Performance.jpg");
}
/* お客様の声 */

.PageImge .bg5 {
  background-image: url("img/Customer-Testimonials.jpg");
}
/* 自社サービス */

.PageImge .bg6 {
  background-image: url("img/Yuiworks-Service.jpg");
}
/* blog */

.PageImge .bg7 {
  background-image: url("img/blog.jpg");
}

.PageImge .img_main .main_text {
  background-color: rgba(1, 13, 38, 0.4);
  max-width: 1200px;
  width: 100%;
  height: 90px;
  padding: 15px 0;
  margin: auto;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

div.pankuzubox {
  position: absolute;
}

.breadcrumb {
  display: flex;
  color: #fff;
  position: relative;
  left: 2vw;
  top: -10vw;
  font-size: 0.7em;
}

@media screen and (min-width:768px) {
  .breadcrumb {
    color: #fff;
    position: relative;
    left: 11vw;
    top: -6.5vw;
    font-size: 0.8em;
  }
}
@media screen and (min-width:1400px){
  .breadcrumb {
     position: relative;
    left: 25vw;
    top: -3.5vw;   
  }
}
.breadcrumb li {
  color: #fff;
}

.pankuzubox a {
  color: #fff !important;
  text-decoration: none;
}
.pankuzubox a:hover{
  opacity: 0.7;
}
.pankuzubox .post {
  margin-right: 0;
}
/*共通end*/

/*お問い合わせ*/
/*.PageImge img{
    width:960px;
    height:300px;
    margin:0px auto;
}*/

.infoTitleBg {
  width: 100%;
  height: 100px;
  background-color: #0e3fab;
}

.infoTitle {
  width: 960px;
  margin: 0px auto;
  padding-top: 30px;
  color: #ffffff;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
}

.inf-caption {
  text-align: center;
  color: #07195b;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: solid 1px #07195b;
}
/*フォーム*/

.infobg {
  width: 100%;
  /*background-color:#eeeeee;*/
}

.tableBox {
  width:auto;
  margin: 0px auto;
  font-size: 0.8em;
}
@media screen and (min-width: 960px){
  .tableBox {
      width:777px;
      margin: 0px auto;
      font-size: 1em;
    }
}
.tableBox tr {
  /*width:150px;
    border-bottom:1px solid #0f3fab;
    height:100px;*/
}

.tableBox th {
  max-width: 100%;
  text-align: left;
  font-weight: bold;
  padding: 0;
  display: block;
  font-weight: bold;
}
@media screen and (min-width: 960px){
  .tableBox th {
      display: table-cell;
      max-width: 210px;
      vertical-align: middle;
      text-align: right;
      padding: 0 20px 15px;
    }
}
.tableBox td {
  max-width: 520px;
  padding-bottom: 20px;
  text-align: left;
  display: block;
}
@media screen and (min-width: 960px){
  .tableBox td {
      display: table-cell;
    } 
}
/*追加コンタクトページ */
.content_eria{
  padding: 20px 0;
  }
 @media screen and (min-width: 960px){
   .content_eria{
   padding: 50px 0;
  } 
  }
  .content_eria h2{
  color: #005BAA;
  font-weight: bold;
  font-size: 1.3em;
  padding-left: 25px;
  margin: 0;
  }
  @media screen and (min-width: 960px){
  .content_eria h2{
  font-size: 1.6em;
  padding-left: 0;
      }
  }
  .contact_content{
   position: relative;
  margin-bottom: 15px;
  }
      @media screen and (min-width: 960px){
   .contact_content{
       margin-bottom: 50px;
  } 
      }
  .contact_content::after{
   content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1E7ED2;
  position: absolute;
  bottom: -5px;
  left: 0;
  }
  .tel_box{
   margin: 0 auto 10px !important;
  padding: 4vw;
  background-color: #fff;
  max-width: 1000px;
  border: 1px solid #ddd;
  width: 95%;
  color: #1E7ED2;
  text-align: center;
  font-size: 0.8em;
  }
  @media screen and (min-width: 960px){
  .tel_box{
  width: 100%;
  padding: 1vw 3vw;
  font-size: 1em;
  margin: 0 auto 30px !important;
      }
  }
  .tel_box_param{
font-size: 1.6em;
text-decoration: none;
color: #1E7ED2;
  }
  .tel_box_param:hover{
    color: #1E7ED2;
    opacity: 0.7;
    text-decoration: none;
  }
  .form_eria{
  max-width: 95%;
  margin: 0 auto !important;
  text-align: center;
  background-color: #1E7ED2;
  padding: 2vw 3vw 0;
  color: #fff;
  }
  @media screen and (min-width: 960px){
    .form_eria{
  max-width: 1000px;
  }
  }
  .form_text{
  font-size: 0.8em;
  border-bottom: 1px solid;
  padding: 5px 0;
  max-width: 666px;
  margin: 0 auto;
  }
  @media screen and (min-width: 960px){
    .form_text{
  font-size: 1.1em;
  }
  }
  .thank_box{
    margin: 0 auto 10px !important;
    padding: 4vw;
    background-color: #fff;
    max-width: 1000px;
    border: 1px solid #ddd;
    width: 95%;
    text-align: center;
    font-size: 0.8em;
      }
      @media screen and (min-width: 960px){
        .thank_box{
    width: 100%;
    padding: 1vw 3vw;
    font-size: 1em;
    margin: 0 auto 30px !important;
      }
      }
      .thank_box_param{
        font-size: 1.4em;
    font-weight: bold;
    border-bottom: 1px solid #CECECE;
    display: inline-block;
    width: auto !important;
    margin: 0 auto 20px !important;
      }
      .btn_ok{
        background-color: #F25100;
        border-radius: 30px;
        padding: 5px 20px;
        color: #fff;
        max-width: 150px !important;
        margin: 30px auto !important;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.1em;
      }
      .btn_ok:hover{
            text-decoration: none;
            color: #fff;
            background-color: rgba(242,81,0,0.8);
      }
/*ここまで */

.wpcf7-form-control.wpcf7-text {
  width: 100%;
  padding: 10px;
  font: 14px "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
  background-color: #e7eaf2;
  outline: 0;
  border: none;
  box-shadow: 1px 1px 0 0 rgba(170, 172, 179, 1) inset;
}

textarea.wpcf7-form-control.wpcf7-textarea.infoContent {
  width: 100%;
  padding: 10px;
  font: 14px "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
  background-color: #e7eaf2;
  outline: 0;
  border: none;
  box-shadow: 1px 1px 0 0 rgba(170, 172, 179, 1) inset;
  text-align: left;
}
.wpcf7 input[type="checkbox" i] {
  transform: scale(1.5);
}
.wpcf7-list-item {
  margin: 0 20px 5px 0 !important;
}
.wpcf7-spinner{
  display: none !important;
}
.checkbox input[type="checkbox"] {
  border: 1px solid red;
}

.infoBox {
  width: 960px;
  margin: 50px auto;
  border: 1px solid red;
}

.infobtn {
  max-width: 600px;
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 auto 20px;
}

.infobtn .wpcf7-submit {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 15%;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  position: relative;
  border-radius: 30px;
  background-color: rgba(242, 81, 0, 1);
}
    @media screen and (min-width: 960px){
.infobtn .wpcf7-submit{
      padding: 10px 20%;
}
    }
.infobtn .wpcf7-submit:hover {
  background-color: rgba(242, 81, 0, 0.8);
}

.infobtn .wpcf7-submit:active {
  top: 2px;
  box-shadow: none;
}

.formTh2 {
  /*width:150px;
    height:40px;*/
  display: table-cell;
  vertical-align: middle;
}
    .confirmationbox{
    margin: 3vw;
    text-align: center;
    color: #137EB0;
    max-width: 900px;
    background-color: #fff;
    padding: 2vw 3vw;
    word-break: break-all;
    font-size: 0.8em;
    }
    @media screen and (min-width: 960px){
    .confirmationbox{
      font-size: 1em;
      margin: 3vw auto;
    }
    }
    .confirmation-text{
     border-bottom: 1px solid;
     font-size: 1em;
    }
.backbtn{
  display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 30px;
    background-color: rgba(242, 81, 0, 1);
    padding: 5px 15%;
    margin: 0 10px;
    text-decoration: none;
}
    @media screen and (min-width: 960px){
.backbtn{
    padding: 10px 20%;
    }
}
.backbtn:hover{
background-color: rgba(242, 81, 0, 0.8);
color: #fff;
text-decoration: none;
}
.content-aria,.content-aria-02 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
}
.content-aria th{
  width: 40%;
  box-sizing: border-box;
  padding: 5px 0;
  vertical-align: middle;
  font-weight: bold;
  text-align: right;
}
.content-aria-02 th {
  width: 30%;
  box-sizing: border-box;
  padding: 5px 0;
  vertical-align: middle;
  font-weight: bold;
  text-align: right;
}
@media screen and (min-width: 960px) {
  .content-aria th{
     width: 30%;
  }
}
@media all and (max-width: 600px){
.content-aria-02 th{
width: 100%;
display: block;
text-align: left;
padding: 0;
} 
}
.content-aria td,.content-aria-02 td {
  box-sizing: border-box;
  padding: 5px 0;
  vertical-align: top;
  text-align: left;
  color: #000;
  display: block;
}
/*翻訳*/

.page2_box2_translate {
  height: 260px;
  margin-bottom: 50px;
}
/*
.MainImg_s{
    width:960px;
    margin:0px auto;
}

.MainImg_s img{
    width:960px;
    margin:0px auto;
}

.serviceBox{
    width:960px;
    margin:30px auto 0px auto;
    text-align:center;
    padding-top:10px;

}

.catchCopy{
    margin-bottom:50px;

}

.catchCopy2{
    width:720px;
    padding:30px;
    font-size:24px;
    font-weight:bold;
    border-bottom:1px solid #d51a4b;
    margin:0px auto 30px auto;
    color:#000;
}
*/

.service_Sentence1 {
  width: 510px;
  margin: 0px auto;
  text-align: left;
  padding: 10px 10px;
}

.service_Sentence1 li {
  font-size: 18px;
  margin: 20px;
  padding-left: 30px;
}

.catchCopy3 {
  width: 720px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #d51a4b;
  padding: 20px 0px;
  text-align: center;
  margin: 30px auto 30px auto;
}

.service_Sentence2 {
  width: 400px;
  margin: 0px auto 30px auto;
  text-align: left;
  border: 1px solid #07195b;
  padding: 40px 30px 40px 20px;
  font-size: 18px;
}

.service_Sentence2 li {
  margin: 20px 0px 0px 20px;
}

.service_Sentence2 p span {
  font-weight: bold;
  padding-left: 70px;
}

.service_Sentence3 {
  width: 720px;
  margin: 30px auto 50px auto;
  text-align: left;
}

.service_image {
  width: 260px;
  height: 300px;
  background-color: pink;
  float: left;
}

.service_Sentence4 {
  width: 450px;
  height: 300px;
  padding-left: 10px;
  float: left;
  margin-bottom: 50px;
  line-height: 20px;
}

.service_Sentence4 p span {
  font-weight: bold;
  color: #d51a4b;
}

.otoiawase {
  margin: 0px auto;
  text-align: center;
  clear: both;
}

.staff_coment {
  border: 1px solid #d51a4b;
  margin-top: 20px;
  padding: 20px 0px;
}

.translate_etc {
  margin: 0px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 20px
}

.translate-jiseki {
  margin: 20px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 20px
}

.translate-jiseki .page2_box2_topic_t {
  font-weight: bold;
  color: #0F3FAB;
  border-bottom: 1px solid #0F3FAB;
  padding: 10px 0px;
}

.translate_etc {
  margin: 0px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 20px
}

.translate-jiseki {
  margin: 20px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  margin-bottom: 20px
}

.translate-jiseki .page2_box2_topic_t {
  font-weight: bold;
  color: #0F3FAB;
  border-bottom: 1px solid #0F3FAB;
  padding: 10px 0px;
}
/*ゆいワークスとは*/

.MainContentBox01 .yuiworkstoha h2 {
  border-top: 2px solid #BDBDBD;
  margin: 50px auto 0;
  text-align: center;
  padding-top: 0px;
  height: 50px;
  width: 100%;
  max-width: 400px;
}

.MainContentBox01 .yuiworkstoha h2 span {
  font-size: 30px;
  font-weight: bold;
  color: #0F3FAB;
  position: relative;
  top: -10px;
  padding: 0 20px;
  background: white;
}

.yuiworkstoha {
  width: 100%;
  max-width: 960px;
  padding-bottom: 30px;
  /*border-bottom:1px solid #d51a4b;
padding:50px 0px;*/
}

.policy {
  text-align: center;
  font-size: 14px;
  line-height: 2.4;
}

.policy span {
  color: #D01D45;
}
/*
.person{
width:620px;
margin:50px auto 0px auto;

}
*/

.person_left {
  width: 200px;
  float: left;
  text-align: right;
}

.President-name {
  padding-top: 8px;
  font-size: 20px;
}

.person_right {
  width: 480px;
  float: left;
  padding-left: 20px;
}

.perso_name {
  font-weight: bold;
  padding: 10px 0px;
}
/*------------------
ページトップ　ボタン
------------------*/

#page-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  /*font-size: 77%;*/
}

#page-top a {
  /*background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;*/
}

#page-top a:hover {
  background: url("img/pagetop-hover.png") no-repeat;
  background-size: 60px 60px;
  width: 60px;
  height: 60px;
  display: block;
  /*
    text-decoration: none;
    background: #999;
    */
}
/*hp制作*/
/*2階層目メイン*/
/*top img*/

.page2_top {
  width: 1200px;
  text-align: center;
  height: 230px;
  margin: 0px auto;
  padding-top: 20px;
}

.page2_top h2 {
  padding: 10px 0px 20px 0px;
  font-size: 30px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 70px;
}

.page2_top p {
  font-size: 30px;
  line-height: 24px;
  color: #ffffff;
  font-family: serif;
  font-weight: bold;
}

.page2_box1_1_title {
  font-size: 30px;
  margin: 30px 0px;
}

.page2_top.make-hp p {
  display: block;
  padding: 20px 0px 0px 0px;
}
/*背景画像*/

.make-hp {
  background: url("img/hp_img.jpg") no-repeat;
}

.make-Services1 {
  background: url("img/HP-s.jpg") no-repeat;
}

.make-Services2 {
  background: url("img/EC-site-s.jpg") no-repeat;
}

.make-Services3 {
  background: url("img/Translation-s.jpg") no-repeat;
}

.make-Services4 {
  background: url("img/Consulting-s.jpg") no-repeat;
}

.make-Services5 {
  background: url("img/Game-creation-s.jpg") no-repeat;
}

.page2_top_box {
  width: 100%;
  background-color: #cccccc;
}
/*main*/

.page2_top2 {
  padding: 27px 0px 30px 0px;
  border-bottom: 1px solid #07195b;
}

.page2_box1 {
  width: 960px;
}

.page2_box1_1 {
  text-align: center;
  color: #07195b;
}

.page2_box1_1 p span {
  color: #d01d44;
}

.komatta {
  width: 100%;
  padding-bottom: 30px;
}

.komatta_L {
  width: 48%;
  float: left;
}

.komatta_L img {
  height: 320px;
  width: auto;
}

.komatta_R {
  width: 50%;
  float: right;
}

.komatta_R ul {
  background: url("img/hukidasi.png")no-repeat;
  height: 204px;
  background-size: 100% 100%;
  padding-top: 6px;
  text-align: left;
  padding-left: 16%;
}

.komatta_R li {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  margin: 6%;
}

.page2_box1_2 {
  background: url("img/yazirusi.png") no-repeat;
  text-align: center;
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  height: 80px;
  padding-top: 20px;
}

.page2_box1_2_2 {
  text-align: center;
  padding: 20px 0px;
}
/*
.page2_box1_2_2{
    width: 65%;
    margin: 0px auto;
    border: 5px solid #07195b;
    border-radius: 20px;
    padding: 2%;
    margin-bottom: 20px;
line-height: 40px;
}

*/

.page2_box1_2_2 p span {
  color: #d01d44;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.page2_box2 {
  width: 960px;
  margin: 0px auto;
}

.anshin_img {
  width: 320px;
  float: left;
}

.anshin_img img {
  width: 100%;
}

.page2_box2_topic {
  font-weight: bold;
  font-size: 18px;
}

.anshin_content {
  width: 600px;
  float: right;
  padding-top: 20px;
  margin-right: 10px;
}

.page2_box2_content {
  margin: 20px 0px;
}

.otoiawase_R {
  margin-top: 50px;
}
/*制作実績*/

.hp_seisaku {
  width: 100%;
}

.hp_topic {
  height: 60px;
  background-color: #2e99df;
  color: #ffffff;
  text-align: center;
}

.nagare_topic {
  display: block;
  color: #ffffff;
  font-weight: bold;
  background-color: #07195b;
}

.nagare_box_item {
  border-radius: 20px;
}

.staff_img {
  width: 40%;
  height: 345px;
  float: left;
  position: relative;
}

.nagare_box img {
  width: 100%;
}

.staff_name {
  width: 364px;
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
  background-color: rgba(14, 63, 171, .50);
  padding: 8px 10px;
  position: absolute;
  bottom: 0;
}

.staff_name span {
  font-size: 20px;
}

.staff_content {
  width: 516px;
  float: left;
  padding: 20px 30px;
}

.tr_padding li {
  float: left;
}

.jisseki_img {
  margin-right: 30px;
}

.jisseki_img img {
  width: 300px;
  height: 220px;
}

.width520 {
  width: 520px;
}
/*固定ページ*/
/*お客様の声*/

.okyakusama_box {
  width: 940px;
  padding: 20px 0px;
}

.okyakusama_img {
  width: 407px;
  float: left;
  padding-right: 20px;
}

.okyakusama_text {
  width: 512px;
  float: left;
  padding-top: 20px;
}

.okyakusama_text p {
  width: 610px;
}

.okyakusama_text2 {
  width: 512px;
  float: left;
  padding: 10px 0;
  border-bottom: 2px solid #0F3FAB;
  font-size: 15px;
  line-height: 170%;
}

.okyakusama_text2 p span {
  font-weight: bold;
}
/*会社概要*/

.page_A {
  width: 960px;
  margin: 30px auto 0px auto;
}

.page_A ul {
  width: 960px;
  margin: 0px auto;
}

.ours_border {
  margin: 0px auto;
}

.company_info {
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
}

.ours_border_item1 {
  height: 60px;
  width: 200px;
  background-color: #bfece6;
  float: left;
  margin-right: 30px;
  font-weight: bold;
  text-align: center;
  display: table-cell;
  padding-top: 30px;
}

.ours_border_item2 {
  height: 60px;
  width: 400px;
  float: left;
  padding-top: 30px;
}

.ours_border_item {
  border: 1px solid #eee;
}

.torihiki .torihiki2 {
  height: 800px;
}

.torihiki_end {
  border: none!important;
}
/*実績*/

.jisseki_img p img {
  width: 320px;
  height: 320px;
  margin-right: 60px;
}

.page_B {
  margin: 0px auto;
  vertical-align: top;
}
/*    width: 800px;*/

.tr_padding {
  width: 900px;
  padding: 30px;
  margin-bottom: 50px;
  display: block;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
}
/*
.IE_table {
    border-spacing: 0;
    border-collapse: separate !important;
}
*/

.jisseki_name {
  display: block;
  color: #b00734;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 3px solid #b00734;
}

.jisseki_bold {
  font-weight: bold;
  padding: 5px;
  margin: 10px 0 4px 0;
  background-color: #f7f7f7;
}

.jisseki_naiyou {
  padding: 5px;
}

.jisseki_naiyou p.jisseki_link {
  padding-top: 10px;
}

.jisseki_naiyou a {
  text-decoration: underline;
}

.jisseki_naiyou a:hover {
  color: #b00734;
  text-decoration: none;
}

.company_info {
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
}
/*お客様の声*/

.okyakusama_voice_K {
  width: 800px;
  margin: 0px auto 20px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 20px;
}

.okyakusama_img_p {
  width: 320px;
  float: left;
}

.okyakusama_img_p p img {
  width: 320px;
}

.okyakusama_text_p {
  width: 400px;
  float: right;
  padding-top: 75px;
}

.okyakusama_voice_name {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 3px solid #07195b;
  margin-bottom: 20px;
  font-family: serif;
}

.voice_more {
  margin-top: 50px;
}
/*部署紹介*/

.busyo_content {
  width: 900px;
  height: 260px;
  border-bottom: 1px solid #eee;
  box-shadow: 0px 10px 5px #eee;
  padding: 30px;
  margin-bottom: 50px;
}

.busyo_content_L {
  position: relative;
  width: 400px;
  float: left;
}

.busyo_name {
  width: 320px;
  height: 200px;
  background-color: #07195b;
  position: absolute;
  top: 0px;
  color: #ffffff;
  font-size: 18px;
  border-left: 5px solid #ffffff;
}

.busyo_name p {
  border-left: 3px solid #ffffff;
  margin: 5px 0px 0px 10px;
  padding-left: 5px;
}

.busyo_name_img {
  width: 320px;
  height: 200px;
  position: absolute;
  top: 30px;
  left: 30px;
}

.busyo_content_R {
  width: 500px;
  float: right;
}

.busyo_topic {
  color: #b00734;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 3px solid #b00734;
  padding-bottom: 10px;
}

.staff_coment_p {
  padding: 10px 0px;
  border-top: dashed 1px #b00734;
  border-bottom: dashed 1px #b00734;
  margin-top: 16px;
}

.staff_coment_p p span {
  color: #b00734;
  font-size: 16px;
  font-weight: bold;
}
/*サービス一覧*/

.survice_3_box {
  width: 960px;
}

.survice_3 {
  width: 470px;
  height: 505px;
  background-color: #ffffff;
  margin-bottom: 44px;
  border-bottom: 1px solid #a6a6a6;
  padding-bottom: 20px;
  height: 530px;
}

.survice_3_l {
  float: left;
}

.survice_3_r {
  float: right;
}

.survice_3_title {
  font-weight: bold;
  color: #ffffff;
  background-color: #07195b;
  width: 460px;
  height: 45px;
  margin: 4px auto;
  text-align: center;
  font-size: 16px;
}

.survice_3_title h3 {
  padding-top: 10px;
}

.survice_3_img {
  width: 460px;
  height: 338px;
  /*background-color:#bfece6;*/
  border-bottom: 1px solid #a6a6a6;
  position: relative;
  margin: 0px auto;
}

.survice_3_img img {
  bottom: 0px;
  left: 8px;
}

.survice_3_content3 {
  padding: 10px;
}

.MainContentBox01_box {
  width: 100%;
  background-color: #eeeeee;
}

.survice_3_content2 {
  color: #b00734;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #b00734;
  padding: 10px 0px;
  text-align: center;
}
/*　自社サービス　*/

.service-inner {
  padding: 40px 0;
}

.bb1gray {
  border-bottom: 1px solid #dce5e8;
}

.service-inner .survice_img_left {
  float: left;
}

.service-inner .survice_img_right {
  float: right;
}

.service-text_right {
  width: 460px;
  padding-left: 20px;
  float: right;
}

.service-text_left {
  width: 460px;
  padding-right: 20px;
  float: left;
}

.service-text .name {
  padding-bottom: 20px;
  color: #0e3fab;
  font-size: 14px;
}

.service-text .title {
  padding-bottom: 20px;
  color: #0e3fab;
  font-size: 30px;
  font-weight: bold;
}

.service-text .text {
  padding-bottom: 40px;
}
/*sp非表示*/

.oursurvice_sp {
  display: none;
}
/*採用ページ*/
/*
.saiyou {
    border:3px solid #0f3fab;
    border-redius:50ox;
    padding:20px 20px;
    margin-top:20px;


}
*/

.saiyou_topic {
  width: 200px;
  vertical-align: middle;
  font-weight: bold;
  border: 1px solid #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  padding: 20px 0px;
  color: #0f3fab;
}

.saiyou_box2 table tr {
  width: 900px;
  height: 80px;
  margin: 0px auto;
  padding: 20px;
}

.saiyou_box2_table {
  width: 800px;
  margin: 0px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 20px;
}

.saiyou_content {
  vertical-align: middle;
  padding-left: 20px;
  border: 1px solid #eee;
  padding: 20px 0px;
}

#wpcf7-f640-p454-o1 {
  margin-top: 50px;
}

.saiyou_contact_box {
  width: 100%!important;
  background: url(./img/yui.jpg) no-repeat;
  background-size: cover;
  min-height: 570px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 20px 0px;
  margin: 40px auto 0px auto;
}
/*opacity: 0.4;*/

.saiyou_contact_box_min {
  background: #fff;
  padding-top: 0px;
}

.job_contact {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #0F3FAB;
  padding-top: 30px;
}
/* padding-top:20px; */
/*共通*/

.page_title {
  font-size: 30px;
  font-weight: bold;
  color: #0F3FAB;
  position: relative;
  background: #ffffff;
  height: 20px;
  width: 400px;
  margin: 40px auto 20px auto;
  border-top: 2px solid #BDBDBD;
}

.page_title2 {
  text-align: center;
  padding-top: 0px;
  width: 200px;
  background: #ffffff;
  position: absolute;
  top: -10px;
  left: 100px;
}

.page_title_2 {
  font-size: 30px;
  font-weight: bold;
  color: #0F3FAB;
  position: relative;
  background: #ffffff;
  height: 20px;
  width: 500px;
  margin: 40px auto 20px auto;
  border-top: 2px solid #BDBDBD;
}

.page_title2_2 {
  text-align: center;
  padding-top: 0px;
  width: 300px;
  background: #ffffff;
  position: absolute;
  top: -20px;
  left: 100px;
}
/*OFFICE風景*/

.office_text {
  text-align: center;
  margin-bottom: 30px;
}

.office_img {
  width: 960px;
  margin: 0px auto;
  border: 1px solid #eee;
  margin: 0px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 20px;
}

.office_img_1 {
  width: 960px;
  height: 292px;
}

.office_img_2 {
  width: 960px;
  padding: 15px 0px
}

.office_img_3 {
  width: 960px;
}

.office_img_l {
  float: left;
}

.office_img_r {
  float: right;
}

.office_img_r_bottom {
  padding-top: 14px;
}
/*投稿記事*/

.single_page_main1 {
  width: 300px;
  float: left;
  margin-right: 50px
}

.single_page_main2 {
  width: 500px;
  float: left
}

.single_page_title {
  font-weight: bold;
  font-size: 18px;
  display: block;
  padding: 20px 0px;
  border-bottom: 3px solid #0F3FAB;
  margin-bottom: 20px;
  color: #b00734;
}

.single_big_box {
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 30px;
}
/*ゲーム制作*/

.page2_top2_game {
  border-bottom: none!important;
  text-align: center;
  line-height: 50px;
  text-shadow: 1px 1px 3px #666;
  font-size: 20px;
}

.game_img {
  margin: 0px auto 50px;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 10px;
}

.game_staff {
  padding: 10px 0px;
  border-top: dashed 1px #b00734;
  border-bottom: dashed 1px #b00734;
  margin-top: 16px;
}

.game_staff p span {
  font-weight: bold;
  color: #b00734;
  text-shadow: 1px 1px 3px;
}

.game_music_p {
  text-align: center;
  line-height: 50px;
  text-shadow: 1px 1px 3px #666;
  font-size: 20px;
  display: block;
  background: url("img/game-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0px 0px 40px 0px;
  margin: 50px 0px;
}

.game_img_slider {
  padding: 0px 12px;
}
/**/

.bg_blog {
  background: url("img/blog.jpg")no-repeat;
}

.game_intro_L {
  width: 380px;
  float: left;
}

.game_intro_R {
  width: 550px;
  float: right;
}

.game_jisseki_mainp_content {
  padding-top: 30px;
}

.game_intro {
  padding-bottom: 30px;
}
/*ゲーム制作＿リニューアル*/

.mv_game {
  width: 100%;
}

.mv_game>img {
  width: 100%;
  vertical-align: bottom;
}

.pc_hidden {
  display: none;
}

.font-md {
  font-size: 18px;
}

.txt_block_read, .txt_solve_troble, .read_quality, .txt_performance, .box_product_flow .txt_flow {
  font-size: 30px;
  background-color: #2f99e0;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 28px 0;
}

.txt_block_read span, .txt_solve_troble span, .read_quality span {
  color: #ffe535;
}

.box_center_pos {
  width: 960px;
  margin: auto auto 35px;
}

.box_trouble {
  margin: 38px auto 40px;
}

.box_troble_l {
  position: relative;
  float: left;
  width: 260px;
  margin: 0 85px 0 45px;
}

.box_troble_l .position_box_ab {
  position: absolute;
  top: 36px;
  right: -100px;
}

.box_troble_r {
  float: left;
  width: 560px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #07195b;
  color: #fff;
  border-radius: 8px;
}

.troble_txt {
  line-height: 3.3;
}

.troble_txt:before {
  content: "●";
  margin-right: 20px;
}

.troble_txt:not(:last-child) {
  border-bottom: 1px solid #fff;
}

.txt_solve_troble {
  position: relative;
  margin-bottom: 75px;
}

.txt_solve_troble:after {
  content: "";
  position: absolute;
  bottom: -514px;
  left: 0;
  width: 0;
  height: 0;
  border: 480px solid transparent;
  border-top: 35px solid #2f99e0;
}

.box_solve_troble {
  width: 960px;
  margin: auto;
}

.box_solve {
  width: 920px;
  font-size: 18px;
  margin: 30px auto 0;
}

.read_solve {
  position: relative;
  float: left;
  width: 250px;
  text-align: center;
  font-weight: bold;
  color: #2f99e0;
  border: 5px solid #2f99e0;
}

.box_solve * {
  box-sizing: border-box;
}

.read_solve>p {
  height: 82px;
  padding: 30px 0 0;
}

.read_solve>p.two_line {
  padding-top: 21px;
}

.read_solve:before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 28px;
  right: -23px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left: 12px solid #fff;
}

.read_solve:after {
  content: "";
  position: absolute;
  top: 28px;
  right: -28px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left: 12px solid #2f99e0;
}

.txt_solve_info {
  float: left;
  width: 670px;
  padding: 10px 0 0 35px;
}

.txt_solve_info span {
  color: #c72536;
}

.ttl_price_table {
  position: relative;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #07195b;
  margin: 60px auto 38px;
}

.ttl_price_table:after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 56px;
  height: 0;
  border: 2px solid #2f99e0;
  margin-left: -15px;
}

.price_table {
  width: 100%;
  text-align: center;
  font-size: 14px;
  border: 1px solid #aaa;
  margin-bottom: 30px;
}

.price_table th {
  background-color: #f9f9f9;
  color: #07195b;
}

.price_table th, .price_table td {
  border: 1px solid #aaa;
  padding: 23px;
}

.txt_supple {
  line-height: 1.3;
  text-align: center;
}

.txt_supple .pickup {
  color: #c72536;
}

.txt_quality_info {
  text-align: center;
  margin: 35px auto 55px;
}

.img_jisseki {
  background-color: #f9f9f9;
  border: 1px solid #aaa;
  border-right: none;
  border-left: none;
  box-shadow: none;
  padding-top: 18px;
  padding-bottom: 18px;
}

.game_intro {
  padding-bottom: 21px;
}

.jisseki_name {
  padding: 18px 0 13px;
  border-bottom: 2px solid #c72536;
}

.ttl_jisseki {
  color: #fff;
  font-weight: normal;
  background-color: #07195b;
  margin-top: 3px;
}

.txt_jisseki {
  background-color: #fff;
  padding: 10px 0 0 9px;
}

.game_img.img_jisseki .bx-prev {
  left: -18px;
  background: url(img/btn_left_s.png) no-repeat;
}

.game_img.img_jisseki .bx-prev:hover, .game_img.img_jisseki .bx-next:hover {
  background-position: 0 0;
}

.game_img.img_jisseki .bx-next {
  right: -10px;
  background: url(img/btn_right_s.png) no-repeat;
}

.img_jisseki .game_img_slider>img {
  border: 1px solid #8f8f8f;
}

.img_jisseki .game_img_slider {
  background-color: #f9f9f9;
}

.box_step {
  position: relative;
  display: table;
  width: 920px;
  line-height: 1.3;
  margin: 40px auto;
  border: 4px solid #2f99e0;
}

.box_step * {
  box-sizing: border-box;
}

.num_step, .info_step {
  display: table-cell;
  vertical-align: middle;
  padding: 15px;
}

.num_step {
  width: 242px;
  text-align: center;
  color: #07195b;
  font-weight: bold;
  border-right: 4px solid #2f99e0;
}

.num_step span {
  color: #2f99e0;
}

.info_step {
  padding-left: 37px;
}

.box_step:not(:last-child):after {
  content: "";
  position: absolute;
  bottom: -43px;
  left: 50%;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top: 15px solid #2f99e0;
  margin-left: -15px;
}

.box_step.box_last_step:after {
  border: none;
}

.mitumorimuryou.game_mitumori {
  padding: 0;
}
/*ゲーム制作＿リニューアル　＜その他イラスト制作実績＞*/

.staff_jisseki_list ul li {
  float: left;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  margin: 8px 6px 8px;
  padding: 0;
  border-radius: 4px;
}

.staff_jisseki_list ul li a:hover img {
  opacity: .7;
}

.staff_jisseki_list ul li a img {
  max-width: 100%;
  height: auto;
  border-radius: 0px 0px 4px 4px;
}
/* colorbox */

#cboxOverlay {
  background: #000 !important;
}

#cboxLoadedContent {
  background: #fff !important;
}

#cboxLoadedContent {
  padding: 0 !important;
  overflow: auto !important;
  -moz-box-shadow: 0px 1px 10px #000000 !important;
  -webkit-box-shadow: 0px 1px 10px #000000 !important;
  box-shadow: 0px 1px 10px #000000 !important;
}

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose, #cboxTitle {
  top: -30px !important;
}

#colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible !important;
}

#cboxTitle {
  color: #fff !important;
  width: 75%;
}

#inline-content {
  /* インラインを使用する時のみ */
  margin: 20px !important;
}

#ajax-wrap {
  /* ajaxを使用する時のみ */
  margin: 20px !important;
}
/****************************************

          Layout

*****************************************/

.main-wrap {
  width: 1200px;
  margin: 20px auto;
}

.category-main {
  float: left;
  width: 800px;
}

#sidebar {
  float: right;
  width: 250px;
}
/****************************************

          link

*****************************************/

.category-main a {
  color: #0f3fab;
  text-decoration: none;
}

.category-main a:hover {
  color: #2888d5;
  text-decoration: underline;
}
/****************************************

          Main

*****************************************/

.category-main .post, .category-main .page {
  overflow: hidden;
  margin-bottom: 59px;
  border-bottom: 1px solid transparent;
}

.category-main .post h2 {
  font-size: 18px;
  border-bottom: 1px dotted #b1b1b1;
  line-height: 150%;
}

.sticky {
  /* 先頭固定ポストのスタイル */
}

.post-meta {
  margin-bottom: 1.5em;
}

.post-meta .post-date, .post-meta .category {
  padding-right: 1em;
}

.comment-num {
  white-space: nowrap;
}

.more-link {
  float: right;
}
/*
.footer-post-meta {
    margin-top: 40px;
    text-align: right;
}

    .post-author {
        padding-left: 1em;
    }

.page-link {
    margin: 3em 0;
}

.comment-page-link {
    margin: 0 0 3em;
}

    .page-link span,
    .comment-page-link span,
    .comment-page-link a {
        display: inline-block;
        margin-right: 3px;
        padding: 5px 8px;
        border: 1px solid #ddd;
        background: #ddd;
    }

        .page-link a span,
        .comment-page-link a {
            background: #fff;
        }

    .page-link a {
        border-bottom: none;
        color: #000;
    }

    .page-link a span:hover,
    .comment-page-link a:hover {
        background: #ffeff7;
        color: #000;
    }

*/
/* category.php */
/****************************************

          Custom Comments

*****************************************/

#custom-comments>li {
  margin-bottom: 40px;
}

#custom-comments .comment-author, #custom-trackback .trackback-author {
  float: left;
  margin-bottom: 20px;
  width: 250px;
}

#custom-comments .bypostauthor>div .comment-author {
  float: right;
}

#custom-comments .comment-author cite span {
  padding-left: .5em;
}

#custom-comments .comment-meta, #custom-comments .comment-author-name {
  margin-top: 0;
}

#custom-comments .comment-author-name {
  margin-bottom: 0;
}

#custom-comments .comment-body, #custom-trackback .trackback-body {
  float: right;
  margin-bottom: 20px;
  width: 300px;
}

#custom-comments .comment-body {
  background: url(images/quote.png) no-repeat 0 0;
}

#custom-comments .bypostauthor>div .comment-body {
  float: left;
}

#custom-comments .comment-body p {
  padding-left: 1.5em;
}

.widget ul {
  margin-left: 5px;
}

.widget ul.children {
  margin-left: 10px;
}
/****************************************

          index.php Main

*****************************************/

.content-box {
  float: right;
  margin-top: -0.25em;
  width: 510px;
}

.content-box .more-link {
  margin: 0;
}

.thumbnail-box {
  float: left;
}
/****************************************

          Sidebar

*****************************************/

#sidebar h2 {
  margin-bottom: 10px;
  padding: 10px 0 5px;
  font-family: 'Josefin Sans', sans-serif;
  background: #B1B1B1;
  text-align: center;
  color: #fff;
  border-radius: 4px 4px 0px 0px;
  font-size: 18px;
  font-weight: bold;
}

.widget {
  margin-bottom: 10px;
  border-radius: 6px 6px 0px 0px;
}

#sidebar-recent-posts li, #sidebar-popular-posts li {
  margin: 20px 0;
}

.sidebar-thumbnail-box {
  float: left;
  width: 75px;
}

.sidebar-recent-posts-title {
  float: right;
  width: 165px;
}

#sidebar-recent-posts h3, #sidebar-recent-posts p, #sidebar-popular-posts h3, #sidebar-popular-posts p {
  margin: 0;
}

.tagcloud a {
  white-space: nowrap;
}
/*追加*/

.nagare_box {
  padding: 20px 0px;
}
/*
.wpcf7-response-output {
    display: none;
}
*/

.screen-reader-response {
  text-align: center;
}

.greeting {
  width: 800px;
  margin: 0px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 20px;
}

.top_info_aria {
  padding-bottom: 20px;
}

.yui-blog a {
  width: 80px;
  height: 20px;
  border-radius: 5px 5px 5px 5px;
  background-color: #60A81C;
  text-align: center;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
}

.page2_box2_topic_check {
  display: block;
  float: left;
  margin-top: -5px;
}

.ours_border_item_p .ours_border_item2 {
  height: 100px;
}

.ours_border_item_p .ours_border_item1 {
  height: 100px;
}
/*追加*/

.hp_topic_img_m img {
  margin-top: 8px;
}
/*サイトマップ*/

.sitemap {
  padding: 50px;
  width: 600px;
  margin: 0px auto;
}

.sitemap_item_topic {
  font-weight: bold;
  font-size: 16px;
  margin: 10px 0px;
  padding: 10px 0px;
  border-bottom: 1px solid rgb(166, 166, 166);
  text-align: center
}

.sitemap_item_main {
  line-height: 28px;
  margin-left: 70px;
}

.sitemap_item_box_R {
  width: 250px;
  float: right;
}

.sitemap_item_box_L {
  width: 250px;
  float: left;
}

.sitemap_item_topic_border {
  border-top: 1px solid rgb(166, 166, 166);
}
/*追加*/

.headerRight_I_2 {
  margin-right: 13px;
}
/*送信完了画面*/

.page_title_thankyou {
  width: 600px;
}

.page_title2_thankyou {
  width: 400px;
}

.thankyou_bun {
  width: 600px;
  margin: 0px auto 20px auto;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px #ccc;
  padding: 50px;
}
/*見積もり無料*/

.mitumorimuryou {
  width: 940px;
  margin: 0px auto;
  padding: 30px 0px 50px 0px;
}
/*追加*/

.greeting2 {
  width: 700px;
  margin: 0px auto;
}

.person_right p span {
  font-weight: bold;
}

/*追加ここから2022*/

.bg_02 {
  background-color: #f25100;
  border-bottom: none !important;
}

.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  /* 比率を4:3に固定 */
}
/* Google Mapのiframe */

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#header_front_page {
  position: fixed;
  z-index: 2;
  background-color: #fff;
}
@media screen and (min-width:556px){
#header_front_page {
  position: initial;
}
}
@media screen and (min-width:768px) {
  #header_front_page {
    clear: both;
    z-index: 3;
    width: 100%;
    position: fixed;
    display: block;
    background-color: transparent;
    color: #fff;
  }
}
#header_front_page.change-color{
  background-color: #fff;
  color: #0f3fab;
  transition: 1.5s;
}
#header_front_page .gnav ul li a.change-color02{
    color: #0f3fab;
    transition: 1.5s;
}
.header_color_front_page {
  color: #fff;
}

#slider {
  width: 100%;
  height: 65vh !important;
  clip-path: polygon(0);
}
@media screen and (min-width:500px){
#slider {
  width: 100%;
  height: 100vh !important;
  clip-path: polygon(0);
}
}
@media screen and (min-width:768px) {
  #slider {
    width: 100%;
    height: 100vh !important;
    clip-path: polygon(41% 0, 81% 0, 100% 0, 100% 81%, 68% 100%, 0 100%, 0% 70%, 0 20%);
  }
}
.vegas-slide-inner{
 background-size: auto 400px !important;
 background-repeat: no-repeat !important;
}
@media screen and (min-width:500px){
.vegas-slide-inner{
    background-size: cover !important; 
    } 
}
.wrapper {
  height: 70vh;
  display: table;
  width: 100%;
  position: relative;
}
@media screen and (min-width:500px){
  .wrapper {
      height: 100vh;
  }
}
.wrapper h1 {
  text-align: center;
  letter-spacing: 0.1em;
  color: #fff;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  display: table-cell;
  vertical-align: middle;
}

.wrapper_header_title {
  padding: 10px 0;
  font-size: 1.2em;
}

.wrapper_header_subtitle {
  display: block;
  padding: 10px 0 30px;
  font-size: 0.55em;
}

.wrapper_header_capsion {
  display: block;
  padding: 10px 0;
  font-size: 0.58em;
  letter-spacing: 0.05em;
}

@media screen and (min-width:768px) {
  .wrapper_header_capsion {
    font-size: 0.8em;
  }
}

.wrapper_header_subtitle::after {
  content: "";
  display: block;
  width: 77%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
}

.wrapper_header_capsion::after {
  content: "";
  display: block;
  width: 87%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  right: 0;
}
@media screen and (min-width:768px){
   .wrapper_header_capsion::after {
    width: 82%;
  }
  .wrapper_header_subtitle::after {
    width: 67%;
  }
  .wrapper_header_title::after {
    width: 66% !important;
}
}
@media screen and (min-width:1060px){
   .wrapper_header_capsion::after {
    width: 77%;
  }
  .wrapper_header_subtitle::after {
    width: 63%;
  }
  .wrapper_header_title::after {
    width: 63% !important;
}
}
@media screen and (min-width:1400px) {
  .wrapper_header_capsion::after {
    width: 66%;
  }
  .wrapper_header_subtitle::after {
    width: 59%;
  }
  .wrapper_header_title::after {
    width: 58% !important;
  }
}

.wrapper_header_title::after {
  content: "";
  display: block;
  width: 75%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  right: 0;
}
/* news/blog */

.bgc {
  background-color: #fff !important;
  padding-top: 13vw;
}
@media screen and (min-width: 768px){
.bgc{
  padding-top: 0;
}
}
.parallax-window-nb {
  min-height: 400px;
  background: transparent;
}
@media screen and (max-width: 768px){
  .news_blog {
  width: 100%;
  background-repeat: no-repeat;
  position: relative;
  background-position: 0 0 !important;
  background-size: cover;
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/index/sp_bg_news.jpg) !important;
}
}
@media screen and (min-width:768px) {
  .news_blog {
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
  }
}

.news_blog_con {
  background-color: #fff;
  padding: 15px;
  color: #1E7ED2;
}

.news_blog_con h2 {
  font-weight: bold;
}

.news_blog_con_cap {
  font-size: 0.5em;
  padding: 0 20px;
  font-weight: normal;
}

.news_blog_bg {
  width: 95%;
  color: #005BAB;
  background-color: #fff;
  opacity: 0.9;
  right: 0;
  top: 10%;
  position: absolute;
  border-radius: 3px;
  z-index: 1;
  margin: 0 10px;
}

@media screen and (min-width:768px) {
  .news_blog_bg {
    position: absolute;
    top: 15%;
    right: 0;
    width: 90%;
    background-color: #fff;
    color: #005BAB;
    border-radius: 3px;
    opacity: 0.9;
    margin: 0;
  }
}
@media screen and (min-width:1400px) {
  .news_blog_bg {
    width: 85%;
  }
}
.news_blog_bg h2 {
  font-weight: bold;
  margin: 15px 0 10px 20px;
  border-bottom: 1px solid;
  padding: 5px 0;
  font-size: 1.2em;
}

@media screen and (min-width:768px) {
  .news_blog_bg h2 {
    font-size: 1.6em;
  }
}

.news_blog_category {
  max-width: 800px;
  margin: 0.3vw 5vw;
  border-bottom: 1px solid;
  padding: 5px 0;
  font-size: 0.9em;
}

.news_blog_category_bx {}

.category_name {
  color: #d7a202;
  font-weight: bold;
  margin: 0 15px;
  padding: 3px 6px;
}

.category_date {
  color: #000;
  margin: 0 15px;
}

.category_title {
  padding: 5px 15px;
  display: block;
  font-size: 0.8em;
}

@media screen and (min-width:768px) {
  .category_title {
    padding: 0 15px;
    display: inline;
      font-size: 1em;
  }
  .category_name {
    background-color: #d7a202;
    padding: 0 10px;
    color: #fff;
    font-weight: bold;
    margin: 0;
    border-radius: 1px;
  }
}

.category_btn {
  margin: 1vw 5vw;
  padding: 15px 0;
  font-size: 1em;
  text-align: center;
  z-index: 1;
  max-width: 800px;
}

@media screen and (min-width:768px) {
  .category_btn {
    padding: 5px 0;
  }
}

.category_btn a {
  text-decoration: none;
  border: 2px solid #f25100;
  padding: 3px 30px;
  border-radius: 15px;
  color: #f25100;
  font-weight: bold;
}

.category_btn a:hover {
  background-color: #f25100;
  color: #fff;
  transition: 0.7s;
}

.news_blog_category_bg_text {
  display: none;
}

@media screen and (min-width:768px) and ( max-width:1024px){
  .news_blog_category_bg_text {
    text-align: center;
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
    font-size: 6em;
    position: absolute;
    left: 25%;
    top: 70%;
    display: block;
    opacity: 0.6;
    z-index: -1;
  }
}
@media screen and (min-width:1024px){
  .news_blog_category_bg_text {
    text-align: center;
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
    font-size: 6em;
    position: absolute;
    left: 35%;
    top: 70%;
    display: block;
    opacity: 0.6;
    z-index: -1;
  }
}
  .sp_01{
    display: block;
  }
@media screen and (min-width:480px){
  .sp_01{
    display: none;
  }
}
.pc {
  display: none !important;
}

.sp {
  display: block !important;
}
.btn-pc {
  display: none !important;
}

.btn-sp {
  display: inline !important;
}

@media screen and (min-width:768px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  .btn-pc {
  display: inline !important;
}
  .btn-sp {
  display: none !important;
}
}
.top_title_sp{
    display: block !important;
}
@media screen and (min-width:1000px) {
.top_title_sp{
    display: none !important;
}
}
.pc_servise {
  display: none !important;
}

.sp_servise  {
  display: block !important;
}
@media screen and (min-width:992px) {
  .pc_servise {
    display: block !important;
  }
  .sp_servise {
    display: none !important;
  }
}
@media screen and (max-width: 768px){
.parallax-window-com {
  width: 100%;
  height: 200px;
  background-position: 0 0 !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/index/sp_bg_corporateLogo.jpg);
}
}
@media screen and (min-width:768px) {
  .parallax-window-com {
    background-position: center center !important;
    width: 100%;
    height: 300px;
  }
}

.com_img_eria {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.com_img_eria img {
  position: absolute;
  top: 43%;
  left: 30%;
}

@media screen and (min-width:768px) {
  .com_img_eria img {
    top: 50%;
    left: 44%;
  }
}

.parallax-window-about {
  width: 100%;
  min-height: 350px;
  background: transparent;
  background-image: url(https://www.yuiworks.jp/new/wp-content/uploads/2022/06/sp_bg_yuiBuilding.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100%;
}

@media screen and (min-width:768px) {
  .parallax-window-about {
    min-height: 400px;
    width: 60%;
    overflow: hidden;
    float: right;
    background-image: url();
  }
}
.con_cap {
  font-weight: normal;
  display: block;
  font-size: 0.5em;
  padding: 3px;
}

@media screen and (min-width:768px) {
  .con_cap {
    padding: 0 0 0 20px;
    display: inline;
  }
}

.about_yui_bg_text {
  display: none;
}
@media screen and (min-width:768px) and ( max-width:992px) {
  .about_yui_bg_text {
    text-align: center;
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
    font-size: 6em;
    position: absolute;
    left: -4%;
    top: 78%;
    display: block;
    opacity: 0.2;
  }
}
@media screen and (min-width:992px) {
  .about_yui_bg_text {
    text-align: center;
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
    font-size: 5em;
    position: absolute;
    left: -22%;
    top: 92%;
    display: block;
    opacity: 0.2;
  }
}
@media screen and (min-width:1400px) {
.about_yui_bg_text{
  font-size: 7em;
  left: -19%;
  top: 71%
}
}
.fm-01 {
  font-family: "ＭＳ ゴシック";
}

.com_img_eria_sp {
  background-image: url("https://www.yuiworks.jp/new/wp-content/uploads/2022/06/sp_bg_corporateLogo.jpg");
  height: 160px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.servise_eria {
  margin: 0 10px 20px !important;
  border-bottom: 1px solid #fff;
}

@media screen and (min-width:992px) {
  .servise_eria {
    margin: 0 0 4em !important;
    border: none;
  }
}
.servise_eria_info {
  width: 100% !important;
  border-bottom: 1px solid #fff;
  margin-bottom: 2vw;
}

@media screen and (min-width:768px) and ( max-width:1024px)  {
  .servise_eria_info {
    max-width: 70% !important;
    padding: 0 !important;
  }
}
@media screen and (min-width:1024px){
  .servise_eria_info {
    max-width: 53% !important;
  }  
}
.box_servise_eria {
  position: relative;
}

@media screen and (min-width:768px) {
  .box_servise_eria {
    margin: 0;
  }
}

.img_box_servise_eria {
  height: auto;
}

.img_box_servise_eria img {
  border-radius: 4px;
}

@media screen and (min-width:768px) {
  .img_box_servise_eria {
    height: 400px;
    overflow: hidden;
  }
  .img_box_servise_eria img {
    border-radius: 0;
  }
}

.top_title_servise_h2 {
  color: #fff;
  font-weight: bold;
  padding: 8px 10px 0;
  font-size: 1.2em;
}

@media screen and (min-width:768px) {
  .top_title_servise_h2 {
    font-size: 1.7em;
  }
}

.overview_servise {
  width: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

@media screen and (min-width:992px) {
  .overview_servise {
    margin: 30px 0px 0 -40px;
    position: static;
  }
}

.overview_servise_top {
  background-color: #0076cd;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  margin: -30px auto 0 !important;
  width: 90%;
}

@media screen and (min-width:992px) {
  .overview_servise_top {
    background-color: #0076cd;
    color: #fff;
    border-radius: 4px 0 0 4px;
    text-align: center;
    margin: 0 0 10px !important;
    width: 100%;
  }
}

.overview_servise h3 {
  font-size: 1.1em;
  padding: 10px 0 !important;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (min-width:992px){
.overview_servise h3{
  text-align: left;
}
}
.overview_servise_info {
  font-size: 0.8em;
  padding:5px 0;
  display: block;
  font-weight: normal;
}
@media screen and (min-width:992px){
  .overview_servise_info {
  padding: 5px 0;
}
}
.overview_servise_txt {
  padding: 30px 15px 0 !important;
}

@media screen and (min-width:768px) {
  .overview_servise_txt {
    padding: 30px 20px !important;
  }
}

.overview_servise_txtbox {
  border-radius: 4px;
  font-size: 0.8em;
  background-color: #fff;
  margin: 0 !important;
  opacity: 0.9;
  z-index: -1;
  position: relative;
  top: -20px;
  pointer-events: auto;
}

@media screen and (min-width:992px) {
  .overview_servise_txtbox {
    border-radius: 4px 0 0 4px;
    font-size: 1em;
    z-index: 0;
    position: static;
  }
}

.servise_bg_text {
display: none;
}
@media screen and (min-width:768px) and ( max-width:1024px){
  .servise_bg_text {
  -webkit-text-stroke: 1px #FFF;
  color: transparent;
  font-size: 4em;
  display: block;
  opacity: 0.2;
  top: -4.5%;
  left: 30%;
  position: relative;
}
}
@media screen and (min-width:1024px){
  .servise_bg_text {
  -webkit-text-stroke: 1px #FFF;
  color: transparent;
  font-size: 5em;
  display: block;
  opacity: 0.2;
  top: -7.5%;
  left: 42%;
  position: relative;
}
}
@media screen and (min-width:1400px){
  .servise_bg_text {
  -webkit-text-stroke: 1px #FFF;
  color: transparent;
  font-size: 7em;
  display: block;
  opacity: 0.2;
  top: -9.5%;
  left: 43%;
  position: relative;
}
}
.servise_bg_text_box {
  position: absolute;
  height: 100%;
}
.about_yui{
    width: 100%;
    position: relative;
    margin: 0;
    height: 100%;
}
@media screen and (min-width: 960px){
.about_yui{
  padding: 0;
}
}
.top_title_box{
  position: absolute;
    top: 3%;
    left: 0;
}
@media screen and (min-width: 960px){
  .top_title_box{
    position: absolute;
    top: 2%;
    left: 0;
  }
}
.info_about_yui{
    position: relative;
    padding: 15px 0 0;
}
@media screen and (min-width: 960px){
  .info_about_yui{
   padding: 0;
  }
}
.info_about_yui h2{
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    padding-left: 20px;
    margin: 0;
}
@media screen and (min-width: 960px){
  .info_about_yui h2{
    font-size: 1.7em;
    padding-left: 0;}
}
.info_about_yui::after{
     content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: -5px;
    left: 0;
}
@media screen and (min-width: 992px){
.info_about_yui::after{
  display: none;
}
}
@media screen and (min-width: 1200px){
.info_about_yui::after{
  width: 94%;
  display: block;
}
}
.about_info_txt_box{
    margin: 0 auto !important;
    width: 100%;
    font-size: 0.8em;
    padding: 10px;
}
@media screen and (min-width: 960px){
.about_info_txt_box{
    line-height: 1.6;
    margin: 0 auto;
    width: 100%;
    font-size: 1em;
}
}
.about_info_txt{
    padding: 0;
    margin: 0 20px !important;
    width: 90%;
    box-shadow: none;
    opacity: 1;
    position: absolute;
    top: 22vw;
    background-color: #fff;
    left: 0;
}
@media screen and (min-width: 555px){
.about_info_txt{
  text-align: center;
}
}
@media screen and (min-width:768px) and ( max-width:992px) {
.about_info_txt{
    padding: 0;
    margin: 0 20px !important;
    width: 90%;
    top: 10vw;
    background-color: #fff;
    left: 0;
    text-align: center;
}
}
@media screen and (min-width: 992px){
 .about_info_txt{
   padding: 1vw;
    border-radius: 0 15px 15px 0;
    box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 15%) inset;
    opacity: 0.9;
    position: static;
    top: 0;
    width: 132%;
    margin: 4vw 0 0 !important;
 } 
}
.parallax-window-about{
  background-image: url(https://www.yuiworks.jp/new/wp-content/uploads/2022/06/sp_bg_yuiBuilding.jpg);
  width: 100%;
  min-height: 350px;
  background: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100%;
}
@media screen and (min-width: 960px){
.parallax-window-about{
  width: 100%;
  background-image: url(https://www.yuiworks.jp/new/wp-content/uploads/2022/06/pc_bg_yuiBuilding.jpg);
}  
}
.our_area{
padding: 0 10px 30px;
}
@media screen and (max-width: 1199px){
.our_performance{
   background-image:url("https://www.yuiworks.jp/new/wp-content/uploads/2022/09/sp_img_performance.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      text-align: center;
      color: #fff;
      height: 30vw;
}
}
@media screen and (max-width: 1199px){
.our_contact{
   background-image:url("https://www.yuiworks.jp/new/wp-content/uploads/2022/09/sp_img_contact.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      text-align: center;
      color: #fff;
      height: 30vw;
}
}
.pc_width_our{
  width: 100%;
}
@media screen and (max-width: 1199px){
  .pc_width_our{
  width: 1200px;
}
}
.my-parts{
  text-align: center;
}
.iframe_contact{
  display: none;
}
.iframe_performance{
  display: none;
}
@media screen and (min-width:1200px){
.iframe_contact{
  display: inline;
  height: 360px;
}
.iframe_performance{
  display: inline;
  height: 360px;
}
}
/* 下層共通 */

.mx-width {
  max-width: 1098px !important;
}

.main_width {
  width: 1000px;
}

.fixed_content {
  padding: 30px 0;
}
/* 制作実績 */

.performance_parent {
  position: relative;
}

.under_line {
  border-bottom: 2px solid #60b5ff;
  padding: 0 0 15px;
}

.performance_title h2 {
  padding: 15px 0;
  color: #fff;
  font-size: 1.1em;
  border-radius: 3px;
  font-weight: bold;
  margin: -15px 20px;
  background-color: #1e7ed2;
  text-align: center;
}
.performance_title_2lines h2 {
  padding: 15px 0;
  color: #fff;
  font-size: 1.1em;
  border-radius: 3px;
  font-weight: bold;
  margin: -25px 20px;
  background-color: #1e7ed2;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .performance_title h2,.performance_title_2lines h2 {
    margin: 15px 0;
    padding: 8px 20px;
    border-radius: 0 3px 3px 0;
    text-align: left;
  }
}

.performance_box,.performance_box_02 {
  background-color: #fff;
  padding: 30px 20px 15px;
  height: auto;
  top: 0;
  z-index: -1;
  position: relative;
  font-size: 0.9em;
  pointer-events: auto;
}
@media screen and (min-width: 768px) {
  .performance_box {
    background-color: #fff;
    padding: 15px 20px;
    height: 331px;
    z-index: 0;
    position: static;
    font-size: 1em;
  }
  .performance_box_02{
    background-color: #fff;
    padding: 15px 20px;
    height: 298px;
    z-index: 0;
    position: static;
    font-size: 1em;
  }
}

.performance_box a,.performance_box_02 a {
  color: #000;
  text-decoration: none;
}

.performance_box a:hover,.performance_box_02 a:hover{
  opacity: 0.6;
  text-decoration: underline;
}

.performance_box h3,.performance_box_02 h3 {
  font-size: 1em;
  color: #1e7ed2;
  font-weight: bold;
}

.performance_animation_content {
  position: relative;
  margin-bottom: 30px;
}

.performance_animation_content h2 {
  font-size: 1.1em;
  color: #fff;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .performance_animation_content h2 {
    font-size: 1.3em;
  }
}

.performance_animation_content::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: -5px;
  left: 0;
}

@media screen and (min-width: 768px) {
  .performance_animation_content::after {
    width: 57%;
  }
}

.header_img_performance {
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/sp_pageTitle_1.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 35vw;
  position: relative;
  background-size: cover;
}

@media screen and (min-width: 960px) {
  .header_img_performance {
    background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/pc_pageTitle_1.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 25vw;
  }
}
@media screen and (min-width: 1400px) {
  .header_img_performance {
    height: 15vw;
  }
}
.header_img_performance::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 17vw;
  right: 0;
}

@media screen and (min-width: 960px) {
  .header_img_performance::after {
    content: "";
    display: block;
    width: 63%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 11.5vw;
    right: 0;
  }
}
@media screen and (min-width: 1400px){
  .header_img_performance::after {
    content: "";
    display: block;
    width: 62%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 7vw;
    right: 0;
  }
}
.performance_title_ocvb h2 {
  padding: 15px 0;
  color: #fff;
  font-size: 1.1em;
  border-radius: 3px;
  font-weight: bold;
  margin: -35px 20px;
  background-color: #1e7ed2;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .performance_title_ocvb h2 {
    margin: 15px 0;
    padding: 8px 20px;
    border-radius: 0 3px 3px 0;
    text-align: left;
  }
}

.performance_box_ocvb {
  background-color: #fff;
  padding: 45px 20px 15px;
  height: auto;
  top: 0;
  z-index: -1;
  position: relative;
  font-size: 0.9em;
  pointer-events: auto;
}
.pointer-over{
    z-index: 2;
    pointer-events: none;
}
@media screen and (min-width: 768px) {
  .performance_box_ocvb {
    background-color: #fff;
    padding: 15px 20px;
    height: 331px;
    z-index: 0;
    position: static;
    font-size: 1em;
  }
}

.performance_box_ocvb a {
  color: #000;
  text-decoration: none;
}

.performance_box_ocvb a:hover {
  opacity: 0.6;
  text-decoration: underline;
}

.performance_box_ocvb h3 {
  font-size: 1em;
  color: #1e7ed2;
  font-weight: bold;
}

.border_box {
  height: 1px;
  background-color: #fff;
  margin: 15px 0 0;
}

.ec_box {
  background-color: #fff;
  text-align: center;
  padding: 10px 0 0!important;
}

.ec_graphic {
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/performance/sp_img_performance_4_graphic_1.jpg);
  width: 100% !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 260px;
  position: relative;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .ec_graphic {
    background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/performance/pc_img_performance_4_graphic_1.jpg);
     width: 100% !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    height: 350px;
  }
}

.ec_graphic a {
  color: #fff !important;
  background-color: rgba(242, 81, 0, 1);
  text-decoration: none;
  border-radius: 26px;
  padding: 10px 20px;
  width: auto;
  display: inline-block;
  text-align: center;
  border: 2px solid;
  position: relative;
  top: 65%;
  left: 0;
  font-weight: bold;
  font-size: 1em;
  transition: .3s;
}
.ec_graphic a:hover{
transform: scale(1.05);
}
@media screen and (min-width: 768px) {
  .ec_graphic a {
    width: 400px;
    border: 2px solid;
    position: relative;
    top: 67%;
    left: 0%;
    font-size: 1.2em;
  }
}
/* 会社概要 */

.bg_company {
  width: 90%;
  box-shadow: none;
  opacity: 0.9;
  position: absolute;
  top: 30%;
  background-color: #fff;
  padding: 10px 0;
  margin: 0 auto !important;
  left: 5%;
}

@media screen and (min-width:555px) and ( max-width:992px) {
  .bg_company {
    padding: 1.5vw 4vw;
    border-radius: 0 15px 15px 0;
    box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 15%) inset;
    opacity: 0.9;
    position: absolute;
    top: 28%;
    width: 90%;
    margin: 3vw 0 0 !important;
  }
}
@media screen and (min-width: 992px) {
  .bg_company {
    padding: 1.5vw 4vw;
    border-radius: 0 15px 15px 0;
    box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 15%) inset;
    opacity: 0.9;
    position: static;
    top: 0;
    width: 105%;
    margin: 3vw 0 0 !important;
  }
}
.companyp_title_box {
  position: static;
  top: 0;
  left: 0;
}

@media screen and (min-width: 960px) {
  .companyp_title_box {
    position: static;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 1400px){
    .companyp_title_box {
    position: absolute;
    top: 10%;
    left: 0;
  }
}
.company_title_02 {
    position: static;
    top: 0;
    left: 0;
}

@media screen and (min-width: 960px) {
  .company_title_02 {
    position: static;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 1400px){
    .company_title_02 {
    position: absolute;
    top: auto;
    left: 0;
  }
}
.company_content {
  position: relative;
  margin-bottom: 30px;
}

.company_content h2 {
  color: #005BAA;
  font-weight: bold;
  font-size: 1.3em;
  padding-left: 20px;
  margin: 0;
}

@media screen and (min-width: 960px) {
  .company_content h2 {
    color: #005BAA;
    font-weight: bold;
    font-size: 1.6em;
    margin: 0;
  }
}

.company_content::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1E7ED2;
  position: absolute;
  bottom: -5px;
  left: 0;
}

@media screen and (min-width: 960px) {
  .company_content::after {
    width: 105%;
  }
}

.shareholders_box {
  padding: 15px 10px;
  line-height: 1.7;
  padding-bottom: 15px;
}

.shareholders_box h2 {
  font-size: 1.2em;
  font-weight: bold;
  color: #1E7ED2;
  border-bottom: 3px solid;
  display: inline-block;
}

.transaction_box {
  padding: 0 10px;
  line-height: 1.7;
  padding-bottom: 15px;
  border-bottom: 1px solid #1E7ED2;
}

.transaction_box h2 {
  font-size: 1.2em;
  font-weight: bold;
  color: #1E7ED2;
  border-bottom: 3px solid;
  display: inline-block;
}

.transaction_box span {
  display: inherit;
  font-size: 1.1em;
}

.transaction_box ul {
  padding-left: 20px;
  margin: 0;
}

.transaction_box li {
  list-style: disc;
}

.profile_table {
  width: 100%;
  line-height: 2;
}

.profile_table tr {
  border-bottom: 1px solid #1E7ED2;
}

.profile_table th {
  position: relative;
  width: 20%;
  text-align: center;
  color: #1E7ED2;
  font-weight: bold;
}

.profile_table th:after {
  display: block;
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: -13px;
  width: 3px;
  height: 15px;
  background-color: #1E7ED2;
}

.profile_table td {
  text-align: left;
  padding: 7px 0 7px 30px;
  width: 85%;
}

.profile_table_02 {
  width: 100%;
  line-height: 2;
}

.profile_table_02 th {
  position: relative;
  width: 20%;
  text-align: center;
  vertical-align: top;
  padding: 10px 0;
  color: #1E7ED2;
  font-weight: bold;
}

.profile_table_02 th:after {
  display: block;
  content: "";
  position: absolute;
  top: calc(18% - 10px);
  right: -13px;
  width: 3px;
  height: 90px;
  background-color: #1E7ED2;
}

.profile_table_02 td {
  text-align: left;
  padding: 7px 0 7px 30px;
  width: 85%;
}

.profile_content_box {
  max-width: 1070px;
  margin: 0 auto !important;
  background-color: #fff;
  padding: 1.5vw;
  font-size: 0.8em;
}

@media screen and (min-width: 960px) {
  .profile_content_box {
    border: 1px solid #ddd;
    font-size: 1em;
  }
}

.profile_content {
  position: relative;
  margin-bottom: 15px;
}

@media screen and (min-width: 960px) {
  .profile_content {
    margin-bottom: 30px;
  }
}

.profile_content h2 {
  color: #005BAA;
  font-weight: bold;
  font-size: 1.3em;
  padding-left: 20px;
}

@media screen and (min-width: 960px) {
  .profile_content h2 {
    font-size: 1.6em;
  }
}

.profile_content::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1E7ED2;
  position: absolute;
  bottom: -5px;
  left: 0;
}

@media screen and (min-width: 960px) {
  .profile_content::after {
    width: 50%;
  }
}

.detail {
  line-height: 2;
  margin: 0 auto !important;
  width: 90%;
  font-size: 0.8em;
}

@media screen and (min-width: 960px) {
  .detail {
    width: 100%;
    font-size: 0.9em;
    padding-top: 1.5vw;
  }
}

.text_list_color {
  color: #005BAA;
}

.text_presiden_box {
  color: #fff;
  background-color: #005BAA;
  width: 85%;
  margin: 0 auto !important;
  border-radius: 15px;
  padding: 10px 20px 0;
  font-size: 0.7em;
  position: relative;
  top: -28px;
}

@media screen and (min-width: 992px) {
  .text_presiden_box {
    border-bottom: 1px solid #1E7ED2;
    color: #005BAA;
    margin: 0 0 20px;
    background-color: transparent;
    width: 100%;
    border-radius: 0;
    padding: 0;
    position: static;
    top: 0;
    font-size: 1em;
  }
}

.text_president {
  text-align: left;
  font-size: 1.3em;
  font-weight: bold;
}

.name_president_box {
  display: table;
  text-align: center;
}

.name_president {
  display: table-cell;
  vertical-align: middle;
  font-weight: bold;
}

.president_bg_company {
  padding: 0;
  margin: 0 auto !important;
  width: 100%;
  box-shadow: none;
  opacity: 1;
  position: relative;
  top: -2vw;
  background-color: #fff;
}

@media screen and (min-width: 992px) {
  .president_bg_company {
    padding: 1.5vw 4vw;
    border-radius: 0 15px 15px 0;
    box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 15%) inset;
    opacity: 0.9;
    position: static;
    top: 0;
    width: 105%;
    margin: 4vw 0 0 !important;
  }
}

.bg_company_text {
  text-align: center;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 0.8em;
  
}

.bg_company_text p {
  margin-bottom: 5px;
}

@media screen and (min-width: 960px) {
  .bg_company_text p {
    margin-bottom: 1em;
  }
}

@media screen and (min-width: 960px) {
  .bg_company_text {
    font-size: 1em;
  }
}

.info_company {
  position: absolute;
  left: 0;
  width: 100% !important;
  padding: 0 !important;
  top: 0;
  height: 100%;
}

@media screen and (min-width: 960px) {
  .info_company {
    position: absolute;
    left: 0;
    width: 49% !important;
    padding: 0 !important;
    top: 8%;
  }
}

.info_company_president {
  position: relative;
  left: 0;
  width: 100% !important;
  padding: 0 !important;
  top: 0;
  height: 100%;
}

@media screen and (min-width: 960px) {
  .info_company_president {
    position: absolute;
    left: 0;
    width: 49% !important;
    padding: 0 !important;
    top: 8%;
    height: auto;
  }
}

.company_box {
  width: 100%;
  display: inline-block;
  position: relative;
  margin: 0 0 35px;
  height: 100%;
}

.company_box_02 {
  width: 100%;
  display: inline-block;
  position: relative;
  margin: 0 0 15px;
  height: 100%;
}

.company_box_03 {
  width: 100%;
  display: inline-block;
  position: relative;
  margin: 0 0 15px;
  height: 100%;
}

@media screen and (min-width: 960px) {
  .company_box, .company_box_02, .company_box_03 {
    padding: 50px 0 0;
  }
}

.company_title {
  color: #005BAA;
  font-weight: bold;
  font-size: 1.3em;
  padding-left: 1.5vw;
}

@media screen and (min-width: 960px) {
  .company_title {
    font-size: 1.6em;
  }
}

.company_box_img {
  float: none;
  width: 100%;
}

@media screen and (min-width: 960px) {
  .company_box_img {
    float: right;
    width: 60%;
  }
}

.header_img_company {
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/sp_pageTitle_6.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 35vw;
  position: relative;
  background-size: cover;
}

@media screen and (min-width: 960px) {
  .header_img_company {
    background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/pc_pageTitle_6.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 25vw;
  }
}
@media screen and (min-width: 1400px) {
   .header_img_company{
    height: 15vw;
    }   
}
.header_img_company::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 16vw;
  right: 0;
}

@media screen and (min-width: 960px) {
  .header_img_company::after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 11.5vw;
    right: 0;
  }
}
@media screen and (min-width: 1400px) {
  .header_img_company::after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 6.5vw;
    right: 0;
  }
}
/*ブログ・ニュース投稿ページ */

.header_img_news_blog {
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/sp_pageTitle_4.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 35vw;
  position: relative;
  background-size: cover;
}

@media screen and (min-width: 960px) {
  .header_img_news_blog {
    background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/pc_pageTitle_4.jpg);
    height: 25vw;
  }
}
@media screen and (min-width: 1400px) {
  .header_img_news_blog {
    height: 15vw;
  }
}
.header_img_news_blog::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 16vw;
  right: 0;
}

@media screen and (min-width: 960px) {
  .header_img_news_blog::after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 11vw;
    right: 0;
  }
}
@media screen and (min-width: 1400px){
  .header_img_news_blog::after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 6.5vw;
    right: 0;
  }
}
.news a {
  background-color: #C51721;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  display: inherit;
  text-align: center;
}

.news a:hover, .blog a:hover {
  opacity: 0.7;
  color: #fff;
}

.blog a {
  background-color: #f7bb25;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  display: inherit;
  text-align: center;
}

.posts_link a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
}

.posts_link a:hover {
  opacity: 0.7;
  color: #fff;
}

.previous {
  margin: 4vw 0 !important;
  background-color: #1E7ED2;
  text-align: center;
  padding: 3.5vw 0;
  font-size: 0.8em;
}
@media screen and (min-width: 960px){
   .previous {
font-size: 1em;
  padding: 1.5vw 0;
}

}

.previous_b {

}
.previous_b a {
  text-decoration: none;
  background-color: #fff;
  padding: 1px 15px;
  border-radius: 15px;
  color: #1E7ED2 !important;
  font-size: 1.2em;
  margin: 0 20px;
  font-weight: bold;
}

.blog_date {
  float: right;
}

.blog_date span {
  font-size: 0.5em;
}

.blog-detail__image {
  text-align: center;
  padding: 30px 0;
}

.blog-detail__image img {
  border: 1px solid #ddd;
  box-shadow: 1px 1px 3px 2px rgb(192 192 192 / 15%) inset;
  border-radius: 5px;
}

.blog_title {
  border-bottom: 1px solid #1e7ed2;
  padding: 20px 0 0;
  color: #1e7ed2;
  font-weight: bold;
  word-break: break-all;
}

.bg_c {
  background-color: #F2F2F2;
}

.blog_eria {
  padding: 5vw 0 0;
}

.blog_box {
  background-color: #fff;
  padding: 3vw 5vw !important;
}

.category ul {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.category li {
  width: 80px;
  margin: 0 10px 0 0;
}
/*ブログ・ニュース投稿ページ一覧 */
.pagination {
  display: inline !important;
}

.nav-links {
  background-color: #1E7ED2;
  text-align: center;
  padding: 15px 0;
  margin: 0;
}

@media screen and (min-width: 960px) {
  .nav-links {
    margin: 40px 0 0;
  }
}

.page-numbers {
  margin: 0 5px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.current {
  background-color: #fff;
  padding: 1px 7px;
  border-radius: 30px;
  color: #1E7ED2;
}

.page-numbers:hover {
  color: #fff;
  text-decoration: underline;
  opacity: 0.7;
}

.list_category {}

.list_box, .list_box_02 {
  position: relative;
}

.list_box ul {
  position: absolute;
  top: 0;
  left: auto;
  margin: 0;
  padding: 0;
  width: 80px;
}

.list_date {
  position: static !important;
  bottom: 0;
  float: right;
}
@media screen and (min-width: 960px){
.list_date {
  position: absolute !important;
  bottom: 0;
  right: 0;
  padding-right: 20px;
}
}
.sentence {
  word-break: break-all;
  line-height: 2;
  font-size: 0.8em;
}
@media screen and (min-width: 960px){
 .sentence{
  font-size: 1em;
 } 
}
.list-detail__image {}

.list {
  padding: 3vw 0;
}

.list_title {
  color: #1e7ed2;
  font-weight: bold;
  padding: 10px 0;
}

.list_title a {
  text-decoration: none;
  color: #1e7ed2;
  font-weight: bold;
}

.article {
  background-color: #fff;
  padding: 10px;
  margin: 15px 0;
}

.article a {
  text-decoration: none;
  color: #1e7ed2;
}
  /*プライバシーポリシー */
.content_policy{
  padding: 20px 0;
}
@media screen and (min-width: 960px){
.content_policy{
  padding: 50px 0;
} 
}
.policy_box ul{
padding-left: 15px;
line-height: 2;
font-size: 0.8em;
}
@media screen and (min-width: 960px){
.policy_box ul{
font-size: 1em;
} 
}
.policy_box li{
list-style: disc;
}
.policy_box{
margin: 0 auto !important;
  padding: 4vw;
  background-color: #fff;
  max-width: 1000px;
  border: 1px solid #ddd;
  width: 95%;
}
@media screen and (min-width: 960px){
.policy_box{
width: 100%;
padding: 2vw 3vw;
max-width: 1090px;
} 
}
.policy_box h3{
color: #1E7ED2;
  border-bottom: 1px solid;
  padding: 0;
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 0.9em;
}
@media screen and (min-width: 960px){
.policy_box h3{
  margin: 0 0 30px;
   font-size: 1.2em;
} 
}
.policy_box p{
padding: 0;
  margin-bottom: 15px;
  font-size: 0.8em;
}
@media screen and (min-width: 960px){
.policy_box p{
padding: 0;
  margin-bottom: 30px;
  font-size: 1em;
} 
}
.policy_content{
position: relative;
  margin-bottom: 15px;
}
@media screen and (min-width: 960px){
.policy_content{
  margin-bottom: 50px;
} 
}
.policy_content h2{
color: #005BAA;
  font-weight: bold;
  font-size: 1.3em;
  padding-left: 25px;
  margin: 0;
}
@media screen and (min-width: 960px){
.policy_content h2{
color: #1E7ED2;
  font-weight: bold;
  font-size: 1.6em;
  margin: 0;
  padding-left: 0;
} 
}
.policy_content::after{
content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1E7ED2;
  position: absolute;
  bottom: -5px;
  left: 0;
}
  /*リクルート */
.header_img_recruit{
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/sp_pageTitle_5.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 35vw;
  position: relative;
  background-size: cover;
}   
@media screen and (min-width: 960px){
 .header_img_recruit{
  background-image: url(https://www.yuiworks.jp/new/wp-content/themes/yuiworks2022/img/pagetitle/pc_pageTitle_5.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 25vw;
}
}
@media screen and (min-width: 1400px){
 .header_img_recruit{
    height: 15vw;
 }
}
.header_img_recruit::after{
content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 16vw;
  right: 0;
}
@media screen and (min-width: 960px){
.header_img_recruit::after{
  content: "";
  display: block;
  width: 70%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 11.5vw;
  right: 0;
}
}
@media screen and (min-width: 1400px){
.header_img_recruit::after{
  content: "";
  display: block;
  width: 70%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 6.5vw;
  right: 0;
}
}
  .recruit_eria{
  text-align: center;
  line-height: 2;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 2vw 4vw;
  margin: 0 auto;
}
.recruit_eria h2{
  clear: both;
  border-top: solid 2px #0053A6;
  border-bottom: solid 2px #0053A6;
  padding: 12px 0 10px;
  font-weight: bold;
  margin: 30px auto;
  color: #0053A6;
  font-size: 1em;
  max-width: 900px;
}
.recruit_eria p{
  font-size: 0.8em;
}
@media screen and (min-width: 960px){
.recruit_eria h2{
  font-size: 1.5em;
}
.recruit_eria p{
  font-size: 1em;
}
} 
  /*404*/
.not_found_box{
text-align: center;
color: #fff;
padding-top: 20vw;
}
@media screen and (min-width:768px) and ( max-width:1024px){
.not_found_box{
padding-top: 20vw;
}
}
@media screen and (min-width:1024px){
.not_found_box{
padding-top: 8vw;
}
}