@charset "utf-8";
/* ===================================================
	Omotenashi CSS
====================================================== */
/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
#lead .ticker{ margin: 80px 0 0 0;}
#lead .ticker .slick-slide { margin: 0 5px 0 0;}
#lead .ticker+ul { display: flex; justify-content: center; margin: 80px 0 0;}
#lead .ticker+ul li { width: 430px;}
#lead .ticker+ul li:nth-of-type(1) { margin: 0 50px 0 0;}

@media screen and (max-width: 600px) {
#lead .ticker{ margin: 20px 0 0 0;}
#lead .ticker >div { margin: 0 0 0.8%;}
#lead .ticker >div:nth-of-type(n+4) { display: none;}
#lead .ticker+ul { display: block; margin: 30px auto 0; width: 84%;}
#lead .ticker+ul li { width: 100%;}
#lead .ticker+ul li:nth-of-type(1) { margin: 0 0 5px;}
}

/* ---------------------------------------------------
Section Point
------------------------------------------------------ */
.sec_point{ padding: 100px 0 170px;}
.sec_point .txt_01{ text-align: center; padding: 0 0 50px;}
.sec_point .box_grid{ max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; color: #fff; }
.sec_point .card{ position:relative; overflow:hidden; cursor:pointer; aspect-ratio:79 / 71; background:#ddd; }
.sec_point .card::after{ content: ""; display: block; width: 1px; height: 40px; background-color: #fff; position: absolute; bottom: 0; left: 50%;}
.sec_point .card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease, filter .6s ease; }
.sec_point .ov{ position:absolute; inset:0; background:rgba(17,45,38,.28); display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; }
.sec_point .initial{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; transition: opacity .25s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.sec_point .point{ font-size:16px; letter-spacing:.12em; margin-bottom:18px; }
.sec_point .title{ font-size:30px; line-height:1.5; font-weight:400; }
.sec_point .detail{ position:absolute; opacity:0; transform:translateY(10px); transition: opacity .35s ease, transform .4s ease; max-width:80%; }
.sec_point .detail .txt{ font-size:15px; line-height:2; font-weight:400; }
.sec_point .detail .txt small{ font-size:12px;}
.sec_point .plus{ position:absolute; right:18px; bottom:18px; width:28px; height:28px; border:1px solid rgba(255,255,255,.7); border-radius:50%; display:none; }
.sec_point .plus::before,
.sec_point .plus::after{ content:""; position:absolute; background:#fff; }
.sec_point .plus::before{ width:12px; height:1px; top:50%; left:50%; transform:translate(-50%,-50%); }
.sec_point .plus::after{ width:1px; height:12px; top:50%; left:50%; transform:translate(-50%,-50%); }
.sec_point .card.active .plus::after{ display:none; }

@media (hover:hover){
.sec_point .card:hover img{ transform:scale(1.05); filter:blur(4px); }
.sec_point .card:hover .initial{ opacity:0; transform:translateY(-10px); }
.sec_point .card:hover .detail{ opacity:1; transform:translateY(0); }
}

@media screen and (max-width:600px){
.sec_point{ padding: 50px 0;}
.sec_point .txt_01{ text-align: left; padding: 0 5% 30px;}
.sec_point .box_grid{ width:90%; grid-template-columns:1fr; gap:8px; }
.sec_point .card{ aspect-ratio:auto; min-height:240px; height: 240px; }
.sec_point .card::after{ display: none;}
.sec_point .ov{ align-items:center; justify-content:center; text-align:center; padding:32px 24px; }
.sec_point .initial{ position:absolute; align-items:center; text-align:center; }
.sec_point .point{ font-size:12px; margin-bottom:10px; }
.sec_point .title{ font-size:30px; line-height:1.4; }
.sec_point .detail{ position:absolute; padding: 8px 0 0 0; opacity:0; transform:translateY(10px); }
.sec_point .detail .txt{ font-size: 14px; line-height: 1.9; }
.sec_point .detail .txt small{ font-size:11px;}
.sec_point .card.active img{ transform:scale(1.05); filter:blur(4px); }
.sec_point .card.active .initial{ transform:translateY(var(--moveY)); }
.sec_point .card.active .detail{ opacity:1; transform:translateY(0); }
.sec_point .plus{ display:block; text-indent: 100%; white-space: nowrap; overflow: hidden;}
}

@media screen and (max-width:320px){
.sec_point .detail .txt{ font-size: 12px;}
}

/* ---------------------------------------------------
Section Facilities
------------------------------------------------------ */
.sec_facilities{ padding: 0;}
.sec_facilities .box_img{ width: 100%;}
.sec_facilities .box_img img{ width: 100%; height: auto;}
.sec_facilities .cmn_tit_01{ padding: 100px 0 40px;}
.sec_facilities .txt_01{ text-align: center; letter-spacing: 0.14em; padding: 0 0 50px;}
.sec_facilities .txt_02{ line-height: 2; letter-spacing: 0.14em; padding: 0 0 2em;}

/* Section Lobby */
.sec_facilities .sec_lobby{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 0 0 90px;}
.sec_facilities .sec_lobby .img_01{ width: 56.4%;}
.sec_facilities .sec_lobby .img_01 img{ width: 100%; height: 550px;}
.sec_facilities .sec_lobby .box_txt{ width: 390px; margin: 70px auto 0 120px;}
.sec_facilities .sec_lobby .box_imgs{ display: flex; justify-content: space-between; align-items: flex-start; padding: 50px 0 0;}
.sec_facilities .sec_lobby .box_imgs .img_03{ padding: 65px 0 0;}

/* Section Garden */
.sec_facilities .sec_garden{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; flex-direction: row-reverse; padding: 0 0 90px;}
.sec_facilities .sec_garden .img_01{ width: 56.4%;}
.sec_facilities .sec_garden .img_01 img{ width: 100%; height: 550px;}
.sec_facilities .sec_garden .box_txt{ width: 390px; margin: 70px 120px 0 auto;}
.sec_facilities .sec_garden .box_imgs{ display: flex; justify-content: space-between; align-items: flex-start; padding: 50px 0 0;}
.sec_facilities .sec_garden .box_imgs .img_03{ padding: 25px 0 0;}

/* Section Shop */
.sec_facilities .sec_shop{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 0 0 90px; background: url(../img/bg_flower_02.webp) no-repeat #fff; background-position: calc( 50% + 520px ) calc( 100% + 140px ); background-size: 480px;}
.sec_facilities .sec_shop .img_01{ width: 56.4%;}
.sec_facilities .sec_shop .img_01 img{ width: 100%; height: 550px;}
.sec_facilities .sec_shop .box_txt{ width: 390px; margin: 70px auto 0 120px;}

/* Section Others */
.sec_facilities .sec_others{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.sec_facilities .sec_others .box_in{ width: 32.5%; margin: 0 1.25% 50px 0;}
.sec_facilities .sec_others .box_in:nth-of-type(3n){ margin: 0 0 50px 0;}
.sec_facilities .sec_others .box_in img{ width: 100%; height: auto;}
.sec_facilities .sec_others .box_in .comment{ padding: 10px 0 0;}

/* Slick */
.sec_facilities .slick-dots{ bottom: -40px; text-align: left;}
.sec_facilities .slick-dots li{ width: 80px; height: 3px; margin: 0; }
.sec_facilities .slick-dots li button { width: 80px; height: 20px; padding: 0; }
.sec_facilities .slick-dots li button::before { background-color: #000; top: 8px; width: 80px; height: 2px; content: ""; opacity: 0.25; .sec_facilities: block; }
.sec_facilities .slick-dots li.slick-active,
.sec_facilities .slick-dots li.slick-active button::before { width: 80px; }
.sec_facilities .slick-dots li.slick-active button::before { background-color: #435e58; opacity: 1; }

@media screen and (max-width: 600px) {
.sec_facilities{ padding: 0;}
.sec_facilities .box_img{ width: 100%;}
.sec_facilities .box_img img{ width: 100%; height: 250px;}
.sec_facilities .cmn_tit_01{ padding: 40px 0 20px;}
.sec_facilities	.txt_01{ text-align: left; padding: 0 5% 30px;}
.sec_facilities .txt_02{ line-height: 1.7; letter-spacing: 0.14em; padding: 0 0 1.7em;}

/* Section Lobby */
.sec_facilities .sec_lobby{ padding: 0 0 80px;}
.sec_facilities .sec_lobby .img_01{ width: 90%; margin: 0 auto;}
.sec_facilities .sec_lobby .img_01 img{ height: 250px;}
.sec_facilities .sec_lobby .box_txt{ width: 90%; margin: 30px auto 0;}
.sec_facilities .sec_lobby .box_imgs{ justify-content: space-between; flex-wrap: wrap; padding: 0;}
.sec_facilities .sec_lobby .box_imgs .img_02{ padding: 0; width: 57%; order: 2;}
.sec_facilities .sec_lobby .box_imgs .img_03{ padding: 40px 0 0; width: 36%; order: 1;}
.sec_facilities .sec_lobby .box_imgs .img_04{ padding: 15px 0 0; width: 73%; margin: 0 auto; order: 3;}

/* Section Garden */
.sec_facilities .sec_garden{ padding: 0 0 80px;}
.sec_facilities .sec_garden .img_01{ width: 90%; margin: 0 auto;}
.sec_facilities .sec_garden .img_01 img{ height: 250px;}
.sec_facilities .sec_garden .box_txt{ width: 90%; margin: 30px auto 0;}
.sec_facilities .sec_garden .box_imgs{ justify-content: space-between; flex-wrap: wrap; padding: 0;}
.sec_facilities .sec_garden .box_imgs .img_02{ padding: 40px 0 0; width: 36%; order: 1;}
.sec_facilities .sec_garden .box_imgs .img_03{ padding: 0; width: 57%; order: 2;}
.sec_facilities .sec_garden .box_imgs .img_04{ padding: 15px 0 0; width: 73%; margin: 0 auto; order: 3;}

/* Section Shop */
.sec_facilities .sec_shop{ padding: 0 0 40px;}
.sec_facilities .sec_shop .img_01{ width: 90%; margin: 0 auto;}
.sec_facilities .sec_shop .img_01 img{ height: 250px;}
.sec_facilities .sec_shop .box_txt{ width: 90%; margin: 30px auto 0;}

/* Section Others */
.sec_facilities .sec_others{ justify-content: space-between;}
.sec_facilities .sec_others .box_in{ width: 49%; margin: 0 0 30px 0;}
.sec_facilities .sec_others .box_in:nth-of-type(3n){ margin: 0 0 30px 0;}
.sec_facilities .sec_others .box_in .comment{ padding: 5px 0 0;}

/* Slick */
.sec_facilities .slick-dotted.slick-slider{ margin-bottom: 20px;}
.sec_facilities .slick-dots{ bottom: -20px; text-align: center;}
.sec_facilities .slick-dots li{ width: 30px;}
.sec_facilities .slick-dots li button { width: 30px; }
.sec_facilities .slick-dots li button::before { width: 30px; }
.sec_facilities .slick-dots li.slick-active,
.sec_facilities .slick-dots li.slick-active button::before { width: 30px; }
}

/* ---------------------------------------------------
Section Information
------------------------------------------------------ */
.sec_info{ padding: 100px 0 150px;}
.sec_info .data > div{ width: 100%; display: table; border-bottom: solid 1px #b0b0b0; box-sizing: border-box;}
.sec_info .data dt,
.sec_info .data dd{ display: table-cell; padding: 20px 40px; vertical-align: top; line-height: 1.9;}
.sec_info .data dt{ width: 20%; background-color: #f2f2f2;}
.sec_info .data dd{ width: 80%;}
.sec_info .data dd .txt_01{ color: #7b7d7d}

@media screen and (max-width: 600px) {
.sec_info{ padding: 50px 0 70px;}
.sec_info .data > div{ display: block;}
.sec_info .data dt,
.sec_info .data dd{ display: block; padding: 15px; line-height: 1.7; box-sizing: border-box;}
.sec_info .data dt{ width: 100%;}
.sec_info .data dd{ width: 100%;}
}