@charset "utf-8";
/*
Theme Name: Lab 123
Description: Lab 123
Version: 0.1.4
License: GNU General Public License
Tags: Lab 123, 歯科技工所, 神奈川県川崎市
*/

/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto;   font-family:Helvetica, Arial, sans-serif;
       background:#fff;  font-size:14px;  height:100%;  max-width:1920px;}
header,section,article,aside,footer{ 	display: block;}
img{ display:block; margin:0;padding:0;border:none;}
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}
/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#fff;text-decoration:none;}
a:visited{ color:#fff;text-decoration:none;}
a:hover{ color:#eee;	text-decoration:none;}
a:active{ color:#fff;text-decoration:none;}
/*-------------------------------------
             PC TB SP
-------------------------------------*/
.pc { display:block; }
.tb { display:none; }
.sp { display:none; }
.pctb { display:block; }
.sptb  { display:none; }
  @media screen and (max-width : 1100px){
     .pc { display:none; }
     .tb { display:block; }
     .sp { display:none; }
     .pctb { display:block; }
     .sptb  { display:block; }
  }
  @media screen and (max-width : 480px) { 
     .pc { display:none; }
     .tb { display:none; }
     .sp { display:inline-block; }
     .pctb { display:none; }
     .sptb  { display:block; }
  }
/*-------------------------------------
	    Span Color
-------------------------------------*/
span.bold { font-weight:bold; }
span.red { color:#ff0000; font-weight:bold; }
span.blue { color:#0000ff; font-weight:bold; }
span.pink { color:#ff6666; font-weight:bold; }
span.yellow { color:#ffff00; font-weight:bold; }
span.line { background: linear-gradient(transparent 80%, #ff6633 20%); }
span.uline { text-decoration:underline; }

p.bigL { text-align:center; font-size:16px; }
/*-------------------------------------
	          Scroll Bar
-------------------------------------*/
::-webkit-scrollbar {  width: 8px; }
::-webkit-scrollbar-track {  background: #fff;  border: none;  border-radius: 10px;  box-shadow: inset 0 0 2px #999;  }
::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px;   box-shadow: none; }
/*-------------------------------------
	     Header
-------------------------------------*/
header { 
    width:100%;  
    height:70px;
    margin:0px auto;
    background:#fefefe;
}
.headerInner { 
    max-width:1200px;
    width:100%;
    height:70px;
    margin:0 auto; 
    text-align: center;
    display: flex; 
    flex-wrap:wrap; 
    justify-content:space-between;  
}
.headerLeft,
.headerRight { 
    font-weight: bold;
    display: flex; 
    flex-wrap:wrap; 
    justify-content:space-between;  
    align-items:center;
}
.headerLeft .header-logo img {
	height:70px;
	/* filter: drop-shadow(4px 4px 4px #aaa); */
}

.headerTxtBottom h1 {
    font-size: 22px;
    color: #999;
    margin-right:30px;
}
.topContactBtn { 
    padding: 13px 25px 12px;
}

.topContactBtn img.flagIcon {
    display: inline-block;
    width: 35px;
    vertical-align: middle;
	margin:0 5px;
}

@media screen and (max-width:480px){
	.headerLeft   {
		display:none;
	}
	.headerInner,
	.headerRight {
		width:100%;
	}
	.headerRight h1 {
		text-align:center;
		font-size:18px;
		color:#555;
		margin-right:0;
	}
	.headerTxtBottom {
		width:60%;
	}
	.topContactBtn {
		width:38%;
		padding: 13px 1% 12px;
	}
}
/*-------------------------------------
	   Top Image
-------------------------------------*/
#top-image {
    max-width:1600px;
    margin:0 auto;
    position: relative;
}
.topImage {
	width: 100%;
    position: relative;
	padding-top:40%;
}
.slider-item {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;

}
.topImage div:nth-of-type(1) {
	animation: fadeslide 20s 0s infinite both;
	z-index: 4;
}

.topImage div:nth-of-type(2) {
	animation: fadeslide 20s 5s infinite both;
	z-index: 3;
}

.topImage div:nth-of-type(3) {
	animation: fadeslide 20s 10s infinite both;
	z-index: 2;
}

.topImage div:nth-of-type(4) {
	animation: fadeslide 20s 15s infinite both;
	z-index: 1;
}

@keyframes fadeslide {
	0% { opacity: 0; }
	10% { opacity: 1; }
	25% { opacity: 1; }
	30% { opacity: 0; }
	100% { opacity: 0; }
}

.topImage img {
    width:100%;
    margin: 0 auto;
}
.overlay p.topPageLogo {
	width:100%;
    position:absolute; 
    top:5%; 
	margin:auto;
    z-index: 20;
}
.overlay p.topPageLogo img {
	max-width:800px;
	width:100%;
	margin:0 auto;
	opacity:0.7;
}
.overlay p.topPage {
    text-align:center; 
    position:absolute; 
    top:auto; 
    left:2%; 
    right:2%;
	bottom:2%;
    z-index: 10;
    color:rgba(255,255,255,0.4);
    font-family:'arial black';
    letter-spacing: -0.08em;
    display: inline-block; 
    text-align: center; 
}
.overlay p.topPage {
    font-size:280px;
}
.overlay p.germicidal { 
    font-size:180px;
    margin-top:4%;
}
.overlay p.measurement {
        font-size:170px;
    margin-top:4%;
}
.overlay p.text { 
    font-size:180px;
    margin-top:4%;
}

    @media screen and (max-width : 1600px){
        .overlay p.topPage {
            font-size:13vw;
        }
        .overlay p.germicidal { 
            font-size:12vw;
        }
        .overlay p.measurement{ 
            font-size:11vw;
        }
        .overlay p.text { 
            font-size:12vw;
        }
    }

@media screen and (max-width : 480px){
	.overlay p.topPageLogo {
		width:60%;
		top:auto; 
		bottom: 0;
		margin: auto;
		left: -50px;
		z-index: 20;
	}
}
/* ----------------------------------
              NAVI
---------------------------------- */
nav#topNavi { 
    width:100%;
    height:60px; 
    margin:0 auto; 
    padding:0;
    border-top:1px #ccc solid;
    border-bottom:1px #ccc solid;
    background:#fff;
}
.openIcon { 
    display:none; 
}
nav#topNavi ul  {  
    max-width:1200px;
    display:flex; 
    flex-wrap:wrap; 
    margin:0 auto; 
    box-sizing: border-box;
}
nav#topNavi li{ 
    height:60px; 
    text-align:center; 
    position:relative;  
    width:calc(100% / 6); 
    font-size:16px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
nav#topNavi li.sp { 
    display: none;
}
nav#topNavi li.active  { 
    background:#0000ff;
}

nav#topNavi li.menu:after { 
    color:#eee;
    width:1px; 
    height:60px; 
    border-right:1px #ccc solid; 
    content:".";
    position:absolute; 
    top:0px; 
    right:-1px; 
}
nav#topNavi li.lastChild:after { 
    display:none;
}

nav#topNavi li a:link,
nav#topNavi li a:visited { 
    color:#333; 
}
nav#topNavi li.active a:link,
nav#topNavi li.active a:visited { 
    color:#fff; 
}
nav#topNavi li a:hover { 
    color:#fff; 
    text-decoration:none; 
    background:#0000ff;
    width:100%;
    height:60px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width : 480px){
	nav#topNavi { 
		height:120px; 
	}
	nav#topNavi li{ 
		width:calc(100% / 3); 
	}
	nav#topNavi li:nth-child(2) { 
		border-bottom:1px #ccc solid; 
	}
	nav#topNavi li:nth-child(3) { 
		border-bottom:1px #ccc solid; 
	}
}
/*-------------------------------------
	   Main Contents
-------------------------------------*/
main {  
    width:100%; 
}
article { 
    width:100%; 
    margin:0 auto 50px;
	font-size:18px;
}
section.top-section {
	background:#f8f8f8;
}
@media screen and (max-width : 480px){
	main {  
		width:98%; 
		margin:0 1%;
	}
}
/*-------------------------------------
	   TOP INFORMATION
-------------------------------------*/

.section-inner { 
    max-width:1200px; 
    margin:0px auto; 
}
.top-information {
	max-width:800px;
	margin:0 auto;
	padding:40px 0;
}
h2.top-info {
	font-size: 50px;
    font-family: serif;
    text-align: center;
    color: #333;
    margin: 20px auto;
}
.top-information p {
    font-family: serif;
	font-size: 20px;
}
.top-information p img {
	max-width:400px;
	margin: 0 0 0 auto;
	width:100%;
}
@media screen and (max-width : 480px){
	.top-information {
		padding:20px 0;
	}
	.top-information p img {
	max-width:200px;
	}
	h2.top-info {
		font-size: 6vmin;
		padding-top:0;
		margin: 20px auto;
	}
}
/*-------------------------------------
	   NEWS
-------------------------------------*/
.news-info {
	max-width:700px;
	margin:0 auto 60px;
}
.flex-box {
	display:flex;
	flex-wrap:wrap;
}
.flex-box img {
	width:100%;
}
.news-box {
	margin:20px 0;
}
.flex-20 {
	width:20%;
	display: flex;
    align-items: center;
}
.flex-60 {
	width:60%;
}
.news-info p {
	padding:3px 5px;

}
.news-info .cat-info {
	display:inline-block;
	background:#c4c400;
	border-radius:22px;
	color:#fff;
	padding:3px 10px;
	font-size:16px;
}
.news-info .cat-company {
	display:inline-block;
	background:#0000ff;
	border-radius:22px;
	color:#fff;
	padding:3px 10px;
	font-size:16px;
}
@media screen and (max-width:480px) {
	.news-info .flex-20 {
		width:25%;
	}
	.news-info .flex-60 {
		width:50%;
	}
}
/*-------------------------------------
	   BUSINESS INFO
-------------------------------------*/
section#business-info {
	background:#f8f8f8;
	padding-bottom:60px;
}
h2 {
	color:#0000ff;
	font-family: serif;
	text-align:center;
	font-size: 40px;
    padding: 80px 0 0 0;
}
h3 {
	font-size: 30px;
	color:#555;
	font-family: serif;
	text-align:center;
    margin: 0px auto 60px;
}

.flex-50 {
	width:50%;
}
.flex-50 .text-box {
	padding: 0 5%;
	background:#fff;
}
.animation {
	opacity:0;
	height: 100%;
    position: relative;
}
.anime-left .show {
	text-align:right;
	animation-name: SlideInLeft;
	animation-duration: 0.5s ;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}
.anime-right .show {
	animation-name: SlideInRight;
	animation-duration: 0.5s ;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}
@keyframes SlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-500px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes SlideInRight {
  0% {
    opacity: 0;
    transform: translateX(500px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

h3.biz-title {
	font-size:30px;
	text-align:left;
	padding:0px 2% 0px;
	margin:5% 0 20px;
	display:inline-block;
	background:#0000ff;
	color:#fff;
}
.anime-left h3.biz-title {
	text-align:right;
}
@media screen and (max-width:480px) {
	section#business-info {
		padding-bottom:0px;
	}
	h2 {
		font-size:36px;
		padding: 20px 0 0 0;
	}
	h3 {
	font-size: 20px;
    margin: 0px auto 20px;
	}
	.flex-50 {
		width:100%;
	}
	.animation {
		opacity:1;
		position: relative;
	}
	.anime-left .show {
		animation-name: SlideInLeftNone;
	}
	.anime-right .show {
		animation-name: SlideInRightNone;
	}
	.flex-box .picBox {
		order:1;
	}
	.flex-box .txtBox {
		order:2;
	}
	h3.biz-title {
		font-size:20px;
		text-align:center;
		padding:5px 2% 5px;
		margin:5% 0 10px;
		display:block
	}
	.anime-left h3.biz-title {
		text-align:center;
		padding:10px 0;
	}
	.flex-box {
		margin-bottom:40px;
	}
	.flex-50 .text-box {
		background:#f8f8f8;
		padding:0;

	}
}
/*-------------------------------------
	   PRODUCT INFO
-------------------------------------*/
section#product-info {
	background:#f8f8f8;
	padding-bottom:60px;
}
.flex-25 {
	width:25%;
}
@media screen and (max-width:480px) {
	.flex-25 {
		width:100%;
		margin:10px auto;
	}
}
/*-------------------------------------
	   ABOUT US
-------------------------------------*/
section#company-info {
	padding-bottom:0px;
}
.biz-info {
	margin-bottom:60px;
}

table.aboutus  {
	width:100%;
	max-width:600px;
	margin:20px auto;
  border-collapse: collapse;
}
table tr{
  border-bottom: solid 2px white;
}
table tr:last-child{
  border-bottom: none;
}
table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #0000ff;
  color: white;
  text-align: center;
  padding: 10px 0;
}
table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #0000ff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
table td{
  text-align: left;
  width: 70%;
  background-color: #eee;
  padding: 10px 0 10px 40px;
}

.gmap {
height: 0;
overflow: hidden;
padding-bottom: 30%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
@media screen and (max-width:480px) {
	table th{
		width: 23%;
		font-size:4.5vmin;
	}
	table td{
		width: 77%;
		padding: 10px 0 10px 15px;
		font-size:4.3vmin;
	}
	.gmap {
		padding-bottom: 40%;
	}
}
/*-------------------------------------
	   CONTACT
-------------------------------------*/
section#contactus {
	margin-bottom:100px;
}
.align-center {
  text-align: center;
}

.row {
  margin: -20px 0;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row .col {
  padding: 0 20px;
  float: left;
  box-sizing: border-box;
}
.row .col.x-50 {
  width: 50%;
}
.row .col.x-100 {
  width: 100%;
}
.content-wrapper {
  min-height: 100%;
  position: relative;
}
.get-in-touch {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
}
.get-in-touch .title {
  text-align: center;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 36px;
  line-height: 48px;
  padding-bottom: 48px;
}
.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}
.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #000;
  font-family: Lusitana, serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contact-form .input-text:focus {
  outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
  transform: translateY(-24px);
}
.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-family: Lusitana, serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #888;
  cursor: text;
  transition: transform 0.2s ease-in-out;
}
.contact-form .submit-btn {
  display: inline-block;
  background-color: #0000ff;
  color: #fff;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}
.note {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-family: Lusitana, serif;
  font-size: 16px;
  line-height: 21px;
}
.note .link {
  color: #888;
  text-decoration: none;
}
.note .link:hover {
  text-decoration: underline;
}
@media screen and (max-width:480px) {
	section#contactus {
		padding-top:40px
	}
}
/*-------------------------------------
	   CONTACT HEADER
-------------------------------------*/
#contactHeaderInner { max-width:1200px; margin:0px auto; position:relative; height:300px;
          background:url(/image/ogpImage.jpg);     background-position: top center; }
#contactHeaderInner  nav { top:250px; }
#contactHeaderInner h1  { top: 150px;  }
main.pageCon { position:relative; top:auto; left:0; right:0; margin:auto; }
  @media screen and (max-width : 768px){
        #contactHeaderInner nav  { top: 0px;  }
  }
/*-------------------------------------
	   CONTACT PHP
-------------------------------------*/
#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:80%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:70%;padding:10px 20px;word-wrap:break-word; }
#contactForm .formTable th { width:30%;padding:10px 20px; }

  @media screen and (max-width : 480px) {
     #contactForm h3 { text-align:center; }
     #contactForm .formTable { width:98%; margin:10px 1%; }
     #contactForm .formTable th { padding:10px; }
  }

/*-------------------------------------
	     Footer
-------------------------------------*/
footer { width:100%;text-align:center;margin:0px auto 0;padding:0px; position:relative; 
         background:#666; }
footer ul { max-width:1200px;text-align:center;margin:0px auto;
             display:flex; flex-wrap:wrap;}
footer li { width:calc(100% / 6);  padding:20px 0px; }
footer a { display:block;text-decoration:none;}
footer a:link { color:#fff;}
footer a:visited{ color:#fff; }
footer a:hover{ color:#ff0000; }
address { clear:both; color:#fff; font-size: 12px; text-align:center; padding: 20px 0px; }

    @media screen and (max-width :768px) {
        footer li { 
            width:33%;  
            padding:20px 0px; 
        }
    }
    @media screen and (max-width :480px) {
        footer li { 
            width:50%;  
            padding:20px 0px; 
        }
    }