/**
* Template Name: Medilab
* Template URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins",  sans-serif;
  --nav-font: "Raleway",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #220e00; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #727272; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  --original-color: #e2823d;/*オレンジ色*/
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #220e00;  /* The default color of the main navmenu links */
  --nav-hover-color: #e2823d; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #220e00; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #e2823d; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
  scroll-padding-top: 80px;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}


a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

p {
	line-height: 1.8em;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  /*transition: all 0.5s;*/
  z-index: 997;
  background-color: var(--background-color);
}
.header .topbar {
  /*background-color: var(--accent-color);*/
  background-color: #e2823d;
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.3s;
}
.header .topbar .contact-info img {
	width: 30px;
}
@media (min-width: 1281px) {
.header .topbar .contact-info img {
	margin-left: -150px;
}
}
.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links i {
	font-size: 16px;
}
.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}
.header .social-links a img {
  /*opacity: 0.6;*/
	margin-top: 2px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}
/*.header .social-links a:hover img {
  opacity: 0.9;*/
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 50px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}
@media (max-width: 500px) {
.header .logo h1 {
	font-size: 135%;
}
}
.header .cta-btn,
.header .cta-btn:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .cta-btn {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

.scrolled .header .topbar {
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 10px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 14px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 11px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 14px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  color: var(--default-color);
  background-color: var(--background-color);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}
.footer .social-links a i.big {
	font-size: 24px;
}
.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.footer .social-links a img {
  opacity: 0.7;
}
.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  /*background-color: var(--accent-color);*/
  background-color: #e2823d;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
/*background: url( "../img/hero-bg.jpg" ) no-repeat;*/
background: url( "../img/subhead.png" ) no-repeat;
  position: relative;
}
.page-title2 {
background: url( "../img/subhead02.jpg" ) no-repeat;
}
.page-title3 {
background: url( "../img/subhead03.jpg" ) no-repeat;
}

.page-title .heading {
  padding: 80px 0 25px;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
	color: #fff;
	letter-spacing: 3px;
}
@media (max-width: 768px){
.page-title .heading h1, .page-title .heading p {
	text-align: center;
}
}
.page-title .heading p {
	color: #fff;
}
.page-title nav {
  background-color: color-mix(in srgb, var(--accent-color), transparent 40%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.page-title nav li a{
	color: #fff!important;
}
.page-title nav ol li+li {
  padding-left: 10px;
	color: #fff;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0 60px;
  scroll-margin-top: 72px;
  overflow: clip;
}
@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 60px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title, .section-title-w {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}
.section-title-w p {
	color: #fff;
}
@media (max-width: 768px) {
.section-title, .section-title-w {
  padding-bottom: 20px;
}
}
.section-title h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}
.section-title-w h2 {
	 color: #fff;
}
.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--original-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: calc(100vh - 112px);
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .container {
  z-index: 3;
}

.hero .welcome h2 {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif!important;
	font-style: italic!important;
	margin: 0;
	font-size: 48px;
	font-weight: bold;
	color: #fff;
	text-shadow: 3px 3px 5px rgba(0,0,0,0.9);
}

.hero .welcome p {
	font-size: 24px;
	margin: 0;
	color: #fff;
	text-shadow: 3px 3px 5px rgba(0,0,0,0.8);
}

.hero .content {
  margin-top: 40px;
}
@media (max-width: 1024px){
.d-m768-none {
    display: none !important;
  }
.hero {
  min-height: 35vh;
}
.hero video {
  height: auto;
  object-fit: contain;
}
.hero .welcome h2 {
	font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}

.hero .welcome p {
	font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}
}
@media (max-width: 767px){
.hero {
  min-height: 20vh;
}
.hero video {
  object-fit: cover;
  min-height: 250px;
}
.welcome {
	margin-top: -20px;
}
.hero .welcome h2 {
	font-size: clamp(1.8rem, calc(1.6rem + 0.4vw), 2.0rem);
}
.hero .welcome p {
	font-size: 15px;
}
}


.hero .content .icon-box {
  text-align: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px 30px;
  width: 100%;
}

.hero .content .icon-box i {
  font-size: 40px;
  color: var(--accent-color);
}

.hero .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 20px 0;
}

.hero .content .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.topabout {
  padding: 60px 0 20px;
  background: #111;
  /*background: url("../img/about-bg.png") top center no-repeat;*/
  position: relative;
}
/*.about:before {
  content: "";
  background: rgba(255, 255, 255, 0.75);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}*/

.topabout .container {
  position: relative;
}

.listing {
  list-style: none;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
ul.listing {
	padding-left: 0!important;
}
.listing li {
	border: 1px solid #fff;
  display: flex;
  flex-direction: column;
}
.listing .listing-body {
  margin-top: auto;
  padding: 10px;
	background-color: #cecece;
}
.listing .listing-body p {
  padding: 0;
	margin-bottom: 0;
	font-size: 0.8em;
}
.listing li h2{
	color: #fff;
	font-size: 1.2em;
  padding: 10px 10px 0;
  text-align: center;
}


/*--------------------------------------------------------------
# ワンストップ Section
--------------------------------------------------------------*/
.step-area {
  background-color: #f3f3f3;
	padding-top: 50px;
	margin-bottom: 50px;
}
ol.top_flow {
	background-color: #f9f9f9;
}
@media screen and (max-width: 912.98px) {
.top_flow {
        list-style: none;
	border: 2px solid #cecece;
	border-radius: 5px;
	padding: 20px 20px 20px 10px;
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.top_flow > li {
        position: relative;
        padding: 0.5em;
        margin:0 0 0 10px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
}
.top_flow > li:first-child {
        padding-top: 0px;
}
.top_flow > li:last-child {
        padding-bottom: 0px;
}
.top_flow > li:nth-child(n + 2)::before {
	margin: -10px 0 0 0; 
	position: absolute;
        top: 0px;
        left: 44%;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 22px solid #adadad;
        content: "";
} 
.top_flow > li > span {
        display: block;
        padding: 0.5em;
        margin: 5px auto;
        border: 1px solid #adadad;
	background-color: #585858;
	color: #fff;
	border-radius: 5px;
}
}
@media screen and (min-width: 913px) {
.top_flow {
        display: flex;
        justify-content: space-between;
        list-style: none;
	border: 2px solid #cecece;
	border-radius: 5px;
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.top_flow > li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        margin: 40px 30px 40px 0;
        width: 100%;
}
.top_flow > li + li::before {
	margin: -20px 0 0 -25px; 
        position: absolute;
        top: 50%;
        left: 0px;
        content: "";
	border: 20px solid transparent;
	border-left-color: #727272;
}
.top_flow > li > span {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 5.5em;
        height: 3.5em;
        border: 1px solid #111111;
	background-color: #3b3b3b;
        font-size: 22px;
        font-weight: bold;
	color: #fff;
        /*writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;*/
	border-radius: 5px;
	text-align: center;
	line-height: 1.2em;
}
}



/*--------------------------------------------------------------
# Testimonials お客様の声
--------------------------------------------------------------*/
.swiper-container {
	overflow: hidden;
}
.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
	height: 90px;
	object-fit: cover;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  border: 6px solid #fff;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 45px;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 0 45px;
}

.testimonials .testimonial-item .fa-quote-left, .testimonials .testimonial-item .fa-quote-right {
  color: #b2e4e6;
  font-size: 26px;
}

.testimonials .testimonial-item .qfa-quote-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .fa-quote-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  background: #f0fafa;
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #e2823d;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #e2823d;
}



/*--------------------------------------------------------------
# News Section
--------------------------------------------------------------*/
#News {
  background-color: #f3f3f3;
	padding-top: 50px;
}
#News a {
	color: #0000b3;
	text-decoration-line: underline;
}
.newsList div {
	display:flex;
	justify-content:flex-start;
	margin-bottom: 10px;
}
.newsList div dt {
	min-width:13em;
}
.newsList div dd {
	margin:0;
}
.newsList .lab01,
.newsList .lab02 {
	color: #fff;
	font-size: 12px;
	padding: 5px 15px;
	text-align: center;
	margin: 0 20px 0 30px;
}
.newsList .lab01 {
	background-color: #5977b3;
}
.newsList .lab02 {
	background-color: #b35959;
}

@media screen and (max-width: 559px) {
.newsList div {
	flex-flow: column;
}
}




/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}



/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
	background-color: #111;
	color: #fff;
}
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  /*background: #fff;*/
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}
.contact h2 {
	color: #fff;
}
.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
	color: #fff;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
	background-color: #fff;
  /*background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);*/
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 36px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
#About-page h3 {
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #494949;/*文字色*/
	border-left: solid 5px #e2823d;/*左線*/
	margin-bottom: 40px;
}


.table_01 {
	border-collapse: collapse;
	width: 100%;
	max-width: 1100px;
	margin-bottom: 30px;
}
.table_01 th, .table_01 td {
	border-bottom: 1px solid #c1c7c6;
	padding: 1em;
}
.table_01 th {
	border-bottom: 1px solid #9e5b2a;
	font-weight: bold;
	width: 30%;
}
.text-las-c {
	text-align-last: center!important;
}
.table_01 ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.table_01 li {
	margin-bottom: 7px;
	padding-left: 0;
}
.table_01 li:last-child {
	margin-bottom: 0;
}
.table_02 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
.table_02 th, .table_02 td {
  border: 1px solid #c1c7c6;
  padding: 0.6em 1em;
}
.table_02 thead th {
  background-color: #111;
  color: #fff;
  border: 1px solid #727272;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.table_02 thead th:last-of-type {
  border-right: 1px solid #c1c7c6;
}
.table_02 tbody th {
  text-align: center;
	font-weight: normal;
}
.responsiveTable {　　　/*保有設備*/
  overflow-x: auto;
  width: 80%;
  padding-bottom: 20px;
	margin: 0 auto 20px;
}
.responsiveTable_Table {
  width:100%;
  min-width: 200vw;
  margin-top: 0;
}
.responsiveTable_Table th, .responsiveTable_Table td {
  border: 1px solid #c1c7c6;
  padding: 5px 1em;
}
.responsiveTable_Table th {
	background-color: #111;
	color: #fff;
	text-align: center;
}
.responsiveTable_Table td {
	min-width: 6em;
	word-break: auto-phrase;
}
.t4col tr :nth-last-child(1) {
	text-align: center;
}
.t5col tr :nth-last-child(1) {
	text-align: center;
}
@media screen and (min-width: 480px) {
  .responsiveTable_Table {
    min-width: 150vw;
  }
}

@media screen and (min-width: 800px) {
  .responsiveTable_Table {
    min-width: auto;
  }
}
.chartbox{　　　　　/*業績推移グラフ*/
  width:100%;
  margin:0 auto;
  text-align: center;
}

@media screen and (min-width:1100px) {
.table_01 th {
	padding: 20px 80px;
}
.table_01 td {
	padding-left: 40px;
}
.table_02 {
	margin-top: 70px;
}
}
@media screen and (max-width:767px) {
.table_01 th,
.table_01 td {
　　border-bottom: none;
    display: block;
    width: 100%;
}
.table_01 th{
	background-color: #111;
	text-align-last: left;
	-moz-text-align-last: left;
	color: #fff;
	padding: 0.3rem 1em;
	font-size: 0.8em;
}
.table_01 td {
	margin: 0;
	padding: 1em 5px;
}
.table_02 th, .table_02 td {
  padding: 5px 1em;
}
}
/*-----主要取引先------*/

.customers_grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-rows: auto;
	font-size: 1em;
	margin: 10px;
	border-left: 0.5px #444 solid;
}
.customers_item {
	padding: 10px 5px 10px 15px;
	border-right: 0.5px #444 solid;
	border-bottom: 0.5px #444 solid;
}
.grid_header { 
	background: #111;
	grid-column: 1 / 5;
	color: #fff;
	padding: 5px 0 5px 20px;
	font-weight: bold;
}
@media (max-width: 1024px) {
.customers_grid {
	grid-template-columns: 1fr 1fr;
}
.grid_header { 
	grid-column: 1 / 3;
}
}
@media (max-width: 767px) {
.customers_grid {
	grid-template-columns: 1fr;
}
.grid_header { 
	grid-column: 1 / 1;
}
}

/*--------------------------------------------------------------
# 私たちの強み
--------------------------------------------------------------*/
.Strength-page p {
	font-size: 1.1em;
}

.Strength-page h3 {
	font-size: 1.5em;
	font-weight: 700;
	padding: 0.8rem 2rem;
	-webkit-transform: skew(-15deg);
	transform: skew(-15deg);
	color: #fff;
	background-image: -webkit-gradient(linear, left top, right top, from(#242424), to(#cecece));
	background-image: -webkit-linear-gradient(left, #242424 0%, #cecece 100%);
	background-image: linear-gradient(to right, #242424 0%, #cecece 100%);
	margin: 10px 0 30px;
}
@media (max-width: 767px) {
.Strength-page h3 {
	padding: 0.5rem 1.5rem;
	font-size: 1.3em;
}
.Strength-page h4 {
	margin-top: 10px;
}
}


/*--------------------------------------------------------------
# reazon Section（私たちの強み）
--------------------------------------------------------------*/
#reazon .step {
 position: relative;
 padding-bottom: 60px;
 width: 100%;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
#reazon .step:before {
 content: "";
 background-color: #CCC;
 height: 100%;
 width: 10px;
 position: absolute;
 left: 10px;
 top: 0px;
}
#reazon .step .stepLeft {
 background-color: #EFEFEF;
 width: 25%;
 position: relative;
 margin-left: 55px;
 padding: 10px 20px 20px;
}
#reazon .step .stepLeft:after {
 content: "";
 background-color: #333;
 height: 30px;
 width: 30px;
 border-radius: 100%;
 position: absolute;
 left: -55px;
 top: -10px;
}
#reazon .step .stepRight {
width: 65%;
}
#reazon .step.first {
 margin-top: 70px;
}
#reazon .step:last-child {
 padding-bottom: 0px;
}
#reazon .step .stepLeft .stepHead {
 font-size: 1.2rem;
 margin-bottom: 5px;
 font-weight: bold;
}
#reazon .step .stepLeft .stepHead span {
 margin-right: 10px;
 font-weight: bold;
}
#reazon .step .stepLeft img {
 height: auto;
 width: 100%;
 }

@media (max-width: 767px) {
#reazon .step .stepLeft {
 width: 95%;
}
#reazon .step .stepRight {
 width: 95%;
	margin-left: 30px;
}
#reazon .step .first {
 margin-top: 0;
}
}

#reazon i {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  width: 54px;
  height: 54px;
  font-size: 24px;
  border-radius: 50px;
  border: 2px solid var(--background-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#reazon .stats-item {
  background-color: var(--contrast-color);
  margin-top: -27px;
  padding: 30px 30px 25px 30px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0px 2px 35px color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 4px;
  z-index: 0;
}

#reazon .stats-item span {
  font-size: 32px;
  display: block;
  margin: 10px 0;
  font-weight: 700;
  color: var(--heading-color);
}

#reazon .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}


/*--------------------------------------------------------------
# quality Boxes（私たちの強み）
--------------------------------------------------------------*/
.quality-boxes {
  padding-top: 0;
  position: relative;
  z-index: 100;
}

.quality-boxes .quality-box {
  padding: 30px 20px 10px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 5px 10px 29px 0 rgba(68, 88, 144, 0.2);
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
}

.quality-boxes .quality-img {
  margin: 0 auto 20px auto;
  display: inline-block;
  text-align: center;
}

.quality-boxes .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}



/*--------------------------------------------------------------
# Stats Section  強み、業務内容4列
--------------------------------------------------------------*/
.stats {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
	margin-bottom: 30px;
}

.stats i {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  width: 54px;
  height: 54px;
  font-size: 20px;
  border-radius: 50px;
  border: 2px solid var(--background-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.stats .stats-item {
  background-color: var(--contrast-color);
  margin-top: -27px;
  padding: 30px 30px 25px 30px;
  width: 100%;
	min-height: 120px;
  position: relative;
  text-align: center;
  box-shadow: 0px 2px 35px color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 4px;
  z-index: 0;
}

.stats .stats-item span {
  font-size: 32px;
  display: block;
  margin: 10px 0;
  font-weight: 700;
  color: var(--heading-color);
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 18px;
	text-align: justify; text-align-last: auto;
}
@media (min-width: 800px) {
.stats .stats-item {
	min-height: 120px;
}
}

/*--------------------------------------------------------------
# Section
--------------------------------------------------------------*/
h4.sub  {
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #494949;/*文字色*/
	border-left: solid 5px #e2823d;/*左線*/
	margin-bottom: 40px;
}

/*--------------------------------------------------------------
　　画像 　3列
--------------------------------------------------------------*/
.item-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
	margin: 30px auto 50px;
}

.item-list {
  padding: 15px;
  width: calc((100% - 30px * 2) / 3);
  background-color: #fff;
}
.item-list img {
	display:block;
	width:100%;height:180px;
	object-fit:cover;
	object-position:center;
}
@media (max-width: 767px) {
.item-list {
    width: 100%;
}
}



/*--------------------------------------------------------------
# 業務内容（事業分野）
--------------------------------------------------------------*/
/*.field-boxes {
  padding-top: 0;
  position: relative;
  z-index: 100;
}

.field-boxes .field-box {
  padding: 30px 20px 10px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 5px 10px 29px 0 rgba(68, 88, 144, 0.2);
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
}

.field-boxes .field-img {
  margin: 0 auto 20px auto;
  display: inline-block;
  text-align: center;
}

.field-boxes .title {
  font-weight: 700;
  font-size: 17px;
	text-align: center;
}*/





/*--------------------------------------------------------------
  業務内容（フロー図）
--------------------------------------------------------------*/
/*.work_box {
	background-color: #111;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 2px solid #FFF;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
	text-align: center;
	height: auto;
}
.work_box h4 {
	text-align: center;
	padding: 20px 0 10px;
	font-size: 22px;
	line-height: 30px;
	color: #fff;
} */
.work_box{
  position: relative;
  width: 180px;
  text-align: center;
	z-index: 1
}

  
.work_box h4 {
    color: #fff;
    font-size: 20px;
    padding: 15px 0px;
    width: 200px;
    margin: auto;
  }

.work_box::before {
  content: '';/*ボックス作成*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #111;
  z-index: -1;
  transform: skew(-35deg);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
}
.work_flow {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}
.work_flow > li {
	min-height: 11em;
	padding: 0.5em 0.4em 0.5em 0.2em;
	margin: 0px;
	border-radius: 4em;
	background-color: #8f8f8f;
	color: #fff;
	font-size: 16px;
	text-align: center;
	writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	list-style: none;
}
.work_flow > li:nth-child(1)::before {
	position: absolute;
	top: 50%;
	/*left: 0px;*/
	left: 30px;
	z-index: -1;
	transform: translateY(-50%);
	width: calc(100% - 4.5em);
	height: 1.5em;
	border-top-right-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background-color: #eee;
	content: "";
}
.work_flow > li:nth-child(1)::after {
	position: absolute;
	top: 50%;
	right: 0.4em;
	z-index: -1;
	transform: translateY(-50%);
	width: 0px;
	height: 0px;
	border: 1.5em solid transparent;
	border-left: 2em solid #eee;
	content: "";
}
@media screen and (max-width: 912px) {
.work_box {
	width: 60%!important;
	margin: 30px auto 10px;
}
.work_box h4 {
	font-size: 1.2em;
}
}
@media screen and (max-width: 767px) {
ol {
	padding-left: 0!important;
}
}

/*--------------------------------------------------------------
  研究内容
--------------------------------------------------------------*/

.tecmenu {
    display:flex;
    flex-wrap:wrap;
	margin-bottom: 70px;
}
.tecmenu li  {
	margin:0 10px 10px 0;
        border:1px solid #aaa;
	width: calc(100% / 3 - 0.75rem);
        background-color:#111;
	list-style:none;
}
.tecmenu li a {	
	display: block;
	color: #fff;
	background-color: #111;
	padding: 15px;
	text-align: center;
	font-size: 1.1em
}
.tecmenu li a:hover  {
	background-color: #e7e7e7 ;
	color: #585858;
}
@media screen and (max-width: 767px) {
.tecmenu li  {
	width: calc(100% / 2 - 0.75rem);
}
.tecmenu li a {	
	font-size: 0.9em;
	padding: 15px 5px;
}
}
ul.cp_list {        /*3Dプリンタ加工 リスト*/
	position: relative;
	padding: 0 0.5em;
	margin-top: 2em;
	list-style-type: none;
	border: solid 2px #111;
	font-size: 1.1em;
}
ul.cp_list::after {
	position: absolute;
	content:attr(title);
	padding: 1px 7px;
	letter-spacing: 0.05em;
	font-weight: bold;
	background: #111;
	color: #fff;
	bottom: 100%;
	left: -2px;
	border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: 1px dashed #727272;
}
ul.cp_list li::before {
	position: absolute;
	content: "\002713";
	color: #111;
	font-weight: bold;
	left : 0.5em;
}
ul.cp_list li:last-of-type {
	border-bottom: none;
}
2713";
	color: #00796B;
	font-weight: bold;
	left : 0.5em;
}
ul.cp_list li:last-of-type {
	border-bottom: none;
}
dl.capa {        /*真空注型*/
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
	line-height: 1.8em;
	margin-top: 8px;
}
.capa dt{
	padding: 5px 0 5px 20px;
	width: 350px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f5f5f5;
}
.capa dd{
	margin: 0;
	padding: 5px 0 5px 20px;
	width: calc(100% - 350px);
	border-bottom: 1px solid #ccc;
}
@media only screen and (min-width: 1281px) {
dl.capa {
	line-height: 2.1em;
}
}
@media only screen and (max-width: 765px) {
dl.capa {
	width: 100%;
}
.capa dt{ 
	width: 100%;
	border-right: none;
}
.capa dd{
	width: 100%; 
}
}



/*--------------------------------------------------------------
  製品事例
--------------------------------------------------------------*/

/* mixitup */

.mixitup-button {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #cccccc;
  padding: 2rem;
	justify-content: center;

  button {
	width: calc(100% / 3 - 0.75rem);
	color: #fff;
	background-color: #111;
	padding: 15px;
	text-align: center;
	font-size: 1.1em;

    &:hover {
      background-color: #e7e7e7 ;
	color: #585858;
    }
  }
}

.mixitup-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2rem;
  div {
    margin: 0 auto;
    width: calc(100% / 3 - 0.75rem);

	img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}
  }
}
/* 事例写真文字重ね */
.mix {
	position: relative;
}
/*.mix::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15%;
	background-color: rgba(0, 0, 0, 0.6);
}*/
.mix p {
	position: absolute;
	font-size: 0.95em;
	color: #fff;
	bottom: 6px;
	left: 15px;
	margin: 0;
	padding: 0;
  }
@media (max-width: 1023px) {
.mixitup-list div {
    width: calc(100% / 2 - 0.75rem);
}
}
@media (max-width: 767px) {
.mixitup-button {
	padding: 1rem;
}
}
@media (max-width: 539px) {
.mixitup-button button {
	font-size: 0.9em;
}
.mixitup-list div {
    width: 100%;
}
.mixitup-list div img {
    width: 100%;
}
}

/*--------------------------------------------------------------
  ページ内リンクボタン（会社案内）
--------------------------------------------------------------*/

.submenu {
	margin: 10px auto 50px;
	list-style: none;
	display: flex;
	justify-content: center;
	flex-flow: wrap;
	padding-left: 0;
}
.submenu li {
	display: flex;
	width: 200px;
}
.submenu li a {
	width: 200px;
	text-align: center!important;
	margin: 7px;
	border-radius: 4px;
	transition: 0.5s;
	color: #fff;
	background: #111;
	padding: 8px 15px;
	text-decoration: none;
	font-size: 0.9rem;
}
.submenu li a:hover {
	color: #585858;
	border: 1px solid #111;
	background: #e7e7e7;
}
.anchor {
	padding-top: 40px;
	margin-top: -40px;
}
@media (max-width: 853px) {
.submenu {
	width: 80%;
}
}
@media (max-width: 767px) {
.submenu {
	justify-content: space-around;
}
.submenu::after{
  content:"";
  display: block;
  width:48%;
}
.submenu li {
	width: 48%;
	font-size: 12px;
}
}

/*--------------------------------------------------------------
  ダウンロードページ
--------------------------------------------------------------*/

.list_box {
	background-color: #EEE;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 2px solid #FFF;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
	margin-top: 40px;
	margin-bottom: 20px;
	text-align: center;
}
.list_box h2 {
	text-align: center;
	padding: 20px 0 10px;
	background-color: #111;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #555;
	font-size: 22px;
	line-height: 30px;
	color: #fff;
}
.list_box a {
	margin: 15px auto;
	font-size: 1.1rem;
	padding: 5px 15px;
}

.list_box img {
	width: 96%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}


.fs10 {
	font-size: 13px!important;
}
.fs11e {
	font-size: 1.1em!important;
}