@charset "UTF-8";
 #mainVisual {
width: 100%;
height: 100vh;
position: relative;
}
#mainVisual.top_slider {
margin-inline: auto;
overflow: hidden; width: 100%;
}
#mainVisual.top_slider .swiper-wrapper {
width: 100%;
position: relative;
overflow: hidden;
backface-visibility: hidden;
}
#mainVisual.top_slider .swiper-slide {
width: 100%;
height: 100vh;
position: relative;
}
#mainVisual.top_slider .swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
} #mainVisual.top_slider .swiper-slide img.mvCenterleft {
object-position: center left;
} #mainVisual.top_slider .swiper-slide img.mvCenterRight {
object-position: center right;
}
#mainVisual h2.cover_catchcopy {
width: auto;
height: 70%;
position: absolute;
top: 20%;
right: 10%;
z-index: 2;
writing-mode: vertical-rl;
color: #fff;
font-weight: bold;
font-size: 1.8rem;
line-height: 3rem;
letter-spacing: 3px;
text-shadow:
rgba(0, 0, 0, 0.3) 1px 1px 15px,
rgba(0, 0, 0, 0.3) -1px 1px 15px,
rgba(0, 0, 0, 0.3) 1px -1px 15px,
rgba(0, 0, 0, 0.3) -1px -1px 15px;
}
@media screen and (max-width: 896px) {
#mainVisual {
width: 100%;
height: auto;
aspect-ratio: 1 / 1; }
#mainVisual.top_slider .swiper-wrapper {
width: 100%;
height: 100%;
}
#mainVisual.top_slider .swiper-slide {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
#mainVisual h2.cover_catchcopy {
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 2px;
top: 23%;
}
}
.col_top_sub_ttl {
color: #fff566;
}
.col_top_ttl {
color: #33a7ff;
text-shadow: 4px 6px 6px #fff;
}
@media screen and (max-width: 896px) {
.col_top_ttl {
text-shadow: 4px 3px 4px #fff;
}
} .top_first_contents {
width: 100%;
background-color: #e6f4ff;
padding-bottom: 200px;
background-image: url(//www.glamping-shimanami.com/wp-content/themes/gpvill_shimanami2026/img/top/top_first_contents_bg_head_light_blue2.svg), url(//www.glamping-shimanami.com/wp-content/themes/gpvill_shimanami2026/img/common/bg_bottom_white.svg);
background-repeat: no-repeat, no-repeat;
background-size:
50% auto,
100% auto;
background-position:
right 0px top 180px,
left bottom;
} .top_h3_box {
width: calc(97% - 80px);
margin-top: -180px;
position: relative;
z-index: 10;
margin-left: 3%;
}
.top_h3_heading {
width: 100%;
line-height: 0.9;
position: relative;
}
.top_h3_heading span.top_h3_sub {
font-size: 4vw;
}
.top_h3_heading span.top_h3_main {
font-size: 16vw;
}
.top_h3_heading_img {
width: 21%;
position: absolute;
top: 10%;
right: 8%;
}
@media screen and (max-width: 896px) {
.top_first_contents {
padding-bottom: 100px;
background-size:
70% auto,
100% auto;
background-position:
right 0px top 50px,
left bottom;
}
.top_h3_box {
width: 97%;
margin-top: -50px;
position: relative;
z-index: 10;
margin-left: 3%;
}
.top_h3_heading span.top_h3_sub {
font-size: 6vw;
}
.top_h3_heading span.top_h3_main {
font-size: 17vw;
}
.top_h3_heading_img {
width: 22%;
position: absolute;
bottom: 2%;
right: 5%;
}
} .top_news_box {
width: 90%;
margin: 100px auto 0 auto;
}
.top_news_box h3 {
width: 100%;
margin-bottom: 20px;
font-size: 3rem;
}
.top_news_box ul.top_news_list {
width: 100%;
margin: 0 auto;
align-items: stretch;
list-style: none;
padding: 0;
}
.top_news_box ul.top_news_list li.top_news_list_box {
width: 100%;
height: 100%; background-color: #fff;
border-radius: 20px;
list-style: none;
}
.top_news_box ul.top_news_list li.top_news_list_box .top_news_list_img {
width: 100%;
height: 250px;
}
.top_news_box ul.top_news_list li.top_news_list_box .top_news_list_img img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 20px 20px 0 0;
}
.top_news_box ul.top_news_list li.top_news_list_box .top_news_list_note {
width: 100%;
padding: 5%;
}
.top_news_box ul.top_news_list li.top_news_list_box .top_news_list_date {
width: 100%;
}
.top_news_box ul.top_news_list li.top_news_list_box h4.top_news_list_title {
width: 100%;
margin-top: 10px;
}
@media screen and (max-width: 896px) {
.top_news_box {
width: 100%;
margin: 40px auto 0 auto;
}
.top_news_box h3 {
width: 94%;
margin: 0 auto 20px auto;
font-size: 2rem;
}
.top_news_box ul.top_news_list li.top_news_list_box {
border-radius: 10px;
}
.top_news_box ul.top_news_list li.top_news_list_box .top_news_list_img {
height: 180px;
}
.top_news_box ul.top_news_list li.top_news_list_box .top_news_list_img img {
height: 180px;
border-radius: 10px 10px 0 0;
}
}
.top_news_control_box {
width: 100%;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.top_news_slider .swiper-wrapper {
align-items: stretch;
}
.top_news_slider .swiper-slide {
height: auto;
display: flex;
}
.top_news_list_box {
display: flex;
flex-direction: column;
} .top_news_arrow_box {
width: 50%;
height: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.top_news_arrow_box .top_news_prev,
.top_news_arrow_box .top_news_next {
display: block;
width: 50px;
height: 50px;
background: #fff566;
border-radius: 50%;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.top_news_arrow_box .top_news_prev:hover,
.top_news_arrow_box .top_news_next:hover {
background: #fffab3;
}
.top_news_arrow_box .top_news_prev {
transform: rotate(180deg);
margin-right: 20px;
}
.top_news_arrow_box .top_news_prev::before,
.top_news_arrow_box .top_news_next::before {
position: absolute;
content: "";
width: 10px;
height: 10px;
border-right: 2px solid #666229;
border-top: 2px solid #666229;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: rotate(45deg);
} .top_news_more_box {
width: 50%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.top_news_more_box a {
width: 80%;
max-width: 300px;
padding: 15px;
text-align: left;
display: block;
border-radius: 99999px;
background: linear-gradient(to right, #fff566, #fffab3);
color: #333114;
position: relative;
transition: 0.3s;
}
.top_news_more_box a::after {
position: absolute;
top: 50%;
right: 1em;
width: 0.5em;
height: 0.5em;
transform: translateY(-50%) rotate(45deg);
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
content: "";
}
.top_news_more_box a:hover {
opacity: 1;
background: linear-gradient(to right, #fffab3, #fffcd5);
}
@media screen and (max-width: 896px) {
.top_news_more_box a {
width: 100%;
max-width: 300px;
}
.top_news_control_box {
width: 94%;
margin: 15px auto 0 auto;
}
} .about_concept {
width: 100%;
margin-top: -1px; background-color: #fff;
}
.about_concept .about_concept_inner {
width: 80%;
margin: 0 auto;
padding: 50px 0 150px 0;
}
.about_concept .about_concept_h3 {
width: 94%;
margin: 0 auto;
text-align: center;
font-size: 4rem;
padding-top: 100px;
position: relative;
}
.about_concept .about_concept_h3::before {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
content: "";
display: block;
width: 300px;
height: 100px;
background-image: url(//www.glamping-shimanami.com/wp-content/themes/gpvill_shimanami2026/img/top/about_concept_img.svg);
background-size: contain;
background-repeat: no-repeat;
}
.about_concept .about_concept_p {
text-align: center;
font-size: 1.3rem;
font-weight: bold;
}
@media screen and (max-width: 896px) {
.about_concept .about_concept_inner {
width: 94%;
padding: 50px 0 75px 0;
}
.about_concept .about_concept_h3 {
width: 100%;
font-size: 3rem;
padding-top: 50px;
}
.about_concept .about_concept_h3::before {
width: 150px;
height: 50px;
}
.about_concept .about_concept_p {
font-size: 1rem;
}
} .top_flowing_photo {
width: 100%;
margin-top: -100px;
margin-bottom: 100px;
overflow: hidden;
}
@media screen and (max-width: 896px) {
.top_flowing_photo {
margin-top: -50px;
margin-bottom: 50px;
}
} .top_charm {
width: 100%;
padding: 100px 0;
background-color: #fff;
}
.top_charm .top_charm_inner {
width: 94%;
max-width: 1400px;
margin: 0 auto;
}
.top_charm .top_charm_box {
width: 90%;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.top_charm .top_charm_box .top_charm_img {
width: 57%;
height: 450px;
position: relative;
}
.top_charm .top_charm_box .top_charm_img img {
width: 100%;
height: 450px;
object-fit: cover;
}
.top_charm .top_charm_box .top_charm_img_no {
width: 100px;
height: 100px;
background-color: #33a7ff;
border-radius: 50%;
position: absolute;
top: -30px;
left: 5px;
font-size: 3rem;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 13px;
}
.top_charm .top_charm_box .top_charm_note {
width: 40%;
}
.top_charm .top_charm_box .top_charm_note p {
padding-left: 25px;
}
.top_charm .top_charm_box .top_charm_note .top_charm_more {
margin-top: 20px;
padding-left: 25px;
}
.top_charm .top_charm_box .top_charm_note .top_charm_more a {
display: block;
width: 80%;
max-width: 300px;
padding: 15px;
background-color: #fff566;
color: #333114;
border-radius: 0 20px 20px 0;
position: relative;
}
.top_charm .top_charm_box .top_charm_note .top_charm_more a::after {
position: absolute;
top: 50%;
right: 1em;
width: 0.5em;
height: 0.5em;
transform: translateY(-50%) rotate(45deg);
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
content: "";
}
@media screen and (max-width: 896px) {
.top_charm {
padding: 50px 0 0 0;
}
.top_charm .top_charm_box {
margin: 70px 0;
width: 100%;
}
.top_charm .top_charm_box .top_charm_img {
width: 100%;
height: 270px;
margin-bottom: 20px;
}
.top_charm .top_charm_box .top_charm_img img {
width: 100%;
height: 270px;
}
.top_charm .top_charm_box .top_charm_img_no {
width: 75px;
height: 75px;
top: -30px;
left: 5px;
font-size: 2rem;
padding-bottom: 10px;
}
.top_charm .top_charm_box .top_charm_note {
width: 100%;
}
} .top_flowing_photo_2nd {
width: 100%;
margin-bottom: 100px;
overflow: hidden;
padding: 100px 0;
}
@media screen and (max-width: 896px) {
.top_flowing_photo_2nd {
margin: 50px 0;
padding: 50px 0;
}
} .top_areainfo {
width: 100%;
padding: 100px 0;
}
.top_areainfo .top_areainfo_inner {
width: 94%;
max-width: 1400px;
margin: 0 auto;
}
.top_areainfo_list {
width: 100%;
margin-top: 50px;
overflow: hidden;
}
.top_areainfo_list .top_areainfo_box .top_areainfo_img {
width: 100%;
height: 280px;
position: relative;
margin-bottom: 10px;
}
.top_areainfo_list .top_areainfo_box .top_areainfo_img img {
width: 100%;
height: 280px;
object-fit: cover;
} .top_areainfo_slider {
position: relative;
overflow: hidden;
}
.top_areainfo_slider .swiper-wrapper {
align-items: stretch;
}
.top_areainfo_slider .swiper-slide {
height: auto;
}
@media screen and (max-width: 896px) {
.top_areainfo {
padding: 25px 0 50px 0;
}
.top_areainfo_list {
margin-top: 25px;
}
.top_areainfo_list .top_areainfo_box .top_areainfo_img {
height: 200px;
}
.top_areainfo_list .top_areainfo_box .top_areainfo_img img {
width: 100%;
height: 200px;
object-fit: cover;
}
} .top_access {
width: 100%;
padding: 100px 0;
}
.top_access .top_access_inner {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.top_access .top_access_h3 {
width: 100%;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
}
.top_access .top_access_h3 span {
font-size: 4rem;
}
.top_access .top_access_map {
width: 100%;
margin: 30px 0;
}
.top_access .top_access_map iframe {
width: 100%;
height: 500px;
}
.top_access .access_add {
text-align: center;
}
.top_access .access_box {
width: 100%;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
.top_access .access_box .access_box_item {
width: 48%;
padding: 30px;
background-color: #fff;
}
.top_access .top_access_h4_car,
.top_access .top_access_h4_train {
display: flex;
align-items: center;
}
.top_access .top_access_h4_car::before {
content: "";
background-image: url(//www.glamping-shimanami.com/wp-content/themes/gpvill_shimanami2026/img/common/icon_car.svg);
background-size: cover;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-right: 5px;
margin-bottom: 3px;
flex-shrink: 0;
}
.top_access .top_access_h4_train::before {
content: "";
background-image: url(//www.glamping-shimanami.com/wp-content/themes/gpvill_shimanami2026/img/common/icon_railway.svg);
background-size: cover;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-right: 5px;
margin-bottom: 3px;
flex-shrink: 0;
}
@media screen and (max-width: 896px) {
.top_access {
padding: 50px 0;
}
.top_access .top_access_map iframe {
height: 300px;
}
.top_access .access_box .access_box_item {
width: 100%;
padding: 15px;
margin-bottom: 20px;
}
} .press_release_list {
margin: 0;
padding: 0;
border-top: 1px solid #e6f4ff;
}
.press_release_list li {
display: table;
width: 100%;
padding: 24px 0;
border-bottom: 1px solid #e6f4ff;
}
.press_release_list li time {
display: table-cell;
width: 140px;
vertical-align: middle;
margin-bottom: 0px;
}
.press_release_list li .press_release_title {
display: table-cell;
vertical-align: top;
}
.press_release_list li .press_release_title a:hover {
text-decoration: underline;
}
@media screen and (max-width: 896px) {
.press_release_list li {
display: block;
padding: 24px 12px;
}
.press_release_list li time {
display: block;
margin-bottom: 8px;
}
.press_release_list li .press_release_title {
display: block;
}
}  .swiper {
width: 100%;
height: auto;
}
.swiper-slide a.gallery-popup-link {
display: block;
width: 100%;
height: 100%;
}
.top_flowing_photo .swiper-slide img,
.top_flowing_photo_2nd .swiper-slide img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 20px;
} .mySwiperUpper .swiper-wrapper,
.mySwiperLower .swiper-wrapper {
transition-timing-function: linear !important;
margin: 0 auto;
} .gallery-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.3s ease;
justify-content: center;
align-items: center;
} .gallery-modal.is-active {
display: flex;
opacity: 1;
}
.gallery-modal-content {
max-width: 90%;
max-height: 90%;
}
.gallery-modal-content img {
width: auto;
height: auto;
max-width: 100%;
max-height: 90vh;
object-fit: contain;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
} .gallery-modal-close {
position: absolute;
top: 20px;
right: 30px;
color: #fff;
font-size: 45px;
font-weight: bold;
cursor: pointer;
}