@charset "utf-8";

#MainVisual2 {
	width: 100%;
	padding-top: 70px;
}
.main_copy {
	position: absolute;
	top:0;
	bottom: 0;
	left: 10%;
	width: 300px;
	margin: auto;
}

.white_back {
	background-color: var(--Color2);
}

#Intro {
	width: 100%;
	background-image: url(../images/plan/back_gd.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	padding-bottom: 120px;
}
#Intro .intro_copy {
	width: 1000px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: auto;
	padding: 160px 0 120px;
	line-height: 2;
	color: var(--Color5);
}
#Intro .intro_copy h2 {
	width: 260px;
}
#Intro .intro_copy h3 {
	margin-bottom: 40px;
	line-height: 1;
}
#Intro .intro_btn ul {
	width: 1000px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: auto;
	gap: 30px;
}

#point01,
#point02,
#point03,
#point04 {
	width: 100%;
}
.point_back {
	background-color: rgba(116, 140, 166, .2);
}
.sec_copy {
	width: 1000px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: auto;
	padding: 160px 0 120px;
	line-height: 2;
}
.sec_copy h2 {
	width: 260px;
	font-family: var(--fontJp);
	color: var(--Color5);
	line-height: 1;
	letter-spacing: .1em;
	font-weight: 300;
	font-size: 2.5rem;
}
.sec_copy h3 {
	margin-bottom: 40px;
	line-height: 1;
}
.contents {
	width: 1000px;
	margin: auto;
}

#point01 .plan_ttl {
	border-bottom: 1px solid var(--Color3);
	margin: 100px auto 40px;
	text-align: center;
}
#point01 .plan_ttl img {
	width: 460px;
}
#point01 .scene_cont {
	margin: 60px auto;
}
#point01 .scene_detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 60px;
}
#point01 .scene_detail.flex_reverse {
	flex-direction: row-reverse;
}
#point01 .scene_detail div,
#point01 .scene_detail figure {
	width: 45%;
}
#point01 .scene_detail div h3 {
	color: var(--Color3);
	font-family: var(--fontJp);
	margin-bottom: 1em;
}
#point01 .scene_detail div h3 span {
	font-size: 150%;
}
#point01 .scene_detail div h4 {
	margin-bottom: 1em;
}
#point01 .scene_last {
	width: 100%;
	background-color: var(--Color3);
}
#point01 .scene_last_inner {
	width: 1000px;
	margin: auto;
	padding: 60px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#point01 .scene_last_copy {
	color: var(--Color2);
	width: 55%;
}
#point01 .scene_last_copy h4 {
	letter-spacing: 0;
	margin-bottom: 20px;
}
#point01 .scene_last_photo {
	width: 42%;
}


#point02 .p2_inner,
#point02 .p2_inner2 {
	width: 1000px;
	margin: 80px auto 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#point02 .p2_inner2 {
	margin: 0 auto 60px;
	padding-top: 80px;
	border-top: 1px solid var(--Color3);
}
#point02 .p2_copy01,
#point02 .p2_photo_a {
	width: 48%;
}
#point02 h4 {
	margin-bottom: 30px;
}
#point02 .p2_copy02 {
	width: 36%;
}
#point02 .p2_photo_b {
	width: 30%;
}

#point03 .p3_inner {
	width: 1000px;
	margin: 80px auto 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 2;
}
#point03 .p3_copy {
	width: 34%;
}
#point03 .p3_photo {
	width: 62%;
}
#point03 h4 {
	margin-bottom: 30px;
	vertical-align: baseline;
}
#point03 h4 span {
	font-family: var(--fontSans);
	color: var(--Color3);
	letter-spacing: .25em;
	font-weight: 300;
}
#point03 h4 span span {
	font-size: 200%;
}
#point03 .p3_inner.reverse {
	flex-direction: row-reverse;
}


#point04 .p4_inner1 {
	width: 1000px;
	margin: 80px auto 60px;
	line-height: 2;
}
#point04 .p4_inner1 h3 {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid var(--Color3);
	padding-bottom: 1vw;
}
#point04 h3 img {
	width: 60%;
}
#point04 .p4_inner2 {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 60px auto;
}
#point04 .img_rr {
	width: 62%;
}
#point04 .p4_inner3 {
	width: 35%;
}
#point04 .p4_photo {
	margin: 60px auto;
}
#point04 h4 {
	margin-bottom: 1vw;
}

#point04 .p4_inner4 {
	width: 1000px;
	margin: 120px auto;
}
#point04 .p4_photo4 {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
#point04 .p4_photo4 li {
	width: 22%;
}
#point04 .p4_photo4 li figcaption.p4cap {
	left: 0;
	bottom: -20px;
}
#point04 .p4_inner4 p.ann {
	padding-top: 2vw;
	text-align: right;
}


#RoomPlan {
	width: 100%;
	padding: 80px 0;
	background-color: var(--Color3);
}
#RoomPlan h3 {
	color: var(--Color4);
	font-family: var(--fontJp);
	font-weight: 300;
	font-size: 2.25rem;
	text-align: center;
	letter-spacing: .1em;
	margin-bottom: 20px;
}
#RoomPlan p {
	text-align: center;
	color: var(--Color2);
}
#RoomPlan .plan_thumb {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 40px;
	width: 1000px;
	margin: 40px auto 0;
}
#RoomPlan .plan_thumb li {
	width: 48%;
}
#RoomPlan p.ann {
	width: 1000px;
	text-align: justify;
	margin: 20px auto 0;
}



@media screen and (max-width: 1000px) {

.main_copy {
	width: 30vw;
}


#Intro {
	padding-bottom: 12vw;
}
#Intro .intro_copy {
	width: 95%;
	padding: 16vw 0 12vw;
}
#Intro .intro_copy h2 {
	width: 26vw;
}
#Intro .intro_copy h3 {
	margin-bottom: 4vw;
}
#Intro .intro_btn ul {
	width: 95%;
	gap: 3vw;
}


.sec_copy {
	width: 95%;
	padding: 16vw 0 12vw;
}
.sec_copy h2 {
	width: 26vw;
	font-size: 4vw;
}
.sec_copy h3 {
	margin-bottom: 4vw;
}
.contents {
	width: 95%;
}


#point01 .plan_ttl {
	margin: 10vw auto 4vw;
}
#point01 .plan_ttl img {
	width: 46vw;
}
#point01 .scene_cont {
	margin: 6vw auto;
}
#point01 .scene_detail {
	margin-bottom: 6vw;
}
#point01 .scene_detail div,
#point01 .scene_detail figure {
	width: 49%;
}
#point01 .scene_last_inner {
	width: 95%;
	padding: 6vw 0;
}
#point01 .scene_last_copy h4 {
	margin-bottom: 2vw;
	letter-spacing: -.02em;
}



#point02 .p2_inner,
#point02 .p2_inner2 {
	width: 95%;
	margin: 8vw auto 6vw;
}
#point02 .p2_inner2 {
	margin: 0 auto 6vw;
	padding-top: 8vw;
}
#point02 h4 {
	margin-bottom: 3vw;
}


#point03 .p3_inner {
	width: 95%;
	margin: 8vw auto 6vw;
}
#point03 h4 {
	margin-bottom: 3vw;
}
#point03 .p3_copy {
	width: 36%;
}


#point04 .p4_inner1 {
	width: 95%;
	margin: 8vw auto 6vw;
}
#point04 .p4_inner2 {
	margin: 6vw auto;
}
#point04 .p4_photo {
	margin: 6vw auto;
}

#point04 .p4_inner4 {
	width: 95%;
	margin: 12vw auto;
}
#point04 .p4_photo4 {
	margin-top: 6vw;
}
#point04 .p4_photo4 li figcaption.p4cap {
	bottom: -2vw;
}


#RoomPlan {
	padding: 8vw 0;
}
#RoomPlan h3 {
	font-size: 3.6vw;
	margin-bottom: 2vw;
}
#RoomPlan .plan_thumb {
	gap: 3vw 0;
	width: 95%;
	margin: 4vw auto 0;
}
#RoomPlan .plan_thumb li {
	width: 48%;
}
#RoomPlan p.ann {
	width: 95%;
	margin: 2vw auto 0;
}




}

@media screen and (max-width: 767px) {

.main_copy {
	position: absolute;
	top:20vw;
	bottom: auto;
	left: 0;
	right: 0;
	width: 60vw;
}


#Intro .intro_copy {
	display: block;
	text-align: center;
}
#Intro .intro_copy h2 {
	width: 53%;
	margin: 0 auto 16vw;
}
#Intro .intro_btn ul {
	width: 95%;
	display: block;
}
#Intro .intro_btn ul li {
	margin-top: 3vw;
}

.sec_copy {
	display: block;
}
.sec_copy h2 {
	width: 100%;
	margin-bottom: 8vw;
	font-size: 8vw;
	text-align: center;
}
.sec_copy div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sec_copy div h3 {
	text-align: center;
	margin-bottom: 8vw;
}
.sec_copy div p {
	width: 85%;
}


#point01 .plan_ttl img {
	width: 90%;
}
#point01 .scene_cont {
	margin: 12vw auto;
}
#point01 .scene_detail {
	display: block;
	margin-bottom: 12vw;
}
#point01 .scene_detail div,
#point01 .scene_detail figure {
	width: 100%;
}
#point01 .scene_detail div h3,
#point01 .scene_detail div h4 {
	text-align: center;
	margin-bottom: 2vw;
}
#point01 .scene_detail div h3 span {
	font-size: 150%;
}
#point01 .scene_detail div h4 {
	margin-bottom: 1em;
}
#point01 .scene_detail div p {
	margin-bottom: 4vw;
}
#point01 .scene_last_inner {
	width: 95%;
	padding: 12vw 0;
	display: block;
}
#point01 .scene_last_copy h4 {
	margin-bottom: 4vw;
	letter-spacing: .02em;
}
#point01 .scene_last_copy {
	width: 85%;
	margin: 0 auto 8vw;
}
#point01 .scene_last_copy h4 {
	margin-bottom: 4vw;
	text-align: center;
	letter-spacing: .05em;
}
#point01 .scene_last_photo {
	width: 85%;
	margin: auto;
	display: block;
}
#point02 .p2_inner,
#point02 .p2_inner2 {
	width: 85%;
	margin: 16vw auto 12vw;
	flex-wrap: wrap;
}
#point02 h4,
#point02 .p2_copy01,
#point02 .p2_copy02 {
	width: 100%;
	margin-bottom: 4vw;
}
#point02 h4 {
	text-align: center;
}
#point02 .p2_photo_a {
	width: 100%;
}
#point02 .p2_photo_a figcaption.rb_cap {
	bottom: 0;
}
#point02 .p2_photo_b {
	width: 48%;
}


#point03 .p3_inner {
	width: 85%;
	margin: 16vw auto 12vw;
	display: block;
}
#point03 .p3_copy {
	width: 100%;
}
#point03 .p3_photo {
	width: 100%;
}
#point03 h4 {
	text-align: center;
}


#point04 h3 img {
	width: 80%;
}
#point04 .p4_inner2 {
	display: block;
	width: 100%;
}
#point04 .img_rr {
	width: 100%;
}
#point04 .p4_inner3 {
	width: 100%;
}

#point04 .p4_inner4 {
	width: 95%;
	margin: 12vw auto;
}
#point04 .p4_photo4 {
	margin-top: 6vw;
	flex-wrap: wrap;
	gap: 8vw 0;
}
#point04 .p4_photo4 li {
	width: 49%;
}
#point04 .p4_photo4 li figcaption.p4cap {
	bottom: -4vw;
}
#point04 .p4_inner4 p.ann {
	padding-top: 8vw;
}


#RoomPlan {
	padding: 16vw 0;
}
#RoomPlan h3 {
	font-size: 7.2vw;
	margin-bottom: 4vw;
}
#RoomPlan .plan_thumb {
	gap: 6vw 0;
	width: 85%;
	margin: 8vw auto 0;
}
#RoomPlan .plan_thumb li {
	width: 100%;
}
#RoomPlan p.ann {
	width: 85%;
	margin: 4vw auto 0;
}



}