.qa_bk h3 {
padding: 20px;
margin: 40px 0 10px;
border-bottom: 1px solid #ebebec;
border-top: 1px solid #ebebec;
}
.qa_bk li {
padding: 20px;
border-bottom: 1px dotted #eee;
}
.qa_bk dt {
padding-bottom: 20px;
}
.qa_bk dt span,
.qa_bk dd span {
display: inline-block;
margin-left: 60px;
margin-top: 12px;
line-height: 1.6;
}
.qa_bk dt::before {
content: "Q";
display: inline-block;
font-size: 2.5rem;
padding: 10px 13px;
color: #fff;
position: absolute;
background: #7ccccf;
border-radius: 50%;
}
.qa_bk dd::before {
content: "A";
display: inline-block;
font-size: 2.5rem;
padding: 10px 14px;
color: #fff;
position: absolute;
background: #e89e59;
border-radius: 50%;
}
.qa_bk dl {
padding-bottom: 20px;
} @media screen and (min-width: 897px) {
}  @media screen and (max-width: 896px) {
.qa_bk dt::before {
font-size: 2rem;
}
.qa_bk dd::before {
font-size: 2rem;
}
}  .page_top_view img.room_top {
object-position: 50% 5%;
}
#room {
padding: 40px 0;
}
#room h4 {
font-size: 2rem;
text-align: center;
margin-bottom: 40px;
font-weight: 500;
}
#room p.msg,
.top_rental p.msg {
text-align: center;
margin-bottom: 60px;
line-height: 2.1;
}
#room .box {
margin-bottom: 65px;
}
#room .map {
background: #fff;
padding: 40px 30px 30px;
}
#room .map img {
margin: 0 auto;
width: 100%;
}
#room .inner {
display: flex;
justify-content: space-between;
background-color: #f1f8f8;
padding: 40px 20px;
box-sizing: border-box;
}
#room .txt {
width: 55%;
margin: 0 auto;
padding-left: 20px;
}
#room .txt p.type {
background: #fff;
display: inline-block;
padding: 10px 25px;
margin-bottom: 20px;
border-radius: 25px;
font-weight: bold;
}
#room .box_shere .inner {
background-color: #dddddd;
}
#room .box_shere .txt p.type {
background: #c2c2c2;
}
#room .txt table {
border-top: 1px solid #6f6f6f;
border-bottom: 1px solid #6f6f6f;
width: 100%;
}
#room .txt_width table {
border-top: 1px solid #6f6f6f;
border-bottom: 1px solid #6f6f6f;
width: 100%;
margin: 0 auto;
}
#room .txt table th,
#room .txt_width table th {
font-size: 1.6rem;
padding: 16px 25px;
border-bottom: 1px dotted #6f6f6f;
width: 23%;
text-align: left;
}
#room .txt table td,
#room .txt_width table td {
width: 75%;
font-size: 1.6rem;
padding: 20px 25px;
line-height: 1.5;
}
#room .txt table td {
border-bottom: 1px dotted #6f6f6f;
}
#room ul.label {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#room ul.label li {
width: 48%;
display: flex;
margin-bottom: 14px;
}
#room ul.label li p {
padding: 20px 0;
font-size: 1.6rem;
}
#room ul.label li .green {
width: 40%;
color: #fff;
background: #19a495;
text-align: center;
font-weight: 500;
}
#room ul.label li .white {
width: 60%;
background: #fff;
padding: 20px 30px;
box-sizing: border-box;
}
.bk_white {
background: #fff;
}
.rm_slide {
width: 50%;
}
.rm_slide img {
width: 100%;
}
#room h3.room_type {
text-align: center;
font-size: 6rem;
margin-bottom: 5px;
font-family: "Allura", cursive;
color: #d7ecec;
}
#forestside .msg {
margin-bottom: 0px;
}
#wa .box {
margin-top: 60px;
} @media screen and (min-width: 897px) {
#room .txt_width table td {
border-bottom: 1px dotted #285430;
}
}  @media screen and (max-width: 896px) {
#room .map {
padding: 0;
}
#room .inner {
flex-direction: column;
padding: 40px 3%;
}
#room .txt {
width: 100%;
padding-left: 0;
margin-top: 20px;
}
#room .txt_width table {
width: 100%;
}
#room .txt table th,
#room .txt_width table th {
font-size: 1.4rem;
line-height: 1.4;
padding: 16px 0 16px 3px;
width: 23%;
box-sizing: border-box;
}
#room .txt table td,
#room .txt_width table td {
width: 75%;
font-size: 1.4rem;
box-sizing: border-box;
}
#room .txt_width table th,
#room .txt_width table td {
width: 100%;
display: block;
box-sizing: border-box;
}
#room .txt_width table th {
text-align: center;
}
#room .txt_width table td {
border-bottom: 1px solid #adb6bc;
}
.rm_slide {
width: 100%;
}
}  .meal_top {
object-position: 50% 70%;
}
#meal {
padding: 40px 0;
}
#meal h4 {
font-size: 2rem;
text-align: center;
margin-bottom: 40px;
font-weight: 500;
}
#meal .box {
background: #ededed;
padding: 60px 30px;
margin: 0 auto 100px;
} .p_menu {
padding: 10px 0;
font-size: 1.4rem;
color: #888;
}
#meal .me_inner img {
width: 100%;
height: auto;
object-fit: cover;
}
#meal .inner {
display: flex;
justify-content: space-around;
}
#meal .me_inner {
width: 50%;
}
#meal .txt {
width: 46%;
padding-left: 20px;
box-sizing: border-box;
background: #fff;
border-radius: 50px;
padding-bottom: 25px;
}
#meal .txt p.type {
font-weight: bold;
}
#meal .menu_p {
color: #17787c;
border-bottom: 1px solid #17787c;
font-size: 18px;
padding-left: 15px;
width: 85%;
margin: 20px auto;
}
#meal .menu_txt {
padding-left: 15px;
}
#meal .txt ul {
width: 100%;
padding: 0px 10px 0px;
}
#meal .txt ul li {
font-size: 1.6rem;
padding: 8px 16px;
text-align: left;
position: relative;
line-height: 1.4;
}
#meal .txt ul li::after {
position: absolute;
content: "・";
width: 1px;
top: 12px;
left: 0;
color: rgba(119, 119, 119, 1);
}
.mb_meal {
padding-bottom: 300px;
} @media screen and (min-width: 897px) {
}  @media screen and (max-width: 896px) {
#meal img {
width: 100%;
height: auto;
object-fit: cover;
}
#meal .inner {
flex-direction: column;
}
#meal .box {
padding: 60px 15px;
}
#meal .me_inner {
width: 100%;
}
#meal .txt {
width: auto;
padding-left: 0;
border-radius: 25px;
}
#meal .menu_txt {
padding-left: 0px;
width: 90%;
margin: 20px auto;
}
#meal .menu_p {
font-size: 16px;
margin: 0 auto;
}
#meal .txt ul li {
font-size: 1.4rem;
padding: 12px 0 12px 13px;
text-align: left;
}
#meal .menu_p {
margin-top: 40px;
}
.mb_meal {
padding-bottom: 0px;
}
} .meal_menulist_box {
width: 100%;
margin-bottom: 120px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
box-sizing: border-box;
justify-content: center;
}
.meal_menulist_box a.meal_menulist_btn {
width: 31%;
height: 150px;
margin: 10px 1%;
box-sizing: border-box;
background-color: #5fb6ba;
position: relative;
}
.meal_menulist_box a.meal_menulist_btn img {
width: 100%;
height: 150px;
object-fit: cover;
box-sizing: border-box;
border: 1px solid #5fb6ba;
transition: 0.5s;
}
.meal_menulist_box a.meal_menulist_btn:hover img {
opacity: 0.4;
}
.meal_menulist_box a.meal_menulist_btn p {
position: absolute;
width: 80%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
text-align: center;
color: #fff;
font-weight: bold;
font-size: 1.8rem;
text-shadow: #000 1px 0 10px;
}
@media screen and (max-width: 896px) {
.meal_menulist_box a.meal_menulist_btn {
width: 100%;
height: 100px;
margin: 8px 0;
}
.meal_menulist_box a.meal_menulist_btn img {
height: 100px;
}
}   #sauna {
padding: 40px 0;
}
#sauna .inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 60px;
}
#sauna .inner:last-of-type {
margin-bottom: 0;
}
#sauna .inner.reverse {
flex-direction: row-reverse;
}
#sauna .me_inner {
width: 50%;
}
#sauna .me_inner img {
width: 100%;
}
#sauna .txt {
width: 46%;
}
#sauna .txt p.type {
font-weight: bold;
}
#sauna .menu_p {
color: #17787c;
border-bottom: 1px solid #17787c;
font-size: 18px;
margin: 20px 0;
}
@media screen and (max-width: 896px) {
#sauna .me_inner {
width: 100%;
}
#sauna .txt {
width: 100%;
}
}  #withdog {
width: 100%;
padding: 40px 0;
margin-bottom: 100px;
} .dog_menulist_box {
display: flex;
flex-wrap: wrap;
align-items: stretch;
box-sizing: border-box;
justify-content: center;
}
.dog_menulist_box a.dog_menulist_btn {
width: 31%;
height: 150px;
margin: 10px 1%;
box-sizing: border-box;
background-color: #5fb6ba;
position: relative;
}
.dog_menulist_box a.dog_menulist_btn img {
width: 100%;
height: 150px;
object-fit: cover;
box-sizing: border-box;
border: 1px solid #5fb6ba;
transition: 0.5s;
}
.dog_menulist_box a.dog_menulist_btn:hover img {
opacity: 0.4;
}
.dog_menulist_box a.dog_menulist_btn p {
position: absolute;
width: 80%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
text-align: center;
color: #fff;
font-weight: bold;
font-size: 1.8rem;
text-shadow: #000 1px 0 10px;
}
@media screen and (max-width: 896px) {
.dog_menulist_box a.dog_menulist_btn {
width: 100%;
height: 100px;
margin: 8px 0;
}
.dog_menulist_box a.dog_menulist_btn img {
height: 100px;
}
}  .withdog_point {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
margin-top: 30px;
}
.withdog_point .withdog_point_box {
width: 32%;
padding: 30px;
background-color: #fff8d2;
box-sizing: border-box;
border-radius: 20px;
}
.withdog_point .withdog_point_box h4.withdog_point_h4 {
width: 100%;
line-height: 1.7;
margin: 15px 0;
}
.withdog_point .withdog_point_box .number_maru {
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
background-color: #f4ac6c;
color: #fff;
margin: 0 auto;
font-size: 2rem;
font-weight: bold;
}
.withdog_point .withdog_point_box a.point_link {
display: block;
width: 70%;
border-radius: 99999px;
box-sizing: border-box;
padding: 10px;
text-align: center;
background-color: #f4ac6c;
color: #fff;
margin: 20px auto 0 auto;
font-size: 1.5rem;
}
@media screen and (max-width: 896px) {
#withdog {
margin-bottom: 50px;
}
.withdog_point {
width: 94%;
margin: 30px auto 0 auto;
}
.withdog_point .withdog_point_box {
width: 100%;
padding: 30px 20px;
margin-bottom: 15px;
}
h3.stripe.withdog_stripe {
margin-bottom: 10px;
}
} .withdog_timeline {
width: 100%;
font-size: 1.5rem;
margin-bottom: 100px;
}
.withdog_timeline .step-wrap {
margin: 2em 0;
position: relative;
}
.withdog_timeline .step-content {
padding: 0 0 1.3em 2.5em;
margin: 0;
position: relative;
}
.withdog_timeline .step-content::before {
content: "";
display: block;
width: 24px;
height: 24px;
background: #7ccccf;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
}
.withdog_timeline .step-content::after {
content: "";
display: block;
height: calc(100% - 35px);
border-left: dotted 2px #7ccccf;
position: absolute;
top: 30px;
left: 14px;
}
.withdog_timeline .step-label {
color: #7ccccf;
font-weight: bold;
font-size: 1.7rem;
padding-top: 6px;
margin-bottom: 15px;
}
.withdog_timeline h4.step-title {
font-weight: bold;
font-size: 2rem;
margin-bottom: 20px;
text-align: left;
}
.withdog_timeline .step-body {
margin-top: 0.5em;
padding: 0 0 1em;
}
.withdog_timeline .step-wrap > :last-of-type::after {
display: none;
}
.withdog_timeline .step-body .step-imgbox {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row-reverse;
}
.withdog_timeline .step-body .step-imgbox .step-imgbox_txt {
width: 45%;
margin-right: 5%;
}
.withdog_timeline .step-body .step-imgbox .step-imgbox_img {
width: 50%;
}
.withdog_timeline .step_sub_box {
width: 100%;
margin-top: 40px;
padding-top: 40px;
border-top: 1px dotted #7ccccf;
}
.withdog_timeline .step_sub_box span.step_sub_box_span {
padding: 7px 20px;
background-color: #7ccccf;
color: #fff;
margin-bottom: 15px;
display: inline-block;
}
.withdog_timeline .step_sub_box h5.step_sub_box_h5 {
margin-bottom: 15px;
font-size: 1.7rem;
line-height: 1.7;
font-weight: bold;
}
.welcomebord_area {
width: 100%;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.welcomebord_area .welcomebord_box {
width: 48%;
}
.withdog_timeline h5.step-imgbox_h5 {
margin: 15px 0;
font-size: 1.5rem;
line-height: 1.5;
}
.withdog_timeline h5.step-imgbox_h5 span {
padding: 10px 20px;
background-color: #7ccccf;
color: #fff;
display: inline-block;
}
@media screen and (max-width: 896px) {
.withdog_timeline {
width: 94%;
margin: 0 auto 50px auto;
}
.withdog_timeline .step-body .step-imgbox .step-imgbox_txt {
width: 100%;
margin-right: 0;
margin-top: 15px;
}
.withdog_timeline .step-body .step-imgbox .step-imgbox_img {
width: 100%;
}
} .withdog_btn_more {
margin-top: 30px;
padding: 5px 20px;
display: inline-flex;
width: fit-content;
border: 2px solid #17787c;
border-radius: 50px;
}
@media screen and (max-width: 896px) {
.withdog_btn_more {
margin: 20px auto 0;
}
}
.withdog_btn_more a {
text-align: center;
color: #17787c;
font-weight: bold;
display: block;
height: 100%;
padding: 5px;
}
.withdog_btn_more:hover {
opacity: 0.8;
background-color: #17787c;
}
.withdog_btn_more a:hover {
color: #fff;
}
.withdog_btn_more .btn_dog_icon {
margin-left: 6px;
}    .withdog_activity {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 20px;
} .withdog_activity .withdog_act_box {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
gap: 20px;
padding: 20px;
border-radius: 10px;
} .withdog_activity .withdog_act_box.spring {
background-color: #ffeeee;
}
.withdog_activity .withdog_act_box.summer {
background-color: #e3ffe8;
}
.withdog_activity .withdog_act_box.autumn {
background-color: #fff4d7;
}
.withdog_activity .withdog_act_box.winter {
background-color: #e6f4ff;
}
.withdog_activity .withdog_act_box .act_box_season {
padding: 5px 10px;
display: inline-block;
margin-right: 15px;
color: #fff;
border-radius: 5px;
}
.withdog_activity .withdog_act_box.spring .act_box_season {
background-color: #ff8d8d;
}
.withdog_activity .withdog_act_box.summer .act_box_season {
background-color: #85c290;
}
.withdog_activity .withdog_act_box.autumn .act_box_season {
background-color: #f5bc41;
}
.withdog_activity .withdog_act_box.winter .act_box_season {
background-color: #5793c2;
}
.withdog_activity .withdog_act_season_box {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.withdog_activity .withdog_act_season_box .withdog_act_season_txt {
width: 60%;
}
.withdog_activity .withdog_act_season_box .withdog_act_season_img {
width: 37%;
margin-left: 3%;
} .withdog_activity .withdog_act_box.spring .withdog_btn_more {
border: 2px solid #ff8d8d;
}
.withdog_activity .withdog_act_box.spring .withdog_btn_more a{
color: #ff8d8d;
}
.withdog_activity .withdog_act_box.spring .withdog_btn_more:hover {
opacity: 0.8;
background-color: #ff8d8d;
}
.withdog_activity .withdog_act_box.summer .withdog_btn_more {
border: 2px solid #85c290;
}
.withdog_activity .withdog_act_box.summer .withdog_btn_more a{
color: #85c290;
}
.withdog_activity .withdog_act_box.summer .withdog_btn_more:hover {
opacity: 0.8;
background-color: #85c290;
}
.withdog_activity .withdog_act_box.autumn .withdog_btn_more {
border: 2px solid #f5bc41;
}
.withdog_activity .withdog_act_box.autumn .withdog_btn_more a{
color: #f5bc41;
}
.withdog_activity .withdog_act_box.autumn .withdog_btn_more:hover {
opacity: 0.8;
background-color: #f5bc41;
}
.withdog_activity .withdog_act_box.winter .withdog_btn_more {
border: 2px solid #5793c2;
}
.withdog_activity .withdog_act_box.winter .withdog_btn_more a{
color: #5793c2;
}
.withdog_activity .withdog_act_box.winter .withdog_btn_more:hover {
opacity: 0.8;
background-color: #5793c2;
}
.withdog_activity .withdog_act_box .withdog_btn_more a:hover {
color: #fff;
} @media screen and (max-width: 896px) { .withdog_activity {
display: block;
width: 100%;
}
.withdog_activity .withdog_act_box {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
width: 100%;
margin-bottom: 20px;
padding: 20px;
} .withdog_activity .withdog_act_season_box .withdog_act_season_txt {
width: 100%;
}
.withdog_activity .withdog_act_season_box .withdog_act_season_img {
width: 100%;
margin-left: 0;
margin-top: 15px;
}
} .withdog_bold {
font-weight: bold;
}
.withdog_col {
color: #7ccccf;
}
.withdog_ul {
padding-left: 20px;
}
.withdog_ul li {
list-style-type: disc;
font-size: 1.5rem;
margin: 10px 0;
}
.withdog_m_bottom {
margin-bottom: 100px !important;
}
.withdog_m_top {
margin-top: 100px !important;
}
.withdog_btn_more a:hover {
color: #fff;
} .withdog_amenities {
background: #f2f1ea;
padding: 90px 0;
}
.withdog_amenities .withdog_amenities_box {
width: 94%;
max-width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 896px) {
.withdog_m_bottom {
margin-bottom: 50px !important;
}
.withdog_m_top {
margin-top: 50px !important;
}
.withdog_amenities {
padding: 45px 0;
}
} .withdog_sightseeing {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.withdog_sightseeing .withdog_sightseeing_box {
width: 49%;
background-color: #f6f6f6;
border-radius: 20px;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: 30px;
}
.withdog_sightseeing .withdog_sightseeing_box .withdog_sightseeing_note {
width: 50%;
}
.withdog_sightseeing .withdog_sightseeing_box .withdog_sightseeing_img {
width: 47%;
margin-left: 3%;
}
.withdog_sightseeing .withdog_sightseeing_box .withdog_sightseeing_img img {
display: inline;
width: 100%;
height: auto;
}
.withdog_sightseeing .withdog_sightseeing_box .withdog_sightseeing_h4 {
text-align: left;
font-size: 1.8rem;
line-height: 1.7;
font-weight: bold;
}
@media screen and (max-width: 896px) {
.withdog_sightseeing .withdog_sightseeing_box {
width: 100%;
padding: 20px;
margin-bottom: 20px;
}
}   #stay {
width: 100%;
padding: 40px 0;
margin-bottom: 100px;
font-size: 1.5rem;
line-height: 1.7;
}
.stay_tab_container {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: 30px;
}
.stay_tab_container .stay_tab {
width: 24%;
margin: 0 1% 0 0;
padding: 15px;
background-color: #f6f6f6;
text-align: center;
cursor: pointer;
transition: 0.3s;
border-radius: 10px;
font-size: 1.7rem;
box-sizing: border-box;
}
.stay_tab_container .stay_tab:hover {
background-color: #7ccccf;
}
.stay_tab_container .stay_tab.active {
background-color: #7ccccf;
}
.stay_content {
display: none;
}
.stay_content.show {
display: block;
}
@media screen and (max-width: 896px) {
#stay {
width: 94%;
margin: 0 auto;
}
.stay_tab_container .stay_tab {
width: 100%;
margin: 0 0 15px 0;
font-size: 1.5rem;
}
} .stay_time {
width: 100%;
margin: 50px 0;
}
.stay_time .stay_time_head {
width: 100%;
background: #6b9b9c;
display: flex;
}
.stay_time .stay_time_head .head_col {
position: relative;
height: 56px;
padding-top: 12px;
box-sizing: border-box;
line-height: 1;
text-align: center;
box-sizing: border-box;
}
.stay_time .stay_time_head .head_col .num {
font-size: 2rem;
color: #fff;
}
.stay_time .stay_time_head .head_col.col01 {
background: #7ccccf;
}
#stay_winter .stay_time .stay_time_head .head_col.col01 {
width: 70%;
}
#stay_dog .stay_time .stay_time_head .head_col.col01 {
width: 75.5%;
}
.stay_time .stay_time_head .head_col.col01:after {
content: "";
position: absolute;
left: 100%;
top: 0;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 28px 0 29px 24px;
border-color: transparent transparent transparent #7ccccf;
box-sizing: border-box;
}
.stay_time .stay_time_head .head_col.col02 {
width: 30%;
}
.stay_time ul.stay_time_nav_list {
display: table;
width: 100%;
table-layout: fixed;
text-align: center;
}
.stay_time ul.stay_time_nav_list li {
display: table-cell;
}
.stay_time ul.stay_time_nav_list li + li {
border-left: 1px solid #7ccccf;
}
.stay_time ul.stay_time_nav_list li a {
position: relative;
display: block;
height: 240px;
padding-top: 18px;
box-sizing: border-box;
}
.stay_time ul.stay_time_nav_list li a:hover {
background: rgba(173, 217, 251, 0.35);
opacity: 1;
}
.stay_time ul.stay_time_nav_list li .time {
display: block;
margin-bottom: 15px;
font-size: 1.4rem;
}
.stay_time ul.stay_time_nav_list li .tit {
display: inline-block;
line-height: 1.3;
text-align: left;
}
.stay_time ul.stay_time_nav_list li .icon_arrow_btm {
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -4px;
fill: #add9fb;
}
@media screen and (min-width: 897px) {
.stay_time ul.stay_time_nav_list li .tit {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
}
@media screen and (max-width: 896px) {
.stay_time {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.stay_time .stay_time_head {
flex-direction: column;
width: 50px;
}
.stay_time .stay_time_head .head_col {
position: relative;
height: auto;
padding: 13px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.stay_time .stay_time_head .head_col .num {
font-size: 2rem;
}
.stay_time .stay_time_head .head_col.col02 {
width: 48%;
height: calc(40px * 7);
}
.stay_time ul.stay_time_nav_list {
display: block;
width: calc(100% - 50px);
table-layout: fixed;
text-align: center;
}
.stay_time ul.stay_time_nav_list li {
display: block;
width: 100%;
height: 40px;
border-bottom: 1px solid #7ccccf;
text-align: left;
}
.stay_time ul.stay_time_nav_list li + li {
border-left: none;
border-bottom: 1px solid #7ccccf;
}
.stay_time ul.stay_time_nav_list li a {
position: relative;
display: block;
width: 100%;
height: auto;
padding-top: 10px;
box-sizing: border-box;
}
.stay_time ul.stay_time_nav_list li .time {
display: inline-block;
line-height: 1.3;
margin-bottom: 0;
margin: 0 10px;
font-size: 1.4rem;
text-align: left;
}
.stay_time ul.stay_time_nav_list li .tit {
display: inline-block;
line-height: 1.3;
text-align: left;
}
.stay_time ul.stay_time_nav_list li .icon_arrow_btm {
position: absolute;
bottom: 40%;
left: inherit;
right: 5px;
margin-left: -4px;
}
#stay_winter .stay_time .stay_time_head .head_col.col01 {
width: 100%;
height: calc(41px * 7);
}
#stay_dog .stay_time .stay_time_head .head_col.col01 {
width: 100%;
height: calc(41px * 5);
}
.stay_time .stay_time_head .head_col.col01:after {
border: none;
}
#stay_winter .stay_time .stay_time_head .head_col.col02 {
width: 100%;
height: calc(40px * 3);
}
#stay_dog .stay_time .stay_time_head .head_col.col02 {
width: 100%;
height: calc(40px * 2);
}
} .stay_schedule_box {
width: 100%;
margin: 100px 0;
}
@media screen and (max-width: 896px) {
.stay_schedule_box {
margin: 50px 0;
}
}  .event-section {
background: #f7f9f5;
padding: 60px 20px;
font-family: "Noto Sans JP", sans-serif;
}
.event-container {
max-width: 1100px;
margin: 0 auto;
}
.event-section .button12 a {
padding: 1.0em 3em;
width: 180px;
} .event-list {
list-style: none;
margin: 0 0 40px;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
} .event-item {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.event-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.event-thumb img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
} .event-label {
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
display: flex;
gap: 6px;
}
.event-label span {
color: #fff;
font-size: 1.5rem;
padding: 8px 10px;
border-radius: 6px;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.event-label .regular_event {
background: #76aecb;
}
.event-label .season_event {
background: #eda330;
} .event-info {
padding: 16px;
}
.event-info h4 {
margin-bottom: 0;
}
.event-title a {
font-size: 1.5rem;
font-weight: 700;
transition: color 0.3s ease;
}
.event-excerpt {
font-size: 0.95rem;
color: #495057;
margin-top: 8px;
line-height: 1.6;
} .eventModal {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
padding: 30px;
box-sizing: border-box;
}
.eventModal.is-active {
display: flex;
animation: fadeIn 0.3s ease;
}
.eventModal__content {
background: #fff;
border-radius: 16px;
max-width: 700px;
width: 90%;
padding: 24px;
position: relative;
overflow-y: auto;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.eventModal__title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 16px;
color: #222;
}
.eventModal__thumb {
position: relative;
}
.eventModal__thumb img {
width: 100%;
height: auto;
border-radius: 12px;
margin-bottom: 16px;
object-fit: cover;
}
.eventModal__desc {
line-height: 1.8;
color: #444;
}
.eventModal__close {
position: absolute;
top: 12px;
right: 16px;
font-size: 2rem;
background: none;
border: none;
cursor: pointer;
color: #555;
transition: opacity 0.2s ease;
z-index: 2;
}
.eventModal__close:hover {
opacity: 0.7;
}
.eventModal__thumb .event-type {
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
font-size: 1.5rem;
padding: 8px 10px;
border-radius: 6px;
font-weight: bold;
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.eventModal__thumb .regular_event {
background: #76aecb;
}
.eventModal__thumb .season_event {
background: #eda330;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.eventModal__table {
margin-top: 16px;
border-radius: 12px;
overflow: hidden;
background-color: #f7f9f5;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
line-height: 1.8;
font-size: 1.5rem;
}
.eventModal__row {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
.eventModal__row:last-child {
border-bottom: none;
}
.eventModal__cell {
padding: 10px 14px;
}
.eventModal__cell.label {
flex: 0 0 80px;
background-color: #76aecb; color: #fff;
font-weight: 600;
text-align: center;
border-right: 1px solid #e0e0e0;
border-radius: 8px 0 0 8px;
}
.eventModal__cell.value {
flex: 1;
background-color: #fff;
color: #333;
border-radius: 0 8px 8px 0;
} .month-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
justify-content: center;
}
.month-btn {
background: #72bdcc;
border: none;
padding: 20px 20px;
width: 80px;
height: 80px;
border-radius: 50%;
font-weight: bold;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
font-family: 'Segoe UI', sans-serif;
}
.month-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
background: #59a2b1;
}
.month-btn.active {
background: #3f96a7;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.event-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.event-info {
padding: 0 5px 10px;
}
.event-label {
top: 8px;
left: 8px;
}
.event-label span {
font-size: 1.1rem;
padding: 6px 6px;
}
.event-item {
border-radius: 12px;
}
.event-thumb img {
height: 120px;
}
.event-title a {
font-size: 1.2rem;
}
.eventModal {
padding: 16px;
}
.eventModal__content {
width: 100%;
height: auto;
max-height: 90vh;
padding: 20px;
border-radius: 12px;
}
.eventModal__title {
font-size: 1.5rem;
margin-bottom: 12px;
}
.eventModal__close {
top: 8px;
right: 10px;
font-size: 1.8rem;
}
.eventModal__desc p {
font-size: 1.4rem;
}
.eventModal__thumb img {
margin-bottom: 12px;
}
.eventModal__thumb .event-type {
font-size: 1.2rem;
padding: 6px 6px;
}
.eventModal__table {
font-size: 1.2rem;
}
.month-btn {
padding: 10px 10px;
width: 60px;
height: 60px;
}
}
#calendar-container {
padding: 50px 0;
}
.vertical-calendar {
max-width: 600px;
margin: 0 auto;
font-family: "Noto Sans JP", sans-serif;
}
.vertical-calendar h2 {
text-align: center;
margin-bottom: 20px;
font-size: 1.4em;
font-weight: bold;
}
.calendar-list {
list-style: none;
padding: 0;
margin: 0;
}
.calendar-item {
border-bottom: 1px solid #ddd;
display: flex;
}
.calendar-events ul {
margin: 0;
padding-left: 20px;
}
.no-event {
color: #999;
font-size: 0.9em;
}
.calendar-events {
padding: 15px;
width: 85%;
}
.calendar-date {
font-weight: bold;
padding: 15px;
background: #e5eff3;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
text-align: center;
width: 15%;
}
.calendar-item .sun {
color: #db3f3f;
font-weight: 500;
}
.calendar-item .sat {
color: #7575c7;
}
.calendar-item .holiday {
color: #db3f3f;
font-weight: 500;
} .calendar-event-item.event-specific {
color: #cd4400;
font-weight: 500;
} .calendar-event-item.event-season {
color: #d9920b;
font-weight: 500;
} .calendar-event-item {
color: #333;
}
.calendar-box .button12 a {
padding: 1.0em 3em;
width: 180px;
} .event_btn_area {
margin-top: 30px;
width: 100%;
}
.event_btn_more {
margin: 30px auto 0 auto;
padding: 5px 20px;
display: block;
width: 70%;
max-width: 400px;
border: 2px solid #17787c;
border-radius: 50px;
}
@media screen and (max-width: 896px) {
.event_btn_more {
margin: 20px auto 0;
}
}
.event_btn_more a {
text-align: center;
color: #17787c;
font-weight: bold;
display: block;
height: 100%;
padding: 5px;
}
.event_btn_more:hover {
opacity: 0.8;
background-color: #17787c;
}
.event_btn_more a:hover {
color: #fff;
}
.event_btn_more .btn_dog_icon {
margin-left: 6px;
}  .activity_event{
width: 100%;
}
.activity_event ul.activity_event_tab{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
margin-bottom: 100px;
}
.activity_event ul.activity_event_tab li.tab-item{
width: 70px;
height: 70px;
margin: 0 10px;
line-height: 70px;
text-align: center;
background-color: #5fb6ba;
border-radius: 50%;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 4px #adadad;
position: relative;
top: 0;
transition: 0.3s;
}
.activity_event ul.activity_event_tab li.tab-item.allitem{
background-color: #e58b8b;
}
.activity_event ul.activity_event_tab li.tab-item:hover{
top: 5px;
box-shadow: 0 0 0 #adadad;
}
.activity_event ul.activity_event_tab li.tab-item.is-active{
background-color: #168186;
}
.activity_event ul.activity_event_tab li.tab-item.is-active.allitem{
background-color: #da6868;
}
.activity_event .activity_event_contents .tab-panel{
display: none;
padding: 20px;
}
.activity_event .activity_event_contents .tab-panel.is-active {
display: block;
background: #f7f9f5;
padding: 60px 20px;
} @keyframes activity_fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media screen and (max-width: 896px) {
.activity_event ul.activity_event_tab{
margin-bottom: 50px;
}  
.activity_event ul.activity_event_tab li.tab-item{
margin-bottom: 15px;
}
}
.activity_event_fade {
animation: activity_fadeIn 1.0s ease;
}
.activity_event .food_content__img{
height: 240px;
position: relative;
}
.event_type{
width: 170px;
padding: 7px 10px;
box-sizing: border-box;
position: absolute;
top:0;
left: 0;
border-radius: 0 0 7px 0;
font-weight: bold;
color: #fff;
}
.event_type.season{
background-color: #ff8989;
}
.event_type.regular{
background-color: #7ccccf;
}
.activity_event_icon_area{
width:90%;
margin: 15px auto 15px auto;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content:space-between;
}
.activity_event_icon_area .activity_event_icon_box{
width: 48%;
text-align: center;
padding: 7px 10px;
box-sizing: border-box;
border-radius: 7px;
font-weight: bold;
color: #fff;
}
.activity_event_icon_area .activity_event_icon_box.activity_dog{
background-color: #f4ac6c;
}
.activity_event_icon_area .activity_event_icon_box.activity_child{
background-color: #58b687;
}
@media screen and (max-width: 896px) {
.event_type{
width: 115px;
padding: 5px 5px;
border-radius: 0 0 5px 0;
font-size: 1.0rem;
}
.activity_event .food_content__img{
height: 110px;
}
.activity_event .food_content__img img{
height: 110px;
}
.activity_event_icon_area .activity_event_icon_box{
width: 100%;
padding: 5px 5px;
border-radius: 5px;
margin-top: 5px;
font-size: 1.1rem;
}
} .top_active_contents{
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
transition: height 0.4s ease;
}
.top_active_contents::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(transparent, #f7f9f5);
}
.top_active_contents.is-activity-open {
height: auto;
}
.top_active_contents.is-activity-open::after {
display: none;
}
.top_active_morebtn {
display: block;
margin: 10px auto 0 auto;
cursor: pointer;
background-color: #5fb6ba;
border: none;
outline: none;
padding: 10px;
appearance: none;
min-width: 300px;
color: #fff;
border-radius: 20px;
}