/******************************************************************************
 * 横浜三協株式会社
 * WEB SITE ver.2023
 * RESPONSIVE
 * PC width min-width:1280px
 * SP max-width: 1279px(iPhone6+ ヨコイチまで)
******************************************************************************/
@import url(reset.css);
@import url(base.css);
/*******************************************************************************
 * COMMON
*******************************************************************************/
#breadcrumb {
	font-size: 1.4rem;
	margin-top: 10px;
	display: flex;
	/* flex-wrap: wrap; */
}
#breadcrumb>li>a {
	color: var(--sBlack);
	text-decoration: none;
}
#breadcrumb>li>a:hover {
	text-decoration: underline;
}
#breadcrumb>li>a::after {
	content: '〉';
	margin-left: 0.5em;
	margin-right: 0.0em;
	display: inline-block;
}
/** PC ************************************************************************/
@media screen and (min-width:641px),print{
	#breadcrumb {
		margin-bottom: 46px;
	}
	main>article {
		width: var(--content-width);
		margin: 0 auto;
	}	
}
/** TABLET & SMART PHONE *****************************************************/
@media screen and (max-width:640px) {
	#breadcrumb {
		padding-bottom: 4px;
		margin-bottom: 22px;
		overflow: auto;
	}
	#breadcrumb * {
		white-space: nowrap;
	}
	main>article {
		width: 90vw;
		margin: 0 auto;
	}
}

/*******************************************************************************
 * MAIN
*******************************************************************************/
main>article>section>h1 {
	text-align: center;
}
main>article>section>h1>svg {
	width: 70px;
	height: 3px;
	margin: 0 auto;
}
main>article>section>h1>svg>rect {
	width: 70px;
	height: 3px;
	fill: var(--sBlue);
}
main>article>section:not(#rules):not(#privacypolicy)>h1+p {
	text-align: center;
	margin-bottom: 30px;
}
/* main>article>section:not(#rules):not(#privacypolicy):not(#recruit)>h2, */
main>article>section>h2,
main>article>section#officelist>section>h2,
main>article>section#rules>h1,
main>article>section#privacypolicy>h1 {
	font-size: 2.4rem;
	text-align: center;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sBlack);
}
main>article>section#officelist>section>h2,
main>article>section#officelist>h2 {
	text-align: left;
}
main>article>section#rules>h2,
main>article>section#privacypolicy>h2,
main>article>section#recruit>h2 {
	text-align: left;
	margin-bottom: 0;
	border-bottom: none;
}

main>article>section#company h2,
main>article section#stoffice>nav>p,
main>article>section#recruit>h2,
main>article>section#contact h2,
main>article>section#news>nav>p {
	color: var(--sBlue);
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	line-height: 1.0;
	padding: 12px;
	margin-bottom: 14px;
	border: none;
	background: var(--sLgray);
}
main>article>section#rules>h2,
main>article>section#privacypolicy>h2 {
	color: var(--sBlue);
	font-size: 1.6rem;
}
main>article>section#contact h2+p {
	margin-bottom: 30px;
}
main>article>section * {
	font-size: 1.4rem;
}
main>article>section p,
main>article>section dd {
	line-height: 1.75;
	text-align: justify;
}
/** 事業概要 *******************************************************************/
#works>dl {
	background: var(--sLblue);
}
#works>dl>dt {
	color: var(--sBlue);
	font-size: 1.8rem;
	font-weight: bold;
}
/** サービス概要 ***************************************************************/
#service dl {
	border: 1px solid var(--sGray);
	background: var(--sLgray);
}
#service dl>dt {
	color: var(--sBlue);
	font-weight: bold;
	text-align: center;
	background: white;
}
#service dl>dd {
	font-size: 1.4rem;
	padding: 1.0em;
	line-height: 1.5;
}
/** 商品紹介 *******************************************************************/
#products>div>* {
	color: var(--sBlack);
	text-decoration: none;
	border: 1px solid var(--sGray);
	display: block;
}
#products>div>a {
	background: url(../images/r_arrow.png) no-repeat right 14px bottom 14px;
	background-size: 40px 40px;
}
#products dl {
	padding: 14px;
}
#products dl>dt {
	color: var(--sBlue);
	font-size: 1.6rem;
	font-weight: bold;
}
/** 会社情報 *******************************************************************/
#company dl>div {
	width: 100%;
	display: table;
}
#company dl>div>* {
	display: table-cell;
}

#company dl>div>dt,
#company dl>div>dd {
	border: 1px solid var(--sGray);
}
#company dl>div:not(:first-of-type)>dt,
#company dl>div:not(:first-of-type)>dd {
	border-top: none;
}
#company dl>div>dt {
	border-right: none;
	background: var(--sLblue);
}
#company dl>div>dd:nth-of-type(2) {
	text-align: center;
	vertical-align: middle;
	border-left: none;
}
#company dl>div>dd>a {
	color: var(--sBlack);
}

#stoffice ul>li>a,
#pdfdl>p>a {
	color: var(--sMblue);
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--sGray);
	background: url(../images/r_arrow_gr.png) no-repeat center right 8px;
	display: block;
}
#stoffice ul>li>a:hover,
#pdfdl>p>a:hover,
#stoffice ul>li>a.current {
	background-color: var(--sLgray);
}
#stoffice>ul,
#stoffice>nav>ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#stoffice>table tr>td>span {
	white-space: nowrap;
	display: block;
}
/** 営業所案内 *****************************************************************/
#officelist>h3 {
	font-size: 1.6rem;
	border-bottom: 1px solid var(--sBlack);
}
#officelist table {
	width: 100%;
	border-collapse: collapse;
}
#officelist table:not(:last-of-type) {
	margin-bottom: 20px;
}
#officelist table>caption {
	font-size: 1.6rem;
	text-align: left;
}
#officelist table>caption::before {
	content: "■";
}
#officelist table>thead {
	background: var(--sLblue);
}
#officelist table>tbody>tr:nth-of-type(even) {
	background: var(--sLgray);
}
#officelist table th:not(:last-of-type),
#officelist table td:not(:last-of-type) {
	border-right: 1px solid var(--sGray);
}
#officelist table th:last-of-type,
#officelist table td:last-of-type {
	text-align: center;
}
#officelist table th,
#officelist table td {
	padding: 6px 12px;
}
#officelist table a {
	color: var(--sBlack);
	text-decoration:  none;
}
/** 採用情報 *******************************************************************/
#recruit>h2+p {
	margin-bottom: 10px;
}
#recruit>nav {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
#recruit>nav>* {
	margin-right: 20px;
}
#recruit>nav>img.qrcode {
	width: 100px;
	height: 100px;
}
#recruit dl {
	width: 100%;
	margin-bottom: 30px;
	display: table;
}
#recruit dl>dt,
#recruit dl>dd {
	padding: 0.5em 1.0em;
	border: 1px solid var(--sGray);
	display: table-cell;
}
#recruit dl>dt {
	font-weight: bold;
	width: 200px;
	border-right: none;
	background: var(--sLblue);
}

#recruit table {
	width: 100%;
	border-collapse: collapse;
	/* margin-bottom: 30px; */
}
#recruit table th {
	background: var(--sLblue);
}
#recruit table>thead th {
	color: white;
	background: var(--sBlue);
}
#recruit table th,
#recruit table td {
	padding: 8px 4px;
}
#recruit table tr>th,
#recruit table tr>td {
	border: 1px solid var(--sGray);
}
#recruit table th,
#recruit table td[rowspan="5"] {
	text-align: center;
}
#recruit div.chutohiritsu {
	width: 100%;
	max-width: 400px;
}
#recruit div.chutohiritsu>table {
	width: 100%;
	border-collapse: collapse;
}
div.chutohiritsu>table th,
div.chutohiritsu>table td {
	text-align: center;
	width: calc(100% / 3);
	padding: 8px 4px;
	border: 1px solid var(--sGray);
}
#recruit div.chutohiritsu>table>thead>tr>th {
	color: black;
	background: var(--sLblue);
	
}
#recruit div.chutohiritsu>p.under {
	text-align: right;
}
/** お問い合わせ **************************************************************/
#mform>div {
	background: var(--sLblue);
}
#mform>div>ul>li {
	width: 100%;
	border-bottom: 1px solid var(--sGray);
	display: table;
}
#mform>div+p>button#confirm,
#mform>div+p>button#send {
	color: white;
	border: none;
	border-radius: 4px;
	background: url(../images/r_arrow_gr.png) no-repeat center right 20px var(--sBlue);
}
#mform>div+p>button#back {
	background: var(--sLgray);
}
#mform>div>ul>li:nth-of-type(9)>b {
	color: var(--sBlue);
	font-size: 1.6rem;
}
#mform>div>ul>li:not([class]):last-of-type {
	text-align: center;
	padding: 20px;
	border: none;
}
#mform>div>ul>li input[type="text"],
#mform>div>ul>li input[type="email"],
#mform>div>ul>li textarea {
	width: 100%;
}
#mform>div>ul>li i {
	color: white;
	font-size: 1.2rem;
	font-style: normal;
	margin-right: 10px;
	display: inline-block;
	background: var(--sRed);
}
#mform>div>ul>li>span>b {
	font-weight: normal;
}
#mform>div>ul>li>span>i.any {
	background: var(--sMblue);
}
#mform>div+p {
	text-align: center;
	padding-top: 40px;
}
#privacypolicychk {
	display: none;
}
#privacypolicychk~ label {
	font-size: 1.8rem;
	position: relative;
	padding: 3px 30px 3px 3px;
	cursor: pointer; 
}
/* #privacypolicychk~ label:before {
	content: "";
	position: absolute;
	  top: 40%;
	  right: 0;
	  margin-top: -10px;
	  border: 1px solid var(--sGray);
	  width: 24px;
	  height: 24px;
	 background: white;	
}
#privacypolicychk:checked~ label:after {
	content: "";
	position: absolute;
	top: -3px;
	bottom: 0;
	right: 3px;
	margin: auto;
	width: 18px;
	height: 18px;
	background: var(--sDgray);
} */
#privacypolicychk~ label:before {
	content: "";
	position: absolute;
	  top: 40%;
	  right: 0;
	  margin-top: -10px;
	  border: 1px solid var(--sGray);
	  width: 24px;
	  height: 24px;
	 background: white;	
}
/* #privacypolicychk:checked~ label:after {
	font-size: 2.6rem;
	content: "✓";
	position: absolute;
	top: -22px;
	bottom: 0;
	right: 6px;
	margin: auto;
	width: 18px;
	height: 18px;
} */
.check::after {
	font-size: 2.6rem;
	content: "✓";
	position: absolute;
	top: -22px;
	bottom: 0;
	right: 6px;
	margin: auto;
	width: 18px;
	height: 18px;
}

/** サイトのご利用条件 **********************************************************/
#rules>p,
#privacypolicy>p,
#privacypolicy>ol {
	margin-bottom: 30px;
}
#rules>ul {
	list-style: disc;
	margin-left: 1.5em;
}
#rules>div {
	margin: 20px 0;
}
#rules>div>p {
	color: var(--sBlue);
	font-weight: bold;
	width: 150px;
}

#rules>div>figure>figcaption>p {
	text-align: left;
}
#privacypolicy>ol>li {
	text-indent: -2.5em;
	margin-left: 2.5em
}
/** NEWS **********************************************************************/
#news>nav {
	position: relative;
}
#news>nav>ul,
#news>nav>button {
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
	width: 130px;
	position: absolute;
	right: 4px;
}
#news>nav>button {
	font-size: 1.8rem;
	padding: 12px;
	border: none;
	background: url(../images/dn_arrow.png) no-repeat center right 12px;
	top: 0;
}
#news>nav>ul {
	padding-top: 4px;
	top: 42px;
	display: none;
}
#news>nav>ul>li {
	width: 100%;
	display: table;
}
#news>ul>li>a {
	color: var(--sBlack);
	text-decoration: none;
}
#news>ul>li>a>time {
	color: var(--sBlue);
	display: block;
}
#news>nav>ul>li>a {
	color: var(--sBlack);
	font-size: 1.8rem;
	text-decoration: none;
	vertical-align: middle;
	height: 42px;
	background: var(--sLgray);
	display: table-cell;
}
#news>nav>ul>li>a:hover {
	background: url(../images/l_arrow_fill.png) no-repeat center right 12px white;
}
#news>ul {
	border-top: 1px solid var(--sGray);
}
#news>ul>li {
	border-bottom: 1px solid var(--sGray);
}

/** PC ************************************************************************/
@media screen and (min-width:641px),print{
	main>article>section {
		margin-bottom: 55px;
	}
	main>article>section>h1 {
		font-size: 2.6rem;
		margin-bottom: 55px;
	}
	
	/** 事業概要 **************************************************************/
	#works {
		margin-bottom: calc(55px + 120px);
	}
	#works>dl {
		height: 212px;
		padding: 36px 28px;
		margin-bottom: 120px;
		position: relative;
	}
	#works>dl>dt {
		margin-bottom: 22px;
		border-bottom: 2px solid var(--sDgray);
	}
	#works>dl>dd {
		/* width: 480px; */
		width: calc(100% - (400px + 27px));
	}
	#works>dl>dd>figure {
		position: absolute;
		top: 36px;
		right: 28px;
	}
	#works>dl>dd>figure>img {
		width: 400px;
		height: 260px;
		object-fit: cover;
	}
	#works>dl:nth-of-type(even)>dt,
	#works>dl:nth-of-type(even)>dd {
		width: 100%;
		padding-left: calc(400px + 27px);
	}
	#works>dl:nth-of-type(even)>dd>figure {
		left: 28px;
	}
	/** サービス概要 **********************************************************/
	#service>div {
		margin-top: 46px;
		display: flex;
		justify-content: space-between;
	}
	#service dl>dt {
		font-size: 1.8rem;
		padding: 12px;
	}
	#service>div>dl {
		width: calc((100% - 60px) / 3)
	}
	/** 商品紹介 **************************************************************/
	#products>div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#products>div>* {
		width: calc((100% - 40px) / 2);
		aspect-ratio: 216 / 185;
	}
	#products>div>*:not(:nth-child(n+9)) {
		margin-bottom: 40px;
	}
	#products figure {
		width: 100%;
		aspect-ratio: 43 / 26;
		overflow: hidden;
	}
	#products figure>img {
		width: 100%;
		aspect-ratio: 43 / 26;
		/* height: 260px; */
		object-fit: cover;
		opacity: 1.0;
		transition:0.5s ease;
	}
	#products figure>img:hover {
		opacity: 0.7;
		transform:scale(1.1,1.1);
		transition:0.5s ease;
	}
	/** 会社情報 *******************************************************************/
	#company>section {
		margin-bottom: 32px;
	}
	#stoffice ul>li>a,
	#pdfdl>p>a {
		/* width: 270px; */
		width: calc((var(--content-width) - 70px) / 3);
		height: 70px;
		padding-top: 23px;
	}
	#company dl>div>dt {
		width: 200px;
	}
	#company dl>div>* {
		padding: 6px 14px;
	}
	#profile dl>div>* {
		padding: 14px;
	}
	#officer>dl {
		columns: 2;
	}
	#officer dl>div:nth-of-type(5)>dt,
	#officer dl>div:nth-of-type(5)>dd {
		border-top: 1px solid var(--sGray);
	}
	#stoffice:not(:last-of-type) {
		margin-bottom: 55px;
	}
	#stoffice>ul>li:not(:nth-of-type(n+4)),
	#stoffice>nav>ul>li:not(:nth-of-type(n+4)) {
		margin-bottom: 45px;
	}
	#stoffice>nav {
		margin-bottom: 32px;
	}
	#stoffice>table tr>*:nth-of-type(1) {width: 210px;}
	#stoffice>table tr>*:nth-of-type(3) {width: 120px;}
	#stoffice>table tr>*:nth-of-type(4) {width: 54px;}
	#officelist>iframe {
		width: 100%;
		height: 600px;
	}
	/** 採用情報 ***************************************************************/
	/* #recruit dl {
		width: 60%;
	} */
	#recruit>table th:first-child {
		width: 180px;
	}
	#recruit>table th:nth-child(3),
	#recruit>table th:nth-child(4) {
		width: 140px;
	}
	#recruit .chutohiritsu>li:not(:last-of-type) {
		margin-right: 3.0em;
	}
	/** お問い合わせ **********************************************************/
	#mform>div>ul>li {
		padding: 16px 40px;
	}
	#mform>div+p>button {
		width: 314px;
		height: 52px;
	}
	#mform>div+p>button#back {
		margin-right: 10px;
	}
	#mform>div>ul>li:nth-of-type(8) {
		padding-bottom: 40px;
		border: none;
	}
	#mform>div>ul>li:nth-of-type(9)>b {
		color: var(--sBlue);
		font-size: 1.6rem;
	}
	#mform>div>ul>li:nth-of-type(9)>p {
		margin-left: 2.0em;
		margin-bottom: 1.0em;
	}
	#mform>div>ul>li:not([class]):last-of-type {
		text-align: center;
		padding: 20px;
	}
	#mform>div>ul>li input[type="text"],
	#mform>div>ul>li input[type="email"],
	#mform>div>ul>li textarea {
		padding: 8px;
	}
	#mform>div>ul>li textarea {
		height: 8em;
	}
	#mform>div>ul>li span {
		vertical-align: top;
		padding-top: 10px;
		display: table-cell;
		position: relative;
	}
	#mform>div>ul>li>span:first-of-type {
		width: 180px;
	}
	
	#mform>div>ul>li i {
		padding: 2px 4px 1px;
	}
	#mform>div>ul>li>span>i {
		position: absolute;
		right: 0;
	}
	#mform>div>ul>li>span>i.any {
		background: var(--sMblue);
	}
/** サイトのご利用条件 ********************************************************/
	#rules>h1 {
		font-size: 2.6rem;
		margin-bottom: 40px;
	}
	
	#rules>div {
		display: flex;
	}
	/* #rules>div:first-of-type {
		margin-top: 60px;
	}
	#rules>div:last-of-type {
		margin-bottom: 60px;
	} */
	#rules>div>p {
		color: var(--sBlue);
		font-weight: bold;
		width: 150px;
	}
	#rules>div>figure {
		display: flex;
		justify-content: end;
		align-items: start;
	}
	#rules>div>figure>span {
		position: relative;
		width: 210px;
	}
	#rules>div>figure>span>img {
		position: absolute;
		right: 8px;
	}
	#rules>div>figure>figcaption {
		width: 600px;
	}
	/** NEWS **********************************************************************/
	#news>ul>li {
		padding: 16px 52px;
	}
	#news a:hover>span {
		text-decoration: underline;
	}
}
/** TABLET & SMART PHONE *****************************************************/
@media screen and (max-width:640px) {
	main>article>section {
		margin-bottom: 30px;
	}
	main>article>section>h1 {
		font-size: 2.2rem;
		margin-bottom: 30px;
	}
	main>article>section#officelist>section>h2,
	main>article>section#officelist>h2 {
		font-size: 2.0rem;
	}
	/** 事業概要 **************************************************************/
	#works>dl {
		padding: 16px;
		margin-bottom: 20px;
	}
	#works>dl>dt {
		margin-bottom: 16px;
		border-bottom: 1px solid var(--sDgray);
	}
	#works>dl>dd>figure {
		margin-top: 16px;
	}
	#works>dl>dd>figure>img {
		width: 100%;
	}
	/** サービス概要 **********************************************************/
	#service>div {
		margin-top: 20px;
	}
	#service>div>dl {
		margin-bottom: 10px;
	}
	#service dl>dt {
		font-size: 1.8rem;
		padding: 8px;
	}
	/** 商品紹介 **************************************************************/
	#products>div>* {
		margin-bottom: 20px;
	}
	#products figure>img {
		width: 100%;
	}
	#products dd {
		line-height: 1.5;
		padding-bottom: 40px;
	}
	/** 会社情報 *******************************************************************/
	#company>section {
		margin-bottom: 32px;
	}
	#stoffice ul>li>a,
	#pdfdl>p>a {
		text-align: left;
		height: 50px;
		padding-top: 13px;
		padding-left: 8px;
		background-size: 25px;
	}
	#company dl>div>dt {
		width: 120px;
	}
	#company dl>div>* {
		padding: 4px 12px;
	}
	#profile dl>div>* {
		padding: 12px;
	}
	/* #officer>dl>div:last-of-type {
		display: none;
	} */
	#stoffice:not(:last-of-type) {
		margin-bottom: 20px;
	}
	#stoffice>ul>li,
	#stoffice>nav>ul>li {
		width: 49%;
	}
	#stoffice>ul>li>a {
		padding-left: 8px;
		text-align: left;
	}
	#stoffice>ul>li:not(:nth-of-type(n+4)),
	#stoffice>nav>ul>li:not(:nth-of-type(n+4)) {
		margin-bottom: 15px;
	}
	#stoffice>nav {
		margin-bottom: 20px;
	}
	#stoffice>table tr>*:nth-of-type(1) {width: 7.0em;}
	#stoffice>table tr>*:nth-of-type(3) {width: 3.0em;}
	#officelist a[href^="tel:"] {
		color: var(--sBlue);
		text-decoration: none;
	}
	#officelist>iframe {
		width: 100%;
		height: 90vw;
	}
	/** 採用情報 ***************************************************************/
	#recruit>div.sidescroll>table {
		width: 700px;
	}
	#recruit .chutohiritsu>li:not(:last-of-type) {
		margin-right: 1.0em;
	}
	/** お問い合わせ **********************************************************/
	#mform>div>ul>li {
		padding: 6px;
	}
	#mform>div+p>button {
		width: 49%;
		height: 48px;
	}
	#mform>div+p>button#confirm,
	#mform>div+p>button#send {
		background-position: center right 5px;
	}
	#mform>div+p>button#back {
		margin-right: 2%;
	}
	#mform>div>ul>li:nth-of-type(9)>p {
		margin-left: 1.0em;
	}
	#mform>div>ul>li input[type="text"],
	#mform>div>ul>li input[type="email"],
	#mform>div>ul>li textarea {
		padding: 4px;
	}
	#mform>div>ul>li textarea {
		height: 6em;
	}
	#mform>div>ul>li>span {
		margin-bottom: 4px;
		display: block;
	}
	#mform>div>ul>li i {
		padding: 1px 2px 0;
		margin-left: 8px;
	}
	/** NEWS ******************************************************************/
	#news>ul>li {
		padding: 16px 0;
	}
}

/*******************************************************************************
 * ヘッドイメージ部分
*******************************************************************************/

/** PC ************************************************************************/
@media screen and (min-width:641px),print{}
/** TABLET & SMART PHONE ******************************************************/
@media screen and (max-width:640px) {}


/******************************************************************************
 * ver 2023
******************************************************************************/