@charset "utf-8";
:root {
    --color-teagreen: #D9ECD4;  /* 背景色（明るい緑） */
}
.bg-white{
    background: #fff;
}

.rogo-sec1 a,
.rogo-sec2 a{
    display: block;
    width: 100%;
    height: 100%;
}

main{
    text-align: center;
    position: relative;
}
.first-view-camp{
    background: url("../img/camp/camp-main.png") top/cover no-repeat;
}
.mainvisual{
    width: 100%;
    height: auto;
    aspect-ratio: 853/400;
    background: url("../img/camp/camp-main.png") top/cover no-repeat;
    position: relative;
    z-index: 1;
    margin-bottom: -6.5%;
}
.mainvisual img{
    display: block;
    width: max(624px,36.6%);
    aspect-ratio: 351/91;
    position: absolute;   /* ← 変更 */
    left: 50%;
    top: 38%;             /* ← 任意のオフセット（従来と同じ見た目を狙う） */
    transform: translateX(-50%);
    margin: 0;            /* ← 自動中央寄せは使わない */
}
.message img{
    display: block;
    width: max(249px,14.6%);
    aspect-ratio: 83/57;
    margin: 0 auto 4%;
}
.message p{
    margin: 0 auto 4%;
}
.message span{
    display: none;
    height: 0;
}

.rogo-sec1{
    width: min(1280px,100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 4%;
}
.rogo-sec1 .rogo01{
    width: max(226px,17.7%);
    aspect-ratio: 302/39;
    background: url("../img/camp/rogo-aiodalecamp.png") center/cover no-repeat;
}
.rogo-sec1 .rogo02{
    width: max(216px,12.7%);
    aspect-ratio: 236/93;
    background: url("../img/camp/rogo-3field.png") center/cover no-repeat;
}
.rogo-sec1 .rogo03{
    width: max(290px,17%);
    aspect-ratio: 145/22;
    background: url("../img/camp/rogo-gransauna.png") center/cover no-repeat;
}

.img2nd{
    width: min(1280px,90%);
    aspect-ratio: 256/107;
    background: url("../img/camp/img2nd.jpg") bottom/cover no-repeat;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.teagreen{
    width: 100%;
    height: auto;
    aspect-ratio: 853/132;
    background: var(--color-teagreen);
    margin-top: -15.4%;
}

.aoidake-camp{
    width: 100%;
    height: auto;
    background: var(--color-teagreen);
    margin: -1px auto 4%;
    padding: 4% 0;
}
.aoidake-camp h2{
    width: 100%;
    height: 53px;
    line-height: 53px;
    margin: 0 auto 4%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
}
.aoidake-camp h2 img{
    width: max(118px,6.9%);
}
.aoidake-camp p{
    margin: 0 auto 4%;
}
.aoidake-camp span{
    display: none;
    height: 0;
}

/* スライダー：3枚自動 ここから */
.slider-loop{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-loop .slide-track{
    display: flex;
    gap: 2%;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    animation: scrollLoop var(--duration, 200s) linear infinite;
}
.slider-loop img{
    /* 画像1枚あたりのサイズ。
    1025px以下では width:64%;
    441px以下からは width:80%; にしました。羽生 */
    width: 37.6%;
    aspect-ratio: 107 / 45;
    flex: 0 0 auto;
    display: block;
    object-fit: cover;
}
@keyframes scrollLoop {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--distance))); }
}
/* スライダー ここまで */

.about01{
    width: 90%;
    margin: 0 auto 4%;
}
.about01 span{
    display: none;
    height: 0;
}

.wave{
    width: 100%;
    aspect-ratio: 853/130;
    background: url("../img/camp/wave.png") center/cover no-repeat;
    margin-bottom: -3%;
}

.table1{
    width: 67.9%;
    margin: 0 auto 4%;
    position: relative;
    z-index: 1;
}
.table1 h4{
    margin: 0 auto 2%;
}
.table1-span{
    display: none;
    height: 0;
}
figure{
    width: 100%;
    text-align: left;
    margin: 0 auto 8%;
    position: relative;
    z-index: 1;
}
table{
    width: 100%;
    border-spacing: 0;
    border: none;
    border-collapse: collapse;
    white-space: nowrap;
    margin-bottom: 2%;
}
tr{
    width: 100%;
    height: auto;
    aspect-ratio: 579/40;
    line-height: 74px;
}
.table1 th{
    width: calc((100% - (100% / 3)) / 3);
    height: 100%;
    background: var(--color-teagreen);
    box-sizing: border-box;
    border: 1px solid #000;
    border-left: none;
    border-top: none;
    text-indent: 8%;
}
.table1 td{
    width: calc((100% - (100% / 3)) / 3);
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #000;
    border-left: none;
    border-top: none;
    text-indent: 8%;
}
table tr .wider{
    width: calc(100% / 3);
    height: 100%;
}
.table1 tr:first-child th,
.table1 tr:first-child td{
    border-top: 1px solid #000;
}
.table1 tr th:first-child,
.table1 tr td:first-child{
    border-left: 1px solid #000;
}
.table1 figcaption{
    height: 9rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.table1 figure .span-sp{
    display: none;
    height: 0;
}

.accent-img01{
    width: max(166px,9.73%);
    height: auto;
    aspect-ratio: 83/112;
    background: url("../img/camp/accent-img01.png") center/cover no-repeat;
    position: absolute;
    top: -170%;
    right: -16%;
    z-index: 0;
}
.accent-img02{
    width: max(166px,9.73%);
    aspect-ratio: 83/112;
    background: url("../img/camp/accent-img02.png") center/cover no-repeat;
    position: absolute;
    top: 0%;
    left: 5%;
    z-index: 0;
}
.accent-img03{
    width: max(166px,9.73%);
    aspect-ratio: 83/112;
    background: url("../img/camp/accent-img01.png") center/cover no-repeat;
    position: absolute;
    top: -25%;
    right: -16.5%;
    z-index: 0;
}
.accent-img04{
    width: max(85px,5%);
    aspect-ratio: 43/136;
    background: url("../img/camp/accent-img03.png") center/cover no-repeat;
    position: absolute;
    top: -5%;
    left: 10%;
    z-index: 0;
}
.accent-img05{
    width: max(183px,10.7%);
    aspect-ratio: 91/76;
    background: url("../img/camp/accent-img04.png") center/cover no-repeat;
    position: absolute;
    top: 5%;
    right: 7%;
    z-index: 0;
}

.rogo-sec2{
    width: min(1280px,100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 6%;
}
.rogo-sec2 .rogo01{
    width: max(197px,17%);
    aspect-ratio: 145/68;
    background: url("../img/camp/rogo-nappu.png") center/cover no-repeat;
}
.rogo-sec2 .rogo02{
    width: max(306px,26.4%);
    aspect-ratio: 450/107;
    background: url("../img/camp/rogo-rakutentravel.png") center/cover no-repeat;
}
.rogo-sec2 .rogo03{
    width: max(190px,16.4%);
    aspect-ratio: 35/12;
    background: url("../img/camp/rogo-jyaran.png") center/cover no-repeat;
}

.table2{
    width: 67.9%;
    margin: 0 auto 4%;
    position: relative;
    z-index: 1;
}
.table2 table{
    border-bottom: 1px solid #000;
    border-collapse: collapse;
}
.table2 th{
    width: calc(100% / 3);
    background: var(--color-teagreen);
    text-indent: 2%;
    box-sizing: border-box;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
}
.table2 figure .th-center{
    text-align: center;
    background: #fff;
    vertical-align: middle;
}
.table2 td{
    width: 33.3%;
    box-sizing: border-box;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    text-align: center;
}
.table2 tr th:last-child,
.table2 tr td:last-child{
    border-right: 1px solid #000;
}

.facilityfee{
    margin: 0 auto 6%;
    position: relative;
}
.facilityfee h3{
    margin: 0 0 1.5%;
}
.facilityfee a{
    display: block;
    width: 15.8%;
    aspect-ratio: 3/1;
    border-radius: 999px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-left: 1.4%;
    white-space: nowrap;
}

.table3{
    width: 67.9%;
    /*margin: 0 auto 24%;*/
    margin: 0 auto 10%;
    position: relative;
    z-index: 1;
}
.table3 table{
    border-bottom: 1px solid #000;
    border-collapse: collapse;
}
.table3 th{
    width: calc(100% - 3);
    background: var(--color-teagreen);
    box-sizing: border-box;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    text-indent: 4%;
}
.table3 td{
    width: calc(100% - 3);
    box-sizing: border-box;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    text-indent: 4%;
    background: #fff;
}
.table3 tr th:last-child,
.table3 tr td:last-child{
    border-right: 1px solid #000;
}
.table3 figure{
    margin: 0 auto 6%;
}
.tb3-span-pc{
    display: block;
    height: 0;
}
.tb3-span-sp{
    display: none;
    height: 0;
}

.info1{
    width: 67.9%;
    text-align: left;
    margin: 0 auto 10%;
    position: relative;
}
.orange{
    color: #EF8831;
}
.info1-sp{
    display: none;
}

.table4{
    width: 67.9%;
    margin: 0 auto 4%;
    position: relative;
    z-index: 1;
}
.table4 table{
    border-bottom: 1px solid #000;
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto 2.5rem;
    min-width: 640px;
}
.table4 th,
.table4 td{
    width: 25%;
    box-sizing: border-box;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    text-align: left;
    white-space: nowrap;
    text-indent: 4%;
}
.table4 tr th:last-child,
.table4 tr td:last-child{
    border-right: 1px solid #000;
}
.table4 tr:last-child th,
.table4 tr:last-child td{
    border-bottom: 1px solid #000;
}
.table4 .table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table tbody tr .narrower{
    width: calc((100% - 25%) / 4);
}
.table4 .side{
    width: 25%;
    text-align: left;
    background: none;
    vertical-align: middle;
}
.table4 .subhead{
    background: var(--color-teagreen);
}
table tbody tr .tb4-wider{
    width: calc((100% - 25%) / 2);
}

.img3rd{
    width: min(1280px,90%);
    aspect-ratio: 256/107;
    background: url("../img/camp/img3rd.webp") bottom/cover no-repeat;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.threefield{
    width: 100%;
    height: auto;
    background: var(--color-teagreen);
    margin: -1px auto 10%;
    padding: 4% 0;
}
.threefield h2{
    width: max(216px,12.7%);
    aspect-ratio: 236/93;
    margin: 0 auto 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.threefield h2 img{
    width: 100%;
    height: auto;
    display: block;
}
.threefield p{
    margin: 0 auto 4%;
    position: relative;
    z-index: 1;
}
.threefield span,
.gransauna span{
    display: none;
    height: 0;
}
.accent-img-box{
    width: 100%;
    position: relative;
}

.img4th{
    width: min(1280px,90%);
    aspect-ratio: 256/107;
    background: url("../img/camp/img4th.webp") bottom/cover no-repeat;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
.palesalmon{
    width: 100%;
    height: auto;
    aspect-ratio: 853/132;
    background: #FDDCC6;
    margin-top: -15.4%;
}
.gransauna{
    width: 100%;
    height: auto;
    background: #FDDCC6;
    margin: -1px auto 6%;
    padding: 4% 0;
}
.gransauna h2{
    width: max(214px,16.7%);
    aspect-ratio: 143/22;
    margin: 0 auto 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.gransauna h2 img{
    width: 100%;
    height: auto;
    display: block;
}
.gransauna p{
    margin: 0 auto 4%;
    position: relative;
    z-index: 1;
}
.gransauna span{
    display: none;
    height: 0;
}

.info2{
    margin-top: 4%;
}

@media (max-width: 1281px){
    .mainvisual img{
        width: max(628 px,49.1%);
        aspect-ratio: 351/91;
        top: 33%;
    }
    .message img{
        width: max(246px,19.2%);
        aspect-ratio: 83/57;
    }
    .rogo-sec1 .rogo01{
        width: max(306px,23.9%);
        aspect-ratio: 302/39;
        background: url("../img/camp/rogo-aiodalecamp.png") center/cover no-repeat;
    }
    .rogo-sec1 .rogo02{
        width: max(214px,16.7%);
        aspect-ratio: 236/93;
        background: url("../img/camp/rogo-3field.png") center/cover no-repeat;
    }
    .rogo-sec1 .rogo03{
        width: max(290px,17%);
        aspect-ratio: 145/22;
        background: url("../img/camp/rogo-gransauna.png") center/cover no-repeat;
    }
}
@media (max-width: 1025px){
    .mainvisual img{
        width: min(376px,36.7%);
        top: 38%;
    }
    .message img{
        width: max(146px,14.2%);
    }
    .message p {
        margin: 0 auto 5%;
    }
    .rogo-sec1{
        width: 90%;
        justify-content: space-between;
    }
    .rogo-sec1 .rogo01{
        width: min(186px,18.1%);
    }
    .rogo-sec1 .rogo02{
        width: min(130px,12.7%);
    }
    .rogo-sec1 .rogo03{
        width: min(170px,16.6%);
    }
    .aoidake-camp h2 img{
        width: max(70px,6.8%);
    }
    .aoidake-camp h2{
        font-size: 26px;
    }
    .aoidake-camp p {
        margin: 0px auto 4%;
    }
    .accent-img01{
        width: max(98px,9.6%);
        top: -230%;
        right: -18%;
    }
    .accent-img02{
        width: max(98px,9.6%);
        top: 0%;
        left: 3.5%;
    }
    .accent-img03{
        width: max(98px,9.6%);
        top: -26%;
        right: -19%;
    }
    .accent-img04{
        width: max(52px,5.1%);
        top: -6%;
        left: 5%;
    }
    .accent-img05{
        width: max(106px,10.4%);
        top: 5%;
        right: 7%;
    }
    .slider-loop img{
        width: 64%;
    }
    figure{
        margin: 0 auto 5%;
    }
    .rogo-sec2{
        width: 100%;
        justify-content: space-between;
    }
    .rogo-sec2 .rogo01{
        width: min(172px,16.8%);
    }
    .rogo-sec2 .rogo02{
        width: min(274px,26.8%);
    }
    .rogo-sec2 .rogo03{
        width: min(174px,17%);                                              px,36.8%);
    }
    .threefield .accent-img-box h2{
        width: min(134px,13.1%);
    }
    .threefield p,
    .gransauna p{
        margin: 0 auto 3%;
    }
    .gransauna .accent-img-box h2{
        width: min(330px,32.2%);
    }
    .table3{
        margin: 0 auto 6%;
    }
    }
@media (max-width: 953px){
    .table1 figcaption {
        height: 12rem;
    }
    .table1 figure .span-pc{
        display: none;
        height: 0;
    }
    .table1 figure .span-sp{
        display: block;
    }
    tr {
        line-height: 56px;
    }
}
@media (max-width: 767px){
    .table1{
        width: 100%;
    }
    .table2,
    .table3,
    .table4{
        width: 100%;
    }
    .table-scroll{
        display: block;
        width: 80%;
        max-width: 80%;
        margin: 0 auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-gutter: stable both-edges;
    }
    .table-scroll > table{
        width: max-content;
        min-width: 640px;
    }
    @supports not (width: max-content){
        .table-scroll > table{
            width: auto;
            min-width: 640px;
        }
    }
    .table1 figcaption{
        display: block;
        width: 80%;
        max-width: 80%;
        margin: 0 auto 36%;
        text-align: left;
    }
    .table1-span{
        display: block;
    }
    .mainvisual img{
        width: min(216px,49.1%);
        top: 41%;
    }
    .message img{
        width: max(114px,14.9%);
    }
    .message span{
        display: block;
    }
    .aoidake-camp {
        padding: 3% 0;
    }
    .aoidake-camp h2{
        font-size: 24px;
        margin: 0 auto 3%;
    }
    .aoidake-camp h2 img{
        width: max(40px,9.1%);
    }
    .aoidake-camp p{
        margin: 0px auto 3%;
    }
    .aoidake-camp span{
        display: block;
    }
    .about01 span{
        display: block;
    }
    .rogo-sec1{
        width: 90%;
        justify-content: space-between;
    }
    .rogo-sec1 .rogo01{
        width: min(108px,37.5%);
    }
    .rogo-sec1 .rogo02{
        width: min(74px,25.7%);
        margin-bottom: 0.5rem;
    }
    .rogo-sec1 .rogo03{
        width: min(106px,36.8%);
    }
    .accent-img01{
        width: max(75px,9.8%);
        top: -490%;
        right: -7%;
    }
    .accent-img02{
        width: max(75px,9.8%);
        left: 3.5%;
    }
    .accent-img03{
        width: max(75px,9.8%);
        top: -5%;
        right: 0%;
    }
    .accent-img04{
        width: max(38px,4.9%);
        top: 0%;
        left: 0%;
    }
    .accent-img05{
        width: max(82px,10.7%);
        top: 20%;
        right: 0%;
    }
    tr{
        line-height: 32px;
    }
    .tb3-span-pc{
        display: none;
    }
    .tb3-span-sp{
        display: block;
    }
    .accent-img-box{
        width: 87%;
        max-width: 87%;
        margin: 0 auto 6%;
        position: relative;
    }
    .accent-img-box .rogo-sec2{
        width: 100%;
        margin: 0;
        justify-content: space-between;
    }
    .info1{
        width: 80%;
    }
    .facilityfee a{
        width: 122px;
    }
    .table3 figcaption{
        display: block;
        width: 80%;
        max-width: 80%;
        margin: 0 auto 20%;
        text-align: left;
    }
    .threefield {
        padding: 6% 0;
    }
    .threefield h2{
        width: min(100px,13%);
    }
    .threefield span,
    .gransauna span{
        display: block;
    }
    .gransauna {
        padding: 6% 0;
    }
    .gransauna h2{
        width: min(246px,32.1%);
    }
    .rogo-sec2 .rogo01{
        width: min(80px,27.8%);
    }
    .rogo-sec2 .rogo02{
        width: min(118px,41%);
    }
    .rogo-sec2 .rogo03{
        width: min(90px,31.25%);                                              px,36.8%);
    }
}
@media (max-width: 608px){
    .mainvisual img{
        top: 38%;
    }
    .table1 figcaption {
        margin-top: .5rem;
    }
}
@media (max-width: 583px){
    .mainvisual img{
        top: 38%;
    }
    .table3{
        margin: 0 auto 12%;
    }
    .table3 figure {
        margin: 0 auto 11%;
    }
}
@media (max-width: 441px){
    .mainvisual{
        margin-bottom: -5.5%;
    }
    .mainvisual img{
        width: min(216px,49.1%);
        top: 32%;
    }
    .message p {
        margin: 0 auto 6%;
    }
    .rogo-sec1 {
        margin: 0 auto 6%;
    }
    .message img{
        width: max(86px,19.5%);
        margin: 0 auto 4%;
    }
    .aoidake-camp{
        margin: -1px auto 8%;
        padding: 8% 0;
    }
    .aoidake-camp h2{
        font-size: 16px;
        margin: 0 auto 2%;
    }
    .aoidake-camp h2 img{
        width: max(40px,9.1%);
    }
    .aoidake-camp p {
        margin: 0px auto 6%;
    }
    .slider-loop img{
        width: 80%;
    }
    .about01 {
        margin: 0 auto 12%;
    }
    .about01 span{
        display: block;
    }
    .wave {
        margin-bottom: 0%;
    }
    .table1 h4 {
        margin: 0 auto;
    }
    .rogo-sec1{
        width: 90%;
        justify-content: space-between;
    }
    .rogo-sec1 .rogo01{
        width: min(108px,37.5%);
    }
    .rogo-sec1 .rogo02{
        width: min(74px,25.7%);
    }
    .rogo-sec1 .rogo03{
        width: min(106px,36.8%);
    }
    .accent-img01{
        width: max(46px,10.5%);
        top: -300%;
        right: -6%;
    }
    .accent-img02{
        width: max(46px,10.5%);
        top: 21%;
        left: 2%;
    }
    .accent-img03{
        width: max(46px,10.5%);
        top: 42%;
        right: -12%;
    }
    .accent-img04{
        width: max(22px,5%);
        top: 27%;
        left: -2%;
    }
    .accent-img05{
        width: max(46px,10.5%);
        top: 32%;
        right: -5%;
    }
    .accent-img-box{
        margin: 0 auto 12%;
    }
    .table2{
        margin: 0 auto 12%;
    }
    .rogo-sec2{
        width: 100%;
        justify-content: space-between;
    }
    .rogo-sec2 .rogo01{
        width: min(80px,27.8%);
    }
    .rogo-sec2 .rogo02{
        width: min(118px,41%);
    }
    .rogo-sec2 .rogo03{
        width: min(90px,31.25%);                                              px,36.8%);
    }
    .facilityfee{
        margin: 0 auto 12%;
    }
    .facilityfee a{
        width: 150px;
        padding-left: 3%;
    }
    .table3{
        margin: 0 auto 16%;
    }
    .table3 figcaption {
        margin: 4% auto 34%;
    }
    .info1{
        margin: 0 auto 20%;
    }
    .info1-pc{
        display: none;
        height: 0;
    }
    .info1-sp{
        display: block;
        height: 0;
        margin-bottom: 20%;
    }
    .info1 > .info1-sp:last-child{
        margin-bottom: 10rem;
    }
    .threefield{
        margin: -1px auto 20%;
        padding: 8% 0;
    }
    .threefield p,.gransauna p{
        margin: 0 auto;
    }
    .threefield .accent-img-box h2{
        width: max(74px,25.7%);
        margin: 0 auto 8%;
    }
    .gransauna{
        margin: -1px auto 16%;
        padding: 9% 0;
    }
    .gransauna .accent-img-box h2{
        width: max(140px,31.8%);
        margin: 0 auto 8%;
    }
    .table4 {
        margin: 0 auto 16%;
    }
    .info2 {
        margin: 14% auto;
    }
    .info2 h4,.info2 p{
        margin: 0 auto;
    }
}