@charset "utf-8";

input.input_name, input.input_name,
input.input_name, input.input_kana,
input.input_name, input.input_company,
input.input_name, select.select_pref,
input.input_name, select.select_work,
input.input_name, select.select_staff,
input.input_name, input.input_url,
input.input_name, select.select_pref,
input.input_name, select.select_pref {
    width: calc(100% - 1rem);
}
table .need {
    padding: 5px 10px;
    border-radius: 0;
    color: #ffffff;
    background-color: #ea3434;
    position: absolute;
    right: 0;
    margin-top: -6px;
}
table .optional {
    font-weight: normal;
    padding: 5px 10px;
    border-radius: 0;
    color: #ffffff;
    background-color: #c4c4c4;
    position: absolute;
    right: 0;
    margin-top: -6px;
    margin: 0;
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: -6px;
}
table th {
    font-weight: bold;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 16rem;
    border-bottom: 1px solid #cccccc;
}
table tr {
    border-bottom: 1px solid #cccccc;
}
input[type="radio"]:checked + span::before {
    border: 9px solid #aaaaaa;
}
input[type="checkbox"] + span::before {
    border: 2px solid #aaaaaa;
    border-radius: 0;
}
input[type="checkbox"]:checked + span::before {
    background-color: #aaaaaa;
}
@media screen and (max-width:768px) {
    table .need {
        color: #ea3434;
        background: none;
        position: inherit;
    }
    table .optional {
        color: #c4c4c4;
        background: none;
        position: inherit;
    }
    table .optional:before {
        content: "(";
        /* color: #e96656; */
    }
    table .optional:after {
        content: ")";
        /* color: #e96656; */
    }
    table th {
        text-align: left;
        vertical-align: middle;
    }
}

/*-----------------------------------------------------------------------*/
/*【tab】*/
/*-----------------------------------------------------------------------*/
.tab-item {
	display:block;
	float:left;
	width:calc(100% / 2);
	height:50px;
	line-height:50px;		/* これで縦中央になる */
	text-align:center;
	background:#ccffcc;
	border:1px solid #008800;
	border-bottom:3px solid #008800;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	cursor:pointer;
	box-sizing:border-box;
}
.tab-item:hover {
	background:#008800;
	color:#ffffff;
}
/* radioは非表示で */
input[name="tab"] {
	display:none;
}

/* 選択されているタブ */
input:checked + .tab-item {
	background:#008800;
	color:#ffffff;
}

/* タブのコンテンツ */
.tab-content {
	clear:both;
	display:none;
	overflow:hidden;
}

/* 選択されているタブのコンテンツのみ表示 */
#tab-1:checked ~ .tab-content-1,
#tab-2:checked ~ .tab-content-2 {
	display:block;
}


/*-----------------------------------------------------------------------*/
/*【kind】*/
/*-----------------------------------------------------------------------*/
ul#kind {
	margin:0;
	padding:0;
}
ul#kind li {
	margin:0;
	margin-bottom:5px;
	padding:0;
	list-style:none;
}
input[type="radio"] + span {
	font-size:1rem;
	padding-top:3px;
}
select[name=kind] {
	width:calc(100% - 20px);
}


/*-----------------------------------------------------------------------*/
/*【fileselect】*/
/*-----------------------------------------------------------------------*/
.fileselect {
	margin-bottom:1rem;
}
.fileselect h2 {
	margin:0;
	padding:0;
	font-size:1rem;
	font-weight:bold;
	text-align:left;
}
.canvas {
	display:none;
}
.canvasdisp {
	display:block;
	margin-top:10px;
}
.inner img.fileselectimage {
	max-width:350px;
}

.droparea {
	display:inline-block;
	margin-right:10px;
	vertical-align:top;
	border:1px solid #aaaaaa;
	background:#fafafa;
	width:350px;
	position:relative;
	box-sizing: border-box;
	overflow:hidden;
}
.droparea span {
	display:block;
	margin:1rem;
	text-align:center;
}
.droparea input[type=file] {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	-ms-filter:'alpha(opacity=0)';
	cursor:pointer;
	box-sizing: border-box;
}
.filedelete {
	display:none;
	font-size:2rem;

}

/*-----769px以上-----*/
@media print,screen and (min-width:769px) {

.canvasdisp {
	display:inline-block;
	vertical-align:bottom;
}

}/*-----769px以上-----*/


/* ナビ */
body nav ul li p {
    margin: 10px 20px;
    line-height: 20px;
}
body nav ul li p.header_tel span:first-child {
    margin-left: 10px;
    font-size: 24px;
    line-height: 24px;
}
body nav ul li p.header_tel span:first-child::before {
    content: "";
    display: block;
    position: absolute;
    background: url(../image/header_tel.png) no-repeat;
    background-size: cover;
    width: 26px;
    height: 27px;
    top: 5px;
    left: 0px;
}
@media screen and (min-width:769px) {
    body nav {
        position: absolute;
        top: 0px;
        right: 0px;
    }
    body nav ul {
        height: 58px;
    }
    body nav ul li {
        display: inline-block;
        height: 58px;
        vertical-align: top;
    }
    body nav ul li a:after {
        padding-left: 0;
        content: none;
    }
    body nav ul li:first-child:before {
        padding-left: 0;
        content: none;
    }
    body nav ul li a.header_form {
        color: #ffffff;
        background-color: #30aeff;
        border-radius: 15px;
        font-size: 16px;
        padding: 7px 15px;
        display: block;
        margin-top: 13px;
        margin-right: 10px;
    }
}
@media screen and (max-width:768px) {
    body nav ul li p {
        display:block;
        text-align:left;
        text-decoration:none;
        background:#4e8aef;
        background:rgba(0,0,0,0.7);
        color:#ffffff;
        text-decoration:none;
        padding:20px 20px;
        border-bottom:1px solid #ffffff;
        position:relative;
        margin: 0;
        font-size: min(16px, 5vw);
    }
    body nav ul li p.header_tel span:first-child {
        margin-left: 35px;
        font-size: 24px;
        line-height: 36px;
    }
    body nav ul li p.header_tel span:first-child::before {
        background: url(../image/header_tel_sp.png)  no-repeat;
        top: 22px;
        left: 22px;
    }
}