@charset "UTF-8";
/* CSS Document */
/*
Theme Name: エコー・システム
Author: [swingingbits] chihiro
Description: レスポンシブ対応
*/
/* =============================================
share
================================================ */
article,
aside,
canvas,
details,
figcaption,
figure,
header,
footer,
hgroup,
menu,
nav,
section,
summary {
  display: block; }

.pc {
  display: block; }

.mb {
  display: none; }

a {
  color: #000000; }

a:hover {
  color: #777; }

a img {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }

a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60); }

.space20 {
  margin-bottom: 20px; }

.space30 {
  margin-bottom: 30px; }

.space40 {
  margin-bottom: 40px; }

.space50 {
  margin-bottom: 50px; }

.clearfix {
  zoom: 1; }

.clear,
.clearfix:after {
  content: "";
  display: block;
  clear: both; }

input,
textarea,
select {
  border: #ccc solid 1px;
  font-size: 110%;
  padding: 5px; }

input[type="file"] {
  font-size: 12px; }

.center {
  margin: 0 auto;
  width: 940px;
  padding: 0 20px; }

.w_btn {
  background: url(img/share/yazirushi_g_r.png) no-repeat 90% center;
  background-color: white;
  color: #777;
  font-size: 150%;
  font-weight: normal;
  text-decoration: none;
  display: block;
  margin: auto;
  text-align: center;
  padding: 15px 0; }

#header {
  position: fixed;
  width: 100%;
  top: 0;
  height: 80px;
  z-index: 998;
  background: white; }

@media screen and (min-width: 580px) {
  #nav_in {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: 0 0 0 auto; } }
#nav {
  padding-top: 5px;
  overflow: hidden;
  zoom: 1; }
  #nav #nav_in {
    overflow: hidden;
    zoom: 1;
    /* width: 600px; */ }
  #nav li.head {
    float: left; }
  #nav li.ugo > a {
    background: #145E9B;
    color: white !important; }
    #nav li.ugo > a:hover {
      background: #568CB9 !important; }
  #nav li.head a {
    display: block;
    padding: 30px 15px 30px;
    color: #555;
    text-decoration: none;
    font-size: 15px;
    position: relative; }
  #nav li.head a:hover {
    background: #EEEEEE; }

li.head ul.child {
  position: absolute;
  display: none; }

li.head ul.child li {
  background: #333;
  border-top: solid 1px #ccc;
  width: 100%; }
  li.head ul.child li a {
    color: white !important;
    display: block;
    font-weight: bold;
    padding: 15px 20px !important;
    font-size: 85% !important; }
  li.head ul.child li a:hover {
    background: #777 !important; }

li.head ul.child li:first-child {
  border: none; }

/*pagetop line*/
#header:before,
#header:after,
#nav:before,
#nav:after {
  content: "";
  display: block;
  width: 25%;
  left: 0%;
  background: #D37631;
  height: 5px;
  position: absolute;
  top: 0; }

#header:after {
  background: #6E8B41;
  left: 25%; }

#nav:before {
  background: #3070B9;
  left: 50%; }

#nav:after {
  background: #BA4952;
  left: 75%; }

/*pagetop line end*/
/*pagebottom line*/
#footer:before,
#footer:after,
#footer p:before,
#footer p:after {
  content: "";
  display: block;
  width: 25%;
  left: 0%;
  background: #D37631;
  height: 50px;
  position: absolute;
  bottom: 0; }

#footer:after {
  background: #6E8B41;
  left: 25%; }

#footer p:before {
  background: #3070B9;
  left: 50%; }

#footer p:after {
  background: #BA4952;
  left: 75%; }

/*pagetop line end*/
.cont #header h1 {
  position: absolute;
  left: 40px;
  top: 20px; }

#main_img {
  width: 100%;
  position: relative;
  height: 110px; }
  #main_img img {
    display: block;
    margin: auto;
    position: absolute;
    left: 50%;
    margin-left: -490px; }
  #main_img h2 {
    color: white;
    line-height: 110px;
    text-align: center;
    font-size: 270%;
    position: relative;
    z-index: 2;
    font-weight: normal; }

.w_btn.back {
  width: 200px;
  margin: 60px auto;
  border-radius: 40px;
  background: url(img/share/yazirushi_g_l.png) no-repeat 10% center;
  background-color: white; }

/* =============================================
top
================================================ */
#top #head {
  background: url(img/top/top_back.jpg) repeat-x bottom;
  background-color: #FFFFFF;
  padding: 85px 0 70px; }
  #top #head h1 {
    font-size: 170%;
    line-height: 130%;
    text-align: center;
    font-weight: bold;
    color: #A86C2F;
    margin-bottom: 40px; }
  #top #head .logo {
    padding: 0 0 70px;
    text-align: center; }
  #top #head .anniversary {
    text-align: center;
    margin: 0 auto 40px; }
  #top #head h2 {
    font-size: 130%; }
  #top #head h2,
  #top #head h3 {
    text-align: center;
    line-height: 130%;
    font-weight: normal !important;
    color: #777777; }
  #top #head h3 {
    font-size: 130%;
    margin: 20px auto; }
  #top #head h3#disc {
    font-size: 80%;
    margin-bottom: 70px;
    line-height: 140%; }
  #top #head #head_info {
    position: absolute;
    left: 20px;
    top: 30px;
    background: orange;
    width: 180px;
    height: 40px;
    padding-top: 110px;
    z-index: 999;
    background: url(img/top/info_ico.png) no-repeat top left; }
    #top #head #head_info a {
      display: block;
      text-decoration: none;
      color: #D47625;
      font-size: 85%;
      padding: 5px 0 5px 15px;
      position: relative;
      line-height: 130%; }
    #top #head #head_info a:after {
      background: #D47625;
      content: "";
      display: block;
      position: absolute;
      top: 8px;
      left: 0;
      border-radius: 10px;
      width: 10px;
      height: 10px; }
    #top #head #head_info a:hover {
      text-decoration: underline; }
  #top #head #news {
    margin: 110px auto 50px;
    text-align: center; }
    #top #head #news h4 {
      color: #777;
      margin: 0 0 20px; }
    #top #head #news ul {
      overflow: hidden;
      zoom: 1;
      width: 960px;
      margin: auto; }
      #top #head #news ul li {
        float: left;
        width: 25%; }
        #top #head #news ul li p.date {
          background: #777;
          color: white;
          font-size: 80%;
          padding: 3px 0;
          border-left: solid 1px white; }
        #top #head #news ul li a {
          color: #3070B9;
          text-decoration: underline;
          font-size: 85%;
          display: block;
          line-height: 130%;
          padding: 10px 5%;
          text-align: left; }
        #top #head #news ul li a:hover {
          color: #222971; }
      #top #head #news ul li:first-child p.date {
        border: none; }
  #top #head #scroll {
    text-align: center; }
#top #products,
#top #works,
#top #company,
#top #info,
#top #ugo {
  padding: 80px 0; }
  #top #products h1,
  #top #works h1,
  #top #company h1,
  #top #info h1,
  #top #ugo h1 {
    color: #555;
    font-size: 300%;
    font-weight: lighter;
    text-align: center; }
  #top #products h2,
  #top #works h2,
  #top #company h2,
  #top #info h2,
  #top #ugo h2 {
    margin: 40px auto 50px;
    font-size: 150%;
    text-align: center;
    line-height: 150%;
    color: #777;
    font-weight: normal !important; }
#top #products {
  background: url(img/top/products_back.jpg) no-repeat;
  background-size: cover;
  text-align: center; }
  #top #products h1,
  #top #products h2 {
    color: white; }
  #top #products a {
    color: white;
    text-decoration: none;
    font-size: 110%; }
    #top #products a img {
      margin-bottom: 10px; }
#top #magic_top .gradient-txt {
  overflow: hidden;
  position: relative;
  padding: 100px 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #be7600 10%, #be0000 30%, #1a00a3 70%, #009ba3 90%);
  background-size: 400% 400%;
  animation: gradient 5s linear infinite; }
@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
  #top #magic_top .gradient-txt .txt {
    width: 30%;
    height: 200%;
    position: absolute;
    bottom: -200%;
    left: 10%;
    z-index: 1;
    margin: 0;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
    transform-origin: bottom left;
    font-size: 1200%;
    color: #fff;
    opacity: .1; }
    #top #magic_top .gradient-txt .txt img {
      height: 99%; }
  #top #magic_top .gradient-txt .num0 {
    bottom: 0;
    animation: scrollSample00 7.5s forwards linear; }
  #top #magic_top .gradient-txt .num1 {
    animation: scrollSample01 15s linear infinite; }
  #top #magic_top .gradient-txt .num2 {
    animation: scrollSample01 15s linear 7.5s infinite; }
@keyframes scrollSample00 {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-100%); } }
@keyframes scrollSample01 {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-200%); } }
  #top #magic_top .gradient-txt .m_cont {
    position: relative;
    z-index: 5;
    margin: auto;
    max-width: 940px;
    width: 100%;
    text-align: center;
    color: #fff; }
    #top #magic_top .gradient-txt .m_cont .m_title p {
      font-size: 125%;
      margin-bottom: 25px;
      line-height: 150%; }
    #top #magic_top .gradient-txt .m_cont .m_title h1 {
      line-height: 150%;
      font-size: 175%; }
      #top #magic_top .gradient-txt .m_cont .m_title h1 span {
        font-size: 164.29%; }
    #top #magic_top .gradient-txt .m_cont .m_img {
      padding: 30px 0;
      position: relative; }
      #top #magic_top .gradient-txt .m_cont .m_img img {
        width: 350px;
        height: 350px;
        -webkit-animation-duration: 2s;
        animation-duration: 2s; }
      #top #magic_top .gradient-txt .m_cont .m_img .click_here {
        position: absolute;
        top: 50%;
        right: 0;
        width: 30%;
        margin-top: -20px;
        display: inline-block;
        transition: all 0.3s ease 0s;
        pointer-events: none; }
        #top #magic_top .gradient-txt .m_cont .m_img .click_here:hover {
          right: -5%; }
        #top #magic_top .gradient-txt .m_cont .m_img .click_here a {
          text-align: right;
          text-decoration: none;
          color: #fff;
          display: inline-block;
          width: 100%;
          padding-top: 30px;
          background-image: url(img/magic/pc_arrow.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: top center;
          pointer-events: auto; }
    #top #magic_top .gradient-txt .m_cont h2 {
      line-height: 170%; }
#top #bento_top {
  background: #eee; }
  #top #bento_top img.pc {
    margin: auto;
    max-width: 1180px;
    width: 100%; }
#top #works {
  background: url(img/top/top_back.jpg) repeat-x bottom;
  background-color: white; }
  #top #works li {
    margin-top: 1px; }
    #top #works li img {
      margin: auto;
      max-width: 1180px;
      width: 100%; }
  #top #works a.w_btn {
    margin-top: 50px;
    width: 240px;
    border-radius: 40px; }
#top #company {
  background: url(img/top/company_back.jpg) no-repeat;
  background-size: cover;
  text-align: center; }
  #top #company h1,
  #top #company h2 {
    color: white; }
  #top #company ul {
    overflow: hidden;
    zoom: 1;
    width: 960px;
    margin: auto; }
    #top #company ul li {
      float: left;
      width: 25%;
      text-align: center; }
#top #ugo {
  background: url(img/top/ugo_back.jpg) repeat-x bottom;
  background-color: white;
  text-align: center; }
  #top #ugo h1 {
    margin-top: 20px;
    font-size: 400%;
    font-weight: normal !important; }
  #top #ugo h2 {
    font-size: 120%;
    margin: 0 auto 50px; }
  #top #ugo a.w_btn {
    width: 240px;
    border-radius: 40px; }
#top #info {
  background: #D57625;
  color: white;
  text-align: center;
  position: relative; }
  #top #info h1 {
    color: white;
    font-size: 28px;
    position: relative;
    z-index: 2;
    margin-bottom: 50px; }
  #top #info ul {
    max-width: 1180px;
    width: 100%;
    margin: auto; }
  #top #info li {
    width: 100%;
    background: #E29F67;
    margin-top: 1px; }
    #top #info li a {
      background: url(img/share/yazirushi_w_r.png) no-repeat 98% center;
      display: block;
      width: 100%;
      height: 100%;
      padding: 20px 0;
      text-decoration: none;
      color: white;
      font-size: 105%; }
#top #info:before {
  content: '';
  background: url(img/top/info_back_ico.png) no-repeat;
  width: 160px;
  height: 160px;
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -80px;
  display: block; }

/*contact*/
#contact {
  background: white;
  padding: 80px 0; }
  #contact h1 {
    color: #555 !important;
    font-size: 48px !important;
    font-weight: lighter;
    text-align: center !important;
    margin: 0 !important;
    font-weight: normal !important; }
  #contact h2 {
    margin: 40px auto 50px !important;
    font-size: 150% !important;
    text-align: center !important;
    line-height: 150% !important;
    color: #777 !important;
    font-weight: normal !important; }

article#contact {
  overflow: hidden;
  zoom: 1; }
  article#contact h2 {
    font-size: 120% !important; }
  article#contact div {
    overflow: hidden;
    zoom: 1;
    width: 700px;
    margin: auto; }
    article#contact div #tel,
    article#contact div #mail {
      float: left;
      width: 320px;
      color: #555;
      text-align: center;
      padding-top: 80px; }
    article#contact div #tel {
      font-size: 200%;
      background: url(img/share/tel_ico.png) no-repeat center top; }
      article#contact div #tel span {
        display: block;
        font-size: 40%;
        line-height: 180%; }
    article#contact div #mail {
      float: none;
      background: url(img/share/mail_ico.png) no-repeat center top;
      font-size: 80%; }
      article#contact div #mail a.w_btn {
        border: solid 1px #777;
        border-radius: 50px;
        width: 80%; }

/* =============================================
products
================================================ */
#products,
#magic,
#company_page,
#works_page,
#recruit_page,
#news_page,
#info_page,
#ugos_room,
#privacy_page,
#inquiry_page,
#anniversary30th,
#contact_page {
  padding-top: 80px;
  background: #eee; }
  #products #header h1,
  #magic #header h1,
  #company_page #header h1,
  #works_page #header h1,
  #recruit_page #header h1,
  #news_page #header h1,
  #info_page #header h1,
  #ugos_room #header h1,
  #privacy_page #header h1,
  #inquiry_page #header h1,
  #anniversary30th #header h1,
  #contact_page #header h1 {
    position: absolute;
    left: 40px;
    top: -5px; }
  #products h1,
  #magic h1,
  #company_page h1,
  #works_page h1,
  #recruit_page h1,
  #news_page h1,
  #info_page h1,
  #ugos_room h1,
  #privacy_page h1,
  #inquiry_page h1,
  #anniversary30th h1,
  #contact_page h1 {
    font-size: 180%;
    line-height: 130%;
    text-align: center;
    color: #555;
    font-weight: normal;
    margin-top: 20px; }
  #products p,
  #magic p,
  #company_page p,
  #works_page p,
  #recruit_page p,
  #news_page p,
  #info_page p,
  #ugos_room p,
  #privacy_page p,
  #inquiry_page p,
  #anniversary30th p,
  #contact_page p {
    font-size: 90%;
    line-height: 180%;
    color: #555; }

#products #main_img {
  background: #1983B0; }
#products h1 + p {
  text-align: center;
  font-size: 100%;
  margin: 50px auto; }
#products #products_area {
  overflow: hidden;
  zoom: 1; }
  #products #products_area div {
    float: left;
    width: 32%;
    margin-left: 1%;
    height: 260px; }
    #products #products_area div a {
      display: block;
      text-decoration: none; }
    #products #products_area div b {
      display: block;
      margin: 10px 0 5px;
      color: black;
      font-weight: bold;
      font-size: 100%;
      line-height: 130%; }
    #products #products_area div p {
      font-size: 80%;
      line-height: 150%; }
    #products #products_area div img {
      display: block;
      width: 100%;
      height: auto; }
#products #intra {
  padding-bottom: 60px; }
  #products #intra img {
    margin-right: 5px; }
  #products #intra h4 {
    margin: 10px 0 20px;
    color: #555;
    font-weight: bold;
    font-size: 100%;
    line-height: 130%; }

#pankuzu {
  padding: 20px 0;
  color: #555;
  font-size: 90%;
  line-height: 140%; }

/* =============================================
magic
================================================ */
#magic .m_cf::after {
  content: "";
  display: block;
  clear: both; }
#magic .flex-ce {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }
#magic .gradient {
  overflow: hidden;
  position: relative;
  padding: 100px 0 10vw;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #5e427f 0%, #a5067b 20%, #a53606 40%, #7ebc05 60%, #02c9df 80%, #7300ff 100%);
  background-size: 400% 400%;
  animation: gradient 5s linear infinite; }
@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
#magic .gradient:before {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50vw at 50vw, #ffcc33 0%, rgba(255, 255, 255, 0) 100%);
  transition: all 0.3s;
  animation: gradient1 10s alternate infinite;
  content: ""; }
@keyframes gradient1 {
  0% {
    transform: translateX(-100vw) scale(1.5);
    opacity: .3; }
  50% {
    transform: translateX(0) scale(1.5);
    opacity: 1; }
  100% {
    transform: translateX(100vw) scale(1.5);
    opacity: .3; } }
#magic #magic_area {
  position: relative;
  z-index: 2; }
  #magic #magic_area .first_magic {
    text-align: center; }
    #magic #magic_area .first_magic h1,
    #magic #magic_area .first_magic p {
      color: #fff; }
    #magic #magic_area .first_magic h1 {
      font-size: 375%;
      margin-bottom: 25px; }
    #magic #magic_area .first_magic p {
      font-size: 150%;
      line-height: 150%; }
    #magic #magic_area .first_magic img {
      width: 540px;
      height: auto;
      margin: 50px auto 60px; }
  #magic #magic_area .reason .reason_top {
    text-align: center; }
    #magic #magic_area .reason .reason_top h2 {
      font-size: 262.5%;
      text-align: center;
      color: #fff;
      line-height: 140%;
      margin-bottom: 25px; }
    #magic #magic_area .reason .reason_top img {
      width: 23px;
      height: auto;
      animation-delay: 2s; }
  #magic #magic_area .reason ul {
    margin-top: 50px; }
    #magic #magic_area .reason ul li {
      position: relative;
      width: 100%;
      padding-bottom: 6vw;
      margin-bottom: 6.5vw;
      line-height: 150%; }
      #magic #magic_area .reason ul li:last-child {
        margin-bottom: 0; }
      #magic #magic_area .reason ul li .txt_cont {
        width: 70%;
        height: auto;
        background-color: #1E598F;
        box-sizing: border-box; }
        #magic #magic_area .reason ul li .txt_cont .txt_posi {
          display: inline-block;
          padding: 5% 30% 5vw 10%; }
          #magic #magic_area .reason ul li .txt_cont .txt_posi h3 {
            text-align: left;
            font-size: 200%;
            margin-bottom: 25px;
            font-weight: bold;
            color: #fff;
            line-height: 130%; }
          #magic #magic_area .reason ul li .txt_cont .txt_posi p {
            line-height: 180%;
            color: #fff; }
          #magic #magic_area .reason ul li .txt_cont .txt_posi .inpage_links {
            margin-top: 25px;
            text-decoration: none;
            display: inline-block;
            color: #fff;
            border: 1px solid #fff;
            padding: 10px 50px 10px 15px;
            position: relative; }
            #magic #magic_area .reason ul li .txt_cont .txt_posi .inpage_links:after {
              content: '';
              display: inline-block;
              position: absolute;
              top: 11px;
              right: 20px;
              width: 7px;
              height: 21px;
              background-image: url(img/magic/inpage_links_arrow.png);
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              transition: all 0.3s ease 0s; }
            #magic #magic_area .reason ul li .txt_cont .txt_posi .inpage_links:hover:after {
              top: 17px; }
      #magic #magic_area .reason ul li .pic_cont {
        position: absolute;
        bottom: 0;
        right: 5vw;
        width: 40vw;
        height: 85%; }
        #magic #magic_area .reason ul li .pic_cont img {
          max-width: 480px;
          width: 100%;
          height: auto; }
      #magic #magic_area .reason ul li .pic_cont_1,
      #magic #magic_area .reason ul li .pic_cont_3 {
        bottom: -4vw; }
      #magic #magic_area .reason ul li .re_txt_cont {
        float: right; }
        #magic #magic_area .reason ul li .re_txt_cont .txt_posi {
          padding: 5% 10% 5vw 30%; }
      #magic #magic_area .reason ul li .re_pic_cont {
        width: 40vw;
        right: inherit;
        left: 5vw;
        z-index: 1;
        text-align: right; }
#magic #mg_list_area {
  background: linear-gradient(#94c7f5 0%, #1e598f 100%);
  padding: 100px 0; }
  #magic #mg_list_area h1,
  #magic #mg_list_area h2 {
    color: #fff;
    text-align: center;
    line-height: 150%; }
  #magic #mg_list_area h1 {
    margin-bottom: 50px;
    font-weight: bold; }
  #magic #mg_list_area ul {
    margin-top: 60px;
    flex-wrap: wrap; }
    #magic #mg_list_area ul li {
      width: 32%;
      padding: 3% 2% 3.5% 2%;
      box-sizing: border-box;
      background-color: #fff;
      text-align: center;
      margin-bottom: 20px; }
      #magic #mg_list_area ul li.l_red {
        border: 10px solid #C83964;
        box-sizing: border-box; }
      #magic #mg_list_area ul li.l_orange {
        border: 10px solid #F0940B;
        box-sizing: border-box; }
      #magic #mg_list_area ul li.l_yellow {
        border: 10px solid #D0BA14;
        box-sizing: border-box; }
      #magic #mg_list_area ul li h3,
      #magic #mg_list_area ul li p {
        color: #1E598F;
        line-height: 170%; }
      #magic #mg_list_area ul li h3 {
        font-weight: bold;
        font-size: 125%; }
        #magic #mg_list_area ul li h3.txt_size_d {
          font-size: 120%; }
      #magic #mg_list_area ul li img {
        margin: 15px auto 20px; }
        #magic #mg_list_area ul li img.mg_pic1 {
          width: 70px; }
        #magic #mg_list_area ul li img.mg_pic2 {
          width: 67px; }
        #magic #mg_list_area ul li img.mg_pic3 {
          width: 62px; }
        #magic #mg_list_area ul li img.mg_pic4 {
          width: 67px; }
        #magic #mg_list_area ul li img.mg_pic5 {
          width: 66px; }
        #magic #mg_list_area ul li img.mg_pic6 {
          width: 66px; }
        #magic #mg_list_area ul li img.mg_pic7 {
          width: 82px; }
        #magic #mg_list_area ul li img.mg_pic8 {
          width: 86px; }
        #magic #mg_list_area ul li img.mg_pic9 {
          width: 90px; }
      #magic #mg_list_area ul li p {
        text-align: left; }
#magic #migration {
  background-color: #EAF2F8;
  color: #1E598F;
  padding: 80px 0 100px; }
  #magic #migration h1,
  #magic #migration p {
    color: #1E598F; }
  #magic #migration h1 {
    margin-bottom: 50px; }
  #magic #migration h2,
  #magic #migration p {
    text-align: center; }
  #magic #migration h2 {
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 150%; }
  #magic #migration .table_box {
    margin-top: 50px; }
    #magic #migration .table_box b {
      font-weight: bold;
      display: block;
      margin-bottom: 15px; }
    #magic #migration .table_box p {
      margin-top: 50px; }
    #magic #migration .table_box table {
      width: 100%;
      border-collapse: collapse;
      border-top: 1px solid #1E598F;
      border-right: 1px solid #1E598F; }
      #magic #migration .table_box table tr th,
      #magic #migration .table_box table tr td {
        font-size: 87.5%;
        border-left: 1px solid #1E598F;
        border-bottom: 1px solid #1E598F;
        padding: 13px 0; }
      #magic #migration .table_box table tr th {
        background-color: #5B8FBE;
        color: #fff;
        font-weight: bold; }
      #magic #migration .table_box table tr td {
        padding-left: 25px;
        padding-right: 5px; }
  #magic #migration .support {
    margin-top: 65px; }
    #magic #migration .support b {
      display: block;
      margin-bottom: 30px;
      font-weight: bold; }
    #magic #migration .support p {
      text-align: left;
      line-height: 150%; }
    #magic #migration .support ul {
      list-style-type: disc;
      padding-left: 1.2em;
      margin-top: 5px; }
      #magic #migration .support ul li {
        margin-bottom: 10px; }
#magic #mg_case {
  background-color: #fff;
  padding: 100px 0 70px; }
  #magic #mg_case h1 {
    color: #1E598F;
    font-size: 200%;
    text-align: center;
    font-weight: bold;
    margin-bottom: 60px; }
  #magic #mg_case ul li {
    background-repeat: no-repeat;
    background-size: contain;
    padding: 50px 0 60px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1px; }
    #magic #mg_case ul li.mg_case_1 {
      background-color: #808E44;
      background-image: url(img/magic/mg_case_pic1.png); }
    #magic #mg_case ul li.mg_case_2 {
      background-color: #645253;
      background-image: url(img/magic/mg_case_pic2.png); }
    #magic #mg_case ul li.mg_case_3 {
      background-color: #A34F77;
      background-image: url(img/magic/mg_case_pic3.png); }
    #magic #mg_case ul li.mg_case_4 {
      background-color: #5C5C86;
      background-image: url(img/magic/mg_case_pic4.png); }
    #magic #mg_case ul li.mg_case_5 {
      background-color: #B56325;
      background-image: url(img/magic/mg_case_pic5.png); }
    #magic #mg_case ul li.mg_case_6 {
      background-color: #4F91A5;
      background-image: url(img/magic/mg_case_pic6.png); }
    #magic #mg_case ul li:after {
      content: "";
      display: inline-block;
      position: absolute;
      width: 100px;
      height: 20px;
      bottom: 12%;
      right: 3%;
      background-image: url(img/magic/mg_case_arrow.png);
      background-repeat: no-repeat;
      background-size: contain;
      transition: all 0.3s ease 0s;
      pointer-events: none; }
    #magic #mg_case ul li:hover:after {
      right: 1%; }
    #magic #mg_case ul li a {
      text-decoration: none;
      pointer-events: auto; }
      #magic #mg_case ul li a .case_name {
        width: 50%;
        float: right; }
        #magic #mg_case ul li a .case_name p,
        #magic #mg_case ul li a .case_name h2 {
          color: #fff; }
        #magic #mg_case ul li a .case_name .label {
          font-size: 87.5%;
          border: 1px solid #fff;
          display: inline-block;
          line-height: 100%;
          padding: 1% 2%; }
        #magic #mg_case ul li a .case_name h2 {
          margin-top: 13px;
          margin-bottom: 10px;
          font-size: 175%;
          font-weight: bold; }
    #magic #mg_case ul li > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      left: 50%;
      top: 50%;
      z-index: 2; }

/* =============================================
company
================================================ */
#company_page {
  /* compnay nav */
  /* end compnay nav */ }
  #company_page #main_img {
    background: #171753; }
  #company_page ul.company_nav {
    overflow: hidden;
    zoom: 1;
    margin: 50px auto 60px;
    width: 480px; }
    #company_page ul.company_nav li {
      float: left;
      margin: 0 10px; }
      #company_page ul.company_nav li a {
        width: 100px;
        height: 100px;
        text-align: center;
        display: table-cell;
        vertical-align: middle; }
      #company_page ul.company_nav li a:hover,
      #company_page ul.company_nav li a.se {
        background: url(img/company/maru.png) no-repeat center;
        background-size: 100% auto; }
        #company_page ul.company_nav li a:hover img,
        #company_page ul.company_nav li a.se img {
          opacity: 1;
          filter: alpha(opacity=100); }
  #company_page ul.company_nav:first-child {
    margin-top: 0 !important; }
  #company_page article#greeting {
    background: white;
    padding-bottom: 80px; }
    #company_page article#greeting h1 {
      background: #eee;
      padding-bottom: 30px; }
    #company_page article#greeting div {
      position: relative;
      margin: 80px auto 60px; }
    #company_page article#greeting p {
      width: 650px; }
    #company_page article#greeting p + p {
      text-align: right; }
      #company_page article#greeting p + p span {
        font-size: 80%; }
      #company_page article#greeting p + p img {
        position: static;
        display: block;
        margin-right: 0;
        margin-left: auto; }
    #company_page article#greeting img {
      position: absolute;
      right: 0;
      top: 0; }
  #company_page article#philosophy {
    background: #555555;
    padding: 80px 0 120px; }
    #company_page article#philosophy h1 {
      color: white;
      font-size: 160%;
      margin-bottom: 40px; }
    #company_page article#philosophy h2 {
      text-align: center;
      color: white;
      font-size: 180%;
      line-height: 130%; }
  #company_page article#profile,
  #company_page article#torihiki,
  #company_page article#history {
    background: white; }
    #company_page article#profile h1,
    #company_page article#torihiki h1,
    #company_page article#history h1 {
      background: #eee;
      padding-bottom: 30px; }
    #company_page article#profile table,
    #company_page article#torihiki table,
    #company_page article#history table {
      width: 940px;
      margin: auto;
      padding: 50px 20px;
      font-size: 90%;
      line-height: 130%; }
      #company_page article#profile table th,
      #company_page article#torihiki table th,
      #company_page article#history table th {
        text-align: right;
        color: #999999; }
      #company_page article#profile table td,
      #company_page article#torihiki table td,
      #company_page article#history table td {
        padding-left: 20px;
        color: #555; }
      #company_page article#profile table th,
      #company_page article#profile table td,
      #company_page article#torihiki table th,
      #company_page article#torihiki table td,
      #company_page article#history table th,
      #company_page article#history table td {
        line-height: 180%;
        padding-bottom: 10px; }
  #company_page article#profile td span {
    font-size: 80%;
    padding-right: 10px;
    color: #999; }
  #company_page article#torihiki {
    background: #555; }
    #company_page article#torihiki table th,
    #company_page article#torihiki table td {
      color: white !important;
      padding-bottom: 20px; }
  #company_page .profile_anniversary {
    padding: 40px 0;
    text-align: center;
    background: white; }
    #company_page .profile_anniversary img {
      max-width: 160px; }
  #company_page article#access {
    /*#map_hiroshima{
    background: url(img/company/map_hiroshima.jpg) no-repeat center;
}
    #map_tokyo{
    background: url(img/company/map_tokyo.jpg) no-repeat center;
}
    #map_fukuoka{
    background: url(img/company/map_fukuoka.jpg) no-repeat center;
}
    #map_nagoya{
    background: url(img/company/map_nagoya.jpg) no-repeat center;
}
    #map_osaka{
    background: url(img/company/map_osaka.jpg) no-repeat center;
}
    #map_fukuyama{
    background: url(img/company/map_fukuyama.jpg) no-repeat center;
}*/ }
    #company_page article#access h1 {
      background: #eee;
      padding-bottom: 30px; }
    #company_page article#access li {
      background: #555;
      width: 100%;
      border-bottom: solid 1px #777; }
    #company_page article#access .archive {
      padding: 20px 0; }
    #company_page article#access .archive:hover {
      background: #444; }
    #company_page article#access .in {
      margin: auto;
      background: url(img/company/yazirushi.png) no-repeat 910px center;
      width: 940px;
      padding: 0 20px; }
    #company_page article#access b,
    #company_page article#access p {
      display: block;
      color: white; }
    #company_page article#access b {
      font-size: 110%;
      font-weight: bold;
      padding-bottom: 10px; }
    #company_page article#access .subMenu li {
      height: auto;
      width: 100%;
      position: relative;
      background: #111;
      /*img.map{
          display: block;
          margin: auto;
      }
      a{
          position: absolute;
          right: 5%;
          bottom: 20px;
          img.mb{
              width: 50px;
              height: auto;
          }
      }*/ }
      #company_page article#access .subMenu li .map {
        position: relative;
        height: 400px !important;
        overflow: hidden; }
        #company_page article#access .subMenu li .map iframe,
        #company_page article#access .subMenu li .map object,
        #company_page article#access .subMenu li .map embed {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }

/* =============================================
works
================================================ */
#works_page #main_img {
  background: #6AB0DE; }
#works_page h1 + h2,
#works_page #case h2 {
  text-align: center;
  font-weight: bold;
  color: #555;
  font-size: 150%;
  margin: 70px auto 40px; }
#works_page #works_area li {
  margin-top: 1px; }
  #works_page #works_area li img {
    margin: auto;
    max-width: 1180px;
    width: 100%; }
#works_page article#case {
  padding-top: 1px;
  padding-bottom: 140px; }
  #works_page article#case h3 {
    font-size: 110%;
    color: #555;
    margin: 40px auto 10px; }
  #works_page article#case li {
    border-bottom: solid 1px white; }
  #works_page article#case .archive {
    background: url(img/works/sankaku_ico.png) no-repeat 20px center;
    background-color: #999999;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 110%; }
  #works_page article#case .archive.open {
    background-color: #777; }
  #works_page article#case .archive:hover {
    background-color: #aaa; }
  #works_page article#case table {
    padding: 0;
    margin: auto;
    font-size: 90%;
    color: #555;
    background: white;
    border-spacing: 0; }
    #works_page article#case table tr th:first-child,
    #works_page article#case table tr td:first-child {
      border-left: none; }
    #works_page article#case table th,
    #works_page article#case table td {
      line-height: 170%;
      border-top: solid 1px #DDDDDD;
      border-left: solid 1px #DDDDDD;
      padding: 10px;
      color: #555;
      font-size: 85%; }
    #works_page article#case table th {
      text-align: center; }

#works_page .single .center:first-child .w_btn {
  margin: -30px -20px 0 auto; }
#works_page .single #works_main_img {
  background: #C6C2B9; }
  #works_page .single #works_main_img img {
    display: block;
    margin: auto; }
#works_page .single h1 {
  margin: 60px auto 40px;
  font-size: 200%; }
  #works_page .single h1 span {
    display: block;
    text-align: center;
    font-size: 65%;
    margin-top: 10px; }
#works_page .single h2.center {
  font-size: 140%;
  color: #555; }
#works_page .single h4.ico {
  margin: 40px auto -10px;
  text-align: center; }
#works_page .single h3 {
  color: #555;
  font-size: 140%;
  margin: 40px auto 30px;
  line-height: 150%; }
#works_page .single b {
  line-height: 150%;
  font-size: 110%;
  display: block;
  margin: 40px auto 30px;
  font-weight: bold; }
#works_page .single p {
  line-height: 180%; }
#works_page .single .cont1,
#works_page .single .cont2,
#works_page .single .cont3,
#works_page .single .cont4,
#works_page .single .cont5,
#works_page .single .cont6 {
  padding: 20px 0 70px;
  width: 100%; }
#works_page .single article#works1 h3 {
  font-weight: bold;
  color: #0D5EB2; }
#works_page .single article#works1 .cont1 {
  background: white; }
#works_page .single article#works1 .cont2 p + .img {
  margin: 60px auto;
  padding: 10px 0 50px;
  background: white;
  text-align: center;
  width: 100%; }
  #works_page .single article#works1 .cont2 p + .img h3 {
    color: #555; }
#works_page .single article#works1 .cont2 b + div {
  overflow: hidden;
  zoom: 1; }
  #works_page .single article#works1 .cont2 b + div p {
    float: left;
    width: 490px; }
  #works_page .single article#works1 .cont2 b + div .img {
    padding: 0;
    float: right;
    width: 400px;
    margin: 0 0 40px;
    font-size: 80%;
    background: none;
    text-align: left;
    line-height: 150%; }
    #works_page .single article#works1 .cont2 b + div .img img {
      margin-bottom: 5px; }
#works_page .single article#works1 .cont3 {
  background: #DDDDDD; }
#works_page .single article#works1 .cont4 .center {
  overflow: hidden;
  zoom: 1; }
  #works_page .single article#works1 .cont4 .center div {
    float: right;
    width: 650px; }
  #works_page .single article#works1 .cont4 .center img {
    float: left;
    margin-top: 40px; }
#works_page .single article#works2 .cont1 {
  background: #DDDDDD; }
#works_page .single article#works2 .cont2 .img {
  width: 680px;
  margin: 40px auto;
  font-size: 80%;
  color: #555;
  line-height: 150%; }
  #works_page .single article#works2 .cont2 .img img {
    margin-bottom: 5px;
    display: block; }
#works_page .single article#works2 .cont3 {
  background: #DDDDDD; }
  #works_page .single article#works2 .cont3 .center {
    overflow: hidden;
    zoom: 1; }
  #works_page .single article#works2 .cont3 .center:first-child + .center div {
    float: left;
    width: 490px; }
  #works_page .single article#works2 .cont3 .center:first-child + .center img {
    float: right;
    margin-top: 40px; }
  #works_page .single article#works2 .cont3 .center:first-child + .center + .center + .center div {
    float: right;
    width: 610px; }
  #works_page .single article#works2 .cont3 .center:first-child + .center + .center + .center img {
    float: left;
    margin-top: 40px; }
#works_page .single article#works2 .cont5 {
  background: #DDDDDD; }
  #works_page .single article#works2 .cont5 .center {
    width: 320px;
    font-size: 85%;
    line-height: 150%;
    color: #555; }
    #works_page .single article#works2 .cont5 .center a {
      color: #0059B2;
      text-decoration: underline; }
  #works_page .single article#works2 .cont5 img {
    display: block;
    margin: 40px auto 5px; }
#works_page .single article#works2 .cont6 {
  padding-bottom: 0; }
  #works_page .single article#works2 .cont6 .center {
    border: solid 10px #CCCCCC;
    background: white;
    width: 880px;
    text-align: center;
    margin-top: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    line-height: 180%;
    color: #555; }
    #works_page .single article#works2 .cont6 .center img {
      display: block;
      margin: 0 auto 20px; }
    #works_page .single article#works2 .cont6 .center a {
      color: #0059B2;
      text-decoration: underline; }

article#works3 #works_main_img {
  background: url(img/works/works3/main_img_back.jpg) no-repeat center !important;
  background-color: #8A999F !important; }
article#works3 .cont2 h2,
article#works3 .cont3 h2 {
  text-align: center;
  border: solid 1px #6F839C;
  color: #6F839C;
  background: white;
  padding: 20px 0;
  font-size: 140%;
  line-height: 150%;
  font-weight: bold;
  margin-top: 70px; }
article#works3 h3 {
  font-weight: bold;
  color: #6F839C !important; }
article#works3 .cont1 {
  background: white; }
article#works3 .cont2 .img {
  margin: 50px auto 10px;
  text-align: center;
  width: 100%; }
article#works3 .cont3 {
  background: white; }
  article#works3 .cont3 h3 + div {
    overflow: hidden;
    zoom: 1; }
    article#works3 .cont3 h3 + div .img + p {
      float: left;
      width: 500px; }
    article#works3 .cont3 h3 + div .img {
      width: 400px;
      float: right;
      text-align: left;
      font-size: 90%; }
      article#works3 .cont3 h3 + div .img img {
        display: block;
        margin: 0 0 10px auto; }
article#works3 .cont4 {
  background: #6F839C; }
  article#works3 .cont4 .center {
    overflow: hidden;
    zoom: 1; }
    article#works3 .cont4 .center h3,
    article#works3 .cont4 .center p {
      color: white !important; }
    article#works3 .cont4 .center div {
      float: left;
      width: 690px; }
    article#works3 .cont4 .center .img {
      float: right;
      margin-top: 40px;
      font-size: 90%;
      width: 200px; }
article#works3 .cont5 .center {
  overflow: hidden;
  zoom: 1;
  padding-top: 50px; }
  article#works3 .cont5 .center h3 {
    border: solid 10px #6C829F;
    width: 130px;
    height: 100px;
    font-size: 170%;
    text-align: center;
    background: white;
    padding-top: 30px;
    font-weight: normal;
    float: left;
    margin-top: 0; }
  article#works3 .cont5 .center h3 + p {
    float: right;
    width: 740px;
    color: #6C829F; }
  article#works3 .cont5 .center .img {
    float: right;
    margin-top: 40px;
    font-size: 90%;
    width: 200px; }
article#works3 #client {
  border: solid 10px #ccc;
  background: white;
  margin: auto;
  padding: 50px 0;
  text-align: center; }
  article#works3 #client img {
    display: block;
    margin: auto;
    margin-bottom: 30px; }

article#works4 #works_main_img {
  background: url(img/works/works4/main_img_back.jpg) no-repeat center !important;
  background-color: #DADFE3 !important; }
article#works4 p span.gray {
  background: #555555;
  color: white;
  font-weight: bold;
  padding: 5px; }
article#works4 p span.red {
  background: #C3373C;
  color: white;
  font-weight: bold;
  padding: 5px; }
article#works4 h3 {
  font-weight: bold;
  color: #C04B52 !important; }
article#works4 .cont1 {
  background: white; }
  article#works4 .cont1 p {
    line-height: 200%; }
article#works4 .cont2 {
  background: #555; }
  article#works4 .cont2 .center {
    position: relative; }
  article#works4 .cont2 h3,
  article#works4 .cont2 p {
    color: white !important;
    padding-left: 230px; }
  article#works4 .cont2 h2 {
    position: absolute;
    left: 0; }
article#works4 .cont3 {
  background: white; }
  article#works4 .cont3 .center {
    overflow: hidden;
    zoom: 1; }
  article#works4 .cont3 .img_area {
    float: left;
    width: 160px;
    font-size: 80%;
    color: #555;
    text-align: center; }
    article#works4 .cont3 .img_area h2 {
      margin: 40px 0 60px; }
  article#works4 .cont3 .img_area + div {
    float: right;
    width: 730px; }
    article#works4 .cont3 .img_area + div span {
      font-size: 85%; }
article#works4 .cont4 .center {
  position: relative; }
article#works4 .cont4 h3,
article#works4 .cont4 p {
  padding-left: 230px; }
article#works4 .cont4 p {
  line-height: 200%; }
article#works4 .cont4 h2 {
  position: absolute;
  left: 0; }
article#works4 .cont5 {
  background: #555; }
  article#works4 .cont5 .center {
    position: relative; }
    article#works4 .cont5 .center h3,
    article#works4 .cont5 .center p {
      color: white !important;
      padding-left: 230px; }
    article#works4 .cont5 .center p {
      margin-bottom: 20px; }
    article#works4 .cont5 .center img {
      position: absolute;
      top: 0; }
article#works4 #client {
  border: solid 10px #ccc;
  background: white;
  margin: auto;
  padding: 50px 0;
  text-align: center;
  margin-top: 50px; }
  article#works4 #client img {
    display: block;
    margin: auto;
    margin-bottom: 30px; }

article#works5 h3 {
  font-weight: bold;
  color: #555 !important; }
article#works5 .cont1 {
  background: white;
  padding-bottom: 40px; }
  article#works5 .cont1 .center {
    background: url(img/works/works5/img1.jpg) no-repeat top right white; }
  article#works5 .cont1 p {
    line-height: 200%;
    width: 430px;
    padding-bottom: 70px; }
article#works5 .cont2 {
  background: url(img/works/works5/blue_back.jpg) repeat-x top #eee; }
  article#works5 .cont2 h3,
  article#works5 .cont2 p {
    color: white !important; }
  article#works5 .cont2 p {
    margin-bottom: 70px; }
article#works5 .cont3 {
  background: white; }
  article#works5 .cont3 .img_area {
    float: right;
    width: 417px; }
  article#works5 .cont3 .img_area + div {
    float: left;
    width: 500px; }
article#works5 .cont3 .center,
article#works5 .cont4 .center,
article#works5 .cont5 .center,
article#works5 .cont6 .center,
article#works5 .cont7 .center,
article#works5 .cont8 .center {
  overflow: hidden;
  zoom: 1; }
article#works5 .cont3 .img_area,
article#works5 .cont4 .img_area,
article#works5 .cont5 .img_area,
article#works5 .cont6 .img_area,
article#works5 .cont7 .img_area,
article#works5 .cont8 .img_area {
  padding-top: 40px; }
article#works5 .cont4 {
  background: #F0D272; }
  article#works5 .cont4 .img_area {
    float: left;
    width: 393px; }
  article#works5 .cont4 .img_area + div {
    float: right;
    width: 500px; }
article#works5 .cont5 {
  background: white; }
  article#works5 .cont5 .img_area {
    float: right;
    width: 311px; }
  article#works5 .cont5 .img_area + div {
    float: left;
    width: 600px; }
article#works5 .cont6 {
  background: #99B3FF; }
  article#works5 .cont6 .img_area {
    float: left;
    width: 343px; }
  article#works5 .cont6 .img_area + div {
    float: right;
    width: 544px; }
article#works5 .cont7 {
  background: white;
  padding: 20px 0 70px; }
  article#works5 .cont7 .img_area {
    float: right;
    width: 324px; }
  article#works5 .cont7 .img_area + div {
    float: left;
    width: 578px; }
    article#works5 .cont7 .img_area + div a {
      color: #2D6CB2;
      font-weight: bold; }
article#works5 .cont8 {
  background: #B1D94D;
  padding: 20px 0 70px; }
  article#works5 .cont8 .img_area {
    float: left;
    width: 311px; }
  article#works5 .cont8 .img_area + div {
    float: right;
    width: 572px;
    padding-top: 30px; }

article#works6 h3 {
  color: #3A87C2 !important;
  font-weight: bold; }
article#works6 #works_main_img {
  background: url(img/works/works6/main_img_back.jpg) no-repeat center !important;
  background-color: #3E88C0 !important; }
article#works6 .cont1 {
  background: white; }
article#works6 .cont2 {
  /*.img{
      width: 680px;
      margin: 40px auto;
      font-size: 80%;
      color: #555;
      line-height: 150%;
      img{
          margin-bottom: 5px;
          display: block;
      }
  }*/ }
article#works6 .cont3 {
  background: white; }
  article#works6 .cont3 .center {
    overflow: hidden;
    zoom: 1; }
  article#works6 .cont3 .ico + .center div {
    float: right;
    width: 650px; }
  article#works6 .cont3 .ico + .center .img {
    float: left;
    width: auto;
    margin-top: 40px;
    font-size: 80%;
    color: #555;
    line-height: 150%; }
article#works6 .cont4 .center {
  overflow: hidden;
  zoom: 1; }
article#works6 .cont4 .ico + .center div {
  float: left;
  width: 500px;
  margin-top: 40px; }
article#works6 .cont4 .ico + .center .img {
  float: right;
  width: auto;
  margin-top: 40px;
  font-size: 80%;
  color: #555;
  line-height: 150%; }
article#works6 .cont5 {
  background: #3A87C2; }
  article#works6 .cont5 .center {
    overflow: hidden; }
    article#works6 .cont5 .center div {
      float: right;
      width: 700px; }
      article#works6 .cont5 .center div p,
      article#works6 .cont5 .center div h3 {
        color: white !important; }
    article#works6 .cont5 .center #ezumen {
      background: white;
      text-align: center;
      padding: 20px 0;
      margin-top: 40px; }
      article#works6 .cont5 .center #ezumen img {
        float: none;
        margin: auto; }
  article#works6 .cont5 img {
    float: left;
    margin-top: 40px; }
article#works6 .cont6 {
  padding-bottom: 0 !important; }
  article#works6 .cont6 .center {
    border: solid 10px #CCCCCC;
    background: white;
    width: 880px;
    text-align: center;
    margin-top: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    line-height: 180%;
    color: #555; }
    article#works6 .cont6 .center img {
      display: block;
      margin: 0 auto 20px; }
    article#works6 .cont6 .center a {
      color: #0059B2;
      text-decoration: underline; }

article#works7 h3 {
  color: #7F7263 !important;
  font-weight: bold; }
article#works7 #works_main_img {
  background: url(img/works/works7/main_img_back.jpg) no-repeat center !important;
  background-color: #EAE0C0 !important; }
article#works7 .cont1 {
  background: white; }
article#works7 .cont3 {
  background: white; }
  article#works7 .cont3 .center {
    overflow: hidden;
    zoom: 1; }
  article#works7 .cont3 .ico + .center div {
    float: left;
    width: 380px; }
  article#works7 .cont3 .ico + .center .img {
    float: right;
    width: auto;
    margin-top: 40px; }
article#works7 .cont4 {
  background: #AA9984; }
  article#works7 .cont4 .center {
    overflow: hidden; }
    article#works7 .cont4 .center div p,
    article#works7 .cont4 .center div h3 {
      color: white !important; }
    article#works7 .cont4 .center #toretore {
      margin-top: 40px; }

/******
プロダクトからワークスへ移動したページの共通
*******/
#works_page .single.from_products {
  /* works8 */
  /* works9 */ }
  #works_page .single.from_products h1 + p {
    text-align: center;
    font-size: 100%;
    margin: 50px auto; }
  #works_page .single.from_products article {
    padding: 60px 0; }
    #works_page .single.from_products article h2.midashi {
      text-align: center;
      font-size: 200%;
      color: #555;
      line-height: 120%;
      margin-bottom: 50px; }
  #works_page .single.from_products .img {
    text-align: center; }
  #works_page .single.from_products article#gaiyo h1 + .img {
    width: 840px;
    margin: auto; }
    #works_page .single.from_products article#gaiyo h1 + .img img:first-child {
      margin-right: 35px; }
  #works_page .single.from_products article#gaiyo h3 {
    color: #333;
    font-weight: bold;
    text-align: center;
    font-size: 115%;
    line-height: 130%; }
  #works_page .single.from_products article#gaiyo h3 + p {
    width: 580px;
    margin: 0 auto 30px; }
  #works_page .single.from_products article#tokucho {
    background: white; }
    #works_page .single.from_products article#tokucho b,
    #works_page .single.from_products article#tokucho p {
      display: block;
      margin: auto;
      width: 940px; }
    #works_page .single.from_products article#tokucho b {
      font-weight: bold;
      font-size: 110%;
      margin-bottom: 10px; }
    #works_page .single.from_products article#tokucho p {
      margin-bottom: 40px; }
    #works_page .single.from_products article#tokucho .img {
      margin: 100px auto;
      text-align: center; }
    #works_page .single.from_products article#tokucho .img + p {
      font-weight: bold;
      font-size: 105%;
      color: #333; }
    #works_page .single.from_products article#tokucho .img + p + .img {
      margin-bottom: 0; }
  #works_page .single.from_products article#environment h2 {
    color: white; }
  #works_page .single.from_products article#environment table {
    text-align: left;
    margin: auto;
    background: white;
    border-spacing: 0; }
    #works_page .single.from_products article#environment table td,
    #works_page .single.from_products article#environment table th {
      padding: 10px 20px;
      color: #555;
      line-height: 170%;
      font-size: 90%; }
    #works_page .single.from_products article#environment table th {
      width: 130px; }
    #works_page .single.from_products article#environment table td {
      width: 730px; }
  #works_page .single.from_products article#environment p.r_text {
    color: white !important;
    margin-top: 30px !important;
    font-size: 77%; }
  #works_page .single.from_products #works_main_img + h2 {
    text-align: center;
    width: 100%;
    padding: 60px 0; }
  #works_page .single.from_products article#case {
    background: #DDDDDD; }
    #works_page .single.from_products article#case h2.midashi {
      text-align: center;
      font-size: 200%;
      color: #555;
      line-height: 120%;
      margin-bottom: 50px; }
    #works_page .single.from_products article#case table {
      padding: 0;
      margin: auto;
      font-size: 90%;
      color: #555;
      background: white;
      border-spacing: 0; }
      #works_page .single.from_products article#case table th,
      #works_page .single.from_products article#case table td {
        line-height: 170%;
        border-bottom: solid 1px #DDDDDD;
        border-left: solid 1px #DDDDDD;
        padding: 10px;
        color: #555;
        font-size: 85%; }
      #works_page .single.from_products article#case table th {
        text-align: center; }
    #works_page .single.from_products article#case div#border {
      width: 800px;
      margin: auto;
      background: white;
      padding: 40px 60px 10px; }
      #works_page .single.from_products article#case div#border b {
        display: block;
        font-weight: bold;
        color: #333;
        font-size: 110% !important;
        margin: 0 auto 10px !important;
        line-height: 130%; }
      #works_page .single.from_products article#case div#border p {
        margin: 0 auto 30px !important; }
  #works_page .single.from_products article#func p.center {
    margin-bottom: 10px; }
  #works_page .single.from_products article#func .center {
    overflow: hidden;
    zoom: 1;
    margin-bottom: 40px; }
    #works_page .single.from_products article#func .center div {
      float: left;
      width: 25%; }
      #works_page .single.from_products article#func .center div b {
        display: block;
        border-left: 1px white solid;
        color: white;
        font-weight: bold;
        font-size: 110%;
        padding: 10px;
        margin-bottom: 20px; }
      #works_page .single.from_products article#func .center div p {
        padding: 0 10px; }
  #works_page .single.from_products article#works8 {
    padding: 0; }
    #works_page .single.from_products article#works8 #works_main_img {
      background-color: #c4bbb2 !important;
      height: 340px; }
      #works_page .single.from_products article#works8 #works_main_img img {
        height: 100%; }
    #works_page .single.from_products article#works8 article#gaiyo p {
      text-align: left; }
    #works_page .single.from_products article#works8 article#screen {
      background: #DDDDDD; }
      #works_page .single.from_products article#works8 article#screen .img {
        margin-top: 50px; }
        #works_page .single.from_products article#works8 article#screen .img b {
          color: #555;
          text-align: left;
          display: block;
          font-weight: bold;
          margin-bottom: 20px; }
      #works_page .single.from_products article#works8 article#screen h2 + .img {
        margin-top: 0; }
    #works_page .single.from_products article#works8 article#tokucho b {
      color: #CF5D00 !important;
      margin-bottom: 20px !important; }
    #works_page .single.from_products article#works8 article#tokucho p {
      margin-bottom: 0 !important; }
    #works_page .single.from_products article#works8 article#tokucho div.center {
      overflow: hidden;
      zoom: 1;
      margin-bottom: 50px; }
      #works_page .single.from_products article#works8 article#tokucho div.center div {
        float: left;
        width: 290px;
        margin-left: 30px; }
        #works_page .single.from_products article#works8 article#tokucho div.center div img {
          display: block;
          margin: auto; }
        #works_page .single.from_products article#works8 article#tokucho div.center div b {
          margin: 30px auto 20px !important;
          text-align: center;
          width: 100% !important;
          color: #333 !important; }
        #works_page .single.from_products article#works8 article#tokucho div.center div p {
          width: 100% !important;
          line-height: 180%;
          margin-bottom: 20px !important; }
      #works_page .single.from_products article#works8 article#tokucho div.center div:first-child {
        margin-left: 0; }
    #works_page .single.from_products article#works8 article#video {
      background: #555555; }
      #works_page .single.from_products article#works8 article#video h2.midashi {
        color: white; }
      #works_page .single.from_products article#works8 article#video .video iframe {
        display: block;
        margin: auto; }
    #works_page .single.from_products article#works8 article#case div#border {
      border: solid 10px #D35D00; }
    #works_page .single.from_products article#works8 article#case h3 {
      text-align: center;
      font-weight: bold;
      font-size: 140%;
      margin-bottom: 40px;
      color: #D35D00;
      line-height: 130%; }
    #works_page .single.from_products article#works8 article#environment {
      background: #D35D00; }
      #works_page .single.from_products article#works8 article#environment td,
      #works_page .single.from_products article#works8 article#environment th {
        border-bottom: solid 1px #D35D00;
        border-left: solid 1px #D35D00; }
    #works_page .single.from_products article#works8 article#result .center {
      padding-right: 400px;
      width: 560px;
      background: url(../img/products/milkey/pic2.jpg) no-repeat;
      background-position: 640px top; }
    #works_page .single.from_products article#works8 article#result b {
      font-weight: bold;
      font-size: 140%;
      color: #CE5D00;
      line-height: 130%;
      display: block;
      margin-bottom: 10px; }
    #works_page .single.from_products article#works8 article#result p {
      margin-bottom: 40px; }
    #works_page .single.from_products article#works8 article#result h3 {
      color: #555;
      font-weight: bold;
      text-align: center;
      font-size: 150%;
      margin: 50px auto;
      line-height: 130%; }
  #works_page .single.from_products article#works9 {
    padding: 0; }
    #works_page .single.from_products article#works9 #works_main_img {
      background-color: #c0c9cf !important;
      height: 340px; }
      #works_page .single.from_products article#works9 #works_main_img img {
        height: 100%; }
    #works_page .single.from_products article#works9 article#gaiyo {
      padding-top: 0; }
      #works_page .single.from_products article#works9 article#gaiyo h3 {
        margin-top: 0;
        font-size: 130%; }
      #works_page .single.from_products article#works9 article#gaiyo p {
        width: 100%;
        text-align: center;
        line-height: 180%; }
      #works_page .single.from_products article#works9 article#gaiyo .img {
        margin: 80px auto; }
      #works_page .single.from_products article#works9 article#gaiyo b {
        font-weight: bold;
        display: block;
        margin-bottom: 20px;
        font-size: 105%;
        line-height: 130%; }
      #works_page .single.from_products article#works9 article#gaiyo b + p {
        text-align: left; }
    #works_page .single.from_products article#works9 article#tokucho {
      background: white; }
      #works_page .single.from_products article#works9 article#tokucho .center {
        padding-right: 350px;
        width: 610px;
        background: url(../img/products/pocket_office/pic2.jpg) no-repeat top right; }
      #works_page .single.from_products article#works9 article#tokucho b {
        font-weight: bold;
        display: block;
        font-size: 140%;
        color: #64A0DF;
        line-height: 130%; }
      #works_page .single.from_products article#works9 article#tokucho p {
        line-height: 180%;
        width: 100%; }
      #works_page .single.from_products article#works9 article#tokucho b + p + b + p + b {
        font-size: 110%;
        color: #333; }
    #works_page .single.from_products article#works9 article#scene .center {
      overflow: hidden;
      zoom: 1; }
      #works_page .single.from_products article#works9 article#scene .center div {
        float: left;
        width: 33.3%;
        text-align: center; }
        #works_page .single.from_products article#works9 article#scene .center div p {
          text-align: left;
          margin: 10px; }
    #works_page .single.from_products article#works9 article#screen {
      background: white; }
      #works_page .single.from_products article#works9 article#screen h2 + div {
        margin-top: 0; }
      #works_page .single.from_products article#works9 article#screen div {
        margin-top: 70px; }
        #works_page .single.from_products article#works9 article#screen div b {
          display: block;
          color: #5E9EE4;
          font-size: 140%;
          text-align: center;
          margin-bottom: 40px; }
        #works_page .single.from_products article#works9 article#screen div img {
          display: block;
          margin: auto; }
        #works_page .single.from_products article#works9 article#screen div img + p {
          font-weight: bold;
          font-size: 105%;
          margin: 20px auto 10px; }
        #works_page .single.from_products article#works9 article#screen div p {
          text-align: center; }
    #works_page .single.from_products article#works9 article#environment {
      background: #64A0DF; }
      #works_page .single.from_products article#works9 article#environment th,
      #works_page .single.from_products article#works9 article#environment td {
        border-bottom: solid 1px #64A0DF;
        border-left: solid 1px #64A0DF; }

/* =============================================
recruit
================================================ */
#recruit_page #main_img {
  background: #777; }
#recruit_page .recruit_nav {
  overflow: hidden;
  zoom: 1;
  margin: 30px auto 50px;
  line-height: 130%; }
  #recruit_page .recruit_nav li {
    float: left;
    width: 16.6%;
    background: #777;
    display: table; }
    #recruit_page .recruit_nav li a {
      vertical-align: middle;
      display: table-cell;
      height: 60px;
      text-align: center;
      font-size: 90%;
      border-left: 1px white solid;
      color: white;
      text-decoration: none; }
    #recruit_page .recruit_nav li a:hover,
    #recruit_page .recruit_nav li a.se {
      background: #333333; }
  #recruit_page .recruit_nav li:first-child a {
    border: none; }
#recruit_page h1 {
  margin-bottom: 30px; }
#recruit_page article#message #menu {
  margin-bottom: 40px; }
#recruit_page article#message #message1 .archive {
  background: #CAD0CE; }
#recruit_page article#message #message2 .archive {
  background: #C8D6D1; }
#recruit_page article#message #message3 .archive {
  background: #D4DDD5; }
#recruit_page article#message #message4 .archive {
  background: #D6D4C8; }
#recruit_page article#message #message5 .archive {
  background: #E0DDE0; }
#recruit_page article#message .archive {
  width: 100%;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }
  #recruit_page article#message .archive img {
    margin: auto; }
#recruit_page article#message .archive:hover {
  opacity: 0.6;
  filter: alpha(opacity=60); }
#recruit_page article#message .subMenu {
  background: white; }
  #recruit_page article#message .subMenu li {
    width: 940px;
    padding: 40px 20px 80px;
    margin: auto;
    line-height: 180%; }
    #recruit_page article#message .subMenu li img.face {
      display: block;
      margin: 0 auto; }
    #recruit_page article#message .subMenu li .last_q {
      margin-bottom: 100px; }
    #recruit_page article#message .subMenu li .row {
      overflow: hidden;
      zoom: 1;
      margin-top: 40px; }
      #recruit_page article#message .subMenu li .row b {
        display: block;
        float: left;
        width: 310px;
        font-weight: bold;
        color: #6B8E30; }
      #recruit_page article#message .subMenu li .row p {
        float: right;
        width: 630px; }
    #recruit_page article#message .subMenu li h3 {
      font-weight: bold !important;
      line-height: 180%;
      margin: 50px auto 100px; }
    #recruit_page article#message .subMenu li .m_3img {
      margin: 30px 0 0 40px; }
    #recruit_page article#message .subMenu li .message_box {
      position: relative;
      background: #EEEEEE;
      padding: 80px 40px 40px;
      zoom: 1; }
      #recruit_page article#message .subMenu li .message_box img {
        display: block;
        float: left; }
      #recruit_page article#message .subMenu li .message_box div {
        float: right;
        width: 600px;
        padding: 40px 0; }
        #recruit_page article#message .subMenu li .message_box div b {
          font-weight: bold;
          font-size: 110%;
          margin-bottom: 20px;
          display: block;
          color: #555; }
    #recruit_page article#message .subMenu li .message_box:after {
      content: "";
      display: block;
      clear: both; }
    #recruit_page article#message .subMenu li .message_box:before {
      content: "";
      background: url(img/recruit/message/message_ico.png) no-repeat center top;
      width: 91%;
      top: -60px;
      height: 120px;
      position: absolute; }
#recruit_page article#saiyo {
  background: #DDDDDD;
  padding: 50px 0 80px; }
  #recruit_page article#saiyo #bosyu {
    background: white;
    border: solid 1px #bbb;
    padding: 40px 0;
    margin-top: 50px;
    text-align: center;
    color: #555;
    font-size: 110%; }
    #recruit_page article#saiyo #bosyu img {
      margin: 20px auto; }
    #recruit_page article#saiyo #bosyu h2 {
      font-weight: bold;
      line-height: 180%; }
#recruit_page article#jinji #jinji_main_img {
  text-align: center;
  background: url(img/recruit/jinji/main_img_back.jpg) no-repeat center;
  background-color: #D2D2C3; }
  #recruit_page article#jinji #jinji_main_img img {
    display: block;
    margin: auto; }
#recruit_page article#jinji h2 {
  font-weight: bold;
  font-size: 140%;
  color: #555;
  margin-bottom: 30px; }
#recruit_page article#jinji .center {
  padding: 70px 0; }
#recruit_page article#jinji .caption {
  color: #777;
  font-size: 80%;
  display: block;
  margin-top: 10px; }
#recruit_page article#jinji h3.mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align: center;
  font-size: 190%;
  margin-bottom: 50px; }
#recruit_page article#jinji b {
  font-weight: bold;
  font-size: 120%;
  color: #555;
  margin-bottom: 20px;
  display: block;
  line-height: 150%; }
#recruit_page article#jinji p {
  margin-bottom: 40px; }
#recruit_page article#jinji #cont1 {
  background: white; }
  #recruit_page article#jinji #cont1 .center {
    overflow: hidden;
    zoom: 1; }
    #recruit_page article#jinji #cont1 .center div {
      float: left;
      width: 650px; }
    #recruit_page article#jinji #cont1 .center div + div {
      width: 220px;
      float: right; }
#recruit_page article#jinji #cont2 {
  background: #EEEEEE; }
  #recruit_page article#jinji #cont2 .center div {
    overflow: hidden;
    zoom: 1; }
    #recruit_page article#jinji #cont2 .center div div {
      float: right;
      width: 630px; }
      #recruit_page article#jinji #cont2 .center div div p {
        margin-bottom: 0; }
    #recruit_page article#jinji #cont2 .center div img {
      float: left; }
#recruit_page article#jinji #cont3 {
  background: #4A6190;
  color: white; }
  #recruit_page article#jinji #cont3 h3,
  #recruit_page article#jinji #cont3 b,
  #recruit_page article#jinji #cont3 p {
    color: white; }
#recruit_page article#jinji #cont4 .center div {
  overflow: hidden;
  zoom: 1; }
  #recruit_page article#jinji #cont4 .center div div {
    float: left;
    width: 650px;
    margin-bottom: 40px; }
    #recruit_page article#jinji #cont4 .center div div p {
      margin: 0; }
  #recruit_page article#jinji #cont4 .center div img {
    float: right; }
#recruit_page article#qa {
  background: white;
  padding: 50px 0 1px; }
  #recruit_page article#qa .row {
    margin-bottom: 50px; }
    #recruit_page article#qa .row b,
    #recruit_page article#qa .row p {
      padding-left: 60px;
      color: #555; }
    #recruit_page article#qa .row b {
      display: block;
      font-weight: bold;
      background: url(img/recruit/qa/q_ico.jpg) no-repeat left top;
      line-height: 26px;
      font-size: 110%;
      margin-bottom: 20px; }
    #recruit_page article#qa .row p {
      background: url(img/recruit/qa/a_ico.jpg) no-repeat left top; }
#recruit_page article#bosyu {
  background: #DDDDDD;
  color: #555; }
#recruit_page article#bosyu.new {
  padding: 90px 0;
  text-align: center; }
  #recruit_page article#bosyu.new p {
    line-height: 180%;
    margin-bottom: 50px; }
  #recruit_page article#bosyu.new a#rikunabi {
    text-decoration: none;
    color: #555; }
    #recruit_page article#bosyu.new a#rikunabi img {
      margin-bottom: 10px; }
#recruit_page article#bosyu.career {
  padding: 60px 0; }
  #recruit_page article#bosyu.career b {
    font-weight: bold;
    font-size: 110%;
    margin-bottom: 15px;
    display: block; }
  #recruit_page article#bosyu.career table {
    margin: auto;
    font-size: 90%;
    line-height: 130%;
    background: white;
    width: 100%;
    margin-bottom: 20px;
    border-spacing: 0; }
    #recruit_page article#bosyu.career table tr:first-child th,
    #recruit_page article#bosyu.career table tr:first-child td {
      background: #999999;
      color: white;
      padding: 15px 10px; }
    #recruit_page article#bosyu.career table th {
      text-align: left; }
    #recruit_page article#bosyu.career table td {
      color: #555;
      border-left: solid 1px #DDDDDD; }
    #recruit_page article#bosyu.career table th,
    #recruit_page article#bosyu.career table td {
      line-height: 180%;
      padding: 5px 10px;
      border-bottom: solid 1px #DDDDDD; }
  #recruit_page article#bosyu.career .form_btn {
    margin-bottom: 60px; }
    #recruit_page article#bosyu.career .form_btn a {
      border-radius: 30px;
      font-size: 100%;
      margin: 0 0 0 auto;
      width: 210px;
      line-height: 17px;
      background-size: auto 20px; }
  #recruit_page article#bosyu.career .recruit_inq {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 105%; }
  #recruit_page article#bosyu.career .recruit_inq + p {
    text-align: center; }
    #recruit_page article#bosyu.career .recruit_inq + p a {
      color: #3070B8; }
    #recruit_page article#bosyu.career .recruit_inq + p a:hover {
      color: #555; }
  #recruit_page article#bosyu.career p + a {
    width: 240px;
    border-radius: 30px;
    font-size: 110%; }

/* =============================================
news info
================================================ */
#news_page #main_img,
#info_page #main_img {
  background: #333; }
#news_page h3.date_page,
#info_page h3.date_page {
  font-size: 120%;
  color: #555;
  font-weight: bold;
  margin: 0 auto 15px; }
#news_page #news_all,
#info_page #news_all {
  margin: 40px auto; }
  #news_page #news_all article,
  #info_page #news_all article {
    background: url(img/share/yazirushi_g_r.png) no-repeat 97% center;
    background-color: white; }
    #news_page #news_all article a,
    #info_page #news_all article a {
      display: block;
      overflow: hidden;
      zoom: 1;
      padding: 20px;
      margin-bottom: 10px; }
      #news_page #news_all article a img,
      #info_page #news_all article a img {
        display: block;
        float: left;
        border: solid 1px #CCCCCC;
        width: 140px;
        height: auto; }
      #news_page #news_all article a div,
      #info_page #news_all article a div {
        color: #555;
        float: left;
        margin-left: 30px;
        width: 650px; }
        #news_page #news_all article a div p.date,
        #info_page #news_all article a div p.date {
          font-size: 90%;
          padding: 5px 0; }
        #news_page #news_all article a div h1,
        #info_page #news_all article a div h1 {
          font-size: 100%;
          font-weight: bold;
          text-align: left;
          margin: 0; }
#news_page #news_single,
#info_page #news_single {
  margin: 40px auto; }
  #news_page #news_single div.center:first-child,
  #info_page #news_single div.center:first-child {
    position: relative; }
    #news_page #news_single div.center:first-child .w_btn.back,
    #info_page #news_single div.center:first-child .w_btn.back {
      margin: 0;
      position: absolute;
      right: 40px;
      top: -70px; }
  #news_page #news_single article,
  #info_page #news_single article {
    background-color: white;
    padding: 50px;
    overflow: hidden;
    zoom: 1; }
    #news_page #news_single article p.date,
    #info_page #news_single article p.date {
      font-size: 90%;
      padding: 5px 0 30px; }
    #news_page #news_single article h1,
    #info_page #news_single article h1 {
      font-size: 160%;
      font-weight: normal;
      text-align: left;
      margin: 0; }
    #news_page #news_single article .cont_area,
    #info_page #news_single article .cont_area {
      overflow: hidden;
      zoom: 1; }
    #news_page #news_single article .cont_text,
    #info_page #news_single article .cont_text {
      line-height: 150%;
      color: #555; }
    #news_page #news_single article .cont_text.pic,
    #info_page #news_single article .cont_text.pic {
      float: left;
      width: 480px; }
    #news_page #news_single article .pic_area,
    #info_page #news_single article .pic_area {
      float: right;
      width: 320px; }
      #news_page #news_single article .pic_area img,
      #info_page #news_single article .pic_area img {
        width: 320px;
        height: auto;
        margin-bottom: 10px; }
#news_page .page,
#info_page .page {
  overflow: hidden;
  zoom: 1;
  height: 90px;
  width: 180px;
  margin: 50px auto; }
  #news_page .page div,
  #info_page .page div {
    float: left;
    width: 70px;
    height: 90px;
    padding: 0 10px; }
  #news_page .page a,
  #info_page .page a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    text-align: center;
    color: #555;
    background-color: white !important;
    width: 70px;
    height: 70px;
    border-radius: 70px;
    line-height: 165px;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out; }
  #news_page .page a:hover,
  #info_page .page a:hover {
    opacity: 0.6;
    filter: opacity(60); }
  #news_page .page div#old a,
  #info_page .page div#old a {
    background: url(img/share/yazirushi_g_r.png) no-repeat center; }
  #news_page .page div#new a,
  #info_page .page div#new a {
    background: url(img/share/yazirushi_g_l.png) no-repeat center; }
#news_page .archive,
#info_page .archive {
  text-align: center;
  color: #555;
  margin-bottom: 60px; }
  #news_page .archive b,
  #info_page .archive b {
    display: block;
    margin-bottom: 15px; }
  #news_page .archive li,
  #info_page .archive li {
    margin-bottom: 10px; }
  #news_page .archive a,
  #info_page .archive a {
    color: #3070B8; }
  #news_page .archive a:hover,
  #info_page .archive a:hover {
    color: #555; }

#info_page #main_img {
  background: #D77612; }
#info_page #info_title {
  font-size: 160%;
  color: #D77612;
  text-align: center; }
  #info_page #info_title img {
    display: block;
    margin: 0 auto 20px; }

/* =============================================
UGOs room
================================================ */
#ugos_room .w_btn {
  font-size: 100%;
  display: inline-block;
  margin: 0 0 20px; }
#ugos_room .w_btn.blue {
  background: #145E9B;
  color: white;
  padding-right: 20px;
  box-sizing: border-box;
  position: relative;
  margin: 0 0 20px auto;
  display: block; }
  #ugos_room .w_btn.blue::after {
    content: "";
    display: block;
    width: 20px;
    height: 100%;
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    right: 10%;
    background: url(img/share/yazirushi_g_l.png) no-repeat center; }
#ugos_room #main_img {
  background: #ddd; }
#ugos_room section h1.title {
  font-size: 220%; }
#ugos_room section h2.midashi {
  text-align: center;
  font-size: 110%;
  color: #555;
  margin: 10px auto 0; }
#ugos_room article#new_area {
  background: black;
  text-align: center;
  padding: 60px 0 50px;
  margin: 60px auto 40px; }
  #ugos_room article#new_area img {
    display: block;
    margin: auto; }
  #ugos_room article#new_area p {
    color: white;
    font-size: 95%;
    margin-top: 10px; }
  #ugos_room article#new_area .cont + .cont {
    margin-top: 60px; }
#ugos_room article#new_area + h3 {
  text-align: center;
  font-size: 110%;
  color: #555; }
#ugos_room #ugo_area {
  overflow: hidden;
  zoom: 1;
  width: 960px;
  padding: 0 20px 0 0;
  margin: 40px auto; }
  #ugos_room #ugo_area article {
    float: left;
    width: 140px;
    margin-left: 20px;
    font-size: 90%; }
    #ugos_room #ugo_area article p {
      line-height: 135%;
      margin-top: 5px;
      height: 50px; }
    #ugos_room #ugo_area article a {
      text-decoration: none; }
    #ugos_room #ugo_area article img {
      display: block;
      width: 138px;
      height: auto;
      border: solid 1px #ccc; }

.youtube-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  .youtube-video iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important; }

/* =============================================
privacy
================================================ */
#privacy_page {
  background: #eee; }
  #privacy_page #main_img {
    background: #666; }
  #privacy_page article#privacy {
    padding-bottom: 50px;
    color: #555; }
    #privacy_page article#privacy h3 {
      font-weight: bold;
      margin: 40px auto 20px;
      font-size: 110%;
      line-height: 180%; }
    #privacy_page article#privacy .in {
      margin-left: 40px; }
    #privacy_page article#privacy h4 {
      font-weight: bold;
      font-size: 100%;
      margin: 20px auto 15px;
      line-height: 180%; }
    #privacy_page article#privacy h5 {
      font-size: 95%;
      font-weight: normal;
      margin-bottom: 10px;
      line-height: 180%; }
    #privacy_page article#privacy ul {
      margin-bottom: 20px; }
      #privacy_page article#privacy ul li {
        margin-left: 50px; }
    #privacy_page article#privacy li {
      list-style: disc;
      line-height: 180%;
      font-size: 90%; }
    #privacy_page article#privacy ol li {
      list-style: decimal;
      margin-left: 20px; }
    #privacy_page article#privacy .privacy_date {
      border-bottom: solid 1px #ccc;
      margin-bottom: 70px;
      padding-bottom: 40px; }
    #privacy_page article#privacy .privacy_ico {
      display: flex;
      align-items: flex-start; }
      #privacy_page article#privacy .privacy_ico .cont {
        margin-left: 60px; }
    #privacy_page article#privacy .w_btn {
      font-size: 125%;
      max-width: 300px;
      margin: 0; }

/* =============================================
contact
================================================ */
.container#contact_page #contact,
.container#recruit_page #contact {
  padding-top: 40px;
  background: #eee; }
  .container#contact_page #contact h2,
  .container#recruit_page #contact h2 {
    text-align: center;
    color: #555;
    font-weight: bold;
    margin: 40px auto;
    font-size: 140%;
    line-height: 130%; }
    .container#contact_page #contact h2 span,
    .container#recruit_page #contact h2 span {
      font-size: 60%;
      font-weight: bold;
      margin-top: 10px;
      display: block;
      line-height: 130%; }
    .container#contact_page #contact h2 + p,
    .container#recruit_page #contact h2 + p {
      font-size: 90%;
      margin-bottom: 10px; }
      .container#contact_page #contact h2 + p + p,
      .container#recruit_page #contact h2 + p + p {
        color: #B84650;
        margin-bottom: 40px; }

#mailform #main_img {
  background: #666; }

#mailform input[type="submit"], #mailform input.autoConfirmBack, #mailform input[type="button"] {
  background: #555;
  color: white;
  padding: 15px 30px;
  font-size: 110%;
  border-radius: 5px;
  border: none; }
#mailform input[type="submit"]:hover, #mailform input.autoConfirmBack:hover, #mailform input[type="button"]:hover {
  background: #aaa; }
#mailform p {
  font-size: 90%;
  line-height: 170%;
  color: #555; }
#mailform table {
  display: block;
  width: 100%;
  margin: 40px auto;
  line-height: 150%; }
#mailform tr,
#mailform .row {
  display: block;
  overflow: hidden;
  zoom: 1;
  padding-bottom: 30px; }
#mailform tr th,
#mailform tr .name {
  display: block;
  width: 170px;
  text-align: right;
  color: #999999;
  font-size: 90%;
  float: left;
  line-height: 150%; }
#mailform .row th,
#mailform .row .name {
  display: block;
  width: 170px;
  text-align: right;
  color: #999999;
  font-size: 90%;
  float: left;
  line-height: 150%; }
#mailform tr .name,
#mailform .row .name {
  padding-top: 6px; }
#mailform tr td,
#mailform tr .cont {
  display: block;
  float: left;
  width: 730px;
  padding-left: 30px; }
#mailform .row td,
#mailform .row .cont {
  display: block;
  float: left;
  width: 730px;
  padding-left: 30px; }
#mailform tr span.red,
#mailform .row span.red {
  font-size: 80%;
  padding: 0 8px;
  color: #B84650; }
#mailform tr span.gray,
#mailform .row span.gray {
  font-size: 80%;
  padding: 0 8px;
  color: #999999; }
#mailform #seminar {
  margin-bottom: 50px;
  padding: 40px 0 30px;
  border-top: solid 1px #999;
  border-bottom: solid 1px #999; }
  #mailform #seminar b {
    display: block;
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    color: #555;
    line-height: 150%; }
  #mailform #seminar .cont {
    color: #555;
    font-size: 95%; }
    #mailform #seminar .cont input {
      margin-bottom: 10px; }

.form_text {
  width: 750px;
  margin: auto;
  padding-left: 190px;
  font-size: 90%;
  margin-bottom: 10px; }

/* =============================================
inquiry
================================================ */
#contact_page #main_img,
#entory_form #main_img,
#inquiry_page #main_img {
  background: #666; }
#contact_page #contact,
#entory_form #contact,
#inquiry_page #contact {
  background: #eee; }
  #contact_page #contact h1,
  #entory_form #contact h1,
  #inquiry_page #contact h1 {
    font-size: 180% !important;
    line-height: 130%;
    text-align: center;
    color: #555;
    font-weight: normal;
    margin-top: 20px; }
  #contact_page #contact p,
  #entory_form #contact p,
  #inquiry_page #contact p {
    font-size: 90%;
    line-height: 150%;
    color: #555; }
  #contact_page #contact h2,
  #entory_form #contact h2,
  #inquiry_page #contact h2 {
    text-align: center;
    color: #555;
    font-weight: bold;
    margin: 40px auto;
    font-size: 140%;
    line-height: 130%; }
#contact_page h3,
#entory_form h3,
#inquiry_page h3 {
  text-align: center;
  color: #333;
  font-weight: bold;
  margin: 40px auto;
  font-size: 130%;
  line-height: 130%; }
#contact_page h3 + p,
#entory_form h3 + p,
#inquiry_page h3 + p {
  text-align: center; }
#contact_page h3 + p + div,
#entory_form h3 + p + div,
#inquiry_page h3 + p + div {
  text-align: center;
  margin: 40px auto;
  width: 140px; }
#contact_page h3 + p + div a,
#entory_form h3 + p + div a,
#inquiry_page h3 + p + div a {
  text-decoration: none;
  color: #555; }
#contact_page h3 + p + div img,
#entory_form h3 + p + div img,
#inquiry_page h3 + p + div img {
  display: block;
  margin: 0 auto 10px; }
#contact_page h3 + p,
#entory_form h3 + p,
#inquiry_page h3 + p {
  text-align: center; }
  #contact_page h3 + p + div,
  #entory_form h3 + p + div,
  #inquiry_page h3 + p + div {
    text-align: center;
    margin: 40px auto;
    width: 140px; }
    #contact_page h3 + p + div a,
    #entory_form h3 + p + div a,
    #inquiry_page h3 + p + div a {
      text-decoration: none;
      color: #555; }
    #contact_page h3 + p + div img,
    #entory_form h3 + p + div img,
    #inquiry_page h3 + p + div img {
      display: block;
      margin: 0 auto 10px; }
#contact_page label,
#entory_form label,
#inquiry_page label {
  color: #555;
  font-size: 90%;
  line-height: 150%;
  margin: 5px 0;
  display: inline-block; }

#privacy_text,
#send_btn {
  background: white;
  width: 100%;
  padding: 40px 0 30px;
  text-align: center; }

#privacy_text a,
#send_btn a {
  color: #3070B8; }

#privacy_text a:hover {
  color: #555; }

#send_btn {
  padding: 0 0 40px; }
  #send_btn a:hover {
    color: #555; }

/* =============================================
footer
================================================ */
#footer {
  width: 100%;
  min-width: 980px;
  background: #eee;
  color: #555;
  text-align: center;
  padding: 50px 0;
  position: relative; }
  #footer small {
    display: block;
    position: static;
    color: white;
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 70%;
    line-height: 50px;
    text-align: center;
    z-index: 1; }
  #footer #banner {
    margin: 0 auto 60px; }
  #footer b {
    font-weight: bold; }
  #footer address {
    font-size: 90%;
    line-height: 150%;
    margin: 20px auto 40px; }
  #footer #security {
    overflow: hidden;
    zoom: 1;
    margin-bottom: 10px; }
  #footer #privacy_ico {
    text-align: center; }
    #footer #privacy_ico img {
      display: block;
      margin: 0 auto 10px; }
  #footer #norton {
    float: right;
    margin-left: 4%;
    width: 48%; }
  #footer #security_after {
    margin-bottom: 50px;
    font-size: 75%;
    text-align: center; }

#toTop {
  position: fixed;
  bottom: 70px;
  right: 20px;
  z-index: 99; }

/* =============================================
anniversary30th
================================================ */
#anniversary30th #main_img {
  background: #333; }
#anniversary30th #anniversary_cont {
  background: white;
  padding: 60px 0 80px;
  position: relative; }
  #anniversary30th #anniversary_cont:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(#fff, #eee); }
  #anniversary30th #anniversary_cont figure {
    text-align: center;
    margin: 40px auto 80px; }
  #anniversary30th #anniversary_cont .cont {
    overflow: hidden;
    position: relative;
    z-index: 2; }
    #anniversary30th #anniversary_cont .cont .text {
      float: left;
      width: 60%; }
    #anniversary30th #anniversary_cont .cont img {
      float: right; }
    #anniversary30th #anniversary_cont .cont p + p {
      text-align: right;
      margin-top: 30px; }