@charset "utf-8";
.photo-common{
	padding-block: 100px;
	font-size: 1.8rem;
	text-align: center;
	img{
		width: 100%;
		max-width: fit-content;
		height: auto;
		vertical-align: top;
	}
	h2 {
		position: relative;
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-bottom: 40px;
	}
	.h2-en {
		margin-inline: auto;
	}
	.h2-jp {
		font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
		font-size: 3.2rem;
		font-weight: 500;
		line-height: 1.2;
	}
	.h2-en {
		img{
			display: none;
		}
		.location{
			display: block;
		}
	}
	h3 {
		font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
		font-size: 1.22em;
		font-weight: 500;
		line-height: 1.2;
	}
	[class*="-caption"] {
    font-size: 1.4rem;
    text-align: right;
    line-height: 1;
    margin-top: 7px;
	}
}

.photo-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 430px;
	height: 65px;
	background-color: #d77b7b;
	border: 1px solid #d77b7b;
	color: #ffffff;
	font-size: 16px;
	transition: .1s ease-in-out;
	span {
		position: relative;
		left: -2px;
	}
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 50px;
		display: block;
		width: 10px;
		height: 10px;
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		transform: rotate(45deg) translateY(calc(-50% - 3px));
		transition: .1s ease-in-out;
	}
}
a.photo-btn {
	color: #d77b7b;
}
@media (min-width: 769px){
	.photo-btn:hover {
		background-color: #ffffff;
		color: #d77b7b;
		&::after {
			right: 46px;
			border-color: #d77b7b;
		}
  }
}
@media (max-width: 768px){
	.photo-common{
		padding-block: 70px;
			font-size: 1.6rem;
		.h2-jp {
			font-size: 2.6rem;
		}
		[class*="-caption"] {
        padding-right: 10px;
        font-size: 1.2rem;
    }
	}
}

/* area 
--------------------------------*/
.area-item.-location{
	display: none;
}
.photo .area {
	background-color: #ffffff;
	.h2-en {
		width: 431px;
	}
	.h2-jp {
		margin-top: -13px;
	}
}
.area-lead {
	margin-top: 20px;
}
.area-link {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	padding: 15px 15px 30px;
	background-color: #f5eeee;
	box-shadow: 0px 0px 8.45px 4.55px rgba(128, 128, 128, 0.15);
	border-radius: 10px;
	p {
		flex: 1 1 auto;
		font-size: 16px;
	}
	.photo-btn {
		margin-inline: auto;
	}
}
a.area-link {
	color: #3a342c;
}
.area-item-title {
	font-size: 20px;
	font-weight: bold;
}
.area-item.-location {
	.area-link {
		background: transparent;
		box-shadow: none;
	}
}
.photo-shared.-hawaii {
	.area-item.-hawaii {
		display: none;
	}
}
.photo-shared.-guam {
	.area-item.-guam {
		display: none;
	}
}
.photo-shared.-maldives {
	.area-item.-maldives {
		display: none;
	}
}
.photo-shared.-bali {
	.area-item.-bali {
		display: none;
	}
}
.photo-shared.-europe {
	.area-item.-europe {
		display: none;
	}
}
.photo-shared.-australia {
	.area-item.-australia {
		display: none;
	}
}
.photo-shared.-okinawa {
	.area-item.-okinawa {
		display: none;
	}
}
.photo-shared.-hokkaido {
	.area-item.-hokkaido {
		display: none;
	}
}
.photo-shared.-location {
	.area-item.-location {
		display: none;
	}
}
@media (min-width: 769px) {
	.area-list.-dom {
		.area-item {
			flex: 0 0 540px;
		}
		.area-item.-location {
			flex: none;
		}
	}
	.area-item.-location {
		.area-link {
			flex-direction: row;
			gap: 40px;
			width: fit-content;
			margin-inline: auto;
			p {
				flex: none;
			}
		}
		.area-image {
			width: 330px;
		}
	}
}
@media (max-width: 768px) {
	.photo .area {
		.h2-en {
			width: calc(718px / 2);
		}
	}
	.area-lead {
		text-align: left;
		line-height: 1.6;
	}
	.area-link {
		p {
			text-align: left;
			line-height: 1.5;
			br {
				display: none;
			}
		}
	}
}