@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table.table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}

ol,
ul {
  list-style: none;
}
table.table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  font-weight: normal;
  text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
a img {
  border: 0;
}
figure {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* -------------------------------------------------------------- */

body {
  color: #333;
  font-size: small;
  font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ丸ゴ ProN W4",
    "Hiragino Maru Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
}

/* リンク設定
------------------------------------------------------------*/
a {
  color: #575854;
  text-decoration: none;
}
a:hover {
  color: #fff;
}
a:active,
a:focus {
  outline: 0;
  color: #575854;
}

/* 全体
------------------------------------------------------------*/

.inner {
  margin: 0 auto;
  width: 100%;
}

/*************
/* ヘッダー
*************/
#header {
  width: 960px;
  margin: 0 auto;
}

#header_topNews {
  width: 960px;
  height: 230px;
  margin: 0 auto;
}

#header_topNews-2 {
  width: 960px;
  height: 300px;
  margin: 0 auto;
}

.logo {
  height: 150px;
  width: 180px;
  position: absolute;
  bottom: 0px;
  margin: 0 auto;
}

/*Jnavi*/
.jnavi {
  z-index: 2;
  position: absolute;
  width: auto;
  height: 40px;
  margin: 0;
  top: 0;
  right: 0;
}

/*言語*/
.lang {
  z-index: 2;
  vertical-align: middle;
  position: absolute;
  width: auto;
  height: 50px;
  right: 245px;
  font-size: 10px;
}
.lang a {
  color: #000;
}

.header-dx {
  display: inline-block;
  padding: 4px 8px;
  background: #5d5151;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 42px;
  right: 0;
}
.header-dx:hover,
.header-dx:focus {
  color: #fff;
}

/* コンセプト
------------------------------------------------------------*/

#concept {
  clear: both;
  position: relative;
  width: 900px;
  padding: 0px;
  margin: 20px 0px 50px;
}

#concept ul:after {
  content: ".";
  display: block;
  visibility: hidden;
  line-height: 0;
  clear: both;
}

#concept li {
  width: auto;
  height: auto;
  margin: 10px;
  float: left;
}
/* コンポーネント
------------------------------------------------------------*/
.c-text1 {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.5;
}
.c-text-justify {
  text-align: justify;
}

.c-text1--center {
  text-align: center;
}
.c-text1--large {
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.5;
  font-weight: bold;
}

.c-button1 {
  background-color: #000;
  font-size: 20px;
  text-align: center;
  padding: 8px 24px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
}
/* Swiper
------------------------------------------------------------*/
.top-slide-header {
  background-color: #a08a72;
  text-align: center;
  margin-bottom: 35px;
  padding: 8px 0;
  margin-top:-60px;
  /* color: #000; */
}
.top-header-link {
  color: #fff;
}
.top-header-link:hover {
  color: #fff;
}
.top-slide-text {
  font-size: 24px;
  font-weight: 600;
}
/* ページアイテム
------------------------------------------------------------*/
.page-mv {
  text-align: center;
}
.page-mv-text {
  /* background-color: pink; */
  max-width: 600px;
  margin: 0 auto;
}
.page-mv-text--top {
  margin-top: 40px;
}

/* ページアイテム - BUSYOU
------------------------------------------------------------*/
.page-mv--square {
  padding: 40px 0;
}
.page-mv-text--large {
  font-size: 24px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px;
}
/* 最上部 */
.page-contents--top {
  width: 100%;
  /* background-color: pink; */
  text-align: center;
  padding: 40px 0 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 最下部 */
.page-border-dotted {
  border-top: dotted #000;
}

.page-contents--bottom {
  /* border-top: dotted #000; */
  width: 100%;
  /* background-color: pink; */
  text-align: center;
  padding: 40px 0 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-busyou--team {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 20px;
  margin-bottom: 30px;
}

/* ページアイテム - デザイナー
------------------------------------------------------------*/
.page-designer-feature-image {
  margin-bottom: 40px;
}

.designer-header {
  text-align: center;
  color: #000;
  margin-bottom: 35px;
  padding: 8px 0;
}
/* 6この四角 */
.page-designer-item {
  background-color: #000;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-designer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}
.page-designer-item {
  width: calc(29% - 20px);
}
.page-designer-item-title {
  border-bottom: solid 1px #fff;
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.page-designer-history {
  position: relative;
  /* border: solid 1px red; */
  background-image: url("../image/page/designer/designer-history-border.svg");
  background-size: 100% auto;
  background-position: 20%;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
}

.page-designer-history--text {
  position: absolute;
  top: 80px;
  left: 0;
}
.history-list {
  margin: 30px 0;
}
.history-item {
  display: flex;
  margin-bottom: 15px;
}
.history-year {
  margin-right: 30px;
}
.designer-name {
  width: 417px;
}

/* レイアウト
------------------------------------------------------------*/
.l-circle {
  border-radius: 50%;
}

.l-flex {
  display: flex;
  width: 100%;
  position: relative;
  justify-content: start;
}
.l-flex--column {
  padding: 20px 0 150px 0;

  flex-direction: column;
  align-items: center;
}

.l-flex--wrap {
  flex-wrap: wrap;
}
.l-flex--mini {
  /* max-width: 550px; */
  gap: 45px;
  margin: 0 auto;
  justify-content: center;
  /* display: block; */
}

.l-flex--btn_top {
  position: absolute;
  right: 0;
  bottom: 80px;
}

.l-flex--image {
  position: relative;
}
.l-flex--image--cicrle {
  border-radius: 50%;
}
.l-flex--imagetext {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.l-flex--chap {
  padding: 20px 0 150px 0;
  align-items: flex-start;
}
.l-flex--title {
  font-size: 20px;
}
.l-flex--mb40 {
  margin-bottom: 40px;
}
.l-flex--text {
  /* background-color: pink; */
  max-width: 380px;
  margin-left: 30px;
}
.l-flex--text--full {
  width: 100%;
}

/* 円ボタン
------------------------------------------------------------*/
.c-circle-text--mini {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.c-circle-text--large {
  font-weight: bold;
  font-size: 18px;
  color: #fff;
}
.c-circle-text--en {
  font-size: 12px;
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
  color: #fff;
}
.c-circle-text--en--large {
  font-size: 16px;
}

#brand_p {
  clear: both;
  position: relative;
  width: 900px;
  padding: 0px;
  margin: 20px 0px 50px;
}

#brand_p li {
  width: auto;
  height: auto;
  margin: 10px;
  float: left;
}

.midashi {
  width: 900px; /*メイン部分の横幅の指定*/
  float: left;
  margin: 50px 0 10px 0;
  font-size: 14px;
  font-weight: 500;
}

.midashi2 {
  width: 900px; /*メイン部分の横幅の指定*/
  text-align: center;
  margin: 0px auto; /*上下 左右*/
  font-size: 14px;
  font-weight: 500;
}

.midashi3 {
  width: 900px; /*メイン部分の横幅の指定*/
  text-align: center;
  margin: 0px auto; /*上下 左右*/
  font-size: 12px;
}

.midashi4 {
  width: 900px; /*メイン部分の横幅の指定*/
  text-align: left;
  margin: 0px auto; /*上下 左右*/
  font-size: 12px;
}

.midashi5 {
  width: 420px; /*メイン部分の横幅の指定*/
  float: left;
  margin: 10px auto;
  font-size: 18px;
  font-weight: bold;
}

.midashi6 {
  width: 560px; /*メイン部分の横幅の指定*/
  margin: 50px 60px 200px 60px;
}

.chapter {
  cahpter: ".";
  display: block;
  border-top: dotted #000;
  border-width: 2px;
  width: 900px;
  float: left;
  margin: 20px 0 10px 0;
}

.chapter2 {
  cahpter: ".";
  display: block;
  border-top: dotted #000;
  border-width: 2px;
  width: 860px;
  float: left;
  margin: 20px 20px;
  font-size: 12px;
}

.chapter3 {
  cahpter: ".";
  display: block;
  border-top: dotted #000;
  border-width: 2px;
  width: 900px;
  float: left;
  margin: 20px 0 10px 0;
}

.chapterleft {
  cahpter: ".";
  display: block;
  border-left: dotted #000;
  border-width: 2px;
  width: 900px;
  float: left;
  margin: 20px 0 10px 0;
}

.btn_top {
  text-align: right;
  cursor: pointer;
  font-weight: bold;
}

.chap-box {
  width: 420px;
  margin: 20px 10px 150px 10px;
  float: left;
  font-size: 12px;
}

.chap-box2 {
  width: 210px;
  margin: 20px 10px;
  float: left;
  font-size: 12px;
}

.chap-box3 {
  width: 210px;
  margin: 20px 70px;
  padding: 30px;
  float: left;
  font-size: 12px;
  border-style: solid;
  border-width: 1px;
}

.chap-box4 {
  width: 860px;
  margin: 10px;
  padding: 20px;
  text-align: left;
  font-size: 12px;
}

.chap-box4-1 {
  width: 860px;
  margin: 10px;
  padding: 20px;
  text-align: left;
  font-size: 12px;
}
.chap-box4-1 span {
  color: #ff0000;
}

.chap-box5 {
  text-align: right;
  font-size: 12px;
}

.chap-box6 {
  width: 340px;
  margin: 20px 10px 50px 10px;
  float: right;
  font-size: 12px;
}

.chap-box7 {
  width: 250px;
  margin: 20px 10px;
  float: left;
  font-size: 12px;
}

.chap-box7- {
  width: 210px;
  margin: 20px 10px;
  float: left;
  font-size: 12px;
}

.chap-box8 {
  width: 420px;
  margin: 20px 10px 50px 10px;
  float: left;
  text-align: center;
}

.chap-box9 {
  width: 440px;
  margin: 20px 10px 50px 10px;
  float: right;
  font-size: 12px;
}

.chap-box9- {
  width: 440px;
  margin: 20px 10px 100px 10px;
  float: right;
  font-size: 12px;
}

.chap-box10 {
  width: 900px;
  float: right;
  font-size: 12px;
}

.chap-midashi {
  font-size: 14px;
  font-weight: bold;
}

/* メニュー
------------------------------------------------------------*/

nav#mainNav {
  z-index: 0;
  width: 960px;
  height: 150px;
  overflow: visible;
  position: relative;
}

nav#mainNav li {
  display: block;
  float: left;
  margin: 90px 0 0 0;
}

nav#mainNav li.current {
  width: 180px;
  height: 150px;
  margin: 0;
}

nav div.panel {
  display: block !important;
  float: left;
}

a#menu {
  display: none;
}

nav#mainNav li.active a,
nav#mainNav li a:hover {
  color: #000000;
  background: #eee;
  display: block;
}

.contents {
  width: 960px;
  height: auto;
  margin: 0 auto;
}

.midashi {
  width: 890px; /*メイン部分の横幅の指定*/
  display: inline-block;
  margin: 0 auto;
}

.midashi_cap1 {
  display: inline;
  font-size: 120%;
  font-weight: bold;
}

.midashi_cap2 {
  display: inline;
  font-size: 100%;
}

.midashi_cap3 {
  float: right;
  display: inline;
  font-size: 80%;
  padding: 10px 0 0 0;
}

.main {
  height: auto;
  width: 900px;
  margin: 0 auto;
}

/* --- top画像 --- */
.top {
  position: relative;
  width: 900px;
  margin: 0 auto;
  padding: 30px 0;
}

/* --- イメージボックス --- */

div.imagebox {
  float: left;
  width: 430px;
  height: auto;
  float: left; /* 左に配置 */
  margin: 10px; /* 周囲の余白 */
}
p.image,
p.caption1,
p.caption2,
p.caption4 {
  text-align: center; /* 3.中央寄せ */
  margin: 5px; /* 4.余白・間隔 */
}
p.caption1 {
  font-size: 120%; /* 5.文字サイズ */
  font-weight: bold; /* 文字太さ*/
  color: #000; /* 6.文字色 */
}
p.caption2 {
  font-size: 70%; /* 5.文字サイズ */
  color: #000; /* 6.文字色 */
}
p.caption3 {
  text-align: left; /* 3.左寄せ */
  font-size: 80%; /* 5.文字サイズ */
  color: #000; /* 6.文字色 */
  margin: 10px 40px 15px;
  border-bottom: 1px dashed #000;
  padding-bottom: 15px;
}
p.caption4 {
  font-size: 80%; /* 5.文字サイズ */
  color: #000; /* 6.文字色 */
  margin: 15px;
}

p.caption5 {
  font-size: 100%; /* 5.文字サイズ */
  color: #000; /* 6.文字色 */
  font-weight: bold; /* 文字太さ*/
  text-align: right;
  margin: 15px;
}

/* --- ダイアモンド --- */
.dia {
  clear: both;
  position: relative;
  display: block;
  width: 900px;
  height: auto;
  margin: 30px 0;
}

.diabox1 {
  background-image: url(../image/dia_back.png);
  position: relative;
  /* 画像と同じサイズ */
  width: 450px;
  height: 450px;
  float: left;
  margin: 0;
  padding: 0;
}

.dia_catch {
  position: absolute;
  width: 150px;
  top: 55px;
  left: 145px;
  z-index: 1;
  margin: 0;
  padding: 5px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
}

.diabox1 img {
  z-index: 0;
  margin: 0;
  padding: 0;
}

.diabox1 img:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.img_comment {
  position: absolute;
  width: 280px;
  bottom: 90px;
  left: 80px;
  z-index: 2;
  margin: 0;
  padding: 5px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 90%;
}

.img_cap {
  position: absolute;
  width: 280px;
  top: 105px;
  left: 80px;
  z-index: 1;
  margin: 0;
  padding: 5px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
}

/* --- Jnaviトップ --- */

.jnavi-top-menu {
  width: 300px;
  margin: 0;
  padding: 0;
  float: left;
}

#jnavi-top {
  clear: both;
  position: relative;
  width: 600px;
  height: 77.5px;
  padding: 0px;
  margin: 0px auto;
  cursor: pointer;
}

#jnavi-top ul:after {
  content: ".";
  display: block;
  visibility: hidden;
  line-height: 0;
  clear: both;
}

#jnavi-top li {
  width: 150px;
  height: auto;
  margin: 0 auto;
  float: left;
}

.pro_box2 {
  display: block;
  width: 150px;
  margin: 0;
  padding: 0;
}

/* --- プロセス --- */

#process {
  clear: both;
  position: relative;
  width: 900px;
  padding: 0px;
  margin: 30px auto;
  cursor: pointer;
}

#process ul:after {
  content: ".";
  display: block;
  visibility: hidden;
  line-height: 0;
  clear: both;
}

#process li {
  width: 150px;
  height: auto;
  margin: 0 auto;
  float: left;
}

.pro_box {
  position: relative;
  display: block;
  width: 150px;
  height: 120px;
  float: left;
  margin: 0;
  padding: 0;
}

.pro_catch1 {
  position: absolute;
  width: 100px;
  top: 45px;
  left: 25px;
  z-index: 1;
  margin: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.pro_catch2 {
  position: absolute;
  width: 100px;
  top: 65px;
  left: 25px;
  z-index: 1;
  margin: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 70%;
  text-align: center;
  color: #fff;
}
.pro_catch3 {
  position: absolute;
  width: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  margin: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 70%;
}

/* --- 問い合わせ --- */

.contact {
  overflow: hidden;
  width: 880px;
  height: 800px;
  margin: 10px;
}

.contact_box {
  float: left;
  border-style: dotted;
  border-width: 2px;
  width: 380px;
  height: 280px;
  padding: 5px;
  margin: 20px;
  text-align: center;
  font-size: 12px;
}

.map {
  float: center;
  text-align: center;
  display: block;
  margin: 0px auto;
}

/* --- 新着情報エリア --- */
div.update {
  clear: left;
  width: 800px; /* 新着情報エリアの幅 */
  height: auto;
  font-size: 80%;
  margin: 0 auto;
}

/* --- 見出し --- */
div.update h3 {
  margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
  font-size: 100%;
}

/* --- 新着リスト --- */
div.update dl {
  width: 100%; /* 新着リストの幅 */
  height: 200px; /* 新着リストの高さ */
  overflow: auto;
  margin: 0;
  background-color: #f9f9f9; /* 新着リストの背景色 */
  border-top: 1px #c0c0c0 dotted; /* 新着リストの上境界線 */
  border-bottom: 1px #c0c0c0 dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
div.update dt {
  width: 6.7em; /* 日付エリアの幅 */
  float: left;
  padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
  line-height: 120%;
}

/* --- 本文エリア --- */
div.update dd {
  margin: 0;
  padding: 7px 3px 6px 6.6em; /* 本文エリアのパディング（上右下左） */
  border-bottom: 1px #c0c0c0 dotted; /* 本文エリアの下境界線 */
  line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearFix {
  min-height: 1px;
}

/* グリッド全体 */
.gridWrapper {
  width: 960px;
  margin: 0 0 0 -10px;
}

#gallery article {
  padding: 10px 0 10px 10px;
}

/* グリッド */
.grid {
  float: left;
  width: 220px;
  margin-left: 20px;
}

#subpage .grid {
  width: auto;
}

#gallery .grid {
  width: auto;
  margin: 10px 0 2px 10px;
}

/*下部のフッター部分の設定*/
#footer {
  clear: both;
  overflow: hidden;
  padding: 10px 10px 20px 10px;
  background: #000000;
}

* html #footer {
  height: 1%;
}

#footer .grid {
  padding: 10px 0 5px;
  margin: 0;
  background: transparent;
}

#footer #info .logo,
#footer #info .info {
  float: none;
}

#footer #info .info {
  clear: both;
  padding: 10px 0 0 15px;
  text-align: left;
}

#footer .logo2 {
  width: 100px;
  margin: 0 auto;
}

#footer .info .tel,
#footer .info .tel span,
#footer #info .open {
  font-size: 11px;
  color: #ffffff;
}

ul.footnav {
  float: right;
  width: 550px;
  padding-top: 20px;
}

ul.footnav li {
  float: left;
  margin-bottom: 10px;
  padding: 0 7px 0 8px;
  font-size: 9px;
}

#footer a {
  color: #ffffff;
}
#footer a:hover {
  color: #888;
}

address {
  clear: both;
  padding: 5px;
  text-align: center;
  font-style: normal;
  font-size: 10px;
  color: #333;
}

/* recruit.html システムエンジニア欄 */
[id="recruit9"] .chap-box p {
  margin-bottom: 1em;
}
[id="recruit9"] .chap-box3 {
  box-sizing: border-box;
  width: 272px;
  height: 344px;
  padding-top: 104px;
  position: relative;
  text-align: center;
}
[id="recruit9"] .chap-box3 .btn {
  width: 120px;
  height: 32px;
  margin: auto;
  position: absolute;
  inset: 0 0 0 0;
}
[id="recruit9"] .chap-box ul {
  margin: 0;
  padding-left: 0.5em;
}

.btn {
  display: inline-block;
  padding: 1rem;
  border-radius: 4px;
  font-size: 0.75rem;
  text-align: center;
  line-height: 1rem;
  vertical-align: bottom;
  transition: box-shadow 0.25s ease;
}
.btn:hover,
.btn:focus {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.btn-black {
  background-color: black;
  color: white;
}
.btn-black:hover,
.btn-black:focus {
  color: white;
}