/*----------------------------------------------------
index.php CSS
----------------------------------------------------*/

/*	mainImg
----------------------------------------------------*/
#mainImg {
position:relative;
padding: 0 100px 20px 100px;
background:#ffffff;
}
@media screen and (max-width: 959px) {
	#mainImg {
		padding: 0 30px 20px 30px;
		margin-top: 30px;
	}
}
@media screen and (max-width: 640px) {
	#mainImg {
	padding: 30px 18px 32px 18px;
	}
}

#main {
padding:20px 10px;
}

/* #mainImg p.yado_t {
padding: 1px 5px;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
font-size: 12px;
background: rgba(255, 255, 255, .8);
} */

#mainImg .mainImg_left {
	position: relative;
	width: 72%;
}
@media screen and (max-width: 640px) {
#mainImg .mainImg_left {
	width: 100%;
	height: 150%;
	}
}

#mainImg .mainImg_right {
	padding-top: 53px;
	width: 25%;
}
@media screen and (max-width: 959px) {
	#mainImg .mainImg_right {
	padding-top: 97px;
	}
}
@media screen and (max-width: 640px) {
#mainImg .mainImg_right {
	padding-top: 3px;
	width: 100%;
}
}

#mainImg .mainImg_right .mainImg_right_copy {
	width: 100%;
	display: block;
}

#mainImg .mainImg_right .mainImg_right_copy img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

#mainImg .mainImg_right .mainImg_right_copy--top img { 
	aspect-ratio: 350 / 250;
}

#mainImg .mainImg_right .mainImg_right_copy--bottom img { 
	aspect-ratio: 350 / 274;
}

@media screen and (max-width: 640px) {
	#mainImg .mainImg_right .mainImg_right_copy--top img {
		aspect-ratio: 339 / 73;
	}

	#mainImg .mainImg_right .mainImg_right_copy--bottom img {
		aspect-ratio: 339 / 139;
	}
}



#mainImg .mainImg_left::before {
	content: "";
	width: 100.03%;
	height: 0;
	padding-top: 24.9%;
	background:url(../../images/index/mv_villa@2x_250728.png) no-repeat center center/cover;
	position: absolute;
	z-index: 999;
	pointer-events: none;
}
@media screen and (max-width: 959px) {
	#mainImg .mainImg_left::before {
		top: 59px;
	}
}
@media screen and (max-width: 640px) {
	#mainImg .mainImg_left::before {
		/* padding-top: none; */
		background-image:url(../../images/index/mv_villa_sp@2x_250728.png);
		top: 0;
		width: 100%;
		height: 63.5%;
	}
}

#mainImg .mainImg_wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 640px) {
#mainImg .mainImg_wrap {
	flex-direction:column;
}
}

#mainImg .swiper-slide {
	border-radius: 12px;
	overflow: hidden;
}
@media screen and (max-width: 640px) {
	#mainImg .swiper-slide {
		border-radius: 7px;
	}
	}

#mainImg ul {
	padding-top:43px;
}
@media screen and (max-width: 959px) {
	#mainImg ul {
	padding-top: 28px;
	}
}
@media screen and (max-width: 480px) {
#mainImg ul {
	padding-top:18px;
}
}

/*	swiperの矢印
----------------------------------------------------*/
#mainImg .swiper-button-prev {
  height: 210px;
  width: 35px;
}
@media screen and (max-width: 959px) {
	#mainImg .swiper-button-prev{
	/* height: 120px; */
	width: 20px;
}
}

#mainImg .swiper-button-next {
  height: 210px;
  width: 35px;
}
@media screen and (max-width: 959px) {
	#mainImg .swiper-button-next{
	/* height: 120px; */
	width: 20px;
}
}

/* 前へ次への矢印カスタマイズ */
#mainImg .swiper-button-prev::after{
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 30px;
  width: 30px;
}
@media screen and (max-width: 480px) {
	#mainImg .swiper-button-prev::after{
  	height: 110px;
	}
}

#mainImg .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 30px;
  width: 30px;
}
@media screen and (max-width: 480px) {
	#mainImg .swiper-button-next::after{
  	height: 110px;
	}
}

/* 前への矢印カスタマイズ */
#mainImg .swiper-button-prev::after {
  background-image: url(../../images/index/arrow_back.svg);
}
/* 次への矢印カスタマイズ */
#mainImg .swiper-button-next::after {
  background-image: url(../../images/index/arrow_next.svg);
}
/* 画像サイズ調整 */
#mainImg .swiper-slide img {
  height: auto;
  width: 100%;
}

/*	swiperのページネーション
----------------------------------------------------*/
/* ページネーションの基本スタイル */
#mainImg .swiper-pagination-bullet {
  background-color: transparent; /* 背景色を透明に */
  background-image: url(../../images/index/pn_unselected.svg);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: unset; /* これがないと画像が欠ける */
  height: 10px;
  opacity: 1; /* 画像の透過を無くす */
  width: 10px;
}
@media screen and (max-width: 959px) {
	#mainImg .swiper-pagination-bullet {
	height: 8px;
	width: 8px;	
}
}
/* 選択されているページネーション */
#mainImg .swiper-pagination-bullet-active {
  background-image: url(../../images/index/pn_select.svg);
  height: 10px;
  width: 10px;
}
@media screen and (max-width: 959px) {
	#mainImg .swiper-pagination-bullet-active {
	height: 8px;
	width: 8px;	
}
}

/* 画像サイズ調整 */
#mainImg .swiper-slide img {
  height: auto;
  width: 100%;
}

#mainImg .swiper-container1 {
	--add-bottom: 40px;
	padding-bottom: var(--add-bottom);
}
@media screen and (max-width: 640px) {
	#mainImg .swiper-container1 {
	--add-bottom: 30px;
	padding-bottom: var(--add-bottom);
}
}

#mainImg .swiper-container1 [class^="swiper-button-"]{
	top: calc(50% - var(--add-bottom) / 2);
}

#mainImg .swiper-pagination {
	--add-left: 40%;
	padding-left: var(--add-left);
}
@media screen and (max-width: 959px) {
	#mainImg .swiper-pagination {
	--add-left: 34%;
	padding-left: var(--add-left);
}
}
@media screen and (max-width: 640px) {
	#mainImg .swiper-pagination {
	--add-left: 26%;
	padding-left: var(--add-left);
}
}

@media ( prefers-reduced-motion: reduce ) {
	.swiper, .swiper-container2, .swiper-wrapper, .swiper-slide, .swiper-slide img{
	 transition-duration: 100ms !important;
 }
}

/* スケジュールのbox */
.schedule{
	margin-top: 50px;

}
@media screen and (min-width: 640px) {
.schedule{
margin-top: 20px;
}
}
/* Tables */
/* ============================================ */
.table_box table {
border-color: inherit; /* 1 */
border-collapse: collapse;
/* border: 1px solid #212836; */
position: relative;
}

.table_box {
	width: 50%;
/* max-width: 100%; */
margin: 5px auto;
overflow-y: hidden;
height: auto;
}
@media screen and (max-width: 640px) {
.table_box {
width: 100%;
}
}

.table_day {
position: sticky;
left: 0;
}

.table_box b {
color: #333;
}

.table_box::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}

.table_box::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgb(125, 125, 125);
/* box-shadow: 1px 1px 1px rgba(9, 182, 167); */
}

.table_box caption {
text-align: left;
}

.table_box td,
.table_box th {
display: flex;
align-items: center;
justify-content: center;
/* width: calc((100%) / 4); */
/* border: 1px solid #212836; */
background-color: #fff;
line-height: 1.4;
}

.table_box th {
min-width: 50px;
padding: 4px 8px;
border: 1px solid #4C9568;
border-right: none;
border-bottom: none;
}

@media screen and (max-width: 640px) {
.table_box th {
padding: 5px;
}
}

#top .table_box table tr:last-of-type {
border-bottom: 1px solid #4C9568;
}

#top .table_box th:last-of-type {
border-right: 1px solid #4C9568;
}

.table_box .border_bottom {
border-bottom: 1px solid #4C9568;
}

.table_box .border_top_none {
border-top: none;
}

#top .table_box th:first-of-type {
min-width: 150px;
justify-content: start;
border-right: 1px solid #4C9568;
}
@media screen and (max-width: 640px) {
.table_box th:first-of-type {
min-width: 83px !important;
/* height: 43px; */
}
}

.table_box td {
/* width: 100%; */
padding: 3px;
}

.table_box tr {
display: flex;
/* max-width: 1000px; */
}

.table_box .table_villa {
	position: sticky;
}

.table_box .table_day {
background: #fff;
color: #333333;
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 640px) {
.table_box .table_day {
font-size: 11px;
line-height: 1.4;
}
}

.table_box .text_ks {
font-size: 12px;
}
@media screen and (max-width: 640px) {
.table_box .text_ks {
font-size: 8px;
}
}

.table_box .table_title {
color: #fff;
font-size: 12px;
background-color: #4179B9;
padding: 4px 12px;
}

/* @media screen and (max-width: 640px) {
.table_box .table_title {
max-width: 35px;
}
} */

.table_box .table_text {
text-align: center;
font-weight: bold;
}


.table_box .floating {
position: sticky;
top: 0;
text-align: center;
/* z-index: 100; */
}

.table_box .triangle {
color: #3d6ec2;
}

.campaign_title {
letter-spacing:3px;
font-size:24px;
font-weight: bold;
text-align:center;
}


/* 「繁忙日の空き状況」の注意書き部分 */
/* ============================================ */
.table_box_sub {
width: 60%;
margin: 5px auto;
}
@media screen and (max-width: 640px) {
.table_box_sub {
	width: auto;
	margin: 0;
	margin-left: 3px;
}
}

.attention  {
	line-height: 1.4;
}