@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------------------
TOPPAGE
-------------------------------------------------------------- */
h2 {
	margin: 80px 0 40px;
}

#mainVisual {
	position: relative;
}

#mainVisual::before {
	content: '';
	background: url("../images/home/bgMain.jpg") no-repeat left top / cover;
	clip-path: polygon(200px 0, 100% 0, 100% 100%, 0 100%);
	width: calc(100% - 250px);
	height: 680px;
	position: absolute;
	left: 250px;
}

#mainVisualArea {
	min-width: 1024px;
	height: 680px;
	margin: 0 auto;
	padding: 20px 12px;
	position: relative;
	display: grid;
	align-items: center;
}

#mainVisualArea .sent {
	font-size: 2.6rem;
	font-weight: bold;
}

#mainVisualArea .sent p {
	margin-bottom: 0;
}

#mainVisualArea .sent p.lead img {
	width: 620px;
}

#mainVisualArea .sent p.leadTxt {
	margin-top: 45px;
}


#mainVisualThumbArea {
	width: 1024px;
	margin: 0 auto;
	padding: 0 12px;
}

#mainVisualThumbArea p.ph {
	text-align: center;
	margin-bottom: 0;
}


#mainVisualMv {
	position: relative;
	overflow: hidden;
}

#mainVisualMvArea {
	min-width: 1024px;
	/*height: 680px;*/
	margin: 0 auto;
	padding: 20px 12px;
	position: relative;
	display: grid;
	align-items: center;
	aspect-ratio: 16 / 9;
}

#mainVisualMvArea .sent {
	font-size: 2.6rem;
	font-weight: bold;
}

#mainVisualMvArea .sent p {
	margin-bottom: 0;
}

#mainVisualMvArea .sent p.lead img {
	width: 620px;
}

#mainVisualMvArea .sent p.leadTxt {
	margin-top: 45px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

#mainVisualMv #bgMain {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1;
	background: url("../images/home/bgMainThumb.jpg") no-repeat center center / cover;
}

#mainVisualMv #bgMain video {
	/*max-width: initial;*/
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

@media screen and (min-width: 767px) {
	#mainVisualMv #bgMain video {
		max-width: initial;
	}
}


#mainVisualMv2 {
	position: relative;
}

#mainVisualMv2Area {
	min-width: 1024px;
	height: 100%;
	margin: 0 auto;
	padding: 20px 12px;
	position: absolute;
	right: 0;
	left: 0;
	display: grid;
	align-items: center;
}

#mainVisualMv2Area .sent {
	font-size: 2.6rem;
	font-weight: bold;
}

#mainVisualMv2Area .sent p {
	margin-bottom: 0;
}

#mainVisualMv2Area .sent p.lead img {
	width: 52%;
	max-width: 620px;
}

#mainVisualMv2Area .sent p.leadTxt {
	margin-top: 45px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}


.contBox {
	width: 1024px;
	margin: 0 auto;
	padding: 80px 12px;
}

/*
.contBox h2:first-child {
	margin-top: 0;
}
*/
.contBox div:first-child h2 {
	margin-top: 0;
}

.contBox *:last-child {
	margin-bottom: 0;
}

.bdTop {
	border-top: 1px solid;
}

p.btn {
	width: 380px;
	margin: 30px auto 0;
}

p.btn a {
	border-radius: 6px;
	text-decoration: none;
	padding: 10px;
	display: grid;
	grid-template-columns: auto 20px ;
	column-gap: 10px;
	align-items: center; 
	justify-content: center;
}

p.btn a::after {
	content: '';
	background: no-repeat center center / contain;
	height: 20px;
}

.topColumn {
	display: grid;
}

.topColumn.column2 {
	grid-template-columns: repeat(2, 480px);
	gap: 40px;
}

.topColumn.column3 {
	grid-template-columns: repeat(3, 304px);
	gap: 44px;
}

.topColumn .phL > *:first-child, 
.topColumn .phR > *:first-child, 
.topColumn .sent > *:first-child:not(.listVe) {
	margin-top: 0;
}

.topColumn .phL > *:last-child, 
.topColumn .phR > *:last-child, 
.topColumn .sent > *:last-child:not(.listVe) {
	margin-bottom: 0;
}

.topColumn .sent p {
	margin-bottom: 20px;
}

ul.topColumn > li {
	padding-left: 0;
	position: static;
}

ul.topColumn > li::before {
	content: none;
}

ul.topColumn > li + li {
	margin-top: 0;
}

ul.listSi li a .data p.time, 
ul.listVe li .data p.time {
	font-size: 1.4rem;
}

ul.listSi li a .data, 
ul.listVe li .data {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -5px 0 5px -10px;
}

ul.listSi li a .data p, 
ul.listVe li .data p {
	margin: 5px 0 0 10px;
}

ul.listSi li a .data p.new, 
ul.listVe li .data p.new {
	font-size: 1.4rem;
	font-weight: bold;
	color: #ee0000;
}

ul.listSi li a {
	text-decoration: none;
}

ul.listSi li a {
	text-decoration: none;
}

ul.listSi li a p.phPost {
	height: 304px;
	display: block;
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
}

ul.listSi li a p.phPost img {
	max-width: initial;
	width: auto;
	height: 100%;
	position: absolute;
	right: 50%;
	bottom: 50%;
	transform: translate(50%, 50%);
}

ul.listSi li a .data {
	margin-bottom: 2px;
}

ul.listSi li a p.tit {
	text-decoration: underline;
}

ul.listSi li a:hover p.tit {
	text-decoration: none;
}

ul.listVe {
	margin: -20px 0 0;
}

ul.listVe li {
	padding-left: 0;
	position: static;
	margin: 20px 0 0;
}

ul.listVe li::before {
	content: none;
}

.topColumn.column2.titBox {
	grid-template-columns: 210px auto;
	gap: 30px;
}

.topColumn.column2.titBox .tit {
	border-right: 1px solid;
	padding-right: 30px;
	display: grid;
	grid-auto-rows: min-content;
}

.topColumn.column2.titBox .tit h2, 
.topColumn.column2.titBox .tit p.btn {
	justify-self: end;
}

.topColumn.column2.titBox .tit h2 {
	text-align: left;
	padding-bottom: 0;
}

.topColumn.column2.titBox .tit h2::after {
	content: none;
}

.topColumn.column2.titBox .tit p.btn {
	width: auto;
	margin: 0;
}

.topColumn.column2.titBox .tit p.btn a {
	background-color: transparent;
	text-decoration: underline;
	padding: 0;
}

.topColumn.column2.titBox .tit p.btn a:hover {
	text-decoration: none;
}


.bdTop div.sent p.tel {
	font-size:32px;
	font-weight:bold;
}
.bdTop div.sent p.tel img {
	width: 26px;
	margin-right:4px;
}

@media screen and (max-width: 1024px) {
	#mainVisualMvArea {
		/*min-width: 100%;*/
	}
}

/*__________ TAB-SP __________*/
@media screen and (max-width: 959px) {

	#mainVisualThumbArea {
		padding: 0 10px;
	}


	.topColumn.column3 {
		gap: 38px;
	}

}


/*__________ TAB __________*/
@media screen and (max-width: 959px) and (min-width: 768px) {

	#mainVisual::before {
		width: calc(100% - 180px);
		height: 508px;
		left: 180px;
	}

	#mainVisualArea {
		min-width: 768px;
		height: 508px;
		padding: 20px 10px;
	}

	#mainVisualArea .sent p.lead img {
		width: 460px;
	}

	#mainVisualArea .sent p.leadTxt {
		margin-top: 40px;
	}


	#mainVisualThumbArea {
		width: 768px;
	}


	#mainVisualMvArea {
		min-width: 768px;
		height: 508px;
		padding: 20px 10px;
	}

	#mainVisualMvArea .sent p.lead img {
		width: 460px;
	}

	#mainVisualMvArea .sent p.leadTxt {
		margin-top: 40px;
	}


	#mainVisualMv2Area {
		min-width: 768px;
		padding: 20px 10px;
	}

	#mainVisualMv2Area .sent p.leadTxt {
		margin-top: 40px;
	}


	.contBox {
		width: 768px;
		padding: 80px 10px;
	}

	.topColumn.column2 {
		grid-template-columns: repeat(2, 354px);
	}

	.topColumn.column3 {
		grid-template-columns: repeat(3, 224px);
	}

	ul.listSi li a p.phPost {
		height: 224px;
	}

}


/*__________ SP __________*/
@media screen and (max-width: 767px) {

	h2 {
		margin-top: 50px;
	}

	#mainVisual::before {
		background-position: center top;
		clip-path: none;
		width: 100%;
		height: 260px;
		left: 0;
	}

	#mainVisualArea {
		min-width: 320px;
		height: auto;
		padding: 190px 10px 15px;
		place-content: center;
	}

	#mainVisualArea .sent p.lead img {
		width: 500px;
	}

	#mainVisualArea .sent p.leadTxt {
		margin-top: 20px;
	}


	#mainVisualThumbArea {
		width: auto;
		min-width: 320px;
		max-width: 520px;
	}


	#mainVisualMvArea {
		min-width: 320px;
		height: 90vh;
		padding: 190px 10px 15px;
		place-content: center;
		aspect-ratio: auto;
	}

	#mainVisualMvArea .sent p.lead img {
		width: 500px;
	}

	#mainVisualMvArea .sent p.leadTxt {
		margin-top: 20px;
	}


	#mainVisualMv2Area {
		width: auto;
		min-width: 320px;
		max-width: 520px;
		padding: 20px 10px;
		/* 
		align-items: start;
		display: block;
		 */
	}

	#mainVisualMv2Area .sent {
		font-size: 2.2rem;
	}

	#mainVisualMv2Area .sent p.lead img {
		max-width: 500px;
	}

	#mainVisualMv2Area .sent p.leadTxt {
		line-height: 1.5;
		margin-top: 20px;
	}


	.contBox {
		width: auto;
		min-width: 320px;
		max-width: 520px;
		padding: 50px 10px;
	}

	p.btn {
		width: auto;
		max-width: 380px;
	}

	.topColumn.column2 {
			grid-template-columns: initial;
			justify-content: center;
			gap: 30px;
		}

	.topColumn.column3 {
		grid-template-columns: initial;
	}

	ul.listSi li a p.phPost {
		height: auto;
		padding-top: 100%;
	}

/* 
	.topColumn.column3 {
		grid-template-columns: repeat(auto-fit, 228px);
	}

	.topColumn.column3 li a p.phPost {
		height: 228px;
	}
 */

	.topColumn.column2.titBox {
		grid-template-columns: auto;
		row-gap: 20px;
		justify-content: initial;
	}

	.topColumn.column2.titBox .tit {
		border-right: none;
		border-bottom: 1px solid;
		padding: 0 0 20px 0;
		display: grid;
		grid-auto-flow: column;
		column-gap: 10px;
		align-items: center;
	}

	.topColumn.column2.titBox .tit h2 {
		justify-self: auto;
		margin: 0;
	}

}


/*__________ SP2 __________*/
/* 
@media screen and (max-width: 530px) {

	.topColumn.column3 {
		grid-template-columns: initial;
	}

	ul.listSi li a p.phPost {
		height: auto;
		padding-top: 100%;
	}

}
 */
 
#topContentsArea .contBox {
	max-width: 95%;
	width: 1200px;
	margin: 0 auto;
}
.ph img {
	width: 100%;
}
#topContentsArea .contBox .topColumn.column2 {
	grid-template-columns: repeat(2, 1fr);
	column-gap: 80px;
}

#topContentsArea .contBox .topColumn.column3 {
	gap: calc((100% - (304px * 3)) / 2);
}

/*__________ TAB-SP __________*/
@media screen and (max-width: 959px) {
	#topContentsArea .contBox {
		width: 95%;
	}
}

/*__________ TAB __________*/
@media screen and (max-width: 959px) and (min-width: 768px) {
	#topContentsArea .contBox {
		width: 95%;
		padding: 50px 10px;
	}
	#topContentsArea .contBox .topColumn.column3 {
		gap: calc((100% - (224px * 3)) / 2);
	}
}

/*__________ SP __________*/
@media screen and (max-width: 767px) {
	#topContentsArea .contBox {
		width: auto;
		min-width: 320px;
		max-width: 520px;
		padding: 30px 10px 50px;
	}
	#topContentsArea .contBox .topColumn.column2 {
		grid-template-columns: initial;
	}
	#topContentsArea .contBox .topColumn.column3 {
		gap: 44px;
	}
}