@charset "utf-8";
*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.af-wrap{
    width:100%;
    margin:0 auto;
    background-color:#fff;
    position:relative;
}
.af-he{
    width:100%;
    aspect-ratio:90.3/4;
    background: url(https://p-c.pw/aso-f/img/fo-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%;
    height: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.14%;
    aspect-ratio:7/5;
}
.me2 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me3{
    width:17.16%;
    aspect-ratio:8/5;
}
.me3 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me4{
    width:13.63%;
    aspect-ratio:27/20;
}
.me4 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me5{
    width:14.64%;
    aspect-ratio:29/20;
}
.me5 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me6{
    width:15.15%;
    aspect-ratio:3/2;
}
.me6 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me7{
    width:15.66%;
    aspect-ratio:33/20;
}
.me7 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.af-he a:hover .bt-plan{
    cursor:pointer;
    filter:brightness(1.1);
    z-index:1;
    position: sticky;
}

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

.white{
    width: 100%;
    background:#fff;
}

.fo-01{
    width:100%;
    aspect-ratio:100/23;
    background:url(https://p-c.pw/aso-f/img/fo-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);
}

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

/* スラ1 ここから */
.sl-a{
    width:62.8%;
    aspect-ratio:125/51;
    margin:0 auto;
    background:#fff; 
}
.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;
    transition:opacity .35s ease;
}
input[name="slide"]{display:none;}

/* 9枚すべて表示切替 */
#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),
#s7:checked ~ .sl > img:nth-child(7),
#s8:checked ~ .sl > img:nth-child(8),
#s9:checked ~ .sl > img:nth-child(9){
    opacity:1;}

/* サムネイル */
.thm{
    width:100%;
    aspect-ratio:625/43;
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    gap:1%;
    row-gap:10%;
    margin-top:1%;
}
.thm label{
    width:12.2%;
    aspect-ratio:76/43;
    overflow:hidden;
    cursor:pointer;
    opacity:.6;
    transition:.3s;
    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"],
#s7:checked ~ .thm label[for="s7"],
#s8:checked ~ .thm label[for="s8"],
#s9:checked ~ .thm label[for="s9"]{
    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;
}

/* 左右ボタン（nav） */
.sl .nav{
    position:absolute;
    inset:0;
    z-index:5;              /* 画像より前に出す */
    pointer-events:none;    /* 自身は受け取らない → 子の .bt だけクリック可 */
}
.sl .nav .bt{
    width:5%;
    aspect-ratio:1;
    border-radius:50%;
    background:rgba(174, 174, 174, 0.5);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:none;           /* 表示は下の #s? で制御 */
    place-items:center;
    cursor:pointer;
    user-select:none;
    pointer-events:auto;
    transition:transform .2s ease;
}
.sl .nav .bt:hover{transform:translateY(-50%) scale(1.08);}
.sl .nav .pr{left:3%;}
.sl .nav .ne{right:3%;}
.sl .nav .bt img{
    width:50%;
    height:50%;
    object-fit:contain;
    display:block;
    margin:0 auto;
}

/* 選択中スライドに応じてペア表示（初期の s1 でも出る） */
#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,
#s7:checked ~ .sl .pr-s7, #s7:checked ~ .sl .ne-s7,
#s8:checked ~ .sl .pr-s8, #s8:checked ~ .sl .ne-s8,
#s9:checked ~ .sl .pr-s9, #s9:checked ~ .sl .ne-s9{
    display:grid;}
/* スラ1 ここまで  */

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

/* スラ2 */
.sl-b{
    width:62.8%;
    aspect-ratio:125/51;
    margin:0 auto;
    background:#fff;
}
.slb{
    width:100%;
    aspect-ratio:625/353;
    overflow:hidden;
    position:relative; /* ← nav の基準 */
}
.slb>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
input[name="slide-b"]{display:none;}

/* 9枚すべて表示切替 */
#t1:checked ~ .slb > img:nth-child(1),
#t2:checked ~ .slb > img:nth-child(2),
#t3:checked ~ .slb > img:nth-child(3),
#t4:checked ~ .slb > img:nth-child(4),
#t5:checked ~ .slb > img:nth-child(5),
#t6:checked ~ .slb > img:nth-child(6),
#t7:checked ~ .slb > img:nth-child(7),
#t8:checked ~ .slb > img:nth-child(8),
#t9:checked ~ .slb > img:nth-child(9){
    opacity:1;
}

/* サムネイル */
.thmb{
    width:100%;
    aspect-ratio:625/43;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1%;
    row-gap:10%;
    margin-top:1%;
}
.thmb label{
    width:12.2%;
    aspect-ratio:76/43;
    overflow:hidden;
    cursor:pointer;
    opacity:.6;
    transition:.3s;
    border:2px solid transparent;
}
.thmb label:hover{
    opacity:1;
    transform:scale(1.05);
}
#t1:checked ~ .thmb label[for="t1"],
#t2:checked ~ .thmb label[for="t2"],
#t3:checked ~ .thmb label[for="t3"],
#t4:checked ~ .thmb label[for="t4"],
#t5:checked ~ .thmb label[for="t5"],
#t6:checked ~ .thmb label[for="t6"],
#t7:checked ~ .thmb label[for="t7"],
#t8:checked ~ .thmb label[for="t8"],
#t9:checked ~ .thmb label[for="t9"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.thmb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* 左右ボタン（nav） */
.slb .nav{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}
.slb .nav .bt{
    width:5%;
    aspect-ratio:1;
    border-radius:50%;
    background:rgba(174, 174, 174, 0.5);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:none;
    place-items:center;
    cursor:pointer;
    user-select:none;
    pointer-events:auto;
    transition:transform .2s ease;
}
.slb .nav .bt:hover{ transform:translateY(-50%) scale(1.08); }
.slb .nav .pr{ left:3%; }
.slb .nav .ne{ right:3%; }
.slb .nav .bt img{
    width:50%;
    height:50%;
    object-fit:contain;
    display:block;
    margin:0 auto;
}

/* 選択中スライドに応じてペア表示（初期 t1 でも出る） */
#t1:checked ~ .slb .pr-t1, #t1:checked ~ .slb .ne-t1,
#t2:checked ~ .slb .pr-t2, #t2:checked ~ .slb .ne-t2,
#t3:checked ~ .slb .pr-t3, #t3:checked ~ .slb .ne-t3,
#t4:checked ~ .slb .pr-t4, #t4:checked ~ .slb .ne-t4,
#t5:checked ~ .slb .pr-t5, #t5:checked ~ .slb .ne-t5,
#t6:checked ~ .slb .pr-t6, #t6:checked ~ .slb .ne-t6,
#t7:checked ~ .slb .pr-t7, #t7:checked ~ .slb .ne-t7,
#t8:checked ~ .slb .pr-t8, #t8:checked ~ .slb .ne-t8,
#t9:checked ~ .slb .pr-t9, #t9:checked ~ .slb .ne-t9{
    display:grid;
}/* スラ2 ここまで */

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

/* スラ3 */
.sl5{
    width:100%;
    aspect-ratio:200/49;
    margin:0 auto;
    position:relative;
    top:27.5%;
    clip-path: inset(0 calc(50% - 34.4%) 0 calc(50% - 34.4%));
    overflow:hidden;
}
.sl5 input{display:none;}
.ra5{
    width:100%;
    height:100%;
    background:#F0EFDA;
    display:flex;
    justify-content:flex-start;
    gap:2.6%;
    transition:transform .6s ease;
}
.ra5 img{
    width:21.2%;
    aspect-ratio:212/245;
    object-fit:cover;
    flex:0 0 auto;
    display:block;
}

/* 各スライド位置（5枚分。23.75%ずつ） */
#sl5-1:checked ~ .ra5{transform:translateX(calc(50% - 34.4%));}
#sl5-2:checked ~ .ra5{transform:translateX(calc(50% - 58.15%));}
#sl5-3:checked ~ .ra5{transform:translateX(calc(50% - 81.9%));}
#sl5-4:checked ~ .ra5{transform:translateX(calc(50% - 105.65%));}
#sl5-5:checked ~ .ra5{transform:translateX(calc(50% - 129.4%));}

/* ナビボタン */
.na5{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
    pointer-events:none;
}
.na5 label{
    width:2.65%;
    aspect-ratio:1;
    background:#01865B;
    border-radius:50%;
    display:grid;
    place-items:center;
    pointer-events:auto;
    cursor:pointer;
    transition:filter .2s ease;
    z-index: 1;
}
.na5 label:hover{filter:brightness(1.1);}
.na5 img{
    width:50%;
    height:50%;
    object-fit:contain;
}
.na5 label{display:none;}

/* 選択中のみ表示 */
#sl5-1:checked ~ .na5 .pr-s1,
#sl5-1:checked ~ .na5 .ne-s1,
#sl5-2:checked ~ .na5 .pr-s2,
#sl5-2:checked ~ .na5 .ne-s2,
#sl5-3:checked ~ .na5 .pr-s3,
#sl5-3:checked ~ .na5 .ne-s3,
#sl5-4:checked ~ .na5 .pr-s4,
#sl5-4:checked ~ .na5 .ne-s4,
#sl5-5:checked ~ .na5 .pr-s5,
#sl5-5:checked ~ .na5 .ne-s5{display:grid;}

.sl5 .na5{z-index:2;}
.sl5 .na5 label{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.sl5 .na5 label[class*="pr"]{left:36.75%;}
.sl5 .na5 label[class*="ne"]{right:36.7%;}
.sl5 .na5 label img{
    width:50%;
    height:50%;
    object-fit:contain;
}
/* スラ3ここまで */

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

.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);
}