/* CSS Document */


@media screen and (max-width:767px){
	
}
@media screen and (min-width:768px) and (max-width:1099px){
  /*TB*/
  /*footer*/
  footer{
	  background-color:#445;
	  position:relative;
	  z-index:2;
	  background-position:center center;
	  background-repeat:no-repeat;
	  background-size:cover;
	  text-align:center;
    background-image: url(../img/bg/footer_mobile.jpg);
  }
  footer::after{
	  content:'';
	  display:block;
	  width:100%;
	  height:1px;
	  position:relative;
	  z-index:1;
  }
  body.safari footer::after{
	  height:115px;
  }
  footer::before{
	  content:'';
	  display:block;
	  width:100%;
	  position:absolute;
	  z-index:3;
	  top:0;
	  right:0;
  	bottom:0;
	  left:0;
	  background:-webkit-linear-gradient(top, rgba(68,68,85,0) 0%,rgba(68,68,85,1) 70%,rgba(68,68,85,1) 100%);
	  background:linear-gradient(to bottom, rgba(68,68,85,0) 0%,rgba(68,68,85,1) 70%,rgba(68,68,85,1) 100%);
  }
  footer > div{
	  position:relative;
	  z-index:4;
  }
  footer div.footer{
	  box-sizing:border-box;
  }
  footer div.footer::before{
	  content:'';
	  display:block;
	  width:100%;
	  position:absolute;
	  z-index:2;
	  top:0;
	  right:0;
	  bottom:0;
	  left:0;
	  box-sizing:border-box;
	  background: radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0) 0);
	  background-position:0px 0,3px 3px;
	  background-size:6px 6px;
  }
  footer div.footertop{
	  position:sticky;
	  text-align:center;
	  z-index:2;
  }
  .ie footer div.footertop{
	  position:absolute;
	  left:50%;
	  transform:translateX(-50%);
  }
  footer figure.symbol{
  }
  footer figure.symbol svg{
	  opacity:0.1;
    width: 30vw;
  }
  footer figure.symbol svg path{
	  fill:#fff;
  }
  footer figure.symbol svg,
  footer figure.symbol svg path{
	  transition:all 0.3s ease;
  }
  html.end footer figure.symbol svg{
	  opacity:1;
  }
  html.end footer figure.symbol svg path{
	  fill:#0bf;
  }
  footer div.company h3{
	  color:#FFF;
	  font-weight:700;
  }
  footer div.company h3::after{
	  color:#FFF;
	  font-family:'Oswald';
	  content:'GRANTEST Inc. SINCE 2008';
	  display:block;  
  }
  footer div.footercontents p,
  footer div.footercontents a{
	  color:#FFF;
  }
  footer div.footercontents div.menubtn{
	  background-color:#FFF;
	  border-radius:10px;
	  color:#445;
	  position:relative;
	  z-index:1;
	  display:table;
	  margin:0 auto;
  }
  footer div.footerbottom{
	  position:absolute;
	  bottom:0;  
  }
  footer div.bottomlink{
	  display:flex;
	  justify-content:center;
  }
  footer div.bottomlink div{
	  padding:0 0.25em;
	  white-space:nowrap;
  }
  footer div.bottomlink div::after{
	  content:'|';
	  color:#fff;
  }
  footer div.bottomlink div:last-child::after{
  	display:none;
  }
  footer div.sns{
	  display:flex;
	  justify-content:center;
  }
  footer div.sns > div{
	  display:block;
	  width:40px;
	  height:40px;
	  margin:0 5px;
  }
  footer div.sns a{
	  background-position:center center;
	  background-repeat:no-repeat;
	  background-size:cover;
	  display:block;
	  box-sizing:border-box;
	  border-radius:20px;
	  width:40px;
	  height:40px;
  }
  footer div.sns a img{
	  width:100%;
	  opacity:0;
  }
  .ie footer div.sns a img{
	  opacity:1;  
  }
  
  [vhadjust-id="vhadjust-11"] {
    height: 1024px !important;
    width: 100%;
  }
  /*ページ途中の問い合わせ*/
  .btnwrap{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btnwrap > *{
		padding: 0 30px 0 60px;
    line-height: 80px;
    margin: 20px 15px 0 15px !important;
    font-size: 18px;
	}
  .btnwrap > * span{
    left: 20px !important;
  }
  .btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.png);
	}
	body.edge .btnwrap.dark > div span,
	body.chrome .btnwrap.dark > div span,
	body.firefox .btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.webp);
	}
	.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.png);
	}
	body.edge .btnwrap.light > div span,
	body.chrome .btnwrap.light > div span,
	body.firefox .btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.webp);
	}
	.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark.png);
	}
	body.edge .btnwrap.dark > a span,
	body.chrome .btnwrap.dark > a span,
	body.firefox .btnwrap.dark > a span{
		/*! background-image:url(../img/bg/flow_btn_dark.webp); */
	}
	.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.png);
	}
	body.edge .btnwrap.light > a span,
	body.chrome .btnwrap.light > a span,
	body.firefox .btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.webp);
	}
	/*事例*/
  .example .inner{
    padding: 60px 0;
  }
  section.example > div.inner > h2.title{
    font-size: 18px;
  } 
  section.example > div.inner > p.explanation {
    padding: 30px 0 20px 0;
    line-height: 20px;
  }
  div.examplewrap > article{
    max-width: 640px !important;
  }
  div.examplewrap > article a{
    padding: 10px 10px 10px 265px !important;
  }
  div.examplewrap > article a::before {
    right: calc(100% - 255px) !important;
    top: 5px !important;
    font-size: 18px !important;
  }
  div.examplewrap > article figure{
    position: absolute !important;
    width: 255px !important;
  }
  div.examplewrap > article > p{
    padding: 35px 10px 5px 275px !important;
  }
  div.examplewrap > article > div {
  padding: 0 10px 10px 275px !important;
  }
  section.example div.btnarea a {
    font-size: 18px;
    line-height: 50px;
    height: 50px;
    padding: 0 40px 0 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
  }
  /*一番下の各事業ボタン*/
  .businesslist{
    padding: 60px 0;
  }
  section.businesslist div.inner > h2{
    font-size: 18px;
  }
   section.businesslist div.listwrap {
    width: 100%;
    padding: 10vw 0 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  section.businesslist div.listwrap div.listitem {
    width: 33.3333%;
    padding: 10vw 0;
  }
  div.listitem::before {
    top: -1vw;
    right: 1vw;
    left: 1vw;
    font-size: 5vw;
    line-height: 5vw;
    color: rgba(68,68,85,0.5);
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
  }
  section.businesslist div.listwrap div.listbtn a h3 {
    background-color: rgba(68,68,85,0);
    background: radial-gradient(rgba(68,68,85,0.8) 1px, rgba(68,68,85,0.5) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(242,242,246,0.5) 0);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-size: auto, auto;
    background-position: 0px 0,3px 3px;
    background-size: 6px 6px;
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    padding: 0 45px 0 0;
    line-height: 60px;
    height: 60px;
    text-align: right;
  }
  section.businesslist div.listwrap div.listitem div.bg {
    top: 0;
    width: 100%;
    height: 200px;
    transform: skewY(-20deg);
  }
  section.businesslist div.listwrap div.listbtn {
    -webkit-mask-image: -webkit-linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 100%);
  }
  div.bg > div {
    width: 100%;
    height: 620px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) skewY(20deg);
  }
  div.bg > div > div::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    content: '';
    background: radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0);
    background-position: 0px 0,3px 3px;
    background-size: 6px 6px;
    mix-blend-mode: screen;
  }
  section.businesslist div.listwrap div.listitem.graphic div.bg > div > div{
		background-image:url(../img/business/001@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.website div.bg > div > div{
		background-image:url(../img/business/002@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.system div.bg > div > div{
		background-image:url(../img/business/003@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.management div.bg > div > div{
		background-image:url(../img/business/004@2x.jpg);
	}
  div.bg > div > div {
    width: 100%;
    height: 620px;
  }
  /*事業内容下側の動画*/
  section.businesslist div.video{
    height: 100%;
    width: 100%;
    
  }
  section.businesslist div.video video{
    height: 100%;
  }
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
  /*共通*/
  /*ページ途中の問い合わせ*/
  .btnwrap{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btnwrap > *{
		padding: 0 30px 0 60px;
    line-height: 80px;
    margin: 20px 20px 0 20px !important;
    font-size: 21px;
    box-sizing: border-box;
  }
  .btnwrap > * span{
    left: 20px !important;
  }
  .btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.png);
	}
	body.edge .btnwrap.dark > div span,
	body.chrome .btnwrap.dark > div span,
	body.firefox .btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.webp);
	}
	.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.png);
	}
	body.edge .btnwrap.light > div span,
	body.chrome .btnwrap.light > div span,
	body.firefox .btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.webp);
	}
	.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark.png);
	}
	body.edge .btnwrap.dark > a span,
	body.chrome .btnwrap.dark > a span,
	body.firefox .btnwrap.dark > a span{
		/*! background-image:url(../img/bg/flow_btn_dark.webp); */
	}
	.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.png);
	}
	body.edge .btnwrap.light > a span,
	body.chrome .btnwrap.light > a span,
	body.firefox .btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.webp);
	}
  /*事業内容下側の動画*/
  section.businesslist div.video{
    height: 100%;
    width: 100%;
  }
  section.businesslist div.video video{
    width: 100vw;
  }
}