@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

#g_header .hd_tit { display: none; }
#g_header .lang_btn { margin: 0 0 0 auto;}

/* ---------------------------------------------------

------------------------------------------------------ */
#movie_area { display: none; }
#main_img { position: relative; }
#main_img .main_video { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: -1; width: 100%; height: 100%; background: #000; will-change: transform; transform: translateZ(0);}
#main_img .main_video video { height: 100%; width: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: .6; }
#main_img .main_logo { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; min-height: 400px;}
#main_img .main_logo h1.logo { position: static; transform: none; }
#main_img .main_logo .disc { margin-top: 15px; font-size: 18px; color: var(--white); text-align: center; }

.blurIn{ opacity: 0; filter: blur(10px); animation: blurIn 1.5s ease-out forwards; }

@keyframes blurIn {
0% { opacity: 0; filter: blur(10px); }
100% { opacity: 1; filter: blur(0); }
}

#main_img #movie_open { position: absolute; bottom: 30px; left: 25px; color: var(--white); display: flex; align-items: center; gap: 10px; line-height: 1; }
#main_img #movie_open .icon { font-size: 0; line-height: 0; }

#contents_wrap { background: var(--white);}

@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
    #main_img .main_logo { height: calc(100vh - 45px - 4vw); }
    #main_img .main_logo h1.logo { width: 30%; }
    #main_img .main_logo .disc { margin-top: 25px; font-size: 16px; }

    #main_img #movie_open { bottom: 20px; left: 4vw; gap: 7px; }
    #main_img #movie_open .icon { width: 18px; height: 18px; }
}

.ui-widget.ui-widget-content { z-index: 10!important; }


/* ---------------------------------------------------
	lead_col
------------------------------------------------------ */
#lead_col { padding: 120px 0;  position: relative; }
#lead_col > .inner_sm { text-align: center; margin-bottom: 135px; position: relative; z-index: 1; }
#lead_col .tit01 { font-size: calc(35 * var(--fz)); color: var(--black-70); line-height: 1.4; }
#lead_col .stit01 { color: var(--black-50); margin-top: 15px; }
#lead_col .txt01 { margin-top: 50px; }
#lead_col .btn01 { margin-top: 50px; }
#lead_col .illust { position: absolute; right: 0; bottom: 305px; z-index: 0; }

#lead_col .ticker_col { position: relative; z-index: 1; }
#lead_col .ticker_col .ticker_inner { display: flex; width: 100%; position: relative; z-index: 0; overflow: hidden; }
#lead_col .ticker_col .ticker_inner > div { display: flex; gap: 20px; padding-right: 20px; animation: loop 200s -100s linear infinite; backface-visibility: hidden; will-change: transform;}
#lead_col .ticker_col .ticker_inner > div + div { animation: loop2 200s -200s linear infinite; }
#lead_col .ticker_col .ticker .photo { width: 300px; aspect-ratio: 1; }
@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-200%);
	}
}

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
    #lead_col { padding: 60px 0; }
    #lead_col > .inner_sm { margin-bottom: calc(20px + 20vw);}
    #lead_col .tit01 { font-size: 22px; }
    #lead_col .stit01 { margin-top: 10px; font-size: 11px; }
    #lead_col .txt01 { margin-top: 30px; }
    #lead_col .btn01 { margin-top: 25px; }
    #lead_col .illust { bottom: calc(25vw + 60px); width: 80vw; }

    #lead_col .ticker_col .ticker_inner > div { gap: 2vw; padding-right: 2vw; }
    #lead_col .ticker_col .ticker .photo { width: 40vw; }
}



/* ---------------------------------------------------
search_col
------------------------------------------------------ */
#search_col .bestrate_col { display: flex; align-items: center; background: #f3efe1; padding: 45px 2% 45px 5.4%; letter-spacing: 0; }
#search_col .bestrate_col .tit_col { flex-shrink: 0; color: #aa8e43; text-align: center; padding-right: 4.5%; }
#search_col .bestrate_col .tit_col::before { display: inline-block; content: ''; background: url(../img/logo_mark.svg) no-repeat center/contain; width: 30px; aspect-ratio: 27 /26; }
#search_col .bestrate_col .tit_col .tit01 { font-size: calc(24 * var(--fz)); }
#search_col .bestrate_col .tit_col .btn01 { line-height: 1.5;}
#search_col .bestrate_col .tit_col .btn01 a { color: #aa8e43; font-size: calc(14 * var(--fz)); }
#search_col .bestrate_col .tit_col .btn01 a::before { background-color: #e6ddc3; background-image: url(../../img/bestrate_btn.svg); }
#search_col .bestrate_col .box01 { flex-grow: 1; border-left: 1px solid #dbd2bb; }
#search_col .bestrate_col .box01 ul { display: flex; }
#search_col .bestrate_col .box01 ul li { display: flex; align-items: center; gap: 15px; color: var(--black-70); margin-left: 5.3%; }
#search_col .bestrate_col .box01 ul li p { font-size: calc(14 * var(--fz)); line-height: 1.5; }
#search_col .bestrate_col .box01 ul li span { display: block; font-size: calc(18 * var(--fz)); }
#search_col .bestrate_col .box01 ul li:first-child { font-size: calc(20 * var(--fz)); }

#search_col .search_box { padding: 50px 60px 45px; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.15); }
#search_col .search_box #searchBox { display: flex; align-items: flex-end; justify-content: center; gap: 20px; padding-bottom: 30px; }
#search_col .search_box #searchBox fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; position: relative; box-sizing: border-box; }
#search_col .search_box #searchBox legend { font-size: 14px; color: var(--black-60); text-align: left; width: 100%; margin-bottom: 10px; line-height: 1; padding: 0; float: none; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; }
#search_col .search_box #searchBox input[type="text"],
#search_col .search_box #searchBox select,
#search_col .search_box #searchBox #checkin_date_label { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; background: transparent; color: var(--black-70); font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; text-align: left; text-align-last: left; outline: none; cursor: pointer; padding: 0 20px 0 0; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.15); min-width: 80px; height: 52px; align-content: center; font-size: 16px; border-radius: 0px; }
#search_col .search_box #searchBox fieldset:not(.checkin)::after { content: ""; position: absolute; right: 5px; bottom: 50%; width: 6px; height: 6px; border-right: 1px solid #828282; border-bottom: 1px solid #828282; transform: rotate(45deg); pointer-events: none; }
#search_col .search_box #searchBox fieldset.checkin { position: relative; min-width: 225px; }
#search_col .search_box #searchBox fieldset.checkin::after { content: ""; position: absolute; left: 5px; bottom: calc(50% - 7px); width: 14px; aspect-ratio: 1; background: url(../../img/icon_calendar.svg) no-repeat center/contain; }
#search_col .search_box #searchBox input[type="text"]#checkin_date { padding-left: 25px; text-align: center; }
#search_col .search_box #searchBox fieldset.checkin:has(#checkin_date_label) input[type="text"]#checkin_date { position: absolute; bottom: 0; left: 0; opacity: 0; }
#search_col .search_box #searchBox #checkin_date_label { padding: 0 20px 0 30px; }
#search_col .search_box #searchBox fieldset.checkin #checkin_date:disabled + #checkin_date_label { opacity: .5;}
#search_col .search_box #searchBox fieldset.checkin #no_checkin { position: absolute; bottom: -30px; left: 0; }
#search_col .search_box #searchBox fieldset.checkin #no_checkin label { padding: 0; display:flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing:0; color: var(--black-70); box-sizing: border-box; font-size: 14px; }
#search_col .search_box #searchBox fieldset.checkin #no_checkin input[type="checkbox"]:checked { background: #5c5c5c; }
#search_col .search_box #searchBox fieldset.checkin #no_checkin input[type="checkbox"]:checked::after {position: absolute; top: -1px; left: 3px; display: block; width: 6px; height: 11px; content: ""; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);}
#search_col .search_box #searchBox fieldset.checkin #no_checkin input[type="checkbox"] { position: relative; width: 15px; height: 15px; margin: 0 5px 0 0; vertical-align: text-bottom; border-radius: 2px; appearance: none; background: transparent; border: 1px solid #d4d4d4; letter-spacing: 0; }
#search_col .search_box #searchBox .children-selects { gap: 5px; border-bottom: 1px solid #d4d4d4;}
#search_col .search_box #searchBox .children-selects .child1 select { border-bottom: none; min-width: 70px; }
#search_col .search_box #searchBox .children-selects .child1 label { display: flex; align-items: center; color: var(--black-70); white-space: nowrap; font-size: 12px; gap: 10px; }
#search_col .search_box #searchBox fieldset.sort { display: none; }
#search_col .search_box #searchBox .field-button { margin: 0; padding: 0;    flex-grow: 1; max-width: 250px; }
#search_col .search_box #searchBox input[type="submit"].sub-bgcolor { appearance: none; -webkit-appearance: none; background-color: #5c5c5c; color: #ffffff; border: none; border-radius: 0; padding: 14px 36px; font-size: 15px; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; letter-spacing: 0.1em; cursor: pointer; transition: background-color 0.5s ease; height: 52px; white-space: nowrap; min-width: 150px; width: 100%; }
.pika-lendar th:first-child,
.pika-lendar td:first-child .pika-button {
    color: #f00;
}
.pika-lendar th:last-child,
.pika-lendar td:last-child .pika-button {
    color: #00f;
}
.has-event .pika-button {
    color: #f00;
    font-weight: normal;
    background: #f5f5f5;
    box-shadow:none;
}
.is-selected .pika-button {
    color: #fff;
    font-weight: bold;
    background: #33aaff;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px;
}
.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
    color: #fff;
    background: #ff8000;
    box-shadow: none;
    border-radius: 3px;
}
.is-disabled .pika-button{
    background: #D5E9F7 !important;
}

#search_col .search_box .txt01 { padding-top: 20px; width: 100%; display: inline-flex; justify-content: center; align-items: center; font-size: 14px; gap: 10px; color: var(--black-60); }
#search_col .search_box .txt01 .icon { flex-shrink: 0; font-size: 0; line-height: 0; }
#search_col .search_box .txt01 .txt span { line-height: 1.2; border-bottom: 1px solid currentColor;}
#search_col .btn02 { margin-top: 10px; text-align: right; }
#search_col .btn02 a { color: var(--black-60); font-size: 14px; }

@media screen and (hover: hover) {
	#search_col .search_box #searchBox input[type="submit"].sub-bgcolor:hover { background-color: #444444; }
}
@media screen and (max-width: 600px) {
    #search_col .bestrate_col { flex-direction: column; padding: 25px 6%; }
    #search_col .bestrate_col .tit_col { padding-right: 0; }
    #search_col .bestrate_col .tit_col::before { width: 24px; }
    #search_col .bestrate_col .tit_col .tit01 { font-size: 20px; }
    #search_col .bestrate_col .box01 { width: 100%; margin-top: 15px; border-left: none; }
    #search_col .bestrate_col .box01 ul { justify-content: space-between; }
    #search_col .bestrate_col .box01 ul li { flex-direction: column; align-items: center; gap: 5px; margin-left: 0; text-align: center; border-right: 1px solid #dbd2bb; width: 37%; }
    #search_col .bestrate_col .box01 ul li span { font-size: min(13px, 3.2vw); line-height: 1.3;}
    #search_col .bestrate_col .box01 ul li .icon { height: min(30px, 8vw); width: auto; aspect-ratio: 1; }
    #search_col .bestrate_col .box01 ul li:first-child { font-size: min(13px, 3.2vw); width: 29%; }
    #search_col .bestrate_col .box01 ul li:last-child { border-right: none; width: 34%; }

    #search_col .search_box { padding: 35px 6%; }
    #search_col .search_box #searchBox { flex-wrap: wrap; gap: 20px 10px; padding-bottom: 0; }
    #search_col .search_box #searchBox legend { font-size: 12px; margin-bottom: 5px; }
    #search_col .search_box #searchBox input[type="text"],
    #search_col .search_box #searchBox select,
    #search_col .search_box #searchBox #checkin_date_label { padding: 0 15px 0 0; min-width: 70px; height: 40px; }
    #search_col .search_box #searchBox #checkin_date_label { padding: 0 15px 0 25px;}
    #search_col .search_box #searchBox fieldset.checkin { min-width: calc(100% - 75px); margin-bottom: 25px; }
    #search_col .search_box #searchBox fieldset.checkin #no_checkin { bottom: -25px; }
    #search_col .search_box #searchBox fieldset.checkin #no_checkin label { font-size: 12px; }
    #search_col .search_box #searchBox fieldset.nights { margin-bottom: 25px; }
    #search_col .search_box #searchBox fieldset.nights select { min-width: 60px; }
    #search_col .search_box #searchBox .children-selects { gap: 5px; }
    #search_col .search_box #searchBox .children-selects .child1 select { min-width: 60px; }
    #search_col .search_box #searchBox .field-button { width: 100%; }
    #search_col .search_box #searchBox input[type="submit"].sub-bgcolor { padding: 14px 36px; font-size: 14px; height: 50px; min-width: auto; width: 100%; }

    #search_col .search_box .txt01 { align-items: flex-start; font-size: 12px; line-height: 1.6; }
    #search_col .btn02 { text-align: center; }
    #search_col .btn02 a { font-size: 12px; }
}


/* ---------------------------------------------------
    sec_style
------------------------------------------------------ */
.sec_style { padding-bottom: calc(170 * var(--fz)); }
.sec_style .photo_box { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 max(180px, calc(50vw - 525px)) 0 max(120px, calc(50vw - 650px)); position: relative; }
.sec_style .photo_box .photo { position: relative; z-index: 1; }
.sec_style .photo_box > div:nth-child(1).photo { margin-top: calc(210 * var(--fz)); width: 64%; aspect-ratio: 76 / 37; }
.sec_style .photo_box > div:nth-child(1).photo img { position: relative; z-index: 1; }
.sec_style .photo_box > div:nth-child(1).photo::before { content: ''; position: absolute; top: calc(-100 * var(--fz)); left: -95px; width: 100%; height: 100%; background: url(../img/cmn_illust_bg01.png) left top/65px; z-index: 0; }
.sec_style .photo_box > div:nth-child(2).photo { width: 29%; aspect-ratio: 33 / 42; }
.sec_style .photo_box .illust { position: absolute; z-index: 0; }
.sec_style .main_box { display: flex; justify-content: space-between; margin-top: calc(135 * var(--fz)); position: relative; }
.sec_style .main_box .tit_col { line-height: 1.5; }
.sec_style .main_box .tit_col .tit01 { font-size: calc(19 * var(--fz)); color: var(--black-60); margin: 0 0 0 15px; }
.sec_style .main_box .tit_col .tit02 { font-size: calc(35 * var(--fz)); color: var(--black-70); }
.sec_style .main_box .tit_col .stit01 { color: var(--black-40); margin: 0 15px 0 0; }
.sec_style .main_box .box01 { width: 80%; }
.sec_style .main_box .txt01 { margin-top: 50px; }
.sec_style .main_box .btn01 { text-align: right; margin-top: 40px; }

section:nth-of-type(2n).sec_style .photo_box { flex-direction: row-reverse; margin: 0 max(120px, calc(50vw - 650px)) 0 max(180px, calc(50vw - 525px)); }
section:nth-of-type(2n).sec_style .photo_box > div:nth-child(1).photo::before { right: -95px; left: auto; }
section:nth-of-type(2n).sec_style .main_box { flex-direction: row-reverse; }
section:nth-of-type(2n).sec_style .main_box .btn01 { text-align: left; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
    .sec_style { padding-bottom: 80px; }
    .sec_style .photo_box { flex-direction: row-reverse; margin: 0 0 0 6vw; }
    .sec_style .photo_box > .photo > div { height: 100%; }
    .sec_style .photo_box > div:nth-child(1).photo { margin-top: 10vw; width: 56vw; aspect-ratio: 420 / 295; }
    .sec_style .photo_box > div:nth-child(1).photo::before { top: 8vw; left: 6vw; background-size: 45px; }
    .sec_style .photo_box > div:nth-child(2).photo { width: 28vw; }
    .sec_style .main_box { flex-direction: column; margin-top: calc(6vw + 15px); }
    .sec_style .main_box .tit_col .tit01 { font-size: 14px; margin: 0 0 5px; }
    .sec_style .main_box .tit_col .tit02 { font-size: 20px; line-height: 1.4; }
    .sec_style .main_box .tit_col .stit01 { font-size: 13px; margin: 10px 0 0; }
    .sec_style .main_box .box01 { width: 100%; margin-top: 30px; }
    .sec_style .main_box .txt01 { margin-top: 35px; }
    .sec_style .main_box .btn01 { margin-top: 20px; }

    section:nth-of-type(2n).sec_style .photo_box { margin: 0 0 0 6vw; flex-direction: row-reverse;}
    section:nth-of-type(2n).sec_style .photo_box > div:nth-child(1).photo::before { right: auto; left: 6vw; }
    section:nth-of-type(2n).sec_style .main_box { flex-direction: column; }
    section:nth-of-type(2n).sec_style .main_box .btn01 { text-align: right; }
}



/* ---------------------------------------------------
    sec_cuisine
------------------------------------------------------ */
#sec_cuisine.sec_style{ padding-bottom: calc(100 * var(--fz)); margin-top: calc(125 * var(--fz));}
#sec_cuisine.sec_style .photo_box .illust { right: -135px; bottom: -115px; aspect-ratio: 236 / 458; width: 20%; }
@media screen and (max-width: 600px) {
    #sec_cuisine.sec_style { margin-top: 60px; padding-bottom: 70px; }
    #sec_cuisine.sec_style .photo_box .illust { right: 52%; bottom: auto; top: max(-32%, -60px); width: 19%; }
}



/* ---------------------------------------------------
    sec_spa
------------------------------------------------------ */
#sec_spa.sec_style .photo_box .illust { left: -7%; bottom: -60px; aspect-ratio: 262 / 147; width: 22.3%; }
#sec_spa.sec_style .main_box .illust { position: absolute; right: -140px; bottom: 90px; aspect-ratio: 256 / 276; width: 24.4%; }

@media screen and (max-width: 600px) {
    #sec_spa.sec_style .photo_box .illust { left: -6vw; bottom: auto; top: -38%; width: 35%; }
    #sec_spa.sec_style .main_box .illust { display: none; }
}



/* ---------------------------------------------------
    sec_room
------------------------------------------------------ */
#sec_room.sec_style .photo_box { margin: 0 auto; }
#sec_room.sec_style .photo_box > div:nth-child(1).photo { width: 100%; margin: 0; aspect-ratio: auto; }
#sec_room.sec_style .photo_box > div:nth-child(1).photo::after { content: ''; position: absolute; top: calc(-100 * var(--fz)); left: -95px; width: 100%; height: 100%; background: linear-gradient(to left, var(--white) 0%, transparent 50%); z-index: 0; }
#sec_room.sec_style .main_box { gap: 80px; }
#sec_room.sec_style .main_box .illust { position: absolute; left: -100px; bottom: 10px; aspect-ratio: 254 / 379; width: 24.2%; }
#sec_room.sec_style .main_photo { margin-right: min(-180px, calc((50vw - 525px) * -1));}
#sec_room.sec_style .main_photo .slick-list { padding-right: max(120px, calc(50vw - 650px)); }
#sec_room.sec_style .main_photo .slick-slide { margin-right: 30px; opacity: .5; transition: opacity .5s; }
#sec_room.sec_style .main_photo .slick-slide.slick-active { opacity: 1; }
#sec_room.sec_style .main_photo .cmn_slick .slick-next { right: max(calc(120px + 30px), calc(50vw - 650px + 30px)); }
#sec_room.sec_style .main_photo .cmn_slick .slick-prev { right: max(calc(120px + 70px), calc(50vw - 650px + 70px)); }
#sec_room.sec_style .main_photo .item a .photo img { transition: opacity 0.5s, transform 0.5s; }
#sec_room.sec_style .main_photo .item { position: relative; position: relative; z-index: 0; display: block; overflow: hidden; background: #000;}
#sec_room.sec_style .main_photo .item::after { content: ''; display: block; width: 31px; aspect-ratio: 1; background: url(../img/arrow_circle01_wh.svg) no-repeat center/contain; position: absolute; bottom: 35px; right: 30px; }
#sec_room.sec_style .main_photo .item .txt { position: absolute; bottom: 35px; left: 0; padding: 0 40px; width: 100%; color: var(--white); }
#sec_room.sec_style .main_photo .item .txt p { font-size: calc(16 * var(--fz)); line-height: 1.5; }
#sec_room.sec_style .main_photo .item .txt .name { display: flex; align-items: center; gap: 15px; margin-bottom: 5px; }
#sec_room.sec_style .main_photo .item .txt .name01 { font-size: calc(24 * var(--fz)); }
#sec_room.sec_style .main_photo .item .txt .name02 { font-size: calc(15 * var(--fz)); }
#sec_room.sec_style .main_box .box01 { width: calc(100% - 280px); }

@media screen and (hover: hover) {
    #sec_room.sec_style .main_photo .item a:hover .photo img { opacity: 0.6; transform: scale(1.05);}
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
    #sec_room.sec_style .photo_box { margin: 0 0 0 12vw; }
    #sec_room.sec_style .photo_box > div:nth-child(1).photo { margin: 6vw 0 0; height: 40vw; }
    #sec_room.sec_style .photo_box > div:nth-child(1).photo::before,
    #sec_room.sec_style .photo_box > div:nth-child(1).photo::after { top: -6vw; left: -6vw; }
    #sec_room.sec_style .main_box { gap: 0; }
    #sec_room.sec_style .main_box .illust { display: none; }
    #sec_room.sec_style .main_photo { margin-right: -6vw; }
    #sec_room.sec_style .main_photo .slick-list { padding-right: 5%; }
    #sec_room.sec_style .main_photo .slick-slide { margin-right: 10px; }
    #sec_room.sec_style .main_photo .cmn_slick .slick-next { right: calc(5% + 10px); }
    #sec_room.sec_style .main_photo .cmn_slick .slick-prev { right: calc(5% + 40px); }
    #sec_room.sec_style .main_photo .cmn_slick .photo::after { background: linear-gradient(to top, var(--black-60) 0, transparent 60%);}
    #sec_room.sec_style .main_photo .item::after { width: 20px; bottom: 10px; right: 6%; }
    #sec_room.sec_style .main_photo .item .txt { bottom: 10px; padding: 0 calc(20px + 6%) 0 6%; }
    #sec_room.sec_style .main_photo .item .txt p { font-size: 14px; }
    #sec_room.sec_style .main_photo .item .txt .name { gap: 10px; }
    #sec_room.sec_style .main_photo .item .txt .name .logo { width: 24px; height: auto;}
    #sec_room.sec_style .main_photo .item .txt .name01 { font-size: 17px; }
    #sec_room.sec_style .main_photo .item .txt .name02 { font-size: 14px; }
    #sec_room.sec_style .main_photo .item .txt .detail { font-size: 12px; }
    #sec_room.sec_style .main_box .box01 { width: 100%; }
}



/* ---------------------------------------------------
    sec_news
------------------------------------------------------ */
#sec_news { padding: 220px 0 140px; background: var(--light-gray); }
#sec_news .cmn_tit01 { padding: 0 0 0 40px;}
#sec_news .cmn_tit01 .tit02 { color: var(--black-70); }
#sec_news .box01 { display: flex; justify-content: space-between; gap: 100px; }
#sec_news .list { flex-grow: 1; width: 850px; }
#sec_news .list li { padding: 25px 30px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
#sec_news .list li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.15); }
#sec_news .list li a { display: flex; align-items: center; gap: 80px; }
#sec_news .list li a .date { flex-shrink: 0; color: var(--black-50); }
#sec_news .list li a .tit { width: 80%; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec_news .btn01 { width: 100%; text-align: right; margin-top: 55px; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
    #sec_news { padding: 60px 0; }
    #sec_news .cmn_tit01 { padding: 0 0 20px; }
    #sec_news .box01 { flex-direction: column; gap: 0; }
    #sec_news .list { width: 100%; }
    #sec_news .list li { padding: 15px 0; }
    #sec_news .list li a { flex-direction: column; align-items: flex-start; gap: 0; }
    #sec_news .list li a .tit { width: 100%; }
    #sec_news .btn01 { margin-top: 20px; }
}



/* ---------------------------------------------------
    sec_other
------------------------------------------------------ */
#sec_other { padding-bottom: 165px; background: var(--light-gray); }
#sec_other .box01 { display: flex; justify-content: space-between; gap: 25px; }
#sec_other .box01 .item { position: relative; background: #000; overflow: hidden; }
#sec_other .box01 .item .photo { position: relative; }
#sec_other .box01 .item .photo img { opacity: .6; transition: opacity 0.5s, transform 0.5s;}
#sec_other .box01 .item .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--black-60) 0, transparent 50%); }
#sec_other .box01 .item .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; justify-content: space-between; flex-direction: column; gap: 5px; padding: calc(200 * var(--fz)) 0 calc(30 * var(--fz)); }
#sec_other .box01 .item .txt .tit01 { color: #fff; font-size: calc(25 * var(--fz)); line-height: 1.3; flex-shrink: 0; }
#sec_other .box01 .item .txt .tit02 { color: var(--white-70); font-size: calc(13 * var(--fz)); }

@media screen and (hover: hover) {
    #sec_other .box01 .item a:hover .photo img { opacity: 0.6; transform: scale(1.05);}
}
@media screen and (min-width: 601px) {
    #sec_other .box01 .item { flex: 1; max-width: 280px; }
}
@media screen and (max-width: 600px) {
    #sec_other { padding-bottom: 60px; }
    #sec_other .box01 { flex-wrap: wrap; gap: 10px; }
    #sec_other .box01 .item { width: calc(50% - 5px); min-height: 180px; height: 48vw; }
    #sec_other .box01 .item a { height: 100%; }
    #sec_other .box01 .item .photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    #sec_other .box01 .item .txt { position: relative; z-index: 1; padding: max(65px, 17vw) 0 8px; height: 100%; }
    #sec_other .box01 .item .txt .tit01 { font-size: 17px; }
    #sec_other .box01 .item .txt .tit02 { font-size: 11px; line-height: 1; }
}



/* ---------------------------------------------------
    sec_access
------------------------------------------------------ */
#sec_access { padding: 150px 0 30px; position: relative; }
#sec_access > div { display: flex; justify-content: space-between; }
#sec_access .map_col { width: 715px; }
#sec_access .txt_col { width: 33%; margin-top: 65px; }
#sec_access .txt_col .txt01 { margin-top: 50px; }
#sec_access .txt_col .btn01 { margin-top: 50px; }
#sec_access .illust { position: absolute; bottom: -70px; right: 0; z-index: 0; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
    #sec_access .txt_col .cmn_tit01 { text-align: left; }
}
@media screen and (max-width: 600px) {
    #sec_access { padding: 60px 0 15px; }
    #sec_access > div { flex-direction: column-reverse; }
    #sec_access .map_col { width: 100%; margin-top: 35px; }
    #sec_access .txt_col { width: 100%; margin-top: 0; }
    #sec_access .txt_col .txt01 { margin-top: 25px; }
    #sec_access .txt_col .btn01 { margin-top: 25px; text-align: right; }
    #sec_access .illust { display: none; }
}