@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@100;300;400;700&display=swap');

/* 初期設定リセット */
*{margin: 0;padding: 0}

/* 基本設定 */
html,body {
margin: 0;
padding: 0;
width : 100%;
height: 100%;
}

body {
overflow-x: hidden;
font-weight: 500;
color: #333;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
/* フェードインアニメーション */
@keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes 'fadeIn' {0% {opacity:0;} 100% {opacity:1;}}
.fadeIn, img.fadeIn {
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}

.flex {
display: flex;
justify-content: center;
align-items: center;
}

/* ヘッダー背景画像切り替え */
.bg-slider {
width: 100%;
height: 120vh;
background: url(//wp-test.tpromote.com//wp-content/uploads/top_bg.jpg) no-repeat;
background-position:bottom center;
background-size: cover;
align-items: center;
justify-content: center;
position: relative;
padding: 30px 50px;
}

.head {
position: relative;
padding: 30px 50px 15px;
}

.header {
background: #707981;
}

a {transition: all .5s;}
a:hover {color: #3472b0;border-radius: 0.5em;}

h1, h2, h3, h4, h5, div, p {font-family: 'Noto Sans JP', sans-serif;}

ul, ol {
padding: 0;
margin: 0.5em 20px 1.5em;line-height: 1.5;
list-style-position: inside;
}

/* ヘッダーロゴ */
.brand {
position: relative;
padding: 0;
margin: 0 auto;
z-index: 10 !important;
max-width: 200px;
}

.drbrand a {
max-width: 180px;
display: block;
margin: 0 auto;
}

.brand a {
width: auto;
display: inline-block;
font-size: 2em;
letter-spacing: 0;
color: #fff;
text-decoration: none;
padding: 0px;
}

/* ヘッドコピー */

.headline {
display: flex;
justify-content: center;
align-items: center;
}

.headline h1 {
max-width: 900px;
position: relative;
display: block;
font-size: 9em;
margin: 120px auto 0 !important;
line-height: 1.2;
letter-spacing: 0;
text-align: left;
opacity: 1;
color: #fff;
}

.headline h1 span {display: block;margin-left: 1em;}

.pagetitle {padding: 2em 0 1em;}
.pagetitle h1 {
max-width: 400px;
position: relative;
display: block;
margin: 0px auto 0 !important;
opacity: 0.2;
line-height: 1;
}

.news {
width: 1000px;
background: #fff;
border: 1px solid;
position: absolute;
bottom: 2em;
left: 0;
padding: 0.5em
z-index: 10 !important;
opacity: 1;
font-weight: 300;
}

.news .fx-row {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 90%;
}

.news div div {padding: 1.5em;}
.news img {width: 80px;}

.news a {text-decoration: none;color: #333;}
.news a:hover {opacity: .5;}

.bdr {border-right: 1px solid;text-align: center;}

.more {
color: #333;
font-size: 1.5em;
text-decoration: none;
margin-top: 1em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}

.drawer_menu {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}



.news .more {font-size: 1.2em;}

/* コンテンツブロック */
section {
padding: 10vh 3em;
clear: both;
}

.contents {
position: relative;
display: block;
max-width: 860px;
padding: 5vh 3em 0;
margin: 0 auto !important;
}

.contents h3 {
font-size: 2em;
margin: 2em auto 1.5em;
position: relative;
}

.contents h3:before {
content: "";
display: block;
height: 2px;
background: #666;
position: absolute;
top: 50%;
left: -5%;
width: 32%;
}

.contents h3:after {
content: "";
display: block;
height: 2px;
background: #666;
position: absolute;
top: 50%;
right: -5%;
width: 32%;
}

.contents h4 {
font-size: 1.4em;
font-weight: 300;
margin: 1em auto;
position: relative;
background: #464c51;
padding: 0.25em;
border-radius: 2em;
color: #fff;
}
.identity {padding-bottom: 5em;}
.about {height: 350px;margin-bottom: 6em}
.service {height: 350px;}
.about .title {
position: absolute;
top: -80px;
left: 30%;
opacity: .5;
}
.service .title {
position: absolute;
top: -80px;
left: 10%;
opacity: .5;
}
.about .ec, .service .ec {
position: absolute;
top: -100px;
max-width: 450px;
z-index: -5 !important;
}
.content {z-index: 5 !important;}

.other {max-width: 100%;margin: 0 auto;}
.other div div {padding: 1em;}
.box {
border: 10px solid #98a4ae;
display: flex;
justify-content: center;
align-items: center;
padding: 2em 0;
margin: 0;
font-size: 2.2em;
color: #98a4ae;
text-decoration: none;
max-width: 100%;
}

.ss {font-family: 'Playfair Display', serif;}

.box img {display:block;}
/* コンテンツ内部 */
div {margin: 0 !important;}


.about {background: #d8dfe6;}

.service {background: #aab7c3;}

.sub-title {
font-family: 'Homemade Apple', cursive;
font-weight: normal;
font-size: 6em;
line-height: 1;
padding: 0;
margin: 0 0 0px;
color: #eee;
}

.bg-gray .sub-title {color: #555;}

p {
margin-bottom: 1em;
font-seize: 16pt;
line-height: 1.5;
font-weight: 300;
}

.cap {
margin-bottom: 1em;
font-size: 1.2em;
line-height: 1.5;
font-weight: 300;
}

hr {border:none;}

h2 {
font-weight: 700;
font-size: 2em;
margin: 0;
line-height: 1.5;
}

h3 {
font-weight: 300;
font-size: 1.6em;
margin-bottom: 1em;
line-height: 1.5;
}

h5 {
font-size: 1.1em !important;
margin: 0;
padding: 5px;
text-align: center;
}

.fixed {
position: fixed;
top: 0px;
left: 0;
z-index: 9999;
}

.img-center {
margin-right: auto !important;
margin-left: auto !important;
}

.cbox {
border: 10px solid #e4ebf2;
margin: 1.5em 0 !important;
padding: 0;
width: 100%;
border-radius: 1em;
}

.cbox p {margin-right: 1em;margin-left: 1em;}

.cheader {
position: relative;
margin-bottom: 1em !important;
padding-bottom: 0.5em;
background:  #e4ebf2;
}

.shadow {box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}

.product {padding: 0.5em 1.5em 1em;}

/*タブ切り替え全体のスタイル*/
.tabs {
padding-bottom: 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
width: 100%;
margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
width: calc(100%/3);
height: 40px;
border-bottom: 3px solid #413c32;
background-color: #d9d9d9;
line-height: 40px;
font-size: 0.8em;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #413c32;
color: #fff;
}

/* フッター */
footer {
position: relative;
padding: 2em 0 !important;
}

/* フッターロゴ */
.brand_f {
position: relative;
display: block;
font-size: 1em;
padding: 0;
margin: 0;
font-weight: normal;
letter-spacing: 0;
}

.fnavi {max-width: 1200px;margin: 0 auto !important;font-size: 13pt;letter-spacing: 0.1em;}
.fnavi a {border-top: 1px solid #fff;border-bottom: 1px solid #fff;padding: 1px 3px 3px;}
.fnavi a:hover {border-radius: 0;border-color: #999;}

.fx-col-80-xs p {
    text-indent: -5rem;
    padding-left: 5rem;
    margin-bottom: 0px;
}

@media screen and (max-width: 1040px) {
.fnavi {
  font-size: 12pt;letter-spacing: 0;}
}

.sp {display:none;}

@media screen and (max-width: 764px) {
  .fnavi {display:none;}
.sp {display:block;}
}

.brand_f img {display: block;max-width: 180px;margin: 3em auto;}
footer a {display: block;text-decoration: none;color: #333;}

.copyright {font-size: 10pt;font-weight: 300;}

.sns {margin: 5em auto 0 !important;}
.sns span {margin: 0 1em;}
.sns span img {width: 20px; height: 20px;}


.small {font-size: 80%;}
.btn {
text-decoration: none;
color: #333;
border: 1px solid;
padding: 0.5em 1em;
margin: 2em 1em;
border-radius: 3em;
display: block;
text-align: center;
line-height: 1;
font-weight: 300;
}

.btn:hover {background: #7497b9;color: #fff;border-color: #7497b9;}

.b {display: block;font-size: 120%;letter-spacing: 0.25em;margin-bottom: 1em;}

.fnavi li {list-style: none;margin-right: 1.5em !important;}
.fnavi:last-child {margin-right: 0;}


/* スマホ表示設定 */
@media screen and (max-width: 468px) {
.brand {
font-size: 0.8em;
padding: 10px;
}

.bg-slider {
max-width: 100%;
height:530px;
background-position:-150px -80px;
background-size: 200%;
padding: 10px;
}

.head {padding: 10px;}
.news {
  max-width: 100%;
  margin: 0;
  font-size: 8pt;
  bottom: 5vh
}
.news div {padding: 0.5em !important;}
.news img {width: 40px;}
.headline {margin: -160px 0 0 !important;}
.about br {display: none;}

.fx-col-80-xs p {
    text-indent: -3.35rem;
    padding-left: 3.35rem;
    margin-bottom: 0px;
}

.identity {padding: 1em 2% 4em;}
.identity br {display:none;}
.identity h2 {
  font-size: 1.3em;
  margin: 0 0 0.5em;
  padding: 0 2%;
  letter-spacing: 0.2em;
}
.identity .cap {padding: 0 2%;font-size: 90% !important;}

.contents {
padding: 5vh 1% 0;
}

#identity h2,
#about h2,
#service h2,
#company h2,
#recruit h2 {font-size: 1.7em;margin: 0.5em 0 -1.5em;}

#identity br {display:none;}
.contents h3 {margin: 1em auto 1em;padding: 0;font-size: 1.4em;}
.contents h3:before {width: 30%;left: 0%;}
.contents h3:after {width: 30%;right: 0%;}
.contents h3.long:before {width: 17%;left: 0%;}
.contents h3.long::after {width: 17%;right: 0%;}
.contents h4 {font-size: 1.1em;}
.identity .cap {font-size: 1em;}
.about {
  height: auto;
  margin-bottom: 0em;
  padding: 2em 0 3.5em;
  text-align: center !important;
}
.service {
  height: auto;
  margin-bottom: 0em;
  padding: 2em 0 2em;
  text-align: center !important;
}
.about br, .service br {display: none;}
.about .fx-txt-right {text-align: center !important;}
.identity {text-align:center;}
.identity .fx-right, .about .fx-right {float:none;}
.identity .more {display:inline-block; margin-top: 1em !important;}
.identity .more,
.about .more,
.service .more {
  font-size: 1em;
  border: 1px solid;
  padding: 0.25em 1em;
  border-radius: 1em;
}
.about .title,
.service .title {
position: absolute;
top: 80px;
left: 0;
opacity: .8;
}
.about h3,
.service h3 {
  font-size: 1.2em;
  margin: 0 auto 0.5em;
  }
.about .ec, .service .ec {
position: relative;
top: -70px;
max-width: 80%;
margin: 0 auto -60px !important;
z-index: -5 !important;
}
.other {padding: 1em}
.other div {padding: 0 !important;;}
.box {
height: 100px;
margin: 0 0 0.5em;
font-size: 1.75em;
}

.content {z-index: 5 !important;}


section {padding: 0 2%;}
.tab_content {padding: 0;}

.sub-title {font-size: 3em;}
.default {margin: 50px 0;}
.tabs {box-shadow: none;}

.tab_item {
width: calc(88%/3);
border: none;
background: #f3efe9;
border-radius: 30px;
height: 30px;
margin: 2%;
line-height: 30px;
font-size: 0.8em;
}

.sub-title {
margin: 2em 0 0;
}

.sub-title {padding-top: 1em;}
.prof {max-width: 160px;}
.fnavi {display:none;}
footer {padding: 0 0 1em !important;;margin: 0 !important;}
.brand_f img {max-width: 150px;}


td {font-size: 9pt;}

}

.contact, .policy, .tokuho {max-width: 800px;margin: 3em auto !important;}
.contact form {max-width: 800px !important;margin: 2em auto;}
.ft {
padding: 5px 1em;
background: #d8dfe6;
display: block;
margin: 3px 0;
}

.contact form input, .contact form textarea {
width: 100%;
display: block;
margin: 3px 0 1em;
}


.contact .btn {
margin: 2em auto 0;
padding: 1em;
width: 80%;
}

.history th {
display: inline-block;
height: 100px !important;
width: 100px !important;
margin: 20px 20px;
border-radius: 100%;
border: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: 100;
font-size: 1.2em;
}

.history tr:nth-child(8) th {margin: 40px 20px !important;}
.history tr:nth-child(9) th {margin: 50px 20px !important;}
.history tr:nth-child(14) th {margin: 75px 20px !important;}
.history tr:nth-child(15) th {margin: 40px 20px !important;}

.history th:after {
content:'';
display: block;
width: 1px;
height: 200%;
background: #ccc;
position: absolute;
top: 30%;
left: 50%;
z-index: -1;
}

.history tr:nth-child(17) th:after {height: 150%}
.history tr:last-child th:after {display: none;}

.history td {
font-size: 90%;
background: none;
line-height: 1.4;
}

@media screen and (max-width: 468px) {
.history th {
height: 80px !important;
width: 80px !important;
margin: 10px 10px;
font-size: 1em;
}
.history tr:nth-child(2) th {margin: 20px 10px !important;}
.history tr:nth-child(3) th {margin: 30px 10px !important;}
.history tr:nth-child(6) th {margin: 15px 10px !important;}
.history tr:nth-child(7) th {margin: 30px 10px !important;}
.history tr:nth-child(8) th {margin: 65px 10px !important;}
.history tr:nth-child(9) th {margin: 60px 10px !important;}
.history tr:nth-child(10) th {margin: 40px 10px !important;}
.history tr:nth-child(11) th {margin: 20px 10px !important;}
.history tr:nth-child(12) th {margin: 30px 10px !important;}
.history tr:nth-child(13) th {margin: 20px 10px !important;}
.history tr:nth-child(14) th {margin: 90px 10px !important;}
.history tr:nth-child(15) th {margin: 60px 10px !important;}
.history tr:nth-child(16) th {margin: 35px 10px !important;}
.history tr:nth-child(17) th {margin: 25px 10px !important;}
.history tr:nth-child(18) th {margin: 35px 10px !important;}
.history td {
font-size: 9pt;
background: none;
line-height: 1.25;
}
.history th:after {
height: 350%;
}
}

p.txt-right {
    text-align: right;
}

.contentnews {
    display: flex;
}

ul.flex.top {
    margin-bottom: 0;
}



.catlist {
  display: block;
  max-width: 1040px;
  margin: 5em auto !important;
}

.horizontal h3 {
  font-size: 1.1em;
  font-weight: 500;
  line-height: 2;
  padding-bottom: 20px;
  border-bottom: 1px solid;
}
.horizontal h3 a {color: #333;text-decoration: none;}

.horizontal h3 a span {
  margin: 0 10px;
  padding: 3px 20px;
  border: 1px solid;
}

.list h3 {
  font-size: 1em;
  font-weight: 500;
}
.list h3 a {color: #333;text-decoration: none;}

.list h3 a span {
  display: block;
  font-size: 90%;
  font-weight: 300;
}

.list img {
  box-shadow: 0px 0px 15px #ddd;
  margin-bottom: 1em;
}


.navigation {
  padding: 2em 0
}

.navigation a, .navigation span {
  display: inline-block;
  margin: 0 3px;
  width: 30px;
  height: 30px;
  border: 1px solid;
  text-align: center;
  text-decoration: none;
  color: #333;
}


.navigation span {border: none;}

.navigation a:hover {
  border-radius: 30px;
  background: #333;
  color: #fff;
}

.navigation a.prev, .navigation a.next {
  border: none;
  width: auto;
  padding: 0 15px;
}

.navigation a.prev:hover, .navigation a.next:hover {
  background: none;
  border-bottom: 2px solid;
  background: #333;
  color: #fff;
  border-radius: 30px;
}


h2.nh {
  background: none;
  text-align: center;
  color: #fff;
  padding: 15px 0;
  margin-bottom: -2em;
  font-size: 1.5em !important;
}


.nlogo {
  width: 100%;
  text-align: center;
  position: relative;
  display: inline-block;
}
.nlogo:before, .nlogo:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 38%;
  height: 10px;
  background-color: black;
}

.nlogo:before {
  left:1%;
}
.nlogo:after {
  right: 1%;
}
.nlogo img {
  display: block;
  max-width: 20%;
  margin: 0 auto;
}
.note {
  margin: 0 auto 5em;
  padding: 0 0 25px;
  max-width: 98%;
  border-bottom: 10px solid;
}

.note {
padding: 1em 0 0 !important;
margin: 0 auto 1em !important;
}

.note iframe {
  height: 200px;
  max-width:31vw !important;
  margin: 0;
  padding: 0 0.5vw !important;
}
.note ul, .note li {margin: 0 !important;padding: 0 !important;}
.note li div {display: block !important;width: 100%;}
.note .col {
  max-width: 31%;
  display: inline-block;
  font-size: 10pt;
  margin: 0 1% !important;
  padding: 10px 1% !important;
  border: 1px solid #ddd;
  max-height: 200px !important;
}
.note a {text-decoration: none;color: #333;}
.note .card-thumbnail {min-height: 120px; text-align: center;display: none;}
.note img {box-shadow: none !important;height: 80px;}
.note h3 {
  width: 100% !important;
  min-height: 3em;
}
.note p {
  width: 100% !important;
  min-height: 60px;
}
.note time {
  width: 100% !important;
  min-height: 15px;
}
.note h3 {font-size: 1.3em;}
.note figure, .note img, .note  {margin: 0;padding: 0}
.note time {display: block;text-align: right;}


.single {background: #eee;}
.single .head, .single footer {background: #fff;}
.content table {width: 100% !important;}
.content th, .content td {padding: 5px 10px;border: 1px solid #ccc;border-radius: 0px;}
.content th {width: auto;background: #fff;font-weight: 400;font-size: 10pt !important;}
.content td {font-weight: 300;background: #fff;}

.content {
  padding: 3em;
  max-width: 860px;
  background: #fff;
  margin: 0 auto !important;
  border: 10px solid #333 !impotant;
  }

#breadcrumb {
  margin: 0 0 45px !important;
  font-size: 1em;
  border-bottom: 1px solid #ddd;
  padding: 0 0 10px;
  line-height:1;
}


@media screen and (max-width: 468px) {
#breadcrumb {
  margin: 0 0 15px !important;}
  .pagetitle {padding: 10px;text-align: center;}
  .pagetitle img {max-height: 50px;}
  h2 {font-size: 1.4em;}
  .content {padding: 1em;}
  .note .col {
  max-width: 100%;
}
 figure table {width: 300px !important;margin: 0 0 0 -30px !important;}
th,  td {padding: 0 !important;width: 50px !important;;}
}