@charset "utf-8";
*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* スラ1 ここから */
/* 全体 */
.sl-a{
    width:62.8%;
    aspect-ratio:125/51;
    margin:0 auto;
}
/* メイン表示枠 */
.sl{
    width:100%;
    aspect-ratio:625/353;
    overflow:hidden;
    position:relative;
}
.sl > img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    animation:fadeCycle 60s linear infinite; /* 自動ループ（6→1→…） */
}
/* 各画像の開始タイミング（10s刻み） */
.sl img:nth-child(1){animation-delay: 0s;}
.sl img:nth-child(2){animation-delay:10s;}
.sl img:nth-child(3){animation-delay:20s;}
.sl img:nth-child(4){animation-delay:30s;}
.sl img:nth-child(5){animation-delay:40s;}
.sl img:nth-child(6){animation-delay:50s;}
/* 自動：1.5%〜15%だけ表示（=1.5s〜9s/各10sスロット） */
@keyframes fadeCycle{
    0%,16.5%  {opacity:0;}
    1.5%,15%  {opacity:1;}
    16.6%,100%{opacity:0;}
}
/* ラジオ（非表示） */
input[name="slide"]{display:none;}
/* ── 手動モード：どれか checked になったら自動を完全停止 ── */
input[name="slide"]:checked ~ .sl > img{
    animation:none !important;
    opacity:0;
    transition:opacity .35s ease;
}
#s1:checked ~ .sl > img:nth-child(1),
#s2:checked ~ .sl > img:nth-child(2),
#s3:checked ~ .sl > img:nth-child(3),
#s4:checked ~ .sl > img:nth-child(4),
#s5:checked ~ .sl > img:nth-child(5),
#s6:checked ~ .sl > img:nth-child(6){
    opacity: 1;
    z-index: 2;
}
/* サムネイル */
.thm{
    width:100%;
    aspect-ratio:625/43;
    display:flex;
    justify-content:center;
    gap:1%;
    margin-top:1%;
}
.thm label{
    width:12.2%;
    aspect-ratio:76/43;
    overflow:hidden;
    cursor:pointer;
    opacity:.6;
    transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    border:2px solid transparent;
}
.thm label:hover{
    opacity:1;
    transform:scale(1.05);
}
#s1:checked ~ .thm label[for="s1"],
#s2:checked ~ .thm label[for="s2"],
#s3:checked ~ .thm label[for="s3"],
#s4:checked ~ .thm label[for="s4"],
#s5:checked ~ .thm label[for="s5"],
#s6:checked ~ .thm label[for="s6"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.thm img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* 左右ナビ */
.sl .nav{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}
.sl .nav .bt{
    width:5%;
    aspect-ratio:1;
    line-height:1;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    font-size:28px;
    color:#fff;
    pointer-events:auto;
    position:absolute;
    top:50%;
    cursor:pointer;
    display:none; /* 表示制御は下で */
    transform:translateY(-50%);
    place-items:center;
    user-select:none;
    transition:transform .2s ease;
}
.sl .nav .bt img{
    width:50%;
    height:50%;
    object-fit:contain;
    display:block;
    margin:0 auto;
}
.sl .nav .bt:hover{
    transform:translateY(-50%) scale(1.08);
}
.sl .nav .pr{left:3%;}
.sl .nav .ne{right:3%;}
/* 初期（自動モード）だけ default 矢印を表示 → 1回で手動に入る */
.sl .nav .bt.default{display:grid;}
input[name="slide"]:checked ~ .sl .bt.default{display:none;}
/* 手動モード：選択スライドのペアだけ表示（必ず追従） */
#s1:checked ~ .sl .pr-s1, #s1:checked ~ .sl .ne-s1,
#s2:checked ~ .sl .pr-s2, #s2:checked ~ .sl .ne-s2,
#s3:checked ~ .sl .pr-s3, #s3:checked ~ .sl .ne-s3,
#s4:checked ~ .sl .pr-s4, #s4:checked ~ .sl .ne-s4,
#s5:checked ~ .sl .pr-s5, #s5:checked ~ .sl .ne-s5,
#s6:checked ~ .sl .pr-s6, #s6:checked ~ .sl .ne-s6{
    display:grid;}

/* == スライダー1 ここまで == */

/* == スライダー2 ここから == */
.sl-a2{
    width:62.8%;
    aspect-ratio:125/51;
    margin:0 auto;
}
.sl2{
    width:100%;
    aspect-ratio:625/353;
    overflow:hidden;
    position:relative;
}
.sl2>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    animation:fadeCycle2 40s linear infinite;
}
.sl2 img:nth-child(1){animation-delay: 0s;}
.sl2 img:nth-child(2){animation-delay:10s;}
.sl2 img:nth-child(3){animation-delay:20s;}
.sl2 img:nth-child(4){animation-delay:30s;}
@keyframes fadeCycle2{
    0%,25%  {opacity:0;}
    2.5%,22.5%  {opacity:1;}
    25.1%,100%{opacity:0;}
}
input[name="slide2"]{display:none;}
input[name="slide2"]:checked ~ .sl2 > img{
    animation:none !important;
    opacity:0;
    transition:opacity .35s ease;
}
#s2-1:checked ~ .sl2 > img:nth-child(1),
#s2-2:checked ~ .sl2 > img:nth-child(2),
#s2-3:checked ~ .sl2 > img:nth-child(3),
#s2-4:checked ~ .sl2 > img:nth-child(4){
    opacity: 1;
    z-index: 2;
}
.thm2{
    width:100%;
    aspect-ratio:625/43;
    display:flex;
    justify-content:center;
    gap:1%;
    margin-top:1%;
}
.thm2 label{
    width:12.2%;
    aspect-ratio:76/43;
    overflow:hidden;
    cursor:pointer;
    opacity:.6;
    transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    border:2px solid transparent;
}
.thm2 label:hover{
    opacity:1;
    transform:scale(1.05);
}
#s2-1:checked ~ .thm2 label[for="s2-1"],
#s2-2:checked ~ .thm2 label[for="s2-2"],
#s2-3:checked ~ .thm2 label[for="s2-3"],
#s2-4:checked ~ .thm2 label[for="s2-4"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.thm2 img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.sl2 .nav2{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}
.sl2 .nav2 .bt2{
    width:5%;
    aspect-ratio:1;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    color:#fff;
    pointer-events:auto;
    position:absolute;
    top:50%;
    cursor:pointer;
    display:none;
    transform:translateY(-50%);
    place-items:center;
    user-select:none;
    transition:transform .2s ease;
}
.sl2 .nav2 .bt2 img{
    width:50%;
    height:50%;
    object-fit:contain;
    display:block;
}
.sl2 .nav2 .bt2:hover{
    transform:translateY(-50%) scale(1.08);
}
.sl2 .nav2 .pr2{left:3%;}
.sl2 .nav2 .ne2{right:3%;}
.sl2 .nav2 .bt2.default2{display:grid;}
input[name="slide2"]:checked ~ .sl2 .bt2.default2{display:none;}
#s2-1:checked ~ .sl2 .pr2-s1, #s2-1:checked ~ .sl2 .ne2-s1,
#s2-2:checked ~ .sl2 .pr2-s2, #s2-2:checked ~ .sl2 .ne2-s2,
#s2-3:checked ~ .sl2 .pr2-s3, #s2-3:checked ~ .sl2 .ne2-s3,
#s2-4:checked ~ .sl2 .pr2-s4, #s2-4:checked ~ .sl2 .ne2-s4{
    display:grid;}
/* == スライダー2 ここまで == */
/* == スライダー3 ここから == */
.sl-a3{
    width:62.8%;
    aspect-ratio:125/51;
    margin:0 auto;
}
.sl3{
    width:100%;
    aspect-ratio:625/353;
    overflow:hidden;
    position:relative;
}
.sl3 > img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    animation:fadeCycle3 50s linear infinite;
}
.sl3 img:nth-child(1){animation-delay:0s;}
.sl3 img:nth-child(2){animation-delay:10s;}
.sl3 img:nth-child(3){animation-delay:20s;}
.sl3 img:nth-child(4){animation-delay:30s;}
.sl3 img:nth-child(5){animation-delay:40s;}
@keyframes fadeCycle3{
    0%,19.8%{opacity:0;}
    1.8%,18%{opacity:1;}
    19.801%,100%{opacity:0;}
}
input[name="slide3"]{display:none;}
input[name="slide3"]:checked ~ .sl3 > img{
    animation:none !important;
    opacity:0;
    transition:opacity .35s ease;
}
#s3-1:checked ~ .sl3 > img:nth-child(1),
#s3-2:checked ~ .sl3 > img:nth-child(2),
#s3-3:checked ~ .sl3 > img:nth-child(3),
#s3-4:checked ~ .sl3 > img:nth-child(4),
#s3-5:checked ~ .sl3 > img:nth-child(5){
    opacity:1;
    z-index:2;
}
.thm3{
    width:100%;
    aspect-ratio:625/43;
    display:flex;
    justify-content:center;
    gap:1%;
    margin-top:1%;
}
.thm3 label{
    width:12.2%;
    aspect-ratio:76/43;
    overflow:hidden;
    cursor:pointer;
    opacity:.6;
    transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    border:2px solid transparent;
}
.thm3 label:hover{
    opacity:1;
    transform:scale(1.05);
}
#s3-1:checked ~ .thm3 label[for="s3-1"],
#s3-2:checked ~ .thm3 label[for="s3-2"],
#s3-3:checked ~ .thm3 label[for="s3-3"],
#s3-4:checked ~ .thm3 label[for="s3-4"],
#s3-5:checked ~ .thm3 label[for="s3-5"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.thm3 img{
    width:100%;
    height:100%;
    display:block;
}
.sl3 .nav3{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}
.sl3 .nav3 .bt{
    width:5%;
    aspect-ratio:1;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    color:#fff;
    pointer-events:auto;
    position:absolute;
    top:50%;
    cursor:pointer;
    display:none;
    transform:translateY(-50%);
    place-items:center;
    user-select:none;
    transition:background .2s ease, transform .2s ease;
}
.sl3 .nav3 .bt img{
    width:50%;
    height:50%;
    object-fit:contain;
    display:block;
    margin:0 auto;
}
.sl3 .nav3 .bt:hover{
    transform:translateY(-50%) scale(1.08);
}
.sl3 .nav3 .pr{left:3%;}
.sl3 .nav3 .ne{right:3%;}
.sl3 .nav3 .bt.default{display:grid;}
input[name="slide3"]:checked ~ .sl3 .bt.default{display:none;}
#s3-1:checked ~ .sl3 .pr-s3-1, #s3-1:checked ~ .sl3 .ne-s3-1,
#s3-2:checked ~ .sl3 .pr-s3-2, #s3-2:checked ~ .sl3 .ne-s3-2,
#s3-3:checked ~ .sl3 .pr-s3-3, #s3-3:checked ~ .sl3 .ne-s3-3,
#s3-4:checked ~ .sl3 .pr-s3-4, #s3-4:checked ~ .sl3 .ne-s3-4,
#s3-5:checked ~ .sl3 .pr-s3-5, #s3-5:checked ~ .sl3 .ne-s3-5{
    display:grid;}
/* == スライダー3 ここまで == */

/* == スライダー4 ここから == */
.sl4{
    width:100%;
    aspect-ratio:1000/257;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    background:#C3E7C3;
}
.sl4 input{display:none;}
.ra4{
    width:100%;
    aspect-ratio:125/28;
    display: flex;
    justify-content: flex-start;
    gap: 2.6%;
    transition: transform .6s ease;
}
.ra4 img{
    width:39.4%;
    aspect-ratio:197/112;
    object-fit:cover;
    flex:0 0 auto;
    display:block;
}
#sl4-1:checked  ~ .ra4{transform:translateX(calc(50% - 61.6%));}
#sl4-2:checked  ~ .ra4{transform:translateX(calc(50% - 103.6%));}
#sl4-3:checked  ~ .ra4{transform:translateX(calc(50% - 145.6%));}
#sl4-4:checked  ~ .ra4{transform:translateX(calc(50% - 187.6%));}
#sl4-5:checked  ~ .ra4{transform:translateX(calc(50% - 229.6%));}
#sl4-6:checked  ~ .ra4{transform:translateX(calc(50% - 271.6%));}
#sl4-7:checked  ~ .ra4{transform:translateX(calc(50% - 313.6%));}
#sl4-8:checked  ~ .ra4{transform:translateX(calc(50% - 355.6%));}
#sl4-9:checked  ~ .ra4{transform:translateX(calc(50% - 397.6%));}
#sl4-10:checked ~ .ra4{transform:translateX(calc(50% - 439.6%));}
#sl4-11:checked ~ .ra4{transform:translateX(calc(50% - 481.6%));}
#sl4-12:checked ~ .ra4{transform:translateX(calc(50% - 523.6%));}
#sl4-13:checked ~ .ra4{transform:translateX(calc(50% - 565.6%));}
#sl4-14:checked ~ .ra4{transform:translateX(calc(50% - 607.6%));}
#sl4-15:checked ~ .ra4{transform:translateX(calc(50% - 649.6%));}
.na4{
    position:absolute;
    top:43.5%;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
    pointer-events:none;
}
.na4 label{
    width:3%;
    aspect-ratio:1;
    background:#01865B;
    border-radius:50%;
    display:grid;
    place-items:center;
    pointer-events:auto;
    cursor:pointer;
    transition:filter .2s ease;
}
.na4 label:hover{filter:brightness(1.1);}
.na4 img{
    width:50%;
    height:50%;
    object-fit:contain;
}
.na4 label{display:none;}
#sl4-1:checked  ~ .na4 .pr-s1,
#sl4-1:checked  ~ .na4 .ne-s1,
#sl4-2:checked  ~ .na4 .pr-s2,
#sl4-2:checked  ~ .na4 .ne-s2,
#sl4-3:checked  ~ .na4 .pr-s3,
#sl4-3:checked  ~ .na4 .ne-s3,
#sl4-4:checked  ~ .na4 .pr-s4,
#sl4-4:checked  ~ .na4 .ne-s4,
#sl4-5:checked  ~ .na4 .pr-s5,
#sl4-5:checked  ~ .na4 .ne-s5,
#sl4-6:checked  ~ .na4 .pr-s6,
#sl4-6:checked  ~ .na4 .ne-s6,
#sl4-7:checked  ~ .na4 .pr-s7,
#sl4-7:checked  ~ .na4 .ne-s7,
#sl4-8:checked  ~ .na4 .pr-s8,
#sl4-8:checked  ~ .na4 .ne-s8,
#sl4-9:checked  ~ .na4 .pr-s9,
#sl4-9:checked  ~ .na4 .ne-s9,
#sl4-10:checked ~ .na4 .pr-s10,
#sl4-10:checked ~ .na4 .ne-s10,
#sl4-11:checked ~ .na4 .pr-s11,
#sl4-11:checked ~ .na4 .ne-s11,
#sl4-12:checked ~ .na4 .pr-s12,
#sl4-12:checked ~ .na4 .ne-s12,
#sl4-13:checked ~ .na4 .pr-s13,
#sl4-13:checked ~ .na4 .ne-s13,
#sl4-14:checked ~ .na4 .pr-s14,
#sl4-14:checked ~ .na4 .ne-s14,
#sl4-15:checked ~ .na4 .pr-s15,
#sl4-15:checked ~ .na4 .ne-s15{display:grid;}
.sl4 .na4{z-index:2;}
.sl4 .na4 label{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.sl4 .na4 label[class*="pr"]{left:28.5%;}
.sl4 .na4 label[class*="ne"]{right:28.5%;}
.sl4 .na4 label img{
    width:50%;
    height:50%;
    object-fit:contain;
}
/* ドット */
.do4{
    position:absolute;
    bottom:0%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:.5rem;
}
.do4 label{
    width:.5rem;
    aspect-ratio:1;
    border-radius:50%;
    background:#ccc;
    cursor:pointer;
    transition:background .3s ease;
}
#sl4-1:checked ~ .do4 label[for="sl4-1"],
#sl4-2:checked ~ .do4 label[for="sl4-2"],
#sl4-3:checked ~ .do4 label[for="sl4-3"],
#sl4-4:checked ~ .do4 label[for="sl4-4"],
#sl4-5:checked ~ .do4 label[for="sl4-5"],
#sl4-6:checked ~ .do4 label[for="sl4-6"],
#sl4-7:checked ~ .do4 label[for="sl4-7"],
#sl4-8:checked ~ .do4 label[for="sl4-8"],
#sl4-9:checked ~ .do4 label[for="sl4-9"],
#sl4-10:checked ~ .do4 label[for="sl4-10"],
#sl4-11:checked ~ .do4 label[for="sl4-11"],
#sl4-12:checked ~ .do4 label[for="sl4-12"],
#sl4-13:checked ~ .do4 label[for="sl4-13"],
#sl4-14:checked ~ .do4 label[for="sl4-14"],
#sl4-15:checked ~ .do4 label[for="sl4-15"]{
    background:#00A060;
}
/* == スライダー4 ここまで == */

.af-wrap{
    width:100%;
    margin:0 auto;
    background-color:#fff;
    position:relative;
}
.af-he{
    width:100%;
    aspect-ratio:90.3/4;
    background:#fff url(https://p-c.pw/aso-f/img/ro-he.webp) center / cover no-repeat;
    position:sticky;
    top:84px;
    /* top:120px; */
    /* top:156px; */
    z-index:9;
    box-shadow:0 1px 8px rgba(0,0,0,.2);
}
.af-me>div{
    position:relative;
}
.af-me>div>a{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
}
.af-me>div>a:hover{
    background:rgba(255,245,61,0.15);
    cursor:pointer;
}
.af-me{
    width:37%;
    aspect-ratio:167/16.5;
    position:absolute;
    top:43%;
    left:65.5%;
    transform:translate(-50%,-50%) scale(1.2);
    transform-origin:top center;
    display:flex;
    justify-content:space-between;
}
.me1{
    width:11.1%;
    aspect-ratio:21/20;
}
.me1 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me2{
    width:13.1%;
    aspect-ratio:7/5;
}
.me2 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me3{
    width:17.2%;
    aspect-ratio:8/5;
}
.me3 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me4{
    width:13.6%;
    aspect-ratio:27/20;
}
.me4 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me5{
    width:14.6%;
    aspect-ratio:29/20;
}
.me5 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me6{
    width:15.2%;
    aspect-ratio:3/2;
}
.me6 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me7{
    width:15.7%;
    aspect-ratio:33/20;
}
.me7 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.af-he a:hover .bt-pl{
    cursor:pointer;
    filter:brightness(1.1);
}

.af-main{
    width:100%;
    background:#fff;
    /* margin-top:-42.9rem; */
    -webkit-overflow-scrolling:auto;
    overflow:visible;
}

.ro1{
    width:100%;
    aspect-ratio:100/23;
    background:url(https://p-c.pw/aso-f/img/ro-01.jpg) center / cover no-repeat;
}

.bt-plan{
    width:3.89%;
    aspect-ratio:37/79;
    position:sticky;
    top:420px;
    left:100%;
    z-index:1;
    transition:filter .3s ease;
}
.af-main>a:hover .bt-plan,
.bt-plan:hover{
    cursor:pointer;
    filter:brightness(1.1);
}

.ro2{
    width:100%;
    aspect-ratio:500/153;
    background:url(https://p-c.pw/aso-f/img/ro-02.jpg) center / cover no-repeat;
}

.link{
    width:57.7%;
    aspect-ratio:1000/173;
    background:#fff;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.link a{
    display:block;
    width:29.5%;
    aspect-ratio:1;
}
.zone{
    width:100%;
    height:100%;
    transition:filter .3s ease;
}

.link > a:hover .zone,
.zone:hover{
    cursor:pointer;
    filter:brightness(1.1);
}

.ro3{
    width:100%;
    aspect-ratio:250/62;
    background:url(https://p-c.pw/aso-f/img/ro-03.jpg) center / cover no-repeat;
}

.ro4{
    width:100%;
    aspect-ratio:2000/1073;
    background:url(https://p-c.pw/aso-f/img/ro-04.jpg) center / cover no-repeat;
}
.ro4-2{
    width:100%;
    aspect-ratio:1000/281;
    background:url(https://p-c.pw/aso-f/img/ro-04-2.jpg) center / cover no-repeat;
}

.ro5{
    width:100%;
    aspect-ratio:2000/1035;
    background:url(https://p-c.pw/aso-f/img/ro-05.jpg) center / cover no-repeat;
}
.ro5-2{
    width:100%;
    aspect-ratio:2000/531;
    background:url(https://p-c.pw/aso-f/img/ro-05-2.jpg) center / cover no-repeat;
}

.ro6{
    width:100%;
    aspect-ratio:250/169;
    background:url(https://p-c.pw/aso-f/img/ro-06.jpg) center / cover no-repeat;
}
.ro08{
    width:100%;
    aspect-ratio:1000/403;
    background:#C3E7C3;
    background:url(https://p-c.pw/aso-f/img/ro-08.png) center / cover no-repeat;
}
.ro-gr{
    width:100%;
    aspect-ratio:1000/257;
    background:#C3E7C3;
    position:relative;
}
.af-fo{
    width:100%;
    aspect-ratio:1000/129;
    background:url(https://p-c.pw/aso-f/img/fo.webp) center / cover no-repeat;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}

.af-fo ul{
    width:36.84%;
    aspect-ratio:19/7;
    padding-top:3.9%;
    margin:0 0 0 65.6%;
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(3,1.3rem);
    grid-auto-columns:25%;
    list-style:none;
}

.af-fo ul li{
    width:100%;
}
.af-fo ul li a{
    line-height:1.3rem;
    font-size:.65rem;
    text-decoration:none;
    letter-spacing:-.5px;
    color:#fff;
    white-space:nowrap;
    cursor:pointer;
}
.af-fo ul li a:hover{
    background:rgba(255,245,61,0.15);
}