@charset "utf-8";


/*
	有限会社山田塗装店　index用CSS
	index.html

	create	20210808-
*/

/* ---------------------------------------------------------
	約560px未満の画面向けスタイル mobile first
--------------------------------------------------------- */



/* ---------------------------------------- */
/* 共通 */
/* ---------------------------------------- */

/* パンくず */
.pankuzu {
/*	display: none; */
}

/* コンテンツ */
main {
	margin: 0;
}
main .newsBlock {
	color: #333;
	margin: 0;
	padding: 50px 0 0;
}
main .newsBlock .newsBox {
	margin: 0 0 50px;
	padding: 0;
}

/*---------------------------------------- */
/* 一覧 */
/*---------------------------------------- */
main .newsBlock .newsBox h3 {
	font-size: 2rem;
	text-align: left;
	margin: 0 10px 10px;
	padding: 0 0 0 40px;
	background-image: url(../img/asiatoMark2.png);
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
}
main .newsBlock .newsBox h3 span {
	font-size: 0.5em;
	font-weight: normal;
	margin: 0 0 0 10px;
}
main .newsBlock .newsBox .asiatoBar {
	margin: 0 10px 80px;
	padding: 0 0 10px;
	background-image: url(../img/asiatoBar.png);
	background-repeat: repeat-x;
	background-position: center left;
	background-size: 150px;
	position: relative;
	display: block;
}
main .newsBlock .newsBox .asiatoBar span {
	margin: 0 0 10px;
	width: 100%;
	padding: 0 0 100px;
	background-image: url(../img/anime05yane2.gif);
	background-repeat: repeat-x;
	background-position: center right;
	background-size: contain;
	position: absolute;
	bottom: -85px;
	right: 0px;
	display: block;
}
main .newsBlock .newsBox .newsList {
	margin: 0 0 50px;
}
main .newsBlock .newsBox .newsList ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
		-ms-flex-pack: start;
			justify-content: flex-start;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	gap: 10px;
}
main .newsBlock .newsBox .newsList ul li {
	width: calc(50% - 5px);
	margin: 0;
	padding: 0;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 3px #999;
	position: relative;
	overflow: hidden;
}
main .newsBlock .newsBox .newsList ul li .new {
	font-size: 0.75em;
	color: #f00;
	margin-left: 2px;
	display: inline-block;
}
main .newsBlock .newsBox .newsList ul li a {
	font-size: 1.6rem;
	width: 100%;
	color: #333;
	text-decoration: none;
}
main .newsBlock .newsBox .newsList ul li a .photo {
	width: calc(100% - 20px);
	margin: 10px 10px 5px;
	padding: 0 0 65%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	overflow: hidden;
}
main .newsBlock .newsBox .newsList ul li a .date {
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	margin: 10px 0;
	padding: 0;
	display: block;
}
main .newsBlock .newsBox .newsList ul li a .title {
	font-size: 1em;
	text-align: left;
	line-height: 1.3;
	min-height: 50px;
	margin: 0 10px 20px;
	display: block;
}
main .newsBlock .newsBox .newsList ul li a .cat {
	font-size: 0.5em;
	text-align: left;
	margin: 10px 0;
	padding: 5px 10px;
	background-color: #F5F0CE;
	display: block;
}
main .newsBlock .newsBox .newsList ul li a .pchan {
	position: absolute;
	bottom: -35px;
	right: 5px;
	width: 80px;
	margin: 0;
	padding: 0 0 80px;
	background-image: url(../img/pillustSpeaker.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
main .newsBlock .newsBox .newsList ul li a:hover .pchan {
	bottom: -5px;
}
/* つぶやき */
main .newsBlock .newsBox .newsList ul li a .pchan1 {
	background-image: url(../img/pillustSpeaker.png);
}
main .newsBlock .newsBox .newsList ul li a:hover .pchan1 {
	background-image: url(../img/anime08s.gif);
}
/* 施工実績 */
main .newsBlock .newsBox .newsList ul li a .pchan2 {
	background-image: url(../img/pillustNuriW.png);
}
main .newsBlock .newsBox .newsList ul li a:hover .pchan2 {
	background-image: url(../img/anime06s.gif);
}
/* イベント */
main .newsBlock .newsBox .newsList ul li a .pchan3 {
	background-image: url(../img/pIllustOsyaberi.png);
}
main .newsBlock .newsBox .newsList ul li a:hover .pchan3 {
	background-image: url(../img/anime03s.gif);
}
/* 福利厚生 */
main .newsBlock .newsBox .newsList ul li a .pchan4 {
	background-image: url(../img/pillustFlug.png);
}
main .newsBlock .newsBox .newsList ul li a:hover .pchan4 {
	background-image: url(../img/anime09s.gif);
}
/* 求人情報 */
main .newsBlock .newsBox .newsList ul li a .pchan5 {
	background-image: url(../img/pillustGenba.png);
}

main .newsBlock .newsBox .btnMore {
	width: 80px;
	text-align: center;
	margin: 10px 10px 0 0;
	padding: 0;
	float: right;
}
main .newsBlock .newsBox .btnMore a {
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	width: 80px;
	margin: 0;
	padding: 14px 0 28px;
	background-image: url(../img/btnBgM.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	display: block;
}
main .newsBlock .pager {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
			justify-content: center;
	margin: 0 0 15px;
}
main .newsBlock .pager ul {
	list-style: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
		justify-content: center;
	gap: 2px;
}
main .newsBlock .pager .pageStart a,
main .newsBlock .pager .pageEnd a,
main .newsBlock .pager ul li a {
	color: #333;
	text-decoration: none;
	width: 38px;
	height: 38px;
	padding: 9px 0 0 0;
	background-color: #EEEEEE;
	border: 1px solid #DEE2E6;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
		border-radius: 20px;
	cursor: pointer;
	display: block;
}
main .newsBlock .pager .pageStart a:hover,
main .newsBlock .pager .pageEnd a:hover,
main .newsBlock .pager ul li a:hover {
	color: #fff;
	border: 1px solid #24A3E2;
	background-color: #24A3E2;
}
main .newsBlock .pager .pageStart span,
main .newsBlock .pager .pageEnd span,
main .newsBlock .pager ul li span {
	color: #999;
	text-decoration: none;
	width: 38px;
	height: 38px;
	padding: 9px 0 0 0;
	background-color: #EEEEEE;
	border: 1px solid #DEE2E6;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
		border-radius: 20px;
	display: block;
}
main .newsBlock .pager ul li.select span {
	color: #fff;
	text-decoration: none;
	width: 38px;
	height: 38px;
	padding: 9px 0 0 0;
	border: 1px solid #24A3E2;
	background-color: #24A3E2;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
			border-radius: 20px;
	display: block;
}


/*---------------------------------------- */
/* 詳細 */
/*---------------------------------------- */
main .newsBlock .newsDetail {
	margin: 0;
	padding: 0 0 50px;
	background-image: url(../img/asiatoBg2.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 20px) calc(100% + 20px);
	background-size: 200px;
}
main .newsBlock .newsDetail h3 {
	font-size: 2rem;
	text-align: left;
	margin: 0 10px 10px;
	padding: 0 0 0 40px;
	background-image: url(../img/asiatoMark2.png);
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
}
main .newsBlock .newsDetail h3 span {
	font-size: 0.75em;
	font-weight: normal;
	margin: 0 0 0 10px;
}
main .newsBlock .newsDetail .asiatoBar {
	margin: 0 10px 30px;
	padding: 0 0 10px;
	background-image: url(../img/asiatoBar.png);
	background-repeat: repeat-x;
	background-position: center left;
	background-size: 150px;
	position: relative;
	display: block;
}
main .newsBlock .newsDetail .asiatoBar span {
	margin: 0 0 10px;
	width: 80px;
	padding: 0 0 80px;
	background-image: url(../img/pIllustNattoku.png);
	background-repeat: repeat-x;
	background-position: center center;
	background-size: cover;
	position: absolute;
	bottom: -21px;
	right: 0px;
	display: block;
}
main .newsBlock .newsDetail h1 {
	font-size: 2rem;
	text-align: left;
	margin: 0 10px 15px;
}
main .newsBlock .newsDetail h1 date {
	font-size: 0.6em;
	margin: 0 0 5px;
	display: block;
}
main .newsBlock .newsDetail h1 date .new {
	color: #f00;
}
main .newsBlock .newsDetail .newsBox1 {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
}
main .newsBlock .newsDetail .newsBox1 figure {
	width: 100%;
	margin: 0 0 15px;
}
main .newsBlock .newsDetail .newsBox1 figure img {
	width: 100%;
	margin: 0 0 5px;
	padding: 8px;
	box-shadow: 1px 1px 3px #333;
}
main .newsBlock .newsDetail .newsBox1 figure figcaption {
	font-size: 1.4rem;
}
main .newsBlock .newsDetail .newsBox1 p {
	width: 100%;
	text-align: left;
	line-height: 1.8;
}
main .newsBlock .newsDetail .newsBox2 {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
}
main .newsBlock .newsDetail .newsBox2 figure {
	width: 100%;
	margin: 0 0 15px;
}
main .newsBlock .newsDetail .newsBox2 figure img {
	width: 100%;
	margin: 0 0 5px;
	padding: 8px;
	box-shadow: 1px 1px 3px #333;
}
main .newsBlock .newsDetail .newsBox2 figure figcaption {
	font-size: 1.4rem;
}
main .newsBlock .newsDetail .newsBox2 p {
	width: 100%;
	text-align: left;
	line-height: 1.8;
}
main .newsBlock .newsDetail .newsBox3 {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
}
main .newsBlock .newsDetail .newsBox3 figure {
	width: 100%;
	margin: 0 0 15px;
}
main .newsBlock .newsDetail .newsBox3 figure img {
	width: 100%;
	margin: 0 0 5px;
	padding: 8px;
	box-shadow: 1px 1px 3px #333;
}
main .newsBlock .newsDetail .newsBox3 figure figcaption {
	font-size: 1.4rem;
}
main .newsBlock .newsDetail .newsBox3 p {
	width: 100%;
	text-align: left;
	line-height: 1.8;
}
main .newsBlock .newsDetail .newsBox4 {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
}
main .newsBlock .newsDetail .newsBox4 p {
	width: 100%;
	text-align: left;
	line-height: 1.8;
}
main .newsBlock .newsDetail .newsBox5 {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
}
main .newsBlock .newsDetail .newsBox5 figure {
	width: 100%;
	margin: 0 0 15px;
}
main .newsBlock .newsDetail .newsBox5 figure img {
	width: 100%;
	margin: 0 0 5px;
	padding: 8px;
	box-shadow: 1px 1px 3px #333;
}
main .newsBlock .newsDetail .newsBox5 figure figcaption {
	font-size: 1.4rem;
}
main .newsBlock .newsDetail .newsBox6 {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
}
main .newsBlock .newsDetail .newsBox6 figure {
	width: 100%;
	margin: 0 0 15px;
}
main .newsBlock .newsDetail .newsBox6 figure img {
	width: 100%;
	margin: 0 0 5px;
	padding: 8px;
	box-shadow: 1px 1px 3px #333;
}
main .newsBlock .newsDetail .newsBox6 figure figcaption {
	font-size: 1.4rem;
}
main .newsBlock > div:nth-child(even) {
	color: #333;
	margin: 0;
	padding: 80px 0 100px;
	background-color: #F5F0CE;
	background-image: url(../img/asiatoBg.png),url(../img/cloudBgHigh_yellow.svg),url(../img/cloudBgLow_yellow.svg);
	background-repeat: no-repeat,repeat-x,repeat-x;
	background-size: 200px,800px,800px;
	background-position: -100px calc(100% - 20px),center top,center bottom;
}
main .newsBlock > div:nth-child(even) h3 span {
	color: #f00;
	font-weight: bold;
}
main .newsBlock > div:nth-child(even) .newsList {
	margin: 0 10px 10px;
}




@media screen and (min-width: 375px){
	/*	約375px以上の画面向けスタイル second tablet */

}



@media screen and (min-width: 560px){
	/*	約560px以上の画面向けスタイル second tablet */

	/* ---------------------------------------- */
	/* 共通 */
	/* ---------------------------------------- */
	main .newsBlock .newsBox .asiatoBar span {
		width: 400px;
		padding: 0 0 131px;
	}
	main .newsBlock .newsBox .asiatoBar {
		margin: 0 0 15px;
	}
	main .newsBlock {
		padding: 50px 0 0;
	}
	main .newsBlock .newsBox {
		margin: 0 10px 0;
	}

	/* 一覧
	---------------------------------------- */
	main .newsBlock .newsBox .asiatoBar span {
		bottom: -31px;
	}
	main .newsBlock .newsBox .newsList ul li {
		width: calc(33% - 5px);
	}


	/* 詳細
	---------------------------------------- */
	main .newsBlock .newsDetail {
		background-position: calc(100% + 20px) calc(100%);
		background-size: 250px;
	}
	main .newsBlock .newsDetail h1 {
		font-size: 2.4rem;
	}
	main .newsBlock .newsDetail h1 date {
		margin: 0 0 10px;
	}
	main .newsBlock .newsDetail .newsBox1 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: space-between;
			-ms-flex-pack: space-between;
				justify-content: space-between;
	}
	main .newsBlock .newsDetail .newsBox1 figure {
		width: calc(50% - 10px);
		margin: 0 15px 15px;
		order: 1;
	}
	main .newsBlock .newsDetail .newsBox1 figure img {
	}
	main .newsBlock .newsDetail .newsBox1 figure figcaption {
	}
	main .newsBlock .newsDetail .newsBox1 p {
		width: calc(50% - 10px);
		text-align: left;
		line-height: 1.8;
		order: 2;
	}
	main .newsBlock .newsDetail .newsBox2 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: space-between;
			-ms-flex-pack: space-between;
				justify-content: space-between;
	}
	main .newsBlock .newsDetail .newsBox2 figure {
		width: calc(50% - 10px);
		margin: 0 0 15px 15px;
		order: 2;
	}
	main .newsBlock .newsDetail .newsBox2 figure img {
	}
	main .newsBlock .newsDetail .newsBox2 figure figcaption {
	}
	main .newsBlock .newsDetail .newsBox2 p {
		width: calc(50% - 10px);
		text-align: left;
		line-height: 1.8;
		order: 1;
	}
	main .newsBlock .newsDetail .newsBox3 {
	}
	main .newsBlock .newsDetail .newsBox3 figure {
		width: calc(50% - 10px);
		margin: 0 auto 15px;
	}
	main .newsBlock .newsDetail .newsBox3 figure img {
	}
	main .newsBlock .newsDetail .newsBox3 figure figcaption {
	}
	main .newsBlock .newsDetail .newsBox3 p {
		width: 100%;
		text-align: center;
	}
	main .newsBlock .newsDetail .newsBox4 {
	}
	main .newsBlock .newsDetail .newsBox4 p {
	}
	main .newsBlock .newsDetail .newsBox5 {
		width: calc(100% - 20px);
		margin: 0 10px 30px;
	}
	main .newsBlock .newsDetail .newsBox5 figure {
		width: 100%;
		max-width: 800px;
		margin: 0 auto 15px;
	}
	main .newsBlock .newsDetail .newsBox5 figure img {
	}
	main .newsBlock .newsDetail .newsBox5 figure figcaption {
	}
	main .newsBlock .newsDetail .newsBox6 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: space-between;
			-ms-flex-pack: space-between;
				justify-content: space-between;
	}
	main .newsBlock .newsDetail .newsBox6 figure {
		width: calc(50% - 10px);
	}
	main .newsBlock .newsDetail .newsBox6 figure img {
	}
	main .newsBlock .newsDetail .newsBox6 figure figcaption {
	}
	main .newsBlock  > div:nth-child(even) {
		background-size: 250px,800px,800px;
		background-position: -80px calc(100% - 20px),center top,center bottom;
	}
	main .newsBlock  > div:nth-child(even) .newsList ul li {
		width: calc(25% - 8px);
	}
}





@media screen and (min-width: 980px){
	/*	約980px以上の画面向けスタイル pc style */

	/* 共通
	---------------------------------------- */
	/* フッタ */
	footer .pchanIllustFoot {
		left: calc(50% - 480px);
	}
	footer .footBtn {
		right: calc(50% - 480px);
	}

	/* 一覧
	---------------------------------------- */
	main {
		position: relative;
	}
	main .newsBlock {
		padding: 80px 0 0;
	}
	main .newsBlock .newsBox {
		padding: 0 calc(50% - 480px);
	}
	main .newsBlock .newsBox h3 {
		font-size: 3rem;
		padding: 0 0 0 50px;
	}
	main .newsBlock .newsBox .newsList ul li {
		width: calc(25% - 8px);
	}
	main .pickupBlock {
		padding: 50px calc(50% - 480px) 0;
	}
	main .snsBlock {
		margin: 12px auto 0;
		background: none!important;
		position: absolute;
		top: 0;
		right: calc(50% - 480px);
	}

	/* 詳細
	---------------------------------------- */
	main .newsBlock .newsDetail {
		padding: 0 calc(50% - 480px) 30px;
		background-position: calc(100% - 10px) calc(100%);
		background-size: 300px;
	}
	main .newsBlock .newsDetail h1 {
		font-size: 3rem;
	}
	main .newsBlock .newsDetail h1 date {
		margin: 0 0 10px;
	}
	main .newsBlock .newsDetail .newsBox1 {
		width: 100%;
		margin: 0 auto 30px;
	}
	main .newsBlock .newsDetail .newsBox1 figure {
		max-width: 550px;
	}
	main .newsBlock .newsDetail .newsBox2 {
		width: 100%;
		margin: 0 auto 30px;
	}
	main .newsBlock .newsDetail .newsBox2 figure {
		max-width: 550px;
	}
	main .newsBlock .newsDetail .newsBox3 {
		width: 100%;
		margin: 0 auto 30px;
	}
	main .newsBlock .newsDetail .newsBox3 figure {
		max-width: 550px;
	}
	main .newsBlock .newsDetail .newsBox4 {
		width: 100%;
		margin: 0 auto 30px;
	}
	main .newsBlock .newsDetail .newsBox5 {
		width: 100%;
		margin: 0 auto 30px;
	}
	main .newsBlock .newsDetail .newsBox6 {
		width: 100%;
		margin: 0 auto 30px;
	}
	main .newsBlock .newsDetail .newsBox6 figure {
		max-width: 550px;
	}
	main .newsBlock > div:nth-child(even) {
		background-size: 290px,800px,800px;
		background-position: -80px calc(100% - 20px),center top,center bottom;
	}
	main .newsBlock > div:nth-child(even) h3 {
		margin: 0 calc(50% - 480px) 10px;
	}
	main .newsBlock > div:nth-child(even) .newsList {
		margin: 0 calc(50% - 480px) 10px;
	}
	main .newsBlock .newsBox .btnMore {
		margin: 10px calc(50% - 480px) 0 0;
	}


}



@media screen and (min-width: 1200px){
	/*	約1200px以上の画面向けスタイル pc style */

	/* ---------------------------------------- */
	/* 共通 */
	/* ---------------------------------------- */
	/* フッタ */
	footer .pchanIllustFoot {
		left: calc(50% - 580px);
	}
	footer .footBtn {
		right: calc(50% - 580px);
	}


	/* 一覧 */
	---------------------------------------- */
	main .newsBlock {
		padding: 120px 0 0;
	}
	main .newsBlock .newsBox {
		padding: 0 calc(50% - 600px);
	}
	main .snsBlock {
		right: calc(50% - 600px);
	}


	/* 詳細
	---------------------------------------- */
	main .newsBlock .newsDetail {
		margin: 0;
		padding: 0 calc(50% - 600px) 80px;
	}
	main .newsBlock .newsDetail .newsBox1 figure {
		max-width: 580px;
	}
	main .newsBlock .newsDetail .newsBox2 figure {
		max-width: 580px;
	}
	main .newsBlock .newsDetail .newsBox3 figure {
		max-width: 580px;
	}
	main .newsBlock .newsDetail .newsBox6 figure {
		max-width: 580px;
	}

	main .newsBlock > div:nth-child(even) h3 {
		margin: 0 calc(50% - 600px) 10px;
	}
	main .newsBlock > div:nth-child(even) .newsList {
		margin: 0 calc(50% - 600px) 10px;
	}
	main .newsBlock .newsBox .btnMore {
		margin: 10px calc(50% - 600px) 0 0;
	}

}