﻿/* ************************************** _

タイトル：base.css

概要：全ページ共通となるベースCSSファイル

_ ************************************** */


/* kill 'Browser standard style'
---------------------------------------------------------------------------- */
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
/*
body,html{
min-width:980px;
}
*/

body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,table,th,td,
form,select,option,address,pre,
strong,em{
	font-size:100%;
	font-style:normal;
	font-weight:normal;
	margin:0;
	padding:0;
	text-decoration:none;
}


/* Re style
---------------------------------------------------------------------------- */

a { color: #45A5D6; text-decoration: none;}
a:hover { color: #64b9e5; text-decoration: underline;}
/*a:visited { color: #3688BA;}*/

strong { font-weight: bold; }
em     { font-style: normal; }

img {
	border: 0;
	max-width: 100%;
	vertical-align: bottom;
  	height: auto;
}

hr { display:none; }

p {
	margin-top: 0;
	padding-bottom: 0;
	line-height: 1.75;
}

li { margin: 0; list-style: none; }

ul ul, ol ul, ul ol, ol ol,dl ul, dl ol, dl dl, td td, dt label { font-size: 100%; }

input[type="text"]{
	font-family: 'Lato', sans-serif!important;
}
input::placeholder,textarea::placeholder{color:#ccc;}

textarea{
	font-family: 'Lato', sans-serif!important;
}

table { border-collapse: collapse; }
table tr.attention_bg{background-color: #ffcdcd!important;}
table.td_migiyose td{text-align:right;}
.bg1{background-color: #fffef2;}

/* table
================================================== */
/*2段組みtable*/
table.basetable{
	width:100%;
	border-top:1px solid #ccc;
}
table.basetable th{
	width:30%;
	padding:10px 10px 10px 27px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
	font-weight:bold;
}
table.basetable td{
	padding:10px 10px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
}
table.basetable tr:nth-child(even) {
	background: #f7f7f7;
}

@media screen and (max-width: 480px) {
	table.basetable th{
		display:block;
		padding:5px 5px 0 5px;
		width:100%;
		border-bottom:0px solid #ccc;
	}
	table.basetable td{
		padding:5px 5px 10px 5px;
		display:block;
		width:100%;
		
	}
}

@media screen and (max-width: 736px) {
.scroll table{
width:100%;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}
}

/*2段組みtable*/
table.basetable2{
	width:100%;
	border-top:1px solid #ccc;
}
table.basetable2 th{
	width:40%;
	padding:5px 10px 5px 27px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
	font-weight:normal;
}
table.basetable2 td{
	padding:5px 10px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
}
table.basetable2 tr:nth-child(even) {
	background: #f7f7f7;
}

/*3段組みtable 見積もり */
table.acounttable{
	width:100%;
	border-top:1px solid #ccc;
}
table.acounttable th{
	/*width:33.333%;*/
	width: 100%;
	padding:10px 10px 10px 10px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
	font-weight:normal;
	text-align:center;
	
}
table.acounttable td{
	padding:10px 10px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
	text-align:left;
	/*width:28%;*/
}
table.acounttable td:nth-child(4){
	width:14%;
}
@media screen and (max-width: 736px) {
	table.acounttable{
		width:736px;
	}
}


/*3段組み 数字パネルtable*/
table.basetable3dan{
	width:210px;
	margin:0 auto 20px auto;
	text-align:center;
}
table.basetable3dan th{
	width:70px;
	padding:2px;
	vertical-align: middle;
	font-weight:normal;
}
table.basetable3dan td{
	padding:2px;
	vertical-align: middle;
	width:70px;
	text-align:center;
}
table.basetable3dan td input[type="text"] , table.basetable4dan td input[type="textarea"] , table.basetable4dan td input[type="number"]{
	width:100%;
}
table.basetable3dan td input[type="button"]{
    display: inline-block;
	width:70px;
	height:60px;
    text-decoration: none;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    color: #FFF;
    border-bottom: solid 4px #333;
    border-radius: 3px;
	font-size:20px;
}

table.basetable3dan td input[type="button"]:active {/*ボタンを押したとき*/
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

/*4段組みの見出し用 table*/
table.koumokutable4dan{
	width:100%;
	margin:0
}
table.koumokutable4dan th{
	width:30%;
}
table.koumokutable4dan td{
	text-align:center;
}
table.koumokutable4dan td:nth-child(2+3){
	width:20%;
}
table.koumokutable4dan td:nth-child(4){
	width:30%;
}

/*4段組み table*/
table.basetable4dan{
	width:100%;
	margin-bottom:50px;
	border-top:1px solid #ccc;
}
table.basetable4dan th{
	width:30%;
	padding:5px 10px 5px 27px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
	font-weight:normal;
}
table.basetable4dan td{
	padding:5px 10px;
	vertical-align: middle;
	border-bottom:1px solid #ccc;
}
table.basetable4dan td input[type="text"] , table.basetable4dan td input[type="textarea"] , table.basetable4dan td input[type="number"]{
	width:100%;
}
table.basetable4dan td:nth-child(2+3){
	width:20%;
}
table.basetable4dan td:nth-child(4){
	width:30%;
}
table.basetable4dan tr:nth-child(even) {
	background: #f7f7f7;
}

/*7段組みtable*/
table.ichirantable7{
	width:100%;
	margin:0
}
table.ichirantable7 th{
	font-weight:normal;
	text-align:center;
	padding:0 10px;
}

table.ichirantable7 th:nth-child(1){
	width:55px;
}
table.ichirantable7 th:nth-child(2){
	width:20px;
}
table.ichirantable7 th:nth-child(3){
	width:460px;
}
table.ichirantable7 th:nth-child(4){
	width:140px;
}
table.ichirantable7 th:nth-child(5){
	width:180px;
}
table.ichirantable7 th:nth-child(6){
	width:55px;
}
table.ichirantable7 th:nth-child(7){
	width:90px;
}
table.ichirantable7 td{
	padding:5px 10px;
	vertical-align: middle;
	text-align:right;
	line-height:1.3;
	
}
table.ichirantable7 td input[type="text"] , table.ichirantable7 td input[type="textarea"] , table.ichirantable7 td input[type="number"]{
	width:100%;
}
table.ichirantable7 td:nth-child(1){
	width:55px;
}
table.ichirantable7 td:nth-child(2){
	width:20px;
}
table.ichirantable7 td:nth-child(3){
	width:460px;
	text-align:left;
}
table.ichirantable7 td:nth-child(4){
	width:140px;
}
table.ichirantable7 td:nth-child(5){
	width:180px;
}
table.ichirantable7 td:nth-child(6){
	width:55px;
}
table.ichirantable7 td:nth-child(7){
	width:90px;
}
table.ichirantable7 tr:nth-child(even) {
	background: #f7f7f7;
}
table.ichirantable7 tr:nth-child(1) {
	background: #fff;
}
table.ichirantable7 tr:nth-child(2) {
	background: #fff;
	border-bottom:1px solid #ccc;
}
table.ichirantable7 tr:nth-child(n + 2) {
	border-bottom:1px solid #ccc;
}

/*5段組みtable*/
table.basetable5{
	width:100%;
	table-layout: fixed;
	margin:0
}
table.basetable5 tr{
	position: relative;
}
table.basetable5 tr[data-href]:hover {
    background: #ffe28f!important;
	cursor: pointer
}

table.basetable5 th{
	font-weight:bold;
	text-align:center;
	padding:10px 10px;
}

table.basetable5 td{
	padding:10px 10px;
	vertical-align: middle;
	line-height:1.3;
	text-align:center;
}
table.basetable5 td:nth-child(1){
	text-align:left;
}
table.basetable5 td:nth-child(3){
	text-align:left;
}


table.basetable5 tr:nth-child(even) {
	background: #f7f7f7;
}
table.ichirantable tr:nth-child(1) {
	background: #fff;
}
table.ichirantable tr:nth-child(2) {
	background: #fff;
	border-bottom:1px solid #ccc;
}
table.ichirantable tr:nth-child(n + 2) {
	border-bottom:1px solid #ccc;
}


/*6段組みtable*/
table.ichirantable{
	width:100%;
	margin:0
}
table.ichirantable th{
	font-weight:normal;
	text-align:center;
	padding:0 10px;
}

table.ichirantable th:nth-child(1){
	width:55px;
}
table.ichirantable th:nth-child(2){
	width:480px;
}
table.ichirantable th:nth-child(3){
	width:150px;
}
table.ichirantable th:nth-child(4){
	width:150px;
}
table.ichirantable th:nth-child(5){
	width:55px;
}
table.ichirantable th:nth-child(6){
	width:90px;
}
table.ichirantable td{
	padding:5px 10px;
	vertical-align: middle;
	text-align:right;
	line-height:1.3;
	
}
table.ichirantable td input[type="text"] , table.ichirantable td input[type="textarea"] , table.ichirantable td input[type="number"]{
	width:100%;
}
table.ichirantable td:nth-child(1){
	width:55px;
}
table.ichirantable td:nth-child(2){
	width:480px;
	text-align:left;
}
table.ichirantable td:nth-child(3){
	width:150px;
}
table.ichirantable td:nth-child(4){
	width:150px;
}
table.ichirantable td:nth-child(5){
	width:55px;
}
table.ichirantable td:nth-child(6){
	width:90px;
}
table.ichirantable tr:nth-child(even) {
	background: #f7f7f7;
}
table.ichirantable tr:nth-child(1) {
	background: #fff;
}
table.ichirantable tr:nth-child(2) {
	background: #fff;
	border-bottom:1px solid #ccc;
}
table.ichirantable tr:nth-child(n + 2) {
	border-bottom:1px solid #ccc;
}

/* 2カラム用　*/
ul.radio_2column{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:100%;
}

ul.radio_2column li{
	text-align:right;
}
ul.radio_2column li:first-child{
	flex-basis:60%;
	max-width:60%;
	text-align:left;
}
ul.radio_2column li:last-child{
	flex-basis:40%;
	max-width:40%;
	text-align:right;
}


table.ichirantable tr:nth-child(even) {
	background: #f7f7f7;
}


/* フォームまわり
---------------------------------------------------------------------------- */
input, button, textarea, select , submit , password {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	font: 1.0em  "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック Medium" , "Yu Gothic Medium" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

input[type="text"] , input[type="textarea"] , input[type="number"] , input[type="password"], input[type="mail"], input[type="search"], textarea {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
  outline: 0;
}
input[type="text"] , input[type="textarea"] , input[type="number"] , input[type="password"], input[type="mail"], input[type="search"], textarea {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color ease .2s;
}

input[type="text"]:focus , input[type="textarea"]:focus , input[type="number"]:focus, input[type="mail"]:focus , input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: #F0B200;
}



.suuji{width:100px;}
.wd10per{width:10%!important;}
.wd15per{width:15%!important;}
.wd20per{width:20%!important;}
.wd30per{width:30%!important;}
.wd35per{width:35%!important;}
.wd40per{width:40%!important;}
.wd45per{width:45%!important;}
.wd50per{width:50%!important;}
.wd55per{width:55%!important;}
.wd60per{width:60%!important;}
.wd70per{width:70%!important;}
.wd75per{width:75%!important;}
.wd80per{width:80%!important;}
.wd90per{width:90%!important;}
.wd100per{width:100%!important;}

.wd200px{width:200px!important;}

/* html5
---------------------------------------------------------------------------- */
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary
{
	display:block;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}


/* body 
---------------------------------------------------------------------------- */
body {
    padding: 0;
    color: #333333;
    /* font: 1.1em 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif; */
    font-size: 1.2em;
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;
    /* font-family: 'Lato', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; */
    line-height: 1.75;
    background: #fff;
    overflow-x: hidden;
    padding-top: 80px;
    background: #F2F2F2;
}
@media screen and (max-width: 736px) {
body{
	font-size:1.1em;
}
}


/* wrapper
---------------------------------------------------------------------------- */
#wrapper{
	margin: 0 auto;
	width: 100%;
	text-align: left;
}

/* container
---------------------------------------------------------------------------- */
#container{
	width: 100%;
	margin: 0 auto;
	
}

/* header
---------------------------------------------------------------------------- */
#header{
	width: 100%;
	background: rgba(255,255,255,0.8);
	height:80px;
	position:fixed;
	top:0px;
	left:0px;
	z-index:999;
}
#header.login{
	background: none;
}
#header .inner{
	padding:0 10px;
	margin: 0 auto;
	position: relative;
}
#header .inner h1{
	/*padding-top:10px;*/
	position:fixed;
	top:20px;
	left:20px;
	/*width:100%;
	height:100%;*/
}
#header .inner h1 img{
	width:205px;
	height:35px;
	position:relative;
}
#header .inner h1::after {
    content: "2026";
    color: #333;
    font-size: 120%;
    line-height: 0;
    padding-left: 8px;
    font-weight: bold;
}
.fixed{
    position:fixed;
    top:0;
  }


#header .catlog_wrap{
	display: flex;
	/*flex-direction:row-reverse;*/
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items:stretch;
	align-content:stretch;
	width:100%;
}

#header .catlog_wrap .tanto_btn_wrap{
	flex-basis: 200px;
	max-width: 200px;
	padding-top:14px;
}

#header .catlog_wrap .tanto_btn {
  display: inline-block;
  width: 200px;
  height: 45px;
  text-align: center;
  text-decoration: none;
  line-height: 45px;
  outline: none;
	font-size:70%;
	font-weight:bold;
}


#header .catlog_wrap .tanto_btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
#header .catlog_wrap .tanto_btn,
#header .catlog_wrap .tanto_btn::before,
#header .catlog_wrap .tanto_btn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#header .catlog_wrap .tanto_btn {
  background-color: #E8340C;
	box-shadow: 2px 2px 0 #8b1900;
  color: #fff;
}
#header .catlog_wrap .tanto_btn:hover {
  background-color: #fb7b5e;
	box-shadow: 2px 2px 0 #ba3a1d;
}
#header .catlog_wrap .tanto_btn:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 24px;/*画像の幅*/
  height: 24px;/*画像の高さ*/
  background-image: url(../images/cmn_img/head_catlog.png);
  background-size: contain;
  vertical-align: middle;
}

@media screen and (max-width: 860px) {
#header{
	height:65px;
}
#header .inner h1{
	top:10px;
	left:10px;
}
#header .inner h1 img{
	max-width:160px;
	max-height:27px;
}
#header .inner h1::after {
	font-size: 80%;
	line-height:0;
}
#header .catlog_wrap .tanto_btn_wrap{
	flex-basis: 160px;
	max-width: 160px;
	padding-top:8px;
	height: 35px;
}
#header .catlog_wrap{
	padding-right:58px;
}
#header .catlog_wrap .tanto_btn {
  	width: 160px;
	height: 40px;
	line-height:42px;
}
#header .catlog_wrap .tanto_btn:before {
  width: 22px;/*画像の幅*/
  height: 22px;/*画像の高さ*/
}
}
@media screen and (max-width: 480px) {
#header .inner h1{
	top:12px;
}
#header .inner h1 img{
	max-width:160px;
	max-height:27px;
}
#header .catlog_wrap{
	/*display:none;*/
	padding-right:0;
	position:fixed;
	right:5px;
	top:30px;
}
}
@media screen and (max-width: 374px) {
#header .catlog_wrap .tanto_btn_wrap{
	display:none;
}


}

nav.gnavi{
	width:100%;
	background-color:#F0B200;
}
nav.gnavi ul{
	display: flex;
    justify-content: space-between;
	/*flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items:stretch;
	align-content:stretch;*/
	width:100%;
	max-width:1240px;
	margin: 0 auto;
}
/*space-between で4つの時に左寄せ*/
/*nav.gnavi ul::after,
nav.gnavi ul::before {
	content: "";
	display: block;
	width: 20%;
	height: 0;
}*/
/*
nav.gnavi ul::before {
	order: 1;
}
*/
nav.gnavi ul li{
	/*flex-basis: 20%;
	max-width: 20%;/*/
	width: 100%;
	font-size:90%;
	/*padding:15px 0 15px 0;*/
	font-weight:bold;
	text-align:center;
	border-right:1px solid #fff;
	height:60px;
	line-height:60px;
}
nav.gnavi ul li:first-child{
	border-left:1px solid #fff;
}
nav.gnavi ul li a{
	color:#333;
	display:block;
}
nav.gnavi ul li a:hover{
	color:#fff;
}
@media screen and (max-width: 736px) {
nav.gnavi{
	width:60%;
	padding:0 2% 0 0;
}
nav.gnavi ul{
	justify-content: space-between;
}
nav.gnavi ul li{
	text-align:left;
}
}

/* content
---------------------------------------------------------------------------- */

#content{
	width: 100%;/*1200px*/
	margin: 0 auto;
}

.loginaccount{
	font-size:70%;
	text-align:right;
	border-bottom:1px solid #333;
	display: inline-block;
	line-height:1.0;
	float:right;
	margin:30px 5px 0 5px;
}
.loginaccount:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 18px;/*画像の幅*/
  height: 18px;/*画像の高さ*/
  background-image: url(../images/cmn_img/usericon.svg);
  background-size: contain;
  vertical-align: middle;
}

/*メインコンテンツ*/
#content #primaryContent{
	max-width: 1240px;
	width:100%;
	margin: 0 auto;
	/*padding-top:8px;*/
	/*margin-top:-9px;*/
}
#content #primaryContent_iframe{
	width: 100%;
	margin: 0 auto;
	padding-top:20px;
}

.mainwrap{
	padding:30px 20px 20px 20px;
	background-color: #fff;
}


.submitwrap{
	text-align: center;
	padding:50px 0;
	max-width:940px;
	width:100%;
	margin:0 auto;
}
.submitwrap_dammy{
	text-align: center;
	padding:50px 0;
}


.submitwrap ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	max-width:940px;
	width:100%;
}
.submitwrap ul li{
	flex-basis: 30%;
	max-width: 30%;
	margin-bottom:20px;
}

/*登録ボタン*/
.button {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
	margin: 0;
}
.button.wd30 {
  max-width: 300px;
	width:100%;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button {
  background-color: #f0b200;
  color: #fff;
}
.button:hover {
  background-color: #ffd671;
	color:#fff;
	text-decoration: none;
}
/*赤ボタン*/
.redbutton {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
}
.redbutton.wd30 {
  width: 300px;
}
.redbutton::before,
.redbutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.redbutton,
.redbutton::before,
.redbutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.redbutton {
  background-color: #ff3e4c;
  color: #fff;
}
.redbutton:hover {
  background-color: #ff6470;
	color:#fff;
	text-decoration: none;
}

/*オレンジボタン*/
.orangebutton {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
}
.orangebutton.wd30 {
  max-width: 300px;
}

.orangebutton::before,
.orangebutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.orangebutton,
.orangebutton::before,
.orangebutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.orangebutton {
  background-color: #F0B200;
  color: #fff;
}
.orangebutton:hover {
  background-color: #ffd250;
	color:#fff;
	text-decoration: none;
}

@media screen and (max-width: 380px) {
.orangebutton.wd30 {
  max-width: 300px;
}
}

/*緑ボタン*/
.greenbutton {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
}
.greenbutton.wd30 {
  max-width: 300px;
	width:100%;
}
.greenbutton::before,
.greenbutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.greenbutton,
.greenbutton::before,
.greenbutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.greenbutton {
  /*background-color: #8de229;*/
	background-color: #F0B200;
  color: #fff;
}
.greenbutton:hover {
  /*background-color: #a9ea5d;*/
	background-color: #ffd250;
	color:#fff;
	text-decoration: none;
}
/*青ボタン*/
.bluebutton {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
}
.bluebutton.wd30 {
  max-width: 300px;
	width:100%;
}
.bluebutton::before,
.bluebutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bluebutton,
.bluebutton::before,
.bluebutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.bluebutton {
  background-color: #333;
  color: #fff;
}
.bluebutton:hover {
  background-color: #999;
	color:#fff;
	text-decoration: none;
}

/*黒ボタン*/
.kurobutton {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
}
.kurobutton.wd30 {
  max-width: 300px;
	width:100%;
}
.kurobutton.normal {
  width: auto;
	border-radius: 0;
	height:auto;
	padding:0 10px;
	line-height: 30px;
}
.kurobutton::before,
.kurobutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.kurobutton,
.kurobutton::before,
.kurobutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.kurobutton {
  background-color: #fff;
	outline: 3px solid #333;
  outline-offset: -3px;
  color: #333;
}
.kurobutton:hover {
  background-color: #333;
	outline: 3px solid #333;
  outline-offset: -3px;
	color:#fff;
	text-decoration: none;
}


/*新規登録ボタン*/
.shinkibutton {
  display: inline-block;
  width: 150px;
  /*height: 54px;*/
  text-align: center;
  text-decoration: none;
  line-height: 36px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.shinkibutton::before,
.shinkibutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.shinkibutton,
.shinkibutton::before,
.shinkibutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.shinkibutton {
  background-color: #F0B200;
  color: #fff;
  padding: 0.5rem 1rem;
  width: 12rem;
  margin-left: 1rem;

}
.shinkibutton:hover {
  background-color: #ffd250;
	color:#fff;
	text-decoration: none;
}

/*新規登録ボタン2　細い*/
.shinkibutton2 {
  display: inline-block;
  width: 150px;
  height: 36px;
  text-align: center;
  text-decoration: none;
  line-height: 28px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.shinkibutton2::before,
.shinkibutton2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.shinkibutton2,
.shinkibutton2::before,
.shinkibutton2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.shinkibutton2 {
  background-color: #8de229;
  color: #fff;
}
.shinkibutton2:hover {
  background-color: #a9ea5d;
	color:#fff;
	text-decoration: none;
}


/*削除ボタン*/
.sakujyobutton {
  display: inline-block;
  width: 55px;
  /*height: 54px;*/
  text-align: center;
  text-decoration: none;
  line-height: 36px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.sakujyobutton::before,
.sakujyobutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.sakujyobutton,
.sakujyobutton::before,
.sakujyobutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


.sakujyobutton {
  background-color: #ff3e4c;
  color: #fff;
}
.sakujyobutton:hover {
  background-color: #ff6470;
	color:#fff;
	text-decoration: none;
}

/*検索ボタン*/
.kensakubutton {
  display: inline-block;
  width: 55px;
  /*height: 54px;*/
  text-align: center;
  text-decoration: none;
  line-height: 36px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.kensakubutton.wd100 {
  width:100%;
}
.kensakubutton::before,
.kensakubutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.kensakubutton,
.kensakubutton::before,
.kensakubutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.kensakubutton {
  background-color: #F0B200;
  color: #fff;
}
.kensakubutton:hover {
  background-color: #ffd250;
	color:#fff;
	text-decoration: none;
}


/*編集ボタン*/
.hensyubutton {
  display: inline-block;
  width: 55px;
  /*height: 54px;*/
  text-align: center;
  text-decoration: none;
  line-height: 36px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.hensyubutton.wd100 {
  width:100%;
}
.hensyubutton::before,
.hensyubutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.hensyubutton,
.hensyubutton::before,
.hensyubutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.hensyubutton {
  background-color: #F0B200;
  color: #fff;
}
.hensyubutton:hover {
  background-color: #ffd250;
	color:#fff;
	text-decoration: none;
}

/*編集ボタン2　赤色*/
.hensyubutton2 {
  display: inline-block;
  width: 55px;
  height: 36px;
  text-align: center;
  text-decoration: none;
  line-height: 28px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.hensyubutton2::before,
.hensyubutton2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.hensyubutton2,
.hensyubutton2::before,
.hensyubutton2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.hensyubutton2 {
  background-color: #e22959;
  color: #fff;
}
.hensyubutton2:hover {
  background-color: #f35b83;
	color:#fff;
	text-decoration: none;
}

/*リセットボタン*/
.resetbutton {
  display: inline-block;
  width: 200px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
	margin:25px 0 0 0;
}
.resetbutton::before,
.resetbutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.resetbutton,
.resetbutton::before,
.resetbutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.resetbutton {
  background-color: #e22959;
  color: #fff;
}
.resetbutton:hover {
  background-color: #f35b83;
	color:#fff;
	text-decoration: none;
}

/*絞り込みボタン*/
/*
.conditionsbutton {
  display: inline-block;
  width: 55px;
  text-align: center;
  text-decoration: none;
 ht: 36px;
  line-height: 36px;
	cursor: pointer;
	border-radius: 5px;
	border:1px solid #2AABE4;
}
.conditionsbutton::before,
.conditionsbutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.conditionsbutton,
.conditionsbutton::before,
.conditionsbutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.conditionsbutton {
  background-color: #fff;
  color: #2AABE4;
}
.conditionsbutton:hover {
  background-color: #2AABE4;
	color:#fff;
	text-decoration: none;
}
.conditionsbutton.active {
  background-color: #2AABE4;
	color:#fff;
	text-decoration: none;
}
*/

/* 見出し
---------------------------------------------------------------------------- */
h2{
	background-color: #535353;
	color:#fff;
	font-weight:bold;
	padding: 6px 10px 5px 20px;
	margin-bottom:20px;
}
.kasen_marker_orange {
  background: linear-gradient(transparent 70%, #F0B200 70%);
	font-size:130%;
	font-weight:bold;
	padding-left:8px;
	margin-bottom:30px;
	line-height:1.5;
	width:100%;
}
.kasen_marker_green {
  background: linear-gradient(transparent 70%, #8DE229 70%);
	font-size:130%;
	font-weight:bold;
	padding-left:8px;
	margin-bottom:30px;
	line-height:1.5;
	width:100%;
	
}
.kasen_marker_blue {
  background: linear-gradient(transparent 70%, #F0B200 70%);
	font-size:130%;
	font-weight:bold;
	padding-left:8px;
	margin-bottom:30px;
	line-height:1.5;
	width:100%;
	
}
.orange_ftwh {
  background: #F0B200;
	font-size:150%;
	font-weight:bold;
	padding: 5px 8px 5px 8px; 
	margin-bottom:30px;
	line-height:1.5;
	width:100%;
	color:#fff;
	
}
.blue_ftwh {
  background: #3fa9f5;
	font-size:150%;
	font-weight:bold;
	padding: 5px 8px 5px 8px; 
	margin-bottom:30px;
	line-height:1.5;
	width:100%;
	color:#fff;
	
}
.leftline_m {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #F0B200;/*左線*/
	font-weight:bold;
	margin-bottom:15px;
	color:#F0B200;
	font-size:110%;
}

.centerline_m_wrap {
  text-align: center;
	margin:50px 0 20px 0;
}
.centerline_m {
  position: relative;
  display: inline-block;
  padding: 0 55px;
	font-weight:bold;
}

.centerline_m:before, .centerline_m:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.centerline_m:before {
  left:0;
}
.centerline_m:after {
  right: 0;
}

/* topicPath
---------------------------------------------------------------------------- */
	
#topicPath {
	height: 30px;
	line-height: 32px;
	background: #FFF;
	margin-top: -40px;
	margin-bottom: 30px;
}
	#topicPath ul{
		width: 1200px;
		margin: 0 auto;
		padding: 0 0 0 30px;
		background: #F2F2F2 url(file:///C|/Users/Y.Yamazaki.C-E-S/images/cmn_img/bg_home.gif) no-repeat 10px center;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	#topicPath ul span{
		font-size: 12px!important;  
	}
	
	#topicPath li {   
		display: inline;  
		line-height:110%;   
		list-style-type:none; 
		font-size: 12px!important;  
	}

	#topicPath li.home{
		
	}
		#topicPath li a {   
			margin-right: 3px;   
			padding-right: 13px;   
			background:url(file:///C|/Users/Y.Yamazaki.C-E-S/images/cmn_img/topicpath.gif) no-repeat right center; 
			font-size: 12px!important;    
		}
@media screen and (max-width: 480px) {
	#topicPath{ display: none; }
}

/* タブ
---------------------------------------------------------------------------- */
.tab_wrap{width:980px; margin:0 auto;}
.tab_area{margin:0 10px;}
.tab_area label{width:150px; margin:0 5px; display:inline-block; padding:5px 0; color:#fff; background:#f0b200; text-align:center; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.panel_area{background:#fff;}
.tab_panel{width:100%; padding:20px 20px; display:none;}
.tab_panel p{letter-spacing:1px; text-align:left;}

.tab_area label.active{background:#fff; color:#f0b200;}
.tab_area label.active:hover{opacity:1.0;}
.tab_panel.active{display:block;}

/* footer
---------------------------------------------------------------------------- */

/* pagetop */

#page-top {
    position: fixed;
    bottom: 55px;
    right: 10px;
	z-index: 99999;
}
#page-top a {
    text-decoration: none;
    display: block;
}
#page-top a:hover {
    text-decoration: none;
}

.sp_bottom_menu{
    display:none;
}



footer {
	width: 100%;
	margin : 0 auto;
	background: #2D2D2D;
	clear:both;
	color: #fff;
	font-size:70%;
}
@media screen and (max-width: 1200px) {
	#footer {
		height: auto;
		
	}
}



/*フッターナビゲーション*/

footer .foot_wrap{
	padding: 40px 20px;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items:center;
	width:100%;
}

footer .foot_wrap .foot_logo{
	flex-basis: 100px;
	max-width: 100px;
	margin-right:20px;
}
footer .foot_wrap .foot_logo img{
	width: 100%;
}
footer .foot_wrap .foot_txt{
	flex-basis: 70%;
	max-width: 70%;
}
footer .foot_wrap .foot_txt h3{
	font-weight:bold;
	margin-bottom:8px;
}
footer .foot_wrap #footer-nav {
	margin: auto;
}
footer .foot_wrap a{
	color:#fff;
	text-decoration: none;
}
footer .foot_wrap a:hover{
	color:#BBECFF;
	text-decoration: none;
}

footer .foot_wrap .foot_wrap_r{
	float:right;
	text-align: right;
	width:60%;
}
footer .foot_wrap .foot_wrap_r ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
}

footer .foot_wrap .foot_wrap_r ul li{
	align-items: stretch;
	font-size:15px;
	padding:0 8px;
	margin-bottom:12px;
}
footer .foot_wrap .foot_wrap_r ul li:last-child{
	align-items: stretch;
	font-size:15px;
	padding:0 0 0 8px;
}

footer .foot_wrap .foot_wrap_l{
	float:left;
	width:37%;
}
footer .foot_wrap .foot_wrap_l p{
	line-height:1.5em;
}
footer .copy_wrap .txtlink span{
	margin-right:20px;
}
.copywrite{
	font-size:15px;
	padding-top:48px;
}
.copy{
	max-width:1240px;
	width:100%;
	margin:0 auto;
	text-align:right;
}


/* 汎用てきなもの
================================================== */
input[type="checkbox"],
input[type="radio"] {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
label {
  position: relative;
  display: inline-block;
  word-break: break-all;
  cursor: pointer;
}
label input[type="checkbox"] + span,
label input[type="radio"] + span {
  position: relative;
  padding: 5px 30px 0 28px;
}

label input[type="checkbox"] + span.color{
  position: relative;
  padding: 0 22px  0 20px ;
}




/*ラジオボタン*/
label input[type="radio"] + span::before {
  border-color: #f0b200;
}
label span {
  display: inline-block;
}
label input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
label input[type="radio"] + span::before {
  position: absolute;
  display: inline-block;
  content: '';
  box-sizing: border-box;
  border-radius: 22px;
}
label input[type="radio"] + span::before {
  z-index: 0;
  top: 7px;
  left: 0;
  background-color: transparent;
  width: 22px;
  height: 22px;
  border: 2px #f0b200 solid;
}
label input[type="radio"]:checked + span::before {
  border-width: 6px;
	background-color: #f0b200;
	
}
/*ラジオボタン ボタン風*/
.pop_radio input {
  display:none; 
}

.pop_radio label {
  display:block;
	width:100%;
  color:#333;
  padding:0 10px;
	-webkit-transition: all .3s;
    transition: all .3s;
	padding-left:20px;
}

.pop_radio input[type="radio"]:checked + label { 
  background-color:#f0b200;
	color:#fff;
	border-radius: 30px;
}

/*チェックボックス ボタン風*/
.pop_check input {
  display:none; 
}

.pop_check label {
  display:block;
	width:100%;
  color:#333;
  /*padding:10px 10px;*/
	padding:0px 10px;
	-webkit-transition: all .3s;
    transition: all .3s;
	padding-left:20px;
}

.pop_check input[type="checkbox"]:checked + label { 
  background-color:#f0b200;
	color:#fff;
	border-radius: 30px;
}

/*ラジオボタン ボタン風 クレジット　重量税　自賠責　詳細用*/
.pop_raido_credit input {
  display:none; 
}

.pop_raido_credit label {
  display:block;
	width:100%;
  color:#333;
  /*padding:10px 10px;*/
	padding:0px 10px;
	-webkit-transition: all .3s;
    transition: all .3s;
}

.pop_raido_credit input[type="radio"]:checked + label { 
  background-color:#f0b200;
	color:#fff;
	border-radius: 30px;
}

/*チェックボックス*/
label input[type="checkbox"] + span::before {
  border-color: #f0b200;
}
label input[type="checkbox"]:checked + span::before {
  background-color: #f0b200;
}
label input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
input[type="checkbox"] + span::before, label input[type="checkbox"] + span::after {
  position: absolute;
  top: 7px;
  left: 0;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}
label input[type="checkbox"] + span::before {
  z-index: 0;
  background-color: transparent;
  width: 22px;
  height: 22px;
  border: 2px #f0b200 solid;
  border-radius: 5px;
}
label input[type="checkbox"] + span::after {
  z-index: 1;
  margin: 5px 8px;
  width: 6px;
  height: 9px;
}
label input[type="checkbox"]:checked + span::before {
  background-color: #f0b200;
}
label input[type="checkbox"]:checked + span::after {
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media screen and (max-width: 736px) {
input[type="checkbox"] + span::before, label input[type="checkbox"] + span::after {
  position: absolute;
  top: 4px;
  left: 0;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}
}
/*ポップアップ　チェックボックス*/
/*
.pop_check input {
display: none;
}
.pop_check label {
position: relative;
display: block;
padding: 15px 0;
padding-right: 35px;
cursor: pointer;
}
.pop_check input[type='checkbox'] {
position: absolute;
visibility: hidden !important;
}
.pop_check input[type='checkbox'] + label:before,
.pop_check input[type='checkbox'] + label:after {
position: absolute;
top: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -7.5px;
content: '';
}
.pop_check input[type='checkbox'] + label:before {
right: 0;
width: 60px;
height: 30px;
border: 1px solid #999;
border-radius: 30px;
background: #ffffff;
}
.pop_check input[type='checkbox'] + label:after {
right: 30px;
width: 30px;
height: 30px;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
border-radius: 50%;
background: #999;
}
.pop_check input[type='checkbox']:checked + label:after {
right: 0;
background: #f0b200;
}
*/

/*セレクトボックス*/
.selectbox span.alert {
    color: red;
    font-size: 16px;
}
select{
    margin-top:-0;
	font-size:0.9em!important;
}
.selectbox {
overflow: hidden;
width: auto;
margin: 0 auto;
text-align: center;
position: relative;
border-radius: 2px;
border: 2px solid #f0b200;
background: #ffffff;
display: inline-block;
	vertical-align: bottom
}
.selectbox select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
color: #f0b200;
}
.selectbox select::-ms-expand {
display: none;
}

.selectbox::before {
position: absolute;
top: 0.7em;
right: 0.6em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #f0b200;
pointer-events: none;
}
.selectbox select {
padding: 0 38px 0 8px;
color: #f0b200;
}

.selectbox2 {
overflow: hidden;
width: auto;
margin: 0 auto;
text-align: center;
position: relative;
border-radius: 2px;
border: 2px solid #f0b200;
background: #ffffff;
display: inline-block;
vertical-align: bottom;
height:50px;
line-height:46px;
}
.selectbox2 select {
width: 300px;
padding-right: 1em;
cursor: pointer;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
color: #f0b200;
}
.selectbox2 select::-ms-expand {
display: none;
}

.selectbox2::before {
position: absolute;
top: 1.0em;
right: 0.6em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #f0b200;
pointer-events: none;
}
.selectbox2 select {
padding: 0 38px 0 8px;
color: #f0b200
}

select.syokusyu_select option{
}
select.syokusyu_select option.syokusyu_m{
	font-weight:bold!important;
}


/*ファイル*/
input[type="file"] {
	font-size:16px;	
}


/* ↓↓↓↓↓新規追加 20220627↓↓↓↓↓
---------------------------------------------------------------------------- */
/* 検索
---------------------------------------------------------------------------- */
/*チェックボックス　白　*/
label input[type="checkbox"] + span.color.white::before{
  border-color: #ccc;
}
label input[type="checkbox"]:checked + span.color.white::before {
	background-color: #fff;
}
label input[type="checkbox"]:checked + span.color.white::after {
	border: 2px solid #333;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*チェックボックス　黒　*/
label input[type="checkbox"] + span.color.black::before{
	background-color: #000;
	border-color: #000;
}
label input[type="checkbox"]:checked + span.color.black::before {
	background-color: #000;
}
/*チェックボックス　パール　*/
label input[type="checkbox"] + span.color.pale::before{
	background: linear-gradient(135deg,#f3f4ef 0,#d8d9b6 100%);
	border-color: #d8d9b6;
}
label input[type="checkbox"]:checked + span.color.pale::before {
	background: linear-gradient(135deg,#f3f4ef 0,#d8d9b6 100%);
}
label input[type="checkbox"]:checked + span.color.pale::after {
	border: 2px solid #333;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*チェックボックス　シルバー　*/
label input[type="checkbox"] + span.color.sliver::before{
	background: linear-gradient(135deg,rgba(204,204,204,.4) 0,rgba(0,0,0,.4) 100%);
	border-color: #ccc;
}
label input[type="checkbox"]:checked + span.color.sliver::before {
	background: linear-gradient(135deg,rgba(204,204,204,.4) 0,rgba(0,0,0,.4) 100%);
}
label input[type="checkbox"]:checked + span.color.sliver::after {
	border: 2px solid #333;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*チェックボックス　グレー　*/
label input[type="checkbox"] + span.color.grey::before{
	border-color: #ccc;
	background-color: #ccc;
}
label input[type="checkbox"]:checked + span.color.grey::before {
	background-color: #ccc;
}
label input[type="checkbox"]:checked + span.color.grey::after {
	border: 2px solid #333;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*チェックボックス　ブラウン　*/
label input[type="checkbox"] + span.color.brown::before{
	border-color: #9c7732;
	background-color: #9c7732;
}
label input[type="checkbox"]:checked + span.color.brown::before {
	background-color: #9c7732;
}
/*チェックボックス　パープル　*/
label input[type="checkbox"] + span.color.purple::before{
	border-color: #961891;
	background-color: #961891;
}
label input[type="checkbox"]:checked + span.color.purple::before {
	background-color: #961891;
}
/*チェックボックス　ピンク　*/
label input[type="checkbox"] + span.color.pink::before{
	border-color: #f96bb9;
	background-color: #f96bb9;
}
label input[type="checkbox"]:checked + span.color.pink::before {
	background-color: #f96bb9;
}
/*チェックボックス　レッド　*/
label input[type="checkbox"] + span.color.red::before{
	border-color: red;
	background-color: red;
}
label input[type="checkbox"]:checked + span.color.red::before {
	background-color: #FF0000;
}
/*チェックボックス　ブルー　*/
label input[type="checkbox"] + span.color.blue::before{
	border-color: #2e83ff;
	background-color: #2e83ff;
}
label input[type="checkbox"]:checked + span.color.blue::before {
	background-color: #2e83ff;
}

/*チェックボックス　グリーン　*/
label input[type="checkbox"] + span.color.green::before{
	border-color: #3c3;
	background-color: #3c3;
}
label input[type="checkbox"]:checked + span.color.green::before {
	background-color: #3c3;
}
/*チェックボックス　オレンジ　*/
label input[type="checkbox"] + span.color.orange::before{
	border-color: #fd7600;
	background-color: #fd7600;
}
label input[type="checkbox"]:checked + span.color.orange::before {
	background-color: #fd7600;
}
/*チェックボックス　ゴールド　*/
label input[type="checkbox"] + span.color.gold::before{
	border-color: #c1901d;
	background: linear-gradient(135deg,#fdee9c 0,#c1901d 100%);
}
label input[type="checkbox"]:checked + span.color.gold::before {
	background: linear-gradient(135deg,#fdee9c 0,#c1901d 100%);
}
/*チェックボックス　イエロー　*/
label input[type="checkbox"] + span.color.yellow::before{
	border-color: #fbe926;
	background-color: #fbe926;
}
label input[type="checkbox"]:checked + span.color.yellow::before {
	background-color: #fbe926;
}
label input[type="checkbox"]:checked + span.color.yellow::after {
	border: 2px solid #333;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*チェックボックス　その他　*/
label input[type="checkbox"] + span.color.sonota::before{
	border-color: #e2d300;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f23a3a+1,f23a3a+27,34db48+28,34db48+28,34db48+50,e2d300+52,e2d300+75,ff7c00+77,ff7f04+100 */
background: #f23a3a; /* Old browsers */
background: -moz-linear-gradient(45deg,  #f23a3a 1%, #f23a3a 27%, #34db48 28%, #34db48 28%, #34db48 50%, #e2d300 52%, #e2d300 75%, #ff7c00 77%, #ff7f04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #f23a3a 1%,#f23a3a 27%,#34db48 28%,#34db48 28%,#34db48 50%,#e2d300 52%,#e2d300 75%,#ff7c00 77%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #f23a3a 1%,#f23a3a 27%,#34db48 28%,#34db48 28%,#34db48 50%,#e2d300 52%,#e2d300 75%,#ff7c00 77%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f23a3a', endColorstr='#ff7f04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
label input[type="checkbox"]:checked + span.color.sonota::before {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f23a3a+1,f23a3a+27,34db48+28,34db48+28,34db48+50,e2d300+52,e2d300+75,ff7c00+77,ff7f04+100 */
background: #f23a3a; /* Old browsers */
background: -moz-linear-gradient(45deg,  #f23a3a 1%, #f23a3a 27%, #34db48 28%, #34db48 28%, #34db48 50%, #e2d300 52%, #e2d300 75%, #ff7c00 77%, #ff7f04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #f23a3a 1%,#f23a3a 27%,#34db48 28%,#34db48 28%,#34db48 50%,#e2d300 52%,#e2d300 75%,#ff7c00 77%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #f23a3a 1%,#f23a3a 27%,#34db48 28%,#34db48 28%,#34db48 50%,#e2d300 52%,#e2d300 75%,#ff7c00 77%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f23a3a', endColorstr='#ff7f04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


/*取引ボタン*/
.torihikibutton {
  display: inline-block;
  width: 80px;
  /*height: 54px;*/
  text-align: center;
  text-decoration: none;
  line-height: 36px;
  outline: none;
	cursor: pointer;
	border-radius: 5px;
}
.torihikibutton::before,
.torihikibutton::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.torihikibutton,
.torihikibutton::before,
.torihikibutton::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.torihikibutton {
  background-color: #fff;
  color: #333;
	outline: 2px solid #333;
  outline-offset: -2px;
}
.torihikibutton:hover {
  background-color: #fff;
	color:#999;
	text-decoration: none;
	outline: 2px solid #999;
	outline-offset: -2px;
}

/* trade-list.html 取引き管理
---------------------------------------------------------------------------- */
/*5段組みtable*/
table.ichirantable5{
	width:100%;
	margin:0;
}
table.ichirantable5 tr{
	margin-bottom:20px;
}
table.ichirantable5 th{
	font-weight:normal;
	text-align:center;
	padding:0 10px;
}

table.ichirantable5 th:nth-child(1){
	width:55px;
}
table.ichirantable5 th:nth-child(2){
	width:480px;
}
table.ichirantable5 th:nth-child(3){
	width:150px;
}
table.ichirantable5 th:nth-child(4){
	width:205px;
}
table.ichirantable5 th:nth-child(5){
	width:90px;
}
table.ichirantable5 td{
	padding:5px 10px;
	vertical-align: middle;
	text-align:right;
	line-height:1.3;
	
}
table.ichirantable5 td input[type="text"] , table.ichirantable5 td input[type="textarea"] , table.ichirantable5 td input[type="number"]{
	width:100%;
}
table.ichirantable5 td:nth-child(1){
	width:45px;
	font-size:120%;
}

table.ichirantable5 td:nth-child(2){
	width:160px;
}
table.ichirantable5 td:nth-child(3){
	width:330px;
	text-align:left;
}
table.ichirantable5 td:nth-child(4){
	width:130px;
}
table.ichirantable5 td:nth-child(5){
	width:220px;
}
table.ichirantable5 td:nth-child(6){
	width:90px;
}
table.ichirantable5 tr:nth-child(1) {
	background: #fff;
}
table.ichirantable5 tr:nth-child(2) {
	background: #fff;
}
table.ichirantable5 tr:nth-child(even) {
	/*border-bottom:1px solid #ccc;*/
}
table.ichirantable5 tr {
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
table.ichirantable5 tr.kounyu {
	background: #b5e8fc;
}
table.ichirantable5 tr.baikyaku {
	background: #ffd7ea;
}
table.ichirantable5 tr.space {
	background: #fff;
	border-top:none;
	border-bottom:none;
}
.trade_list_comment{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	/*line-height:1.0;*/
}

table.ichirantable5 td p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	/*line-height:1.0;*/
	line-height:1.5;
}

.master_wrap {
	display: flex;
	justify-content: center;
}
.master_wrap ol {
	margin-bottom: 30px;
}
.master_wrap li {
	display: flex;
	align-items: center;
}
.master_wrap li +li {
	margin-top: 5px;
}
.master_wrap .number {
	display: block;
	width: 2em;
	text-align: center;
}
.handle {
	position: relative;
	height: 18px;
	width: 22px;
	display: inline-block;
	box-sizing: border-box;
	margin-left: 5px;
  }
  .handle span {
	position: absolute;
	left: 0;
	height: 2px;
	width: 22px;
	background-color: #444;
	border-radius: 2px;
	display: inline-block;
	box-sizing: border-box;
  }
  .handle span:nth-of-type(1) {
	top: 0;
  }
  .handle span:nth-of-type(2) {
	bottom: 8px;
  }
  .handle span:nth-of-type(3) {
	bottom: 0;
  }
  .button_wrap button + button {
	margin-top: 15px;
  }

/* 簡易検索ベタバリ表示用 */
.simple_search_direct {
	margin-bottom: 20px;
	padding: 15px;
	background-color: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
}

.simple_search_direct .search_menu_wrap {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}

.simple_search_direct .search_menu_wrap_box.threebox {
	flex: 1;
}

@media (max-width: 768px) {
	.simple_search_direct .search_menu_wrap {
		flex-direction: column;
		gap: 10px;
	}
}