@charset "UTF-8";
/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("animate.css");
html {
  font-size: calc(13px + 2 * (100vw - 1024px) / 416);
  width: 100%;
}

span#test1 {
  display: block;
}

body {
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-text-size-adjust: none;
}

a:not(header a):not(footer a):not(.button09 a):not(.pagemenu a) {
  text-decoration: underline;
}
a:not(header a):not(footer a):not(.button09 a):not(.pagemenu a):hover {
  text-decoration: none;
}

a:hover {
	color: #2a83a2;
	transition: 0.5s;
}

* {
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
}

.font-ibm {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.center {
	text-align: center;
	margin: 0 auto;
}

.right {
	text-align: right;
}

/*===================
header
====================*/
header {
  margin: 0 auto;
  width: 100%;
}

#headerWrapp {
  padding: 30px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#headLogo {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

#headLogo img {
  max-width: 200px;
}

#headLogo h1,
#headLogo p {
  font-size: 0.9rem;
  padding-top: 5px;
  line-height: 1.8;
}

#headNav {
  -webkit-flex-basis: 80%;
      -ms-flex-preferred-size: 80%;
          flex-basis: 80%;
  text-align: right;
}
#headNav nav {
  width: 96%;
  max-width: 900px;
  display: inline-block;
}

#navPc {
  list-style: none;
  overflow: hidden;
  background-color: #fff;
  padding: 10px 10px 10px 2%;
  border-radius: 10rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#navPc >li {
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  font-weight: 500;
}

#navPc >li a {
  text-decoration: none;
  padding-bottom: 5px;
  font-weight: 500;
  font-size: 1rem;
}

.gnavi li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  padding: 0 5px;
}

.gnavi li.current a,
.gnavi li a:hover {
  color: #0481A2;
}

.gnavi li a::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 5%;
  /*線の形状*/
  width: 90%;
  height: 2px;
  background: #0481A2;
  /*アニメーションの指定*/
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  /*X方向0、Y方向1*/
  -webkit-transform-origin: left top;
          transform-origin: left top;
  /*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  /*X方向にスケール拡大*/
}
/*ドロップダウン*/
#navPc {
  overflow: visible;
}
#navPc >li{
  position: relative;
}
#navPc >li ul {
	position: absolute;
	opacity: 0;
	top: 50%;
	visibility: hidden;
	transition: 0.5s;
	width: 100%;
	background-color: #ffffff;
	padding: 10px 5px;
	box-shadow: 0px 0px 8px -2px #777777;
	border-radius: 5px;
	z-index: 999999;
}
#navPc >li:hover ul {
	top: 115%;
  visibility: visible;
  opacity: 1;
}
/*//ドロップダウン*/
.font-main {
  font-family: "Kiwi Maru";
}

#btn-inquiry {
  margin-left: 3%;
  border-radius: 20px;
}
#btn-inquiry a {
  text-align: center;
  border-radius: 20px;
  background-color: #2a83a2;
  padding: 8px 2rem 10px !important;
  display: block;
  color: #fff;
}
#btn-inquiry a:hover {
  background-color: #38a5cd;
}
#btn-inquiry a:hover::after {
  content: none;
}

.mt7 {
  margin-top: 7px;
}

.mt12rem {
  margin-top: 12rem;
}

.mt6rem {
  margin-top: 6rem;
}

.mt5rem {
  margin-top: 5rem;
}

.contents {
  margin-left: 3.33%;
  margin-right: 3.33%;
}

.contents2 {
  margin-left: 10%;
  margin-right: 10%;
}

.contents3 {
  margin-left: 15%;
  margin-right: 15%;
}

img {
  max-width: 100%;
}

/*===================
footer
====================*/
#footer-in {
  padding: 8rem 0;
}
#footer-in .ttl-icon {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.footer-logo {
  width: 200px;
  margin: 0 auto 6rem;
}
.footer-logo img {
  margin-bottom: 1rem;
}
.footer-logo p {
  text-align: center;
  font-size: 0.9rem;
}

.footer-menu {
  margin-bottom: 5rem;
}
.footer-menu ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.footer-menu ul li a {
  font-size: 1rem;
  font-weight: 400;
}

#footerAdress {
  margin-bottom: 3rem;
}
#footerAdress p,
#footerAdress address {
  text-align: center;
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 400;
}

.copy {
  text-align: center;
  font-size: 0.9rem;
}

/*===================
HOME
====================*/
.navToggle {
  display: block;
  position: fixed;
  right: 1.2rem;
  top: 12px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 51;
  background: #2a83a2;
  text-align: center;
}

.navToggle span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 3px #eee;
  -webkit-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  left: 6px;
}

.navToggle span:nth-child(1) {
  top: 9px;
}

.navToggle span:nth-child(2) {
  top: 18px;
}

.navToggle span:nth-child(3) {
  top: 27px;
}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#spMenu {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-110%);
          transform: translateX(-110%);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  max-width: 420px;
}

#spMenu-in {
  width: 100%;
  height: 100%;
  padding: 60px 2rem;
  overflow-y: auto;
}
#spMenu-in nav ul li {
  text-align: center;
  margin-bottom: 2rem;
  padding: 10px 0;
}
#spMenu-in nav ul li a {
  text-decoration: none;
  font-size: 16px;
  position: relative;
  padding: 0 5px;
}
#spMenu-in #btn-inquiry {
  margin-top: 80px;
}

#spMenu.active {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.splogo {
  margin-bottom: 50px;
  text-align: center;
}
.splogo img {
  width: 50%;
  margin-bottom: 0.5rem;
}
.splogo p {
  font-size: 0.5rem;
}

/*===================
HOME
====================*/
p ,ul ,li {
  line-height: 1.8em;
}

#mainImg {
  background-image: url(../img/home/belt.png);
  background-position: center 50%;
  background-size: auto 65%;
  background-repeat: repeat-x;
  padding: 0 2%;
  margin-top: 10px;
}

.mainImg-in {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.slider1 .slick-next::before,
.slider1 .slick-prev::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 25px;
  background-image: url(../img/common/arrow1.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}
.slider1 .slick-next {
  right: -15%;
}
.slider1 .slick-next::before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.slider1 .slick-prev {
  left: -15%;
}
.slider1 .slick-dots {
  bottom: 45px;
}
.slider1 .slick-dots li {
  margin: 0 15px;
}
.slider1 .slick-dots li button:before {
  font-size: 18px;
  color: #191919;
  opacity: 1;
}
.slider1 .slick-dots li.slick-active button:before {
  color: #2a83a2;
}

#aboutUs h2,
#quality h2,
#facility h2,
#archivept h2,
#values h2 {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.05em;
}

span.ttl-icon {
  text-align: center;
  display: block;
  margin-bottom: 3rem;
}
span.ttl-icon img {
  width: 6rem;
}

#aboutUs {
  padding: 8rem 0;
}
#aboutUs .txt1 {
  text-align: center;
  font-family: "IBM Plex Sans JP", sans-serif;
  margin-bottom: 6rem;
}

.s-ttl {
  text-align: center;
  font-weight: 500;
  margin-bottom: 3rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/*品質管理*/
#quality {
  position: relative;
  padding: 5rem 0 10rem 0;
}
#quality::after {
  content: "";
  width: 76%;
  height: 48rem;
  background-color: #dddbd1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
#quality .s-ttl {
  margin-bottom: 5rem;
}

.sepfr1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6.8%;
}
.sepfr1 .images {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}
.sepfr1 .images img {
  width: 100%;
}
.sepfr1 .txt {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}
.sepfr1 .txt p{
  font-family: "IBM Plex Sans JP", sans-serif;
  margin-bottom: 2rem;
}
.sepfr1 .txt-icon img {
  width: 22%;
}

.txt-icon {
  text-align: center;
  margin-bottom: 3.5rem;
}

/*設備紹介*/
#facility {
  position: relative;
  padding: 5rem 0 10rem 0;
}
#facility::after {
  content: "";
  width: 82%;
  height: 48rem;
  background-color: #d3dbd1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#facility .txt-icon {
  margin-bottom: 4rem;
}

.sepfr2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6.8%;
}
.sepfr2 .images {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}
.sepfr2 .images img {
  width: 100%;
}
.sepfr2 .txt {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}
.sepfr2 .txt p {
  font-family: "IBM Plex Sans JP", sans-serif;
  margin-bottom: 2rem;
}
.sepfr2 .txt-icon img {
  width: 22%;
}

/*製品・製作実績*/
#archivept .s-ttl {
  margin-bottom: 8rem;
}

.casefr {
  background-image: url(../img/home/belt.png);
  padding: 4rem 0;
}
.casefr ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5%;
}
.casefr ul li {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
}

.archivept-in {
  padding: 7rem 0 10rem;
}

.archive-img {
  text-align: center;
  margin-top: 6rem;
}
.archive-img img {
  width: 33%;
}

/**/
#values {
  padding-bottom: 8rem;
}
#values .txt-icon {
  margin-bottom: 3rem;
}
#values .txt-icon img {
  width: 30%;
}

.topage {
  margin-top: 4rem;
}
.topage a {
  font-family: "IBM Plex Sans JP", sans-serif;
}
.topage a::before {
  content: "> ";
}

/**/
#infoList {
  background-color: #dddbd1;
  padding: 4rem 0;
}
#infoList ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 4.5%;
  width: 86%;
  margin-left: auto;
  margin-right: auto;
}
#infoList ul li {
  -webkit-flex-basis: 33.333%;
      -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
}

#infoList ul li a:hover {
	opacity: 0.5;
	transition: 0.5s;
}

/*===================
事業内容
====================*/
.underTtl {
  padding-top: 8rem;
}
.underTtl h1 {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.05em;
}
.underTtl .s-ttl {
  margin-bottom: 6rem;
}
.underTtl .main-desc {
  text-align: center;
  margin-bottom: 6rem;
  font-family: "IBM Plex Sans JP", sans-serif;
}
.underTtl .main-desc.mb1 {
  margin-bottom: 1rem;
}
.underTtl .main-desc.mb3 {
  margin-bottom: 3rem;
}
.underTtl ul.main-desclist {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}
.underTtl ul.main-desclist li {
  font-size: 0.9rem;
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.6rem;
  font-family: "IBM Plex Sans JP", sans-serif;
}
.underTtl .pagemenu {
  margin-bottom: 7rem;
}
.underTtl .pagemenu ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.underTtl .pagemenu ul li {
  border-right: 1px solid #181818;
  padding: 0 1rem;
}
.underTtl .pagemenu ul li a {
  padding: 1rem 2rem;
  display: block;
}
.underTtl .pagemenu ul li:first-child {
  border-left: 1px solid #181818;
}

#binding h2,
#equipment h2,
#service_naka h2,
#service_gyaku h2,
#message h2,
#recruit h2,
#laser_processing h2,
.middle_bg_beige h2,
.middle_bg_blue h2,
.middle_bg_blue_left h2{
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.05em;
}
#binding h3,
#equipment h3,
#service_naka h3,
#service_gyaku h3,
#message h3,
#recruit h3,
.middle_bg_beige h3,
.middle_bg_blue h3,
.middle_bg_blue_left h3{
  text-align: center;
  font-size: 2.6rem;
  letter-spacing: 0.05em;
}

#service_naka h4,
#service_gyaku h4{
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  font-weight: bold;
}

#binding,
#message,
#recruit{
  padding: 6rem 0 12rem;
  position: relative;
}

#binding::after,
#message::after{
  content: "";
  width: 78%;
  height: 63rem;
  background-color: #dddbd1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

#recruit::after{
  content: "";
  width: 78%;
  height: 72rem;
  background-color: #D3DBD1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#binding .s-ttl,
#message .s-ttl{
  margin-bottom: 6rem;
}
#binding .sepfr1,
#message .sepfr1{
  margin-bottom: 8rem;
}
#binding .txt-icon,
#message .txt-icon{
  margin-bottom: 4rem;
}
#binding .txt-icon img {
  width: 30%;
}

#equipment {
  padding: 10rem 0;
}
#equipment .s-ttl {
  margin-bottom: 4rem;
}
#equipment p.sec-desc {
  text-align: center;
  margin-bottom: 4rem;
  font-family: "IBM Plex Sans JP", sans-serif;
}

#service_naka,
#service_gyaku,
.middle_bg_beige,
.middle_bg_blue,
.middle_bg_blue_left{
  padding: 6rem 0 6rem;
  position: relative;
}

#service_gyaku{
	margin-top: 12rem;
}

.middle_bg_blue_left::after{
  content: "";
  width: 78%;
  height: 100%;
  background-color: #D3DBD1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  z-index: -1;

}

#service_naka::after,
.middle_bg_blue::after{
  content: "";
  width: 90%;
  height: 100%;
  background-color: #D3DBD1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}

.middle_bg_beige::after{
  content: "";
  width: 90%;
  height: 100%;
  background-color: #DDDBD1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}

#service_naka .s-ttl,
#service_gyaku .s-ttl{
  margin-bottom: 4rem;
}
#service_naka .sepfr1,
#service_gyaku .sepfr1{
  margin-bottom: 4rem;
  margin-top: 4rem;
}
#service_naka .txt-icon,
#service_gyaku .txt-icon{
  margin-bottom: 4rem;
}
#service_naka .txt-icon img{
  width: 15%;
}

#service_gyaku .txt-icon img{
  width: 10%;
}

#service_gyaku::after {
  content: "";
  width: 90%;
  height: 100%;
  background-color: #DDDBD1;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}


.panelgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem 7%;
}
.panelgrid img {
  margin-bottom: 1rem;
}
.panelgrid p {
  text-align: center;
  font-family: "IBM Plex Sans JP", sans-serif;
  line-height: 1.1rem;
}

.table-normalwrapp {
	max-width: 900px;
	margin: 0 auto;
}

.table-normal table,
.table-normal th,
.table-normal td {
	border:1px solid #515151;
}

.table-normal th,
.table-normal td {
	padding:1rem;
	font-family: "IBM Plex Sans JP", sans-serif;
}

.table-normal p,
.table-normal ul li{
	font-family: "IBM Plex Sans JP", sans-serif;
}

.table-normal table {
	width:100%;
}

.table-normal th {
	width: 35%;
	font-weight: normal;
}

.table-normal td {
	width: 65%;
}

.recruit-table tr {
	border-bottom: 1px solid #515151;
}

.recruit-table tr:last-child {
	border-bottom: none;
}


.recruit-table td {
	padding: 20px 3px 0;
	font-family: "IBM Plex Sans JP", sans-serif;
}

.recruit-table td strong {
	margin-bottom: 15px;
	display: inline-block;
	font-weight: 500;
	font-size: 1.5rem;
}

#pp h1,
#pp h2,
#pp h3,
#pp ul li,
#pp p{
	font-family: "IBM Plex Sans JP", sans-serif;
}

#pp h2,
#pp h3{
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  font-weight: bold;
  margin-bottom: 50px;
}

#pp ul {
	margin-bottom: 80px;
}

#pp ul li {
	margin-bottom: 15px;
	list-style-type: disc;
	list-style-position: inside;
}

.button09 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 0.5em 4em 0.8em;
  width: 300px;
  color: #fff;
  font-size: 18px;
  font-weight: 200;
  background-color: #2A83A2;
  transition: 0.3s;
  border-radius: 50px;
  text-decoration: none !important;
}

.button09 a::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 2px solid #515151;
  transition: 0.2s;
  border-radius: 50px;
}

.button09 a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.button09 a:hover::before {
  top: 0;
  left: 0;
}

.button09 a:hover {
  text-decoration: none;
  background-color: #a0c4d3;
}

/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#2a83a2;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.8rem;
  transition:all 0.3s;
}

#page-top a:hover{
  opacity: 0.7;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}

.menu-item a {
width: 100%;
}

/* サブメニュー */
.sub-menu {
  position: absolute;
  width: 100%;
  top: 50px;
}

.sub-menu-item {
  overflow: hidden;
  opacity: 0;
  height: 0;
  /* サブメニューが出現する速度の調整 */
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* メインメニューマウスカーソルが乗ったらサブメニューを出現させる */
.menu-item:hover > .sub-menu > .sub-menu-item {
  overflow: visible;
  opacity: 1;
  height: 50px;
}

/*SPアコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 5px 0;
}

.accordion-area section {
	border: 1px solid #2a83a2;
	color:#2a83a2;
	padding: 10px 0;
}

/*アコーディオンタイトル*/
.accordion_sp {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.accordion_sp::before,
.accordion_sp::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #2a83a2;
    
}
.accordion_sp::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.accordion_sp::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.accordion_sp.close::before{
	transform: rotate(45deg);
}

.accordion_sp.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.accordion_sp_box {
    display: none;/*はじめは非表示*/
    background: #2a83a2;
	max-width: 100%;
	color:#fff;
	margin:0;
    padding: 20px 5px;
}

.accordion_sp a {
	margin: 0;
	padding: 0;
}

.accordion_sp_box p {
	padding: 10px 0;
}



/*======================================
レスポンシブ
=======================================*/
@media screen and (max-width: 767px) {
  html {
    font-size: calc(13px + 2 * (100vw - 320px) / 55);
  }
  * {
    font-size: 0.9rem;
  }
  .contents {
    margin-left: 5%;
    margin-right: 5%;
  }
  .contents2 {
    margin-left: 7%;
    margin-right: 7%;
  }
  #headerWrapp {
    display: block;
    padding: 20px 0;
  }
  #headerWrapp #headLogo p {
    font-size: 12px;
  }
  #headerWrapp #headLogo img {
    width: 160px;
  }
  #spMenu-in nav ul li {
    margin-bottom: 0;
  }
  #spMenu-in nav ul li a {
    font-size: 16px;
  }
  #headLogo h1,
  #headLogo p {
    font-size: 11px;
    padding-top: 5px;
  }
  /*===================
  footer
  ====================*/
  .splogo img {
    width: 50%;
  }
  #footer-in {
    padding: 4rem 0;
  }
  .footer-logo {
    width: 160px;
    margin: 0 auto 3rem;
  }
  .footer-logo img {
    margin-bottom: 0.5rem;
  }
  .footer-menu {
    display: none;
  }
  #footerAdress p,
  #footerAdress address {
    font-size: 0.7rem;
  }
  #footer-in .ttl-icon {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .copy {
    font-size: 0.6rem;
  }
  /*===================
     HOME
     ====================*/
  #mainImg {
    padding: 0 0% 1rem;
  }
  .mainImg-in {
    width: 100%;
  }
  /*
  .slider1 .slick-next,
  .slider1 .slick-prev {
    top: 55%;
  }
  .slider1 .slick-next::before,
  .slider1 .slick-prev::before {
    width: 12px;
    height: 18px;
  }
  .slider1 .slick-next {
    right: -30px;
  }
  .slider1 .slick-prev {
    left: -20px;
  }
  */
  .slider1 .slick-dots {
    bottom: 5px;
  }
  .slider1 .slick-dots li {
    margin: 0 2px;
  }
  .slider1 .slick-dots li button:before {
    font-size: 10px;
  }
  #aboutUs h2,
  #quality h2,
  #facility h2,
  #archivept h2,
  #values h2 {
    font-size: 1.8rem;
  }
  #aboutUs {
    padding: 2rem 0 3rem;
  }
  span.ttl-icon {
    margin-bottom: 2rem;
  }
  span.ttl-icon img {
    width: 4rem;
  }
  .button09 {
    width: 90%;
	margin: 3rem auto;
  }
  .button09 a {
    line-height: 30px;
  }
  /*品質管理*/
  #quality {
    padding: 4rem 0 5rem 0;
  }
  #quality .s-ttl {
    margin-bottom: 3rem;
  }
  .sepfr1 {
    display: block;
  }
  .sepfr1 .images {
    margin-bottom: 3rem;
  }
  .sepfr1 .images img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    width: 100%;
  }
  /*設備紹介*/
  #facility {
    position: relative;
    padding: 4rem 0 7rem 0;
  }
  .sepfr2 {
    display: block;
  }
  .sepfr2 .txt {
    margin-bottom: 4rem;
  }
  .sepfr2 .txt .button09 {
    margin-top: 3rem;
  }
  .sepfr2 .images img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    width: 90%;
  }
  /*製品・製作実績*/
  #archivept .s-ttl {
    margin-bottom: 3rem;
  }
  .casefr ul li {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
  .archivept-in {
    padding: 4rem 0 6rem;
  }
  .archive-img {
    margin-top: 2.5rem;
  }
  .archive-img img {
    width: 66%;
  }
  .sepfr1 .txt p {
    margin-bottom: 4rem;
  }
  #values {
    padding-bottom: 4rem;
  }
  #infoList {
    padding: 2rem 0;
  }
  #infoList ul {
    display: block;
    width: 80%;
    max-width: 400px;
  }
  #infoList ul li {
    margin-bottom: 0.5rem;
  }
  /*===================
  事業内容
  ====================*/
  .underTtl {
    padding-top: 3rem;
  }
  .underTtl h1 {
    font-size: 1.8rem;
  }
  .underTtl .s-ttl {
    margin-bottom: 3rem;
  }
  .underTtl .main-desc {
    margin-bottom: 3rem;
    font-family: "IBM Plex Sans JP", sans-serif;
  }
  .underTtl .pagemenu {
    margin-bottom: 3rem;
  }
  .underTtl .pagemenu ul li a {
    padding: 1rem 0.5rem;
  }
  #binding {
    padding: 4rem 0 6rem;
    position: relative;
  }
  #binding h2,
  #equipment h2,
  #servis_naka h2,
  #service_gyaku h2,
  #recruit h2,
  .middle_bg_beige h2
  {
    font-size: 1.8rem;
  }
  #binding h3,
  #equipment h3,
  #service_naka h3,
  #service_gyaku h3,
  #message h3,
  #recruit h3,
  .middle_bg_beige h3,
  .middle_bg_blue h3{
    font-size: 1.5rem;
  }
  #binding::after{
    height: 60rem;
  }
  #message::after{
    height: 60rem;
  }
  
  #binding .s-ttl {
    margin-bottom: 3rem;
  }
  #binding .sepfr1 {
    margin-bottom: 4rem;
  }
  .sepfr1 .txt p {
    margin-bottom: 2rem;
  }
  #equipment {
    padding: 4rem 0;
  }
  
  #service_naka,
  #service_gyaku,
  #recruit{
  	padding: 4rem 1rem 6rem;
  	position: relative;
  }
  
  .middle_bg_beige,
  .middle_bg_blue{
  	padding: 4rem 1rem 4rem;
  	position: relative;
  }
  
  #message{
  	padding: 4rem 1rem 0;
  }

  #service_gyaku,
  .middle_bg_beige,
  .middle_bg_blue {
    margin-top: 4rem;
  }

  #service_naka .s-ttl,
  #service_gyaku .s-ttl{
    margin-bottom: 2rem;
  }
  #service_naka .sepfr1,
  #service_gyaku .sepfr1{
    margin-bottom: 4rem;
    margin-top: 4rem;
  }
  #service_naka .txt-icon,
  #service_gyaku .txt-icon{
    margin-bottom: 2rem;
  }
  #service_naka .txt-icon img{
    width: 30%;
  }
  #service_gyaku .txt-icon img{
    width: 25%;
  }
  
  .sec-desc {
    margin-left: 5%;
    margin-right: 5%;
  }
  .panelgrid {
    grid-template-columns: 1fr 1fr;
    width: 86%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    gap: 2rem 7%;
  }
  .panelgrid img {
    margin-bottom: 0.5rem;
  }
  .panelgrid p {
    font-size: 0.8rem;
  }
  /*===================
  お問合せフォーム
  ====================*/
  .underTtl ul.main-desclist {
    width: 100%;
  }
  
  .recruit-table td strong {
	font-size: 1.2rem;
}

#pp h2,
#pp h3{
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
}

#pp ul {
	margin-bottom: 30px;
}
  
}
@media print, screen and (min-width: 800.1px) {
  .navToggle {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  #headNav {
    display: none;
  }

  
}

@media screen and (max-width: 500px) {
  #headNav {
    display: none;
  }
  #message::after{
    height: 65rem;
  }
  
  #recruit::after{
    height: 75rem;
  }
  
  #mainImg {
  margin-top: 0;
}
  
  
}
@media screen and (max-width: 1340px) {
  /*===================
     header
     ====================*/
  #headLogo img {
    width: 160px;
  }
}