@charset "utf-8";



/* voice.html  ******************************************************************/

.voice_top01{
	background: linear-gradient(rgba(25, 141, 169, .6),  rgba(25, 141, 169, .6)),  url("../img/voice0101.jpg"); 
	background-size:cover;
	color:#fff;
    width: 100%;
    height: 700px;
	writing-mode: vertical-rl;
}

.voice_top02{
	background: linear-gradient(rgba(25, 141, 169, .6),  rgba(25, 141, 169, .6)),  url("../img/voice0201.jpg"); 
	background-size:cover;
	color:#fff;
    width: 100%;
    height: 700px;
	writing-mode: vertical-rl;
}

.voice_top03{
	background: linear-gradient(rgba(25, 141, 169, .6),  rgba(25, 141, 169, .6)),  url("../img/voice0301.jpg"); 
	background-size:cover;
	color:#fff;
    width: 100%;
    height: 700px;
	writing-mode: vertical-rl;
}

.voice_title01{
	font-size: 25px;
    position: relative;
    top: 200px;
    right: 200px;
}

.voice_title02{
	writing-mode: horizontal-tb;
	font-size: 15px;
    position: relative;
    top: 500px;
    right: 300px;

}

.voice_title02 span{
	font-size: 1.9rem;
	padding-left: 10px;
	color: #fff;

}



.voice_left{
	float: left;
	max-width: 500px;
}
.voice_right{
	float: right;
	max-width: 500px;
}



.box_sub01{
	max-width: 50px;
    margin: 0 0 0 auto;
}

.box_sub02{
	font-size: 1.8rem;
	line-height: 1.7;
	text-align: left;
	padding: 10px;
}

.box_sub03{
	font-size: 1.2rem;
	text-align: left;
	color: #3CC7CB;
	padding: 10px;
}

.box_sub04{
	font-size: 0.9rem;	
	text-align: left;
	padding: 10px 20px 10px 10px;
}

.box_sub05{
	font-size: 2.7rem;	
	text-align: left;
	line-height: 1.4;
	padding-left: 40px;
}

.box_sub06{
	font-size: 1.4rem;	
	text-align: left;
	padding-left: 150px;
	line-height: 1em;
}

.blue{
	background-color: #000056;
	color: #FFF;
}

@media screen and (max-width: 640px) {
	
	.voice_top01, .voice_top02, .voice_top03{
		width: 100%;
		height: 300px;
		margin: 32px 0 50px 0;
	}
	
	
	.voice_title01{
		font-size: 18px;
		top: 20px;
		right: 10px;
	}
	
	.voice_title02{
		font-size: 11px;
		top: 200px;
		right:20px;
	
	}
	.voice_title02 span{
		font-size: 1.2rem;
		padding-left: 10px;
	
	}

	.box_sub01{
		max-width: 50px;
		margin: 20px auto auto auto;
	}
	.box_sub02{
		font-size: 1.5rem;
	}
	.box_sub04{
		font-size: 0.9rem;	
		text-align: left;
		padding: 10px 15px 30px 20px;
	}

	.box_sub05{
		font-size: 2.7rem;	
		text-align: center;
		padding-left: 0px;
	}
	
	.box_sub06{
		font-size: 1.4rem;	
		text-align: center;
		padding-left: 0px;
	}
	
}





/* faq.html  ********************************/

.qa-6 {
    margin-bottom: 5px;
    border-bottom: 1px solid #999;
}

.qa-6 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2em 2em 2em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
	position: relative;
}

.qa-6 summary::before,
.qa-6 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-6 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-6 summary::after {
  content: '';
  position: absolute;
  right: 1em; /* ←右端に固定 */
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  transition: transform .5s;
}

.qa-6[open] summary::after {
    transform: rotate(225deg);
}

.qa-6 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-6[open] p {
    transform: none;
    opacity: 1;
}

.qa-6 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

summary::-webkit-details-marker {
      display: none;
}
summary {
      list-style: none; /* list-item によって表示されるスタイルを削除する */
}






/* contact.html  ******************************************************************/


/* Forms
--------------------------------------- */
textarea, select, input, button, label{-webkit-appearance: none;}

form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
textarea, select, button{resize:none; outline:none; color:inherit; font-family:inherit; vertical-align:middle;}
:required, :invalid{outline:none; box-shadow:none;}

#newsletter input, #newsletter button, #newsletter select, #newsletter textarea{border:none; margin: 0 0 10px 0; vertical-align: top;}
#newsletter input, #newsletter textarea, #newsletter select{display:block; width:90%; padding:15px; vertical-align:top; border:solid 1px #C9C9C9;}
#newsletter input.inputin02{display:block; width:50%; padding:15px; vertical-align:top; border:solid 1px #999;}

#newsletter select{padding:10px; font-size:inherit;}
#newsletter button{padding:8px 50px 10px; border:none; background:#CCC; text-transform:uppercase; font-weight:700; cursor:pointer;}
#newsletter input[type="radio"]{display:inline-block; width:5%; outline:none; font-size:inherit; vertical-align: bottom;}
#newsletter input[type="checkbox"]{display:inline-block; width:20px; outline:none; font-size:inherit; vertical-align:bottom;}


.required {
  background-color: #fff0f0; /* 薄い赤 */
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.required.filled {
  background-color: #ffffff; /* 入力済みは白に戻す */
}

@media screen and (max-width: 640px) {
}



/* maker.html  ******************************************************************/

.tab-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 1em;
}

.tab-menu {
  display: flex;
  flex-direction: column;
  width: 6em;
  flex-shrink: 0;
}

.tab-menu .tab {
  padding: 12px;
  border: 1px solid #ccc;
  border-right: 4px solid transparent;
  background: #f9f9f9;
  cursor: pointer;
  text-align: left;
  border-radius: 6px 0 0 6px;
  margin: 0 0 5px 0;
}

.tab-menu .tab.active {
  background: #11b5b6;
  color: white;
  border-left: 4px solid #0e9999;
}

.tab-content-wrapper {
  flex: 1;
  /* border: 1px solid #ccc; */
  padding: 1em;
  background: #fff;
  min-height: 300px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}


@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
	}
	.cp_tab > input + label {
	font-size: 0.7em;
	}
	.cp_tab .cp_tabpanels {
	padding: 0px 10px 10px 0px;
	left: 5em;
	min-width: 7em;
	}
	.cp_tab .cp_tabpanel {
		padding: 0px 10px 10px 20px;
		min-height: auto; /* 追加推奨 */
	}

}



table {
  width:90%;
  margin: auto;
}

table.tbl_r02 tr, table.tbl_r03 tr {
  border-top: dotted 1px #ccc;
}
table.tbl_r02 tr:last-child, table.tbl_r03 tr:last-child {
  border-bottom: dotted 1px #ccc;
}
table.tbl_r02 th {
  background: #EFF1F3;
  padding: 20px 10px;
  width: 30%;
  text-align:center;
}

table.tbl_r02 td {
  padding: 10px 10px 10px 15px;
  font-size: 0.95rem;
  width: 70%;
}

 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  table.tbl_r02 {
    width: 100%;
  }
  table.tbl_r02 th,
  table.tbl_r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
  table.tbl_r02 td {
  padding: 10px 10px 30px 10px;
  }  
}


/* product.html 自社製品 ******************************************************************/


.product_box01{background-color:#E1F3F7; padding: 30px 30px;}





/* product.html 取扱製品 ******************************************************************/


.plineup_box01{padding: 30px 30px; border:solid 6px #E1F3F7;}



table.tbl_r03 {
  width:100%;
  margin: auto;
}
table.tbl_r03 th {
  background: #fff;
  padding: 20px 10px;
  width: 20%;
  text-align:center;
}

table.tbl_r03 td {
  padding: 10px 10px 10px 15px;
  font-size: 0.95rem;
  width: 80%;
}

 
@media screen and (max-width: 640px) {
	table.tbl_r03 th {
	  width: 40%;
	  display:block;
	  padding: 20px 10px 0px 8px;
	}
	
	table.tbl_r03 td {
	  width: 100%;
	  padding: 10px 0px 10px 10px;
	  display:block;
}
}


/* recruit.html  ******************************************************************/

.recruit_top{
	background: linear-gradient(rgba(25, 141, 169, .5),  rgba(25, 141, 169, .5)),  url("../img/recruit01.jpg"); 
	background-size:cover;
	color:#000;
    width: 100%;
    height: 700px;
    float: right;
    clip-path: xywh(400px 0px 100% 100% round 400px);
}
.recruit_title01{
	font-size: 40px;
	text-align: center;
	padding-bottom: 50px;
}


.grid {
  display: grid;
  width: 100%;
  max-width: 100%;
}
 
.contents_three {
  display: grid;
  grid-template-columns: 17% 60% 23%;
  grid-gap: 20px;
}
 
.left_re {
	writing-mode: vertical-lr;
	font-size: 2.5rem;

}
 
.center_re {
	font-size: 1rem;
	line-height: 1.7em;
}

.right_re {

}

.contents_three02 {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 20px;
}

.org{
	margin: 0 auto;
	max-width: 70%;
}


 
@media screen and (max-width: 640px) {
	.contents_three {grid-template-columns: 1fr;}
	.contents_three02 {grid-template-columns: 1fr;}
	
	.left_re {margin: 10px 20px 30px 100px; font-size: 1.9rem;}
	.center_re {margin: 20px;}
	.right_re {margin: 20px;}
	.left_re02 {margin: 20px;} 
	.center_re02 {margin: 20px;}
	.right_re02 {margin: 20px;}
	
	.contents_three {
	  display: block;
	}
	.recruit_title01{
	font-size: 35px;
	}

}


/* テーブルレイアウト
--------------------------------------------------------------------------------------------------------------- */

table {
  margin: auto;
}
.tbl-r02 th {
  background: #e5e5e5;
　border-top: 1px solid #B0B0B0;
  border-bottom: 1px solid #B0B0B0;
  padding: 20px 10px;
  width:20%;
}
.tbl-r02 td {
　border-top: 1px solid #B0B0B0;
  border-bottom: 1px solid #B0B0B0;
　border: solid 1px #ccc;
  padding: 20px 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 94%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
  .tbl-r02 td {
  padding: 15px 10px 40px 10px;
  }
}






/* news.html  ******************************************************************/

.news_box{
	padding: 30px;
}

.day{
	font-size: 0.9rem;
	color: #3CC7CB;
	font-weight: 500;
}

.news_sub{
	font-weight: 500;
	padding-bottom: 15px;
}

.news_main{
	font-size: 0.95rem;
}