@charset "UTF-8";

.hero {
	background-image: url(../../img/heroimage_other.png);
}

/*===*/


article h2	{
	font-size: 18px;
	color: lightslategray;
	line-height: 20px;
	padding-left: 20px;
	margin-top: 26px;
}

article h1.consult	{
	border-left: 4px solid #994499;
}

article h1.exam	{
	border-left: 4px solid #5544bb;
}

article h1.use	{
	border-left: 4px solid #88bb22;
}

article h1.work	{
	border-left: 4px solid #dd4477;
}

article h1.reference	{
	border-left: 4px solid #aa8866;
}


tbody th	{
	font-weight: normal;
}



.use_guide	{
	text-align: justify;
	margin-right: 20px;
	color: #88bb22;
}
.use_guide span	{
	color: black;
}

/* タブ切り替え　label.formは重複
label.tab_item,
label.form	{
cursor: default;
position: relative;
}
*/

.tabs {
}

.tab_item {
width: 100%;
box-sizing: border-box;
border-bottom: 1px dotted white;
text-align: center;
padding: 10px;
display: block;
background-color: #dddde4;
}
.tab_item:hover {
opacity: 0.75;
cursor: pointer;
}

input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#consult:checked ~ #consult_contact,
#exam:checked ~ #exam_contact,
#use:checked ~ #use_contact,
#work:checked ~ #work_contact,
#refer:checked ~ #refer_contact {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: lightslategray;
  color: #fff;
}


/* フォーム（メルマガ派生とは別） */

p.center	{
margin-top: 8px;
margin-bottom: 0;
}

.formselect	{
margin-bottom: 50px;
}

label.form	{
cursor: default;
position: relative;
}

select	{
padding: 6px;
}

textarea	{
width: 100%;
box-sizing:border-box;
padding: 6px;
}

input	{
width: 100%;
box-sizing:border-box;
padding: 6px;
}

.formitem	{
text-align: left;
font-size: 14px;
}

.time	{
width: 80px;
}

/* 送信ボタン */
input[type="reset"],
input[type="submit"]	{
width: auto;
background-color: lightsteelblue;
border: none;
font-size: 15px;
.webkit-appearance: none;
border-radius: 4px;
margin: 4px;
padding: 12px 16px;
}
/* 送信ボタンの色 */
.button_consult:hover{
background-color: #aa66aa;
cursor: pointer;
}
.button_exam:hover{
background-color: #8877ee;
cursor: pointer;
}
.button_use:hover{
background-color: #99cc33;
cursor: pointer;
}
.button_work:hover{
background-color: #ee5588;
cursor: pointer;
}
.button_refer:hover{
background-color: #bb9977;
cursor: pointer;
}

.button_seika:hover{
background-color: paleturquoise;
cursor: pointer;
}

/* indexのボックス */
.contact-item	{
width: 100%;
display: block;
box-sizing:border-box;
background-color: #dddde4;
font-size: 18px;
text-align: center;
margin: 8px 0;
border-radius: 4px;
}

.contact-item a	{
display: block;
border-radius: 4px;
padding: 14px;
}

.item-consult:hover{
background-color: #aa66aa;
}
.item-exam:hover{
background-color: #8877ee;
}
.item-use:hover{
background-color: #99cc33;
}
.item-work:hover{
background-color: #ee5588;
}
.item-refer:hover{
background-color: #bb9977;
}
.item-develop:hover{
background-color: #5599ee;
}

@media (min-width: 768px) {
/* タブ切り替え */
.tab_item {
width: 50%;
border-right: 1px dotted white;
padding: 8px;
float: left;
}
/* indexhtmlのBOX */
.item-flex	{
display: flex;
justify-content: space-between;
}
.contact-item	{
width: 49%;
}
.contact-item a	{
padding: 30px;
}

/* フォーム */
textarea	{
width: 708px;
}

input	{
width: 500px;
}
	/* ↑inputの幅指定を打ち消す
.checkbox	{
	width: auto;
}
*/

.itemarea	{
display:inline-block;
text-align: right;
width: 168px;
}

.formitem	{
text-align: center;
}


/* inputのclass指定 */

.form input.itemshort	{
width: 240px;
}
.form .inputarea	{
width: 500px;
display:inline-block;
text-align: left;
}

.date	{
	display: flex;
	justify-content: center;
}
}

@media (min-width: 1000px) {
/* タブ切り替え */
.tab_item {
width: 20%;
border-bottom: none;
}
}