@charset "utf-8";
/*----------------------------------------------------------------------------------------

	page-buy.css

----------------------------------------------------------------------------------------*/

/* subheader //
////////////////////////////////////////////////////////////////////*/

.subheader_visual {
	height: 500px;
	background: url(../images/buy/bg_subheader.png) no-repeat center / cover;
}
.subheader_visual .subheader_visual_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
.subheader_visual .subheader_catch {
	position: relative;
}
.subheader_visual .subheader_catch::before {
	content: "";
	position: absolute;
	right: -189px;
	bottom: -80px;
	width: 258px;
	height: 171px;
	background-color: #fff;
  -webkit-mask: url(../images/buy/subheader-illustration.svg) no-repeat center / contain;
  mask: url(../images/buy/subheader-illustration.svg) no-repeat center / contain;
}
.subheader_visual .subheader_catch .ttl {
	position: relative;
	color: #fff;
	font-weight: 700;
	font-size: 48px;
	font-family: var(--font-gothic);
	line-height: 1.4;
	padding-bottom: 27px;
}
.subheader_visual .subheader_catch .ttl::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	background-color: var(--acc2);
	border-radius: 2px;
}
.subheader_visual .subheader_catch .lead {
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	font-family: var(--font-gothic);
	line-height: 1.8;
	margin-top: 24px;
}
.subheader_visual .subheader_counts_items {
	display: flex;
	align-items: flex-end;
	margin-bottom: 60px;
}
.subheader_visual .subheader_counts_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	background:
		linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
		linear-gradient(rgba(46,98,86,0.65), rgba(46,98,86,0.65));
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
	width: 320px;
	height: 320px;
	padding: 0 40px;
}
.subheader_visual .subheader_counts_item .label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--acc2);
	border-radius: 30px;
	padding: 8px 30px;
	margin-bottom: 6px;
}
.subheader_visual .subheader_counts_item .count .ttl {
	font-size: 22px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
}
.subheader_visual .subheader_counts_item .count .kensu {
	font-size: 32px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
	white-space: nowrap;
	margin-top: 4px;
}
.subheader_visual .subheader_counts_item .count .kensu .num {
	font-size: 64px;
	font-family: var(--font-en);
	line-height: 1;
	letter-spacing: 0.02em;
	margin-right: 0.05em;
}
.subheader_visual .subheader_counts_item .fm-type {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 12px;
}
.subheader_visual .subheader_counts_item .fm-type > li {
	font-size: 13px;
	font-weight: 500;
	font-family: var(--font-gothic);
	line-height: 1.4;
	border: 1px solid #fff;
	border-radius: 20px;
	padding: 4px 16px;
}
.subheader_visual .subheader_counts_item .note {
	font-size: 11px;
	line-height: 1.4;
	margin-top: 6px;
}

/* new */
.subheader_visual .subheader_counts_item.-new {
	width: 200px;
	height: 200px;
	padding: 0 20px;
	margin-left: -60px;
	margin-bottom: -60px;
}
.subheader_visual .subheader_counts_item.-new .count .ttl {
	font-size: 20px;
}
.subheader_visual .subheader_counts_item.-new .count .kensu {
	font-size: 22px;
}
.subheader_visual .subheader_counts_item.-new .count .kensu .num {
	font-size: 48px;
}

/*----------*/

.subheader_bottom {
	background: #b5a680;
	background: url(../images/common/pattern-noise03.svg) repeat center / 1024px 1024px;
}
.subheader_bottom .subheader_bottom_inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding-top: 40px;
	padding-bottom: 40px;
}
.subheader_bottom .bg_txt {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	color: #fff;
	font-weight: 700;
	font-size: 120px;
	font-family: var(--font-en);
	line-height: 1;
	opacity: 0.1;
}
.subheader_bottom .ttl {
	color: #fff;
	font-weight: 700;
	font-size: 28px;
	font-family: var(--font-gothic);
	line-height: 1.4;
}
.subheader_bottom .txt {
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.8;
}


/* recommend //
////////////////////////////////////////////////////////////////////*/

.recommend {
	position: relative;
	margin-top: 48px;
}
.recommend .sec_head01 {
	text-align: center;
}
.recommend .sec_head01 .ttl {
	align-items: center;
}
.recommend .recommend_slider {
	margin: 0 calc(50% - 50vw);
}
.recommend .recommend_btn {
	text-align: center;
	margin-top: 20px;
}


/* search //
////////////////////////////////////////////////////////////////////*/

.search {
	margin-top: 64px;
}
.search .sec_head01 {
	display: flex;
	align-items: flex-end;
	gap: 40px;
}

/* search_block ///
---------------------------------------------- */
/* base.cssに記載 */

/* link-bnr（tour-courses） ///
---------------------------------------------- */
.link-bnr._tour-courses a {
	background: url(../images/buy/bg-bnr-tour-courses.png) no-repeat center / 1000px 200px;
	margin-top: 30px;
}

/* search-method ///
---------------------------------------------- */
.search-method {
	margin-top: 80px;
}
.search-method #search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 20px;
}

/* ----- タブ ----- */
.search-method_head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
}
.search-method_head .subttl {
	font-size: 32px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
}
.search-method_head .search-fm_tabs {
	display: flex;
	gap: 10px;
}
.search-method_head .search-fm_tabs label {
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
	/* width: 160px; */
	background-color: #ccc;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 14px 30px;
	text-align: center;
	cursor: pointer;
}
.search-method_head .search-fm_tabs label:has(input:checked) {
	position: relative;
	color: #fff;
	background-color: var(--acc2);
	border-color: var(--acc2);
}
.search-method_head .search-fm_tabs label:has(input:checked)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 20px;
	height: 10px;
	background-color: var(--acc2);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.search-method_head .search-fm_tabs input {
	display: none;
}

/* ----- 見出し ----- */
.search-method_item h3.ttl {
	position: relative;
	font-size: 28px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
	padding-left: 20px;
}
.search-method_item h3.ttl::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--acc2);
}

/* ----- エリアから探す ----- */
.search-method_item.-area {
	position: relative;
	flex: 0 0 760px;
	border-radius: 10px;
	overflow: hidden;
}
.search-method_item.-area h3.ttl {
	text-shadow:
  1px 1px 0 var(--bgc1), -1px -1px 0 var(--bgc1),
  -1px 1px 0 var(--bgc1),  1px -1px 0 var(--bgc1),
  1px 0 0 var(--bgc1), -1px  0 0 var(--bgc1),
  0 1px 0 var(--bgc1),  0 -1px 0 var(--bgc1);
}
.search-method_item.-area .search-method_item_content {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 30px;
}
.search-method_item.-area .search-method_item_content .search-area .subttl {
	position: absolute;
	top: 24px;
	right: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.2;
	text-align: center;
	width: 116px;
	height: 116px;
	background: url(../images/buy/fukidashi.svg) no-repeat center / contain;
	box-sizing: border-box;
	padding-top: 4px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button {
	position: absolute;
	color: #fff;
	background-color: var(--acc1);
	border-radius: 3px;
	padding: 12px 16px 12px 18px;
	transform: translateX(-50%);
	cursor: pointer;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button > div {
	display: flex;
	align-items: last baseline;
	gap: 8px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button .ttl {
	font-size: 16px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button .kensu {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.1;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button .kensu em {
	color: var(--acc2);
	font-size: 20px;
	font-weight: 700;
	font-family: var(--font-en);
	line-height: 1;
}

/* 位置調整用 */
.search-method_item.-area .search-method_item_content .search-area .area-btns button.koshigaya {
	top: 86px;
	left: 387px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button.kawaguchi {
	top: 280px;
	left: 212px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button.soka {
	top: 258px;
	left: 380px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button.misato {
	top: 242px;
	left: 604px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button.yashio {
	left: 490px;
	bottom: 141px;
}
.search-method_item.-area .search-method_item_content .search-area .area-btns button.adachi {
	left: 396px;
	bottom: 57px;
}

/* ----- 別の方法で探す ----- */
.search-method_item.-other {
	background: var(--bgc1);
	background: url(../images/common/pattern-noise01.svg) repeat center / 1024px 1024px;
	border-radius: 10px;
	flex: 1 1 auto;
	padding: 30px;
}
.search-method_item.-other .link_items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}
.search-method_item.-other .link_item button {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	border: 2px solid var(--acc2);
	box-shadow: 0 2px 0 0 var(--acc2);
	border-radius: 10px;
	width: 100%;
	padding: 14px 16px 12px 30px;
	cursor: pointer;
}
.search-method_item.-other .link_item button .ttl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: 12px;
}
.search-method_item.-other .link_item button .ttl .en {
	color: var(--acc2);
	font-size: 12px;
	font-weight: 700;
	font-family: var(--font-en);
	letter-spacing: 0.05em;
	line-height: 1;
}
.search-method_item.-other .link_item button .ttl .ja {
	font-size: 20px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
}
.search-method_item.-other .link_item button .img {
	width: 90px;
}

/* link-bnr（planning） ///
---------------------------------------------- */
.link-bnr._planning a {
	background: url(../images/buy/bg-bnr-planning.png) no-repeat center / 1000px 200px;
	margin-top: 80px;
}


/* guide //
////////////////////////////////////////////////////////////////////*/

.guide {
	position: relative;
	padding: 64px 0 80px;
	margin-top: 80px;
	overflow: hidden;
}
.guide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bgc1);
	background: url(../images/common/pattern-noise01.svg) repeat center / 1024px 1024px;
	z-index: -1;
}
.guide::after {
	content: "";
	position: absolute;
	right: -300px;
	bottom: -510px;
	width: 1105px;
	height: 1005px;
	background: url(../images/common/bg_deco_circle_double_w.svg) no-repeat center / contain;
	opacity: 0.4;
	z-index: -1;
}
.guide .sec_head01 .ttl {
	align-items: center;
	text-align: center;
}
.guide .guide-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}


/* faq //
////////////////////////////////////////////////////////////////////*/

.faq {
	margin-top: 64px;
}
.faq .sec_head01 {
	margin-bottom: 32px;
}
.faq .sec_head01 .ttl {
	align-items: center;
	text-align: center;
}
.faq .faq_items {
	width: 1000px;
	margin: 0 auto;
}
.faq .faq_btn {
	text-align: center;
	margin-top: 40px;
}


/* top_nairan //
////////////////////////////////////////////////////////////////////*/

.top_nairan {
	position: relative;
	border-radius: 16px;
	padding: 64px 80px 48px;
	margin-top: 80px;
	box-sizing: border-box;
	overflow: hidden;
}
.top_nairan::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../images/common/pattern-noise01.svg) repeat center / 1024px 1024px;
	z-index: -1;
}
.top_nairan::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 8px;
	background-color: var(--acc1);
}
.top_nairan .top_nairan_inner {
	display: flex;
	gap: 40px;
}
.top_nairan .top_nairan_body {
	flex: 1 1 auto;
}
.top_nairan .sec_head01 {
	margin-bottom: 32px;
}
.top_nairan .nairan-list_items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	justify-content: space-between;
}
.top_nairan .nairan-list_item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border: 2px solid var(--acc2);
	border-radius: 10px;
	box-shadow: 0 2px 0 0 var(--acc2);
	height: 125px;
	box-sizing: border-box;
}
.top_nairan .nairan-list_item a .img {
	width: 54px;
}
.top_nairan .nairan-list_item a .ttl {
	font-size: 14px;
	font-weight: 700;
	margin-top: 5px;
}
.top_nairan .nairan-list_item a .kensu {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.top_nairan .nairan-list_item a .kensu .num {
	color: #a29673;
	font-size: 20px;
	font-weight: 700;
	font-family: var(--font-en);
	line-height: 1;
}
.top_nairan .top_nairan_img {
	flex: 0 0 400px;
	border-radius: 16px;
	overflow: hidden;
}
.top_nairan .top_nairan_img img {
	height: 100%;
	object-fit: cover;
}

/*----------*/

.top_nairan .nairan-update {
	display: flex;
	width: 100%;
	border-top: 1px solid var(--acc2);
	border-bottom: 1px solid var(--acc2);
	box-sizing: border-box;
	margin-top: 48px;
}
.top_nairan .nairan-update .ttl {
	width: 20%;
	margin-top: 28px;
}
.top_nairan .nairan-update .ttl .en {
	display: block;
	color: var(--acc2);
	font-size: 12px;
	font-weight: 700;
	font-family: var(--font-en);
	letter-spacing: 0.05em;
	line-height: 1;
}
.top_nairan .nairan-update .ttl .ja {
	display: block;
	font-size: 22px;
	font-weight: 700;
	font-family: var(--font-gothic);
	line-height: 1.4;
	margin-top: 4px;
}
.top_nairan .nairan-update #tksn-nairanlist {
	flex: 1 1 auto;
	border-left: 1px solid var(--acc2);
	margin: 20px 0;
	overflow: hidden;
}
.top_nairan .nairan-update #tksn-nairanlist,
.top_nairan .nairan-update #tksn-nairanlist ul {
	height: 110px;
}
.top_nairan .nairan-update #tksn-nairanlist ul {
	overflow-y: auto;
}
.top_nairan .nairan-update #tksn-nairanlist ul > li {
	border: none;
	position: relative;
}
.top_nairan .nairan-update #tksn-nairanlist ul > li > span {
	margin: auto;
	height: 1em;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40px;
	font-size: inherit;
	line-height: 1;
	pointer-events: none;
}
.top_nairan .nairan-update #tksn-nairanlist a {
	padding: 10px 0 8px 130px;
	display: block;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.04em;
}










