@charset "UTF-8";

/* base style
=====================================================================*/
html, body, div, span, a, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input, textarea {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 22px;
	width: 100%;
	letter-spacing: 0.08em;
	color: #231815;
	font-family: "Noto Serif JP", serif;
	line-height: 22px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	text-align: justify;
	font-weight:500;
  font-feature-settings: "palt";
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow:visible!important;
  min-height:none!important;
  position:inherit!important;
}

body, html{
    height: 100%;
    margin: 0;
    overflow:visible!important;
}

body.fixed{
  overflow: hidden;
}

main{
  width: 100%;
}

img {
  width: auto;
  height: auto;
  vertical-align: bottom;
  pointer-events: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

main {
  width: 100%
}

p {
  letter-spacing: 0.08em;
}

i {
  letter-spacing: 0.08em;
  width:1em;
}

dl,
dt,
dd {
  margin: 0;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

@media screen and (max-width: 1199px) {
  html, body, div, span, a, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  abbr, address, cite, code,
  del, dfn, em, img, ins, kbd, q, samp,
  small, strong, sub, sup, var,
  b, i,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video, input, textarea {
    font-size: 15px;
  }
}

.container-XL{
	width: 95%;
	max-width: 1600px;
}

.container-L{
	width: 90%;
	max-width: 1200px;
}

.container-M{
	width: 85%;
	max-width: 1000px;
}

.container-S{
	width: 80%;
	max-width: 900px;
}

@media screen and (max-width: 1439px) {
  .container-XL{
  	width: 95%;
  	max-width: 1600px;
  }

  .container-M{
  	width: 85%;
  	max-width: 920px;
  }

  .container-S{
  	width: 80%;
  	max-width: 800px;
  }
}

@media screen and (max-width: 1199px) {
  .container-XL{
    width: 95%;
    max-width: 1600px;
  }

  .container-L{
    width: 85%;
    max-width: 900px;
  }

  .container-M{
    width: 85%;
    max-width: 900px;
  }

  .container-S{
    width: 80%;
    max-width: 700px;
  }
}

@media screen and (max-width: 1023px) {
  .container-L{
    width: 90%;
    max-width: 900px;
  }

  .container-M{
    width: 90%;
    max-width: 900px;
  }
}

@media screen and (max-width: 743px) {
  .container-XL{
    width: 95%;
    max-width: 1600px;
  }

  .container-L{
    width: 95%;
    max-width: 900px;
  }

  .container-M{
    width: 95%;
    max-width: 900px;
  }

  .container-S{
    width: 85%;
    max-width: 600px;
  }
}

/* text responsive
=====================================================================*/
.sp320_only,
.sp_only,
.tb_only,
.pc_none {
  display: none !important;
}

@media screen and (max-width: 1024px) {
  .tb_only{
    display: inline-block !important;
  }
}

@media screen and (max-width: 768px) {
  .pc_only,
  .pc_none {
    display: none !important;
  }
}

@media screen and (max-width: 743px) {
  .sp_only {
    display: inline-block !important;
  }

  .pc_none {
    display: inline-block !important;
  }
  .sp_none{
    display: none;
  }
}

@media screen and (max-width: 320px) {
  .sp320_only{
    display: inline-block !important;
  }
  .sp320_none{
    display:none;
  }
}

/* スクロールフェードイン
=====================================================================*/
.fade-in {
  opacity: 0;
  transition: 1s cubic-bezier(.4, 0, .2, 1);
  transform: translate3d(0, 20px, 0);
  transition-property:transform, opacity;
}

.fade-in.effect-scroll {
  opacity: 1;
  transform: translate3d(0, 0, 0)
}


/* 見出し設定
=====================================================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin: 0;
  letter-spacing: 0.08em;
  font-weight: bold;
  line-height: 1.6;
}

/* link, btn
=====================================================================*/
a {
  text-decoration: none;
  color: #000;
}


/* SVG ==============================================================*/
.svg-wrapper{
  position: relative;
  width: 100%;
  height:330px;/*レスポンシブ確認*/
  z-index:0;
}

.svg-wrapper svg{
  width: 106%;
  height:100%;
  position: absolute;
  top: 0;
  left: -3%;
}

@media screen and (max-width: 1439px) {
  .svg-wrapper{
    height:270px;/*レスポンシブ確認*/
  }
}

@media screen and (max-width: 1199px) {
  .svg-wrapper{
    height:200px;/*レスポンシブ確認*/
  }
}

@media screen and (max-width: 1023px) {
  .svg-wrapper{
    height:180px;/*レスポンシブ確認*/
    width: 130%;
    left: -15%;
  }
}

@media screen and (max-width: 743px) {
  .svg-wrapper{
    height:100px;/*レスポンシブ確認*/
    width: 130%;
    left: -15%;
  }
}


/* SVG(TOPフッター) ====================================================*/
.svg-wrapper.svg-bottom{
  height:700px;/*レスポンシブ確認*/
  margin-top:100px;
}

@media screen and (max-width: 1439px) {
  .svg-wrapper.svg-bottom{
    height:600px;/*レスポンシブ確認*/
  }
}

@media screen and (max-width: 1199px) {
  .svg-wrapper.svg-bottom{
    height:500px;/*レスポンシブ確認*/
  }
}

@media screen and (max-width: 1023px) {
  .svg-wrapper.svg-bottom{
    height:400px;/*レスポンシブ確認*/
    width: 106%;
    left: -3%;
  }
}

@media screen and (max-width: 743px) {
  .svg-wrapper.svg-bottom{
    height:200px;/*レスポンシブ確認*/
    width: 106%;
    left: -3%;
  }
}


/* ページトップ ========================================================*/
.page-ttl{

}

.page-ttl .svg-wrapper{
}

.page-ttl .svg-top{
  height:50px;
}

.page-ttl .pagettl-wrap{
  position:relative;
  margin-top:-280px;
  width:85%;
  max-width:1100px;
}

@media screen and (max-width: 1199px) {
  .page-ttl .pagettl-wrap{
    width:90%;
  }
}

@media screen and (max-width: 1023px) {
  .page-ttl .pagettl-wrap{
    width:90%;
  }

  .page-ttl .svg-top{
    height:60px;
  }
}

@media screen and (max-width: 743px) {
  .page-ttl .svg-top{
    height:70px;
  }
}

/* タイトルテキスト ======================================================*/
.pagettl-box{
  padding-top:130px;
  position:relative;
  z-index:20;
}

.pagettl-box h1{
  font-size:38px;
}

.pagettl-box span{
  font-weight:600;
  font-size:18px;
  letter-spacing: 2px;
}

@media screen and (max-width: 1199px) {
  .pagettl-box{
    padding-top:180px;
  }

  .pagettl-box h1{
    font-size:30px;
    margin-bottom:5px;
  }

  .pagettl-box span{
    font-weight:600;
    font-size:17px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 743px) {
  .pagettl-box{
    padding-top:220px;
  }

  .pagettl-box h1{
    font-size:25px;
    margin-bottom:3px;
    letter-spacing: 1px;
    position:relative;
  }

  .pagettl-box h1::after{
    -webkit-text-stroke: 5px #FFF;
    text-stroke: 5px #FFF;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
  }

  #company     .pagettl-box h1::after{content:'Our Company';}
  #service     .pagettl-box h1::after{content:'Our Service';}
  #policy      .pagettl-box h1::after{content:'Privacy Policy';}
  #signage     .pagettl-box h1::after{content:'Digital Signage';}
  #programming .pagettl-box h1::after{content:'ProgLab';}
  #recruit     .pagettl-box h1::after{content:'Recruit';}

  .pagettl-box span{
    font-weight:600;
    font-size:15px;
    letter-spacing: 1px;
    position:relative;
  }

  .pagettl-box span::after{
    -webkit-text-stroke: 5px #FFF;
    text-stroke: 5px #FFF;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
  }

  #programming .pagettl-box span::after{content:'ロボットプログラミング事業';}
}


/* タイトル下テキスト ====================================================*/
.pagettl-box .pagettl-txt{
  font-weight:600;
  font-size:26px;
  letter-spacing:2px;
  line-height:40px;
  margin-top:25px;
}

@media screen and (max-width: 743px) {
  .pagettl-box .pagettl-txt{
    font-size:18px;
    letter-spacing:2px;
    line-height:33px;
    margin-top:20px;
  }
}


/* イラスト ============================================================*/
.page-ttl .illust{
  width:50%;
  max-width:350px;
  position:absolute;
  top:0;
  right:0;
  z-index:0;
}

@media screen and (max-width: 1199px) {
  .page-ttl .illust{
    width:50%;
    max-width:300px;
  }
}

/* ページ内ナビ ========================================================*/
.page-ttl ul{
  margin-top:40px;
}

.page-ttl ul li{
  display:inline-block;
  width:auto;
  margin-right:10px;
}

.page-ttl ul li a{
  font-size:14px;
  font-weight:600;
}

.page-ttl ul li a i{
  margin-right:3px;
  color:#B3A678;
}

@media screen and (max-width: 743px) {
  .page-ttl ul{
    margin-top:20px;
  }

  .page-ttl ul li{
    display:block;
    width:auto;
    margin-right:0px;
  }

  .page-ttl ul li a{
    font-size:12px;
    font-weight:600;
  }

  .page-ttl ul li a i{
    margin-right:3px;
    font-size:12px;
  }
}


/* 見出しタイトル(左バー) ===============================================*/
.left-bar-ttl{
  font-size:23px;
  border-left:solid 15px #000;
  line-height:32px;
  padding-left:10px;
  letter-spacing: 2px;
}

#policy  .left-bar-ttl{border-left:solid 15px #B3A678;}
#company .left-bar-ttl{border-left:solid 15px #00745A;}
#signage .left-bar-ttl{border-left:solid 15px #BCA83D;}
#programming .left-bar-ttl{border-left:solid 15px #E64437;}
#recruit .left-bar-ttl{border-left:solid 15px #DC6458;}
#facilities .left-bar-ttl{border-left:solid 15px #C95862;}

@media screen and (max-width: 743px) {
  .left-bar-ttl{
    font-size:18px;
    border-left:solid 12px #000;
    line-height:25px;
    padding-left:10px;
    letter-spacing: 1px;
  }

  #policy  .left-bar-ttl{border-left:solid 12px #B3A678;}
  #company .left-bar-ttl{border-left:solid 12px #00745A;}
  #signage .left-bar-ttl{border-left:solid 12px #BCA83D;}
  #programming .left-bar-ttl{border-left:solid 15px #E64437;}
  #recruit .left-bar-ttl{border-left:solid 15px #DC6458;}
  #facilities .left-bar-ttl{border-left:solid 15px #C95862;}
}

/* 見出しタイトル(角丸バー) =============================================*/
.round-bar-ttl{
  background-color:gray;
  padding:6px 25px;
  font-size:17px;
  border-radius: 100px;
  letter-spacing: 2px;
  margin:30px 0;
}

#policy .round-bar-ttl{background-color:#D8D1BA;}

@media screen and (max-width: 743px) {
  .round-bar-ttl{
    background-color:gray;
    padding: 6px 12px;
    font-size:15px;
    border-radius: 3px;
    letter-spacing: 1px;
    margin:30px 0;
  }
}

/* 見出しタイトル(左丸) =================================================*/
.dot-ttl{
  position:relative;
  padding-left:1.5em;
  font-size:20px;
}

.dot-ttl::after{
  content:'';
  position:absolute;
  top:0.3em;
  left:0;
  background-color:#000;
  border-radius:50px;
  height:1em;
  width:1em;
}

@media screen and (max-width: 1023px) {
  .dot-ttl{
    font-size:18px;
  }
}

@media screen and (max-width: 743px) {
  .dot-ttl{
    font-size:17px;
    padding-left:1.3em;
  }

  .dot-ttl::after{
    top:0.35em;
    height:0.9em;
    width:0.9em;
  }
}

#company .dot-ttl::after{background-color:#9D2957;}
#programming .dot-ttl::after{background-color:#FABF1A;}
#signage .dot-ttl::after{background-color:#BCA83D;}




/* スクロールバー =======================================================*/
 /* バーの横幅分のpaddingずれ調整用 */
.scrollbar{
  scrollbar-gutter: stable both-edges; /* Chrom・Edge */
}

_::-webkit-full-page-media, _:future, :root .scrollbar{
  border-left:solid transparent 20px!important; /* Safari */
}

 /* スマホ・タッチデバイス対応 */
.scrollbar.touchdevice{
  border-left:none!important;
}

_::-webkit-full-page-media, _:future, :root .scrollbar.touchdevice{
  border-left:none!important;
}

/* スクロールバー全体 */
.scrollbar::-webkit-scrollbar {
  width: 20px; /* バーの幅 */
  background: rgba(255,255,255, 0);
}

/* スクロールバー背景 */
.scrollbar::-webkit-scrollbar-track {
  background: rgba(255,255,255, 0);
}

/* スクロールバーつまみ */
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 15px; /* バーの丸み */
  border: solid 6px transparent; /* スクロールバー表示エリアとバーの隙間 */
  background-clip: content-box; /* スクロールバー表示エリアとバーの隙間の設定に必須 */
  background-color: lightgray; /* バーの色 */
}


@media screen and (max-width: 743px) {
  /* バーの横幅分のpaddingずれ調整用 */
  .scrollbar{
    scrollbar-gutter: inherit;
    padding-left:10px;
    padding-right:5px;
  }

  _::-webkit-full-page-media, _:future, :root .scrollbar{
    border-left:solid transparent 18px!important; /* Safari */
  }

   /* スマホ・タッチデバイス対応 */
  .scrollbar.touchdevice{
    border-left:none!important;
  }

  _::-webkit-full-page-media, _:future, :root .scrollbar.touchdevice{
    border-left:none!important;
  }

  /* スクロールバー全体 */
  .scrollbar::-webkit-scrollbar {
    width: 18px; /* バーの幅 */
    background: rgba(255,255,255, 0);
  }

  /* スクロールバー背景 */
  .scrollbar::-webkit-scrollbar-track {
    background: rgba(255,255,255, 0);
  }

  /* スクロールバーつまみ */
  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 18px; /* バーの丸み */
    border: solid 6px transparent; /* スクロールバー表示エリアとバーの隙間 */
    background-clip: content-box; /* スクロールバー表示エリアとバーの隙間の設定に必須 */
    background-color: lightgray; /* バーの色 */
  }
}



















/* SVG ==============================================================*/