@charset "UTF-8";
@media screen and (max-width: 768px) {
	
	body {
		margin-bottom: 0;
		letter-spacing: 0.02em;
  }
	h1, h2, h3, h4, h5, h6 {
		letter-spacing: .1em;
  }
	.android header .header-logo,
  .android footer .footer-logo,
	.android header .nav-list li a,
	.android .sec-main h2,
	.android .sec-intro h2,
	.android .sec-main p,
	.android .btn-more-01 a,
  .android .btn-more-02 a,
	.android .ttl-cmn-01,
  .android .ttl-cmn-02,
  .android .ttl-product {
		font-family: "Noto Sans Japanese", sans-serif;
	}
	html.open,
  html.open body {
    height: 100%;
    overflow: hidden;
}
	
/* ==========================================================
 header / footer
========================================================== */
	header {
		width: auto;
	}
	#top header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	header .header-logo,
	footer .footer-logo {
		font-size: 9px;
	}
	header .header-logo,
	header .nav-btn {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin-top: 25px;
	}
	header .header-logo {
		float: left;
		margin-left: 25px;
		z-index: 200;
	}
  header .header-logo h1,
	footer .footer-logo a {
		margin-bottom: 20px;
	}
	header .header-logo img,
	footer .footer-logo img {
		width: 120px;
		height: 19px;
	}
	header .nav-btn {
		float: right;
		margin-right: 25px;
	}
	header .nav-list {
		position: absolute;
		padding: 0 25px;
	}
	header .nav-list ul,
	header .nav-list li {
		width: 100%;
		margin: 0;
	}
	header .nav-list .menu-trigger {
		margin-top: 20px;
	}
	header .nav-list li.nav-list-ico {
		margin-top: 30px;
	}
	header .nav-list li.nav-list-ico a {
		width: 44px;
    padding: 10px;
	}
	header .nav-list li.nav-list-ico a:nth-of-type(1) {
		margin-left: -10px;
	}
	header .nav-list li.nav-list-ico a + a {
    margin-left: 0;
}
	.open header .header-logo {
		position: static;
	}
	.open .nav-btn {
		position: relative;
	}
	footer {
		width: auto;
		margin-top: 150px;
	}
	.footer-otherlink {
		display: block;
		background: #f8fafc;
		margin: 50px 0 0;
		padding: 50px 25px;
		font-size: 12px;
		text-align: center;
	}
	.footer-otherlink div:nth-of-type(1) > a {
		float: none;
		margin: 0 auto 30px;
	}
	.footer-otherlink div:nth-of-type(1) > p {
		padding: 0;
	}
	.footer-otherlink div:nth-of-type(2) {
		top: auto;
		transform: translate(-50%, 30px);
	}
	.footer-otherlink div:nth-of-type(2) > a {
		width: 50px;
		padding: 10px;
	}
	.footer-otherlink div:nth-of-type(3) {
		margin-top: 110px;
	}
	.footer-otherlink div:nth-of-type(2) > a + a {
		margin-left: 10px;
	}
	.footer-otherlink div:nth-of-type(3) p + p {
		margin: 0;
	}
	/* .footer-otherlink div p + p {
		position: relative;
		right: 0;
		bottom: 0;
		margin-top: 30px;
	} */
	.footer-otherlink .s-ta-r {
		text-align: center !important;
	}
	
/* ==========================================================
 .contents-cmn
========================================================== */
	.contents-cmn {
		margin: 0;
	}
	
/* ==========================================================
 .area-cmn
========================================================== */
	.area-bg-service,
	#lab .area-bg-message,
	#fdmode .area-bg-message,
	#shirokuma .area-bg-message,
	.area-bg-qa,
	.area-cmn-product {
	  background: #fafafa;
	}
  .area-cmn-bg .box-bg {
	  background:  none;
  }
	.area-cmn-product {
		margin-top: 90px;
	}
	.area-cmn-product div + p {
		margin-top: 10px;
	}
	.area-cmn-product img {
		width: 100%;
	}
	.area-bg-service .box-bg > div {
		width: auto;
		height: auto;
	}
	.area-bg-service div + div {
		padding: 0;
	}
	.area-bg-service .ttl-cmn-01 {
		margin-bottom: 30px;
	}
	.box-bg > div {
		float: none;
	}
	.area-bg-message .box-bg {
		padding: 0;
	}
	.area-bg-message .ttl-level-02,
	.area-bg-message .ttl-cmn-04,
	.area-bg-message .txt-name p {
		text-align: center;
	}
	.area-bg-message .ttl-cmn-04 {
		letter-spacing: .2em;
		padding-left: .8em;
		font-size: 16px;
	}
	.area-bg-message .box-bg > div + div {
		float: none;
		width: auto;
	}
	.area-bg-message .box-bg > div + div p {
		text-align: justify;
	}
	.area-bg-message .txt-name {
		position: static;
		bottom: auto;
		width: auto;
		height: auto;
		margin: 50px 0 40px;
	}
	.area-bg-message .txt-name div,
	.area-bg-message .txt-name p {
		float: none;
		display: block;
	}
	.area-bg-message .txt-name div {
		width: 150px;
		margin: 0 auto 40px;
	}
	.area-bg-message .txt-name p {
		font-size: 12px;
	}
	.area-bg-message .txt-name p .s-block {
		font-size: 22px;
	}
	.area-bg-qa .box-bg {
	  display: block;
	  padding: 0;
  }
  .area-bg-qa .box-bg dl {
	  width: auto;
  }
	.area-bg-qa .box-bg dl dt {
		position: relative;
	}
  .area-bg-qa .box-bg dl dt:before {
		display: none;
  }
	.area-bg-qa .box-bg dl dt:after {
		content: "";
    position: absolute;
    top: 50%;
    right: 25px;
		width: 12px;
    height: 7px;
		margin-top: -3px;
		background: url(/img/common/ico_arrow_02.svg) no-repeat;
		background-size: contain;
		transition: all .15s linear;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
  }
	.area-bg-qa .box-bg dl dt.open:after {
		transform: rotate(180deg);
   	-webkit-transform: rotate(180deg);
  }
	.area-bg-qa .box-bg dl dt span {
		display: block;
		padding: 0 1.5em 0 0;
	}
	.area-bg-qa .box-bg dl dd + dt,
	.area-bg-qa .box-bg dl + dl dt {
		margin-top: -1px;
	}
	.area-bg-qa .box-bg dl dt,
	.area-bg-qa .box-bg dl dd {
    padding: 20px 25px;
  }
	.area-bg-qa .box-bg dl dt {
    margin-bottom: 0;
		border-top: 1px solid #eef1f3;
  }
	.area-bg-qa .box-bg dl dd {
		display: none;
		background: #fff;
		margin-bottom: 0;
	}
	.area-bg-qa p {
		text-align: center;
  }	
	.area-bg-qa img {
	  width: 50%;
  }
	
	
/* ==========================================================
 .section-amn
========================================================== */
	section img {
		width: 100%;
	}
  .sec-cmn-01,
  .sec-cmn-02 {
	  width: auto;
	  margin: 60px 25px 70px;
  }
	.sec-main {
		margin: 50px 0 0;
	}
	.sec-main .img-main {
		float: none;
		width: auto;
	}
	.sec-main h2,
	.sec-main p {
		position: static;
		left: auto;
		bottom: auto;
		text-align: center;
	}
	.sec-main h2 {
		font-size: 38px;
	}
	.sec-main p {
		margin: 40px 0;
		padding-left: .8em;
		font-size: 18px;
		letter-spacing: .3em;
	}
	.sec-intro {
		margin-top: 0;
	}
	.sec-intro h2 {
		position: static;
		top: auto;
		right: auto;
		margin: 0 -25px 50px;
		padding-left: .5em;
		background: url(/img/top/img_slide_01_sp.jpg) no-repeat center;
		background-size: 100%;
		font-size: 34px;
		text-align: center;
		z-index: 1;
	}
	.sec-intro h2 > span {
	  position: relative;
    top: 50%;
		display: block;
    transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
		text-align: center;
	}
	.sec-intro .ttl-cmn-02 {
		margin-bottom: 40px;
		padding-left: .6em;
		font-size: 22px;
		text-align: center;
	}
	.sec-intro .txt-cc-02 {
		column-count: 1;
    -ms-columns: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
	}
	.sec-brand {
		padding: 40px 25px;
	}
	.sec-brand h3 {
		float: none;
		margin: 0 auto 40px;
	}
	.sec-qa {
		margin: 60px 0 70px;
	}
	.sec-movie .box-movie {
		overflow: hidden;
		position: relative;
	  width: auto;
    height: 0;
		padding: 30px 0 56.25%;
		box-shadow: none;
  }
	.sec-movie .box-movie iframe,
	.sec-movie .box-movie object,
	.sec-movie .box-movie embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	.sec-movie .clearfix {
		display: block;
		margin-top: 50px;
	}
	.sec-movie .clearfix img {
		width: 60px;
	}
	.sec-movie .clearfix p {
		float: none;
		text-align: justify;
	}
	
/* list-box
---------------------------------------------------------- */
  .list-box,
  .list-howto > li,
  .list-feature > li {
	  display: block;
  }
	.list-cmn li {
		margin-top: 70px;
	}
  .list-feature + .list-cmn {
	  margin: 0;
  }
  .list-cmn li,
	.list-product li,
	.list-feature + .list-cmn,
	.list-feature li .box-txt,
	.list-feature li .box-img,
	.list-feature .box-textonly,
	.list-cv li,
	.list-lineup li .box-txt,
	.list-lineup li .box-txt div,
	.list-lineup li .box-txt p span,
	.list-lineup li .box-img,
	.list-howto ul {
	  width: auto;
  }
	.list-case li {
		margin: 0 -10px 30px;
		padding: 40px 25px;
		border: solid #f8fafc;
    border-width: 15px 10px;
	}
	.list-cv .ttl-cv {
		margin: 0 0 30px;
		font-size: 12px;
	}
	.list-voice {
		margin: 0 -15px;
	}
	.list-case li div,
	.list-cv li div {
		position: static;
		left: auto;
		bottom: auto;
		margin-top: -20px;
		padding: 0;
	}
	.ttl-case {
		left: 10px;
	}
	.ttl-case, .list-case li:after {
		top: 10px;
	}
	.list-case li:after {
		right: 10px;
	}
	.list-case li:before {
		position: absolute;
		top: -8px;
		left: 50%;
		content: "";
    margin: 0 0 0 -45px;
		width: 90px;
		height: 30px;
		text-align: center;
    background: url("/img/service/ico_labo_01.png") no-repeat;
    background-size: contain;
  }
	.list-cv li {
		margin-bottom: 20px;
	}
	.list-cv li h3.ttl-cmn-03 {
		margin: 30px 0 20px;
		z-index: 10;
	}
	.list-howto > li {
		padding-bottom: 10px;
	}
	.list-howto ul li {
		margin-bottom: 30px;
	}
  .list-howto ul li:before {
	  font-size: 12px;
  }
	.list-howto h3.ttl-cmn-05 {
		line-height: inherit;
		letter-spacing: 0.02em;
		margin-bottom: 40px;
		font-size: 16px;
	}
	.list-feature li .box-txt {
		margin-bottom: 30px;
		padding: 0;
	}
	.list-feature .ttl-cmn-04 {
		line-height: inherit;
		margin: 0 0 30px;
		text-align: center;
	}
	.list-voice li {
		padding: 50px 35px 50px;
  	background-position: top 25px left 20px;
		background-size: 33px;
  }
	.list-voice li:after {
		top: 25px;
		right: 20px;
	}
	.list-lineup {
		margin: 0 -15px;
	}
	.list-lineup li + li {
		margin-top: 20px;
	}
	
	.list-lineup li .box-txt {
		padding: 10px;
	}
	.list-lineup li .box-txt h3,
	.list-lineup li .box-txt p {
		padding: 25px;
	}
	.list-lineup li .box-txt h3 {
		line-height: 1.6;
		text-align: center;
	}
	.list-lineup li .box-txt h3:before,
	.list-lineup li .box-txt .tag:before,
	.ttl-case,
	.list-voice li:after,
	.list-case li:after {
		font-weight: 700;
	}
	.list-lineup li .box-txt h3:before,
	.list-lineup li .box-txt .tag,
	.list-lineup li .box-txt .tag:before {
		font-size: 12px;
	}
	.list-lineup li .box-txt div .clearfix {
		height: auto;
		text-align: justify;
	}
	.list-lineup li .box-txt p img {
		margin: 0 0 0 1.5em;
	}
	.list-lineup li .box-txt p span {
		float: none;
		width: auto;
	}
	.list-lineup li .box-img {
		padding: 0;
		text-align: center;
	}
	.list-lineup li .box-img img {
		width: 90%;
	}
	
	/* btn-more
---------------------------------------------------------- */
  .btn-more-01 a,
  .btn-more-02 a {
  	width: auto;
		line-height: 1;
	  margin: 30px 25px 0;
	  padding: 23px 0 25px;
		font-size: 16px;
		background-size: 8px;
		text-align: center;
		text-indent: -20px;
  }
	.btn-more-01 a {
		background-position: right 10% center;
  }
	.btn-more-02 a {
		background-position: right 8% center;
	}

/* ttl-
---------------------------------------------------------- */
	.ttl-cmn-01 {
		font-size: 30px;
	}
  .ttl-cmn-02 {
	  line-height: inherit;
		padding-left: .4em;
  }
	.ttl-cmn-03 {
		margin-bottom: 40px;
		padding-left: .3em;
		font-size: 16px;
	}
	.ttl-cmn-03.s-ta-c {
		margin-bottom: 30px;
	}
	.list-feature + .list-cmn .ttl-cmn-03.s-ta-c {
		letter-spacing: .05em;
		padding: 0;
	}
  .ttl-cmn-04 {
	  font-size: 18px;
  }
  .ttl-level-02 {
		line-height: 1;
	  margin-bottom: 70px;
	  font-size: 12px;
  }
  .ttl-level-02 span {
		letter-spacing: .1em;
	  margin-bottom: 20px;
	  font-size: 20px;
  }
  .ttl-product {
		margin-top: 10px;
	  font-size: 34px;
  }

/* txt-
---------------------------------------------------------- */
  .txt-cmn-01 {
		width: auto;
		margin: 0;
	}
	.txt-cmn-02 {
		margin-bottom: 30px;
	}
	.txt-contact {
		margin-bottom: 70px !important;
		font-size: 16px;
		font-weight: 500;
	}
	
/* flex-order
---------------------------------------------------------- */
  .flex-order-01 {
		order: 1;
	}
  .flex-order-02 {
		order: 2;
	}
}