@charset "UTF-8";

@font-face {
  font-family: "Lato";
  src: url('/font/lato-italic.woff2') format("woff2");
	src: url('/font/lato-italic.woff') format("woff");
  src: url('/font/lato-italic.ttf') format("truetype");
  font-weight: 400;
}
@font-face {
 font-family: "Lato";
	src: url('/font/lato-bolditalic.woff2') format("woff2");
	src: url('/font/lato-bolditalic.woff') format("woff");
  src: url('/font/lato-bolditalic.ttf') format("truetype");
	font-weight: 700;
}

/* ==========================================================
 body
========================================================== */
html {
  scroll-behavior: smooth;
}
body {
	position: relative;
	margin-bottom: 60px;
	letter-spacing: .045em;
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: 300;
	color: #37474f;
}
p {
	margin-top: -.5em;
	line-height: 2;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	letter-spacing: .2em;	
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none;
}
img {
	width: 100%;
	-ms-interpolation-mode: bicubic;
}
span.s-tx-ss {
	font-size: 60%;
	vertical-align: text-top;
}

/* ==========================================================
 header / footer
========================================================== */
header {
	width: 100%;
}
footer {
	width: 960px;
	margin: 170px auto 0;
}
.footer-sitelink {
	margin: 50px 0 60px;
	text-align: center;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 200;
}
.footer-sitelink li {
	display: inline-block;
	line-height: 1;
	margin-right: 2em;
	padding-left: 2em;
	font-size: 12px;
	text-align: center;
}
.footer-sitelink li + li {
	border-left: 1px solid #cfd8dc;
}
.footer-sitelink li a {
	text-decoration: none;
}
.footer-otherlink {
	position: relative;
	display: flex;
	justify-content: space-between;
	font-size: 10px;
}
/* .footer-otherlink div {
	position: relative;
	-webkit-flex-grow: 1;
  flex-grow: 1;
} */
.footer-otherlink div:nth-of-type(1),
.footer-otherlink div:nth-of-type(2) {
	clear: both;
	overflow: hidden;
}
.footer-otherlink div:nth-of-type(1) > a,
.footer-otherlink div:nth-of-type(2) > a {
	display: block;
	float: left;
}
.footer-otherlink div:nth-of-type(1) > a {
	width: 50px;
}
.footer-otherlink div:nth-of-type(1) > p {
	padding-left: 70px;
}
.footer-otherlink div:nth-of-type(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.footer-otherlink div:nth-of-type(2) > a {
	width: 24px;
}
.footer-otherlink div:nth-of-type(2) > a + a {
	margin-left: 26px;
}
.footer-otherlink div:nth-of-type(3)  p + p {
	margin-top: 2em;
	/* position: absolute;
	right: 0;
	bottom: 0; */
}

/* .-logo
---------------------------------------------------------- */
header .header-logo,
footer .footer-logo {
	font-size: 10px;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 200;
}

header .header-logo h1,
footer .footer-logo a {
	margin-bottom: 27px;
}
header .header-logo img,
footer .footer-logo img {
	width: 132px;
	height: 21px;
}
footer .footer-logo a {
	display: block;
}
header .header-logo {
	position: absolute;
	top: 50px;
	left: 50px;
	z-index: 400;
}
/* nav
---------------------------------------------------------- */
.nav-btn {
	position: absolute;
	top: 25px;
	right: 30px;
	width: 20px;
	text-align: center;
  cursor: pointer;
  z-index: 400;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
	-webkit-transition: all .3s;
  transition: all .3s;
  box-sizing: border-box;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}
.menu-trigger span:nth-of-type(1) {
  top: 7px;
}
.menu-trigger span:nth-of-type(2) {
  top: 15px;
}
.open .nav-btn,
.open header .header-logo {
	position: fixed;
}
.open .menu-trigger span:nth-of-type(1) {
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}
.open .menu-trigger span:nth-of-type(2) {
  -webkit-transform: translateY(-4px) rotate(45deg);
  transform: translateY(-4px) rotate(45deg);
}
header .nav-list {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
  visibility: hidden;
  opacity: 0;
	z-index: 300;
}
header .nav-list ul {
  display: table-cell;
	margin: 0 auto;
  vertical-align: middle;
	text-align: center;
}
header .nav-list li {
  width: 300px;
	margin: 0 auto;
}
header .nav-list li:first-child a {
	border-top: 1px solid #eef1f3;
}
header .nav-list li a {
  display: block;
	padding: 20px 0;
	line-height: 1;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 200;
	text-align: left;
	text-decoration: none;
	border-bottom: 1px solid #eef1f3;
}
header .nav-list li.nav-list-ico {
	margin: 50px auto 0;
	text-align: left;
}
header .nav-list li.nav-list-ico a {
	display: inline-block;
	width: 34px;
	padding: 5px;
	border: none;
}
header .nav-list li.nav-list-ico a:nth-of-type(1) {
	margin-left: -5px;
}
header .nav-list li.nav-list-ico a + a {
	margin-left: 5px;
}
/* header .nav-list li.nav-list-fb a {
	width: 30px;
	padding: 0;
	border: none;
	margin-top: 50px;
} */
.open .nav-list {
  -webkit-transition: all .3s;
  transition: all .3s;
  visibility: visible;
  opacity: 1;
}

/* ==========================================================
 .contents-cmn
========================================================== */
.contents-cmn {
	margin: 90px auto 0;
}
.bx-wrapper li {
	width: 100% !important;
}

.bx-wrapper li img {
	width: auto;
}

@media screen and (max-width: 1079px) {
	.bx-wrapper img {
		width: 100%;
	}
}

/* ==========================================================
 .area-cmn
========================================================== */
.area-cmn-bg {
	overflow: hidden;
  background: no-repeat center top;
	background-size: 100%;
}
.area-bg-service {
	background-image: url(/img/top/bg_top_01.jpg);
}
.area-bg-service div + div {
	padding: 30px 40px 40px;
}
#lab .area-bg-message {
	background-image: url(/img/service/bg_lab_01.jpg);
}
#fdmode .area-bg-message {
	background-image: url(/img/product/bg_fdmode_01.jpg);
}
#shirokuma .area-bg-message {
	background-image: url(/img/product/bg_shirokuma_01.jpg);
}
.area-bg-plain {
	background: #f8fafc;
}
.area-bg-qa {
	background-image: url(/img/common/bg_cmn_01.jpg);
}
.area-cmn-product {
	background-image: url(/img/common/bg_cmn_02.jpg);
	text-align: center;
}
.area-cmn-product img {
	width: 700px;
}
.area-cmn-bg .box-bg {
	position: relative;
	background: #fff;
}
.area-bg-qa .box-bg {
	display: flex;
	-webkit-justify-content: space-between;
  justify-content: space-between;
	padding: 60px 60px 10px;
}
.box-bg > div {
	float: left;
}
.area-bg-qa .box-bg dl {
	width: 450px;
}
.area-bg-qa .box-bg dl dt {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eef1f3;
	color: #26323D;
	font-weight: 500;
}
.area-bg-qa .box-bg dl dt:before {
	content: "●";
	padding-right: .5em;
	font-size: 12px;
}
.area-bg-qa .box-bg dl dd {
	margin-bottom: 50px;
	text-align: justify;
}
.area-bg-qa ul.list-cmn {
	margin-bottom: 10px;
}
.area-bg-qa ul.list-cmn li {
	list-style: disc;
	margin: 10px 0 0 1.5em;
}
.area-bg-qa h3 {
	margin: 20px 0 15px;
	font-weight: 500;
}
.area-bg-qa img {
	width: 30%;
}
.area-bg-service .box-bg > div {
	width: 480px;
	height: 320px;
}
.area-bg-message .ttl-level-02 {
	margin-bottom: 60px;
	text-align: left;
}
.area-bg-message .ttl-cmn-04 {
	letter-spacing: .4em;
}
.area-bg-message .txt-name {
	position: absolute;
	bottom: 60px;
	overflow: hidden;
	width: 50%;
	height: 100px;
}
.area-bg-message .txt-name div {
	float: left;
	width: 100px;
	margin-right: 30px;
}
.area-bg-message .txt-name div img {
	width: 100%;
}
.area-bg-message .txt-name p {
	display: table-cell;
	vertical-align: middle;
	height: 100px;
	margin: 0;
	font-size: 12px;
}
.area-bg-message .txt-name .s-block {
	display: block;
	margin-top: 5px;
	font-size: 20px;
	font-weight: 500;
}
.area-bg-message .box-bg {
	padding: 60px 50px 60px 60px;
	background: rgba(255,255,255,.95);
}
.area-bg-message .box-bg > div + div {
	float: right;
	width: 500px;
}
.area-bg-message .box-bg p + p {
	margin-top: 1.5em;
}

/* ==========================================================
 .section-amn
========================================================== */
.sec-cmn-01 {
	position: relative;
	width: 960px;
	margin: 90px auto;
}
.sec-cmn-02 {
	width: 1080px;
	margin: 90px auto;
}
.sec-intro {
	margin: 50px auto 70px;
}
.sec-main h2,
.sec-intro h2 {
	position: absolute;
	color: #000;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 200;
	text-align: left;
	z-index: 100;
}
.sec-intro h2 {
	top: -60px;
	right: -.5em;
	letter-spacing: .5em;
	font-size: 48px;
}
.sec-main {
	width: 1080px;
	margin-bottom: 110px;
}
.sec-main h2 {
	left: 60px;
	bottom: 30px;
	line-height: 1;
	font-size: 72px;
}
.sec-main .img-main {
	width: 750px;
	float: right;
	z-index: 0;
}
.sec-main p {
	position: absolute;
	left: 60px;
	bottom: 170px;
	font-size: 16px;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 300;
	letter-spacing: .5em;
}
.sec-main .btn-more-02 a {
	position: absolute;
	bottom: -30px;
	right: 60px;
	background-color: rgba(237,255,63,.95);
}
.sec-main .btn-more-02 a:hover {
	opacity: .9;
}
.sec-movie {
	text-align: center;
}
.sec-movie .box-movie {
	display: block;
	width: 780px;
	height: 440px;
	margin: 0 auto;
	box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
}
.sec-movie .box-movie iframe {
	width: 100%;
	height: 100%;
}
.sec-movie .clearfix {
	display: inline-block;
	margin-top: 70px;
}
.sec-movie .clearfix img,
.sec-movie .clearfix p {
	float: left;
}
.sec-movie .clearfix img {
	width: 38px;
	margin-right: 20px;
}
.sec-brand {
	margin-top: 70px;
	padding: 40px;
	background: #f8fafc;
	text-align: justify;
}
.sec-brand h3 {
	float: left;
	width: 100px;
	margin-right: 40px;
}
/* list-box
---------------------------------------------------------- */
.list-box,
.list-howto > li,
.list-feature > li,
.list-lineup > li {
	display: flex;
	-webkit-justify-content: space-between;
  justify-content: space-between;
	-webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.list-box p {
	text-align: justify;
}
.list-feature + .list-cmn {
	width: 960px;
	margin: 0 auto;
}
.box-reverse {
	-webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.list-cmn li {
	width: 440px;
}
.list-product li {
	width: 450px;
	margin-top: 80px;
	text-align: center;
}
.list-feature li {
	margin: 0;
	margin-bottom: 70px;
}
.list-feature li .box-txt {
	width: 420px;
	padding: 0 60px;
}
.list-feature li .box-img {
	width: 660px;
}
.list-feature .box-textonly {
	display: block;
	width: 540px;
	margin: 0 auto;
}
.list-feature .ttl-cmn-04 {
	line-height: 2.2;
	margin-bottom: 60px;
}
.list-lineup li + li {
	margin-top: 40px;
}
.list-lineup li .box-txt {
	width: 600px;
	padding: 30px;
	background: #fff;
}
.list-lineup li .box-txt div {
	min-height: 390px;
	height: 100%;
	border: 4px solid #f8fafc;
}
.list-lineup li .box-txt div .clearfix {
	height: 100%;
}
.list-lineup li .box-txt h3 {
	position: relative;
	padding: 30px;
	font-size: 20px;
	font-weight: 500;
}
.list-lineup li .box-txt h3:before,
.list-lineup li .box-txt .tag:before {
	position: absolute;
	top: 10px;
	right: 10px;
	line-height: 1;
	letter-spacing: .1em;
	color: #dee3e8;
	font-size: 12px;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}
.list-lineup li .box-txt h3:before {
	content: "Name";
}
.list-lineup li .box-txt p,
.list-lineup li .box-txt img,
.list-lineup li .box-txt p span {
	display: block;
}
.list-lineup li .box-txt p {
	margin: 0;
}
.list-lineup li .box-txt p img {
	float: right;
	width: 120px;
}
.list-lineup li .box-txt p span {
	float: left;
	width: 335px;
}
.list-lineup li .box-txt .tag:before {
	content: "Tag";
}
.list-lineup li .box-txt .tag {
	font-size: 12px;
}
.list-lineup li .box-txt p {
	position: relative;
	padding: 15px 30px;
	border-top: 4px solid #f8fafc;
}
.list-lineup li .box-img {
	width: 450px;
	padding: 20px;
	background: #fff;
}
.list-cv li {
	position: relative;
	width: 520px;
	margin-bottom: 40px;
	background: #fff;
}
.list-cv li h3.ttl-cmn-03 {
	margin-top: 40px;
}
.list-cv li div {
	position: absolute;
}
.list-case li div {
	left: 0;
	bottom: 40px;
	padding: 0 40px;
}
.list-voice li div {
	left: 0;
	bottom: 60px;
	padding: 0 60px;
}
.list-cv .ttl-cv {
	margin: 35px 0 50px;
	font-size: 12px;
	text-align: center;
}
.list-voice li {
	padding: 30px 60px 240px;
	background: url(/img/product/ico_shirokuma_01.jpg) top 30px left 30px no-repeat #fff;
}
.list-case li {
	padding: 40px 40px 220px;
	border: 20px solid #f8fafc;
	border-width: 35px 20px;
}
.list-case li:before {
	display: block;
	margin: -60px 0 0;
	content: url(/img/service/ico_labo_01.png);
	text-align: center;
}
.ttl-case,
.list-voice li:after,
.list-case li:after {
	display: block;
	position: absolute;
	line-height: 1;
	margin: 0;
	color: #dee3e8;
	font-size: 12px;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}
.ttl-case,
.list-case li:after {
	top: 20px;
	letter-spacing: .1em;
}
.list-voice li:after {
	top: 30px;
	right: 30px;
	content: "Post Card";
	letter-spacing: .1em;
}
.ttl-case {
  left: 20px;
}
.list-case li:after {
  right: 20px;
	content: "Sentaku lab.";
}
.list-howto {
	border-bottom: 1px solid #eef1f3;
}
.list-howto > li {
	padding: 40px 0 20px;
	border-top: 1px solid #eef1f3;
}
.list-howto ul {
	width: 480px;	
}
.list-howto ul li {
	position: relative;
	margin-bottom: 20px;
}
.list-howto ul li:before,
.list-howto ul li.notice:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 2.1;
}
.list-howto ul li:before {
	content: "●";
	font-size: 12px;
}
.list-howto ul li > span {
	display: block;
	margin-left: 1.5em;
}
.list-howto ul li.notice:before {
	content: "※";
}
/* btn-more
---------------------------------------------------------- */
.btn-more-01 a,
.btn-more-02 a {
	display: block;
	padding: 0 30px;
	background: url(/img/common/ico_arrow_01.svg) no-repeat right 30px center #edff3f;
	background-size: 5px;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 200;
	text-align: left;
	text-decoration: none;
	border-radius: 3px;
	transition: all .4s;
}
.btn-more-01 a:hover,
.btn-more-02 a:hover {
	opacity: .7;
}
.btn-more-01 a {
	width: 200px;
	line-height: 40px;
	margin: 30px auto 0;
}
.btn-more-02 a {
	width: 220px;
	line-height: 60px;
	margin: 0 auto;
}
/* txt-
---------------------------------------------------------- */
.txt-cmn-01 {
	width: 740px;
	margin: 0 auto;
}
.txt-cmn-02 {
	margin-bottom: 50px;
	text-align: left;
}
.txt-cc-02 {
  column-count: 2;
	-ms-columns: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
	text-align: justify;
	column-gap: 40px;
	-ms-column-gap: 40px;
}
.txt-contact {
	margin-bottom: 30px;
	text-align: center;
}

/* ttl-
---------------------------------------------------------- */
.ttl-cmn-01,
.ttl-cmn-02,
.ttl-product {
	color: #000;
	font-family: "YuMincho", "Yu Mincho", "游明朝", serif;
	font-weight: 200;
}
.ttl-cmn-03,
.ttl-cmn-04,
.ttl-cmn-05 {
	color: #263238;
	font-weight: 500;
}
.ttl-cmn-01 {
	display: block;
	margin: 40px 0 20px;
	font-size: 36px;
}
.ttl-cmn-02 {
	margin-bottom: 50px;
	font-size: 24px;
}
.ttl-cmn-03 {
	margin-bottom: 40px;
	font-size: 16px;
	line-height: inherit;
}
.list-feature + .list-cmn .ttl-cmn-03.s-ta-c {
  margin-bottom: 20px;
}
.ttl-cmn-04 {
	margin-top: 60px;
	font-size: 20px;
	line-height: inherit;
}
.ttl-cmn-05 {
	font-size: 18px;
}
.ttl-product {
	margin: 30px auto 50px;
	font-size: 36px;
}
.ttl-level-02 {
	margin-bottom: 70px;
	font-size: 12px;
	text-align: center;
	color: #263238;
}
.ttl-level-02 span {
	display: block;
	letter-spacing: .15em;
	margin-bottom: 20px;
	font-size: 20px;
  font-family: 'Lato', sans-serif;
	font-weight: 700;
}