@charset "utf-8";
/* ===================================================
concept css
====================================================== */
/* ---------------------------------------------------
	common
------------------------------------------------------ */
#concept { position: relative; isolation: isolate; }
#concept::before { content:""; position: fixed; inset: 0; z-index: -1; background: url(../../concept/img/history_bg.webp) center / cover no-repeat; }
/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 { position: relative; padding-top: 162px; background-color: var(--white); isolation: isolate; }
#sec01 .deco { position: absolute; top: 0; right: 0; z-index: -1; width: 433px; }
#sec01 .tit01 { color: rgba(0,0,0,.45); }
#sec01 .tit02 { color: var(--black-50); }
#sec01 .txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; color: var(--black-80); }
@media screen and (min-width: 601px) {
	#sec01 .inner_md { display: flex; flex-direction: row-reverse; justify-content: center; column-gap: 76px; }
}
@media screen and (max-width: 600px) {
	#sec01 { padding-top: 65px; }
	#sec01 .deco { width: calc(200 / 375 * 100%); }
	#sec01 .txt { font-size: 13px; margin: 30px auto 0; width: fit-content; }
}

/* ---------------------------------------------------
	sec02
------------------------------------------------------ */
#sec02 { padding-bottom: 288px; }
#sec02 .hgroup_block { padding-block: 118px 83px; background-color: var(--white); }
#sec02 .hgroup_jp { font-feature-settings: "palt"; position: relative; padding-top: 51px; }
#sec02 .hgroup_jp::before { content:""; position: absolute; top: 0; left: 0;  width: 100%; height: 34px; background: url(../img/logo_mark.svg) center / contain no-repeat; }
#sec02 .hgroup_en { margin-top: 8px; }
#sec02 .inner_md { margin-top: 252px; padding: 150px 90px 167px; max-width: 680px; background: url(../../concept/img/history_inner_bg.webp) center / cover no-repeat; }
#sec02 .inner_hgroup:nth-of-type(n+2) { margin-top: 168px; }
#sec02 .inner_hgroup_jp { font-feature-settings: "palt"; font-size: 28px; line-height: calc(40 / 28); letter-spacing: .1em; }
#sec02 .inner_hgroup_en { margin-top: 10px; }
#sec02 .img { display: block; margin-top: 43px; }
#sec02 .txt { font-weight: 500; font-size: 16px; line-height: calc(35 / 16); letter-spacing: .1em; margin-top: 40px; }
@media screen and (max-width: 600px) {
	#sec02 { padding-bottom: 65px; }
	#sec02 .hgroup_block { padding: 65px 6% 30px; }
	#sec02 .hgroup_jp { padding-top: 34px; }
	#sec02 .hgroup_jp::before { height: 24px; }
	#sec02 .inner_hgroup_en { margin-top: 5px; }
	#sec02 .inner_md { margin-top: 65px; padding: 65px 8%; }
	#sec02 .inner_hgroup:nth-of-type(n+2) { margin-top: 40px; }
	#sec02 .inner_hgroup_jp { font-size: 18px; }
	#sec02 .img { margin-top: 30px; }
	#sec02 .txt { font-size: 13px; margin-top: 30px; }
}

/* ---------------------------------------------------
	sec03
------------------------------------------------------ */
#sec03 { position: relative; padding-block: 188px 202px; background-color: var(--white); isolation: isolate; }
#sec03 .inner_md { max-width: 1050px; }
#sec03 .deco { position: absolute; top: 0; left: 0; z-index: -1; width: 433px; scale: -1 1; }
#sec03 .tit03 { font-feature-settings: "palt"; font-weight: 500; font-size: 20px; line-height: calc(30 / 20); letter-spacing: .1em; color: var(--black-70); position: relative; padding-top: 57px; }
#sec03 .tit03::before { content:""; position: absolute; top: 0; left: 0;  width: 100%; height: 34px; background: url(../img/logo_mark.svg) center / contain no-repeat; }
#sec03 .tit01 { font-feature-settings: "palt"; margin-top: 9px; }
#sec03 .txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; text-align: center; margin-top: 52px; }
#sec03 .list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 145px 40px; margin-top: 117px; }
#sec03 .list_fig { display: grid; }
#sec03 .list_fig_img { grid-row: 1; grid-column: 1; }
#sec03 .list_fig_cap { display: flex; align-items: center; column-gap: 16px; grid-row: 1; grid-column: 1; margin-top: auto; padding: 34px 33px; }
#sec03 .list_fig_cap_jp { font-feature-settings: "palt"; font-weight: 500; font-size: 26px; line-height: calc(36 / 26); letter-spacing: .1em; color: var(--white); }
#sec03 .list_fig_cap_en { font-feature-settings: "palt"; font-weight: 500; font-size: 16px; line-height: calc(26 / 16); letter-spacing: .1em; color: var(--white-40); }
#sec03 .list_txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em;  color: var(--black-80); margin-top: 33px; }
@media screen and (max-width: 600px) {
	#sec03 { padding-block: 65px; }
	#sec03 .deco { width: calc(200 / 375 * 100%); }
	#sec03 .tit03 { font-size: 16px; padding-top: 34px; }
	#sec03 .tit03::before { height: 24px; }
	#sec03 .tit01 { margin-top: 4px; }
	#sec03 .txt { font-size: 13px; text-align: left; margin-top: 30px; }
	#sec03 .list { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
	#sec03 .list_fig { display: grid; }
	#sec03 .list_fig_cap { column-gap: 8px; padding: 15px 4%; }
	#sec03 .list_fig_cap_jp { font-size: 20px; }
	#sec03 .list_fig_cap_en { font-size: 13px; }
	#sec03 .list_txt { font-size: 13px; margin-top: 10px; }
}

/* ---------------------------------------------------
	sec04
------------------------------------------------------ */
#sec04 { position: relative; padding-block: 185px 216px; isolation: isolate; }
#sec04 .deco { position: absolute; top: 0; right: 0; z-index: -1; width: 433px; }
#sec04 .inner_md { max-width: 950px; }
#sec04 .tit01 { font-feature-settings: "palt"; position: relative; padding-top: 51px; }
#sec04 .tit01::before { content:""; position: absolute; top: 0; left: 0;  width: 100%; height: 34px; background: url(../img/logo_mark.svg) center / contain no-repeat; }
#sec04 .tit02 { margin-top: 10px; }
#sec04 .cmn_slick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 37px 32px; margin-block: 70px 0; }
#sec04 .cmn_slick .slick-list { order: 0; }
#sec04 .cmn_slick .slick-prev { order: 1; scale: -1 1; }
#sec04 .cmn_slick .slick-next { order: 3; }
#sec04 .cmn_slick .slick-arrow { position: static; transform: none; }
#sec04 .cmn_slick .slick-dots { order: 2; position: static; width: auto; }
#sec04 .cmn_slick .slick-dots button { background-color: var(--black-20); }
#sec04 .cmn_slick .slick-dots .slick-active button { background-color: var(--black-50); }
#sec04 .cmn_slick .link { display: grid; position: relative; background-color: #000; aspect-ratio: 950 / 630; overflow: hidden; }
#sec04 .cmn_slick .link::before { content:""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent calc(300 / 850 * 100%) ); }
#sec04 .cmn_slick .photo { grid-row: 1; grid-column: 1; display: block; position: relative; width: 100%; height: 100%; }
#sec04 .cmn_slick .photo .ofi { transition: opacity 0.5s, transform 0.5s; }
#sec04 .cmn_slick .hgroup { grid-row: 1; grid-column: 1; position: relative; z-index: 1; margin-top: auto; padding: 30px 35px; }
#sec04 .cmn_slick .hgroup_ttl { font-weight: 500; font-size: 24px; line-height: calc(33 / 24); letter-spacing: .1em; color: #fff; display: flex; align-items: center; position: relative; padding-left: 45px; }
#sec04 .cmn_slick .hgroup_ttl::before { content:""; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: 34px; height: 34px; opacity: .7; filter: brightness(0) invert(1); }
#sec04 .cmn_slick .hgroup_ttl._awasumi::before { background: url(../img/icon_room_suite_awasumi.webp) center / contain no-repeat; }
#sec04 .cmn_slick .hgroup_ttl._ruri::before { background: url(../img/icon_room_suite_ruri.webp) center / contain no-repeat; }
#sec04 .cmn_slick .hgroup_ttl._moegi::before { background: url(../img/icon_room_junior_suite_moegi.webp) center / contain no-repeat; }
#sec04 .cmn_slick .hgroup_ttl._akebono::before { background: url(../img/icon_room_junior_suite_akebono.webp) center / contain no-repeat; }
#sec04 .cmn_slick .hgroup_ttl .font_en { margin-top: 5px; }
#sec04 .cmn_slick .hgroup_ttl_sml { font-size: 15px; line-height: calc(33 / 15); margin-left: 17px; }
#sec04 .cmn_slick .hgroup_txt { font-weight: 500; font-size: 14px; line-height: calc(24 / 14); letter-spacing: .1em; color: #fff; position: relative; margin-top: 7px; padding-right: 40px; }
#sec04 .cmn_slick .hgroup_txt::after { content:""; position: absolute; top: calc(50% - 1px); right: 0; translate: 0 -50%; width: 33px; height: 33px; background: url(../img/arrow_circle01_wh.svg) center / contain no-repeat; }
#sec04 .txt { font-weight: 500; font-size: 16px; line-height: calc(32 / 16); letter-spacing: .1em; margin-top: 39px; }
#sec04 .btn { text-align: right; margin-top: 42px; }
@media (any-hover: hover) {
	#sec04 .cmn_slick .link:hover { opacity: 1; }
	#sec04 .cmn_slick .link:hover .ofi { transform: scale(1.05); opacity: .6; }
}
@media screen and (max-width: 600px) {
	#sec04 { padding-block: 65px; }
	#sec04 .deco { width: calc(200 / 375 * 100%); }
	#sec04 .tit01 { padding-top: 34px; }
	#sec04 .tit01::before { height: 24px; }
	#sec04 .tit02 { margin-top: 5px; }
	#sec04 .cmn_slick { gap: 20px; margin-top: 30px; }
	#sec04 .cmn_slick .hgroup { padding: 10px calc(20 / 330 * 100%); }
	#sec04 .cmn_slick .hgroup_ttl { font-size: 17px; line-height: calc(24 / 17); padding-left: 34px; }
	#sec04 .cmn_slick .hgroup_ttl::before { width: 24px; height: 24px; }
	#sec04 .cmn_slick .hgroup_ttl .font_en { margin-top: 4px; }
	#sec04 .cmn_slick .hgroup_ttl_sml { font-size: 14px; line-height: calc(24 / 14); margin-left: 10px; }
	#sec04 .cmn_slick .hgroup_txt { font-size: 12px; line-height: calc(18 / 12); margin-top: 5px; padding-right: 30px; }
	#sec04 .cmn_slick .hgroup_txt::after { width: 20px; height: 20px; }
	#sec04 .txt { font-size: 13px; margin-top: 20px; }
	#sec04 .btn { margin-top: 20px; }
}

/* ---------------------------------------------------
	breadcrumb
------------------------------------------------------ */
.breadcrumb_wrap { padding-block: 129px 25px; background-color: var(--white); }
#contents_wrap #breadcrumb { margin-block: 0; }
@media screen and (max-width: 600px) {
	.breadcrumb_wrap { padding-top: 65px; }
}