@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/ac-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:#fff;
    /* margin-top:-42.9rem; */
    -webkit-overflow-scrolling:auto;
    overflow: visible;
}

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

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

/* スラ１ */
.acs1{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl1.jpg) center / cover no-repeat;
    position:relative;
}
.slbox1{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    left:18.7%;
}
/* メイン表示枠（サイズはそのまま） */
.ac-sl1-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.ac-sl1-img > img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
/* ラジオ（非表示） */
input[name="slide"]{display:none;}
/* 手動切替：サムネ（=label）クリックで該当のみ表示 */
#s1:checked ~ .ac-sl1-img > img:nth-child(1),
#s2:checked ~ .ac-sl1-img > img:nth-child(2),
#s3:checked ~ .ac-sl1-img > img:nth-child(3),
#s4:checked ~ .ac-sl1-img > img:nth-child(4),
#s5:checked ~ .ac-sl1-img > img:nth-child(5){
    opacity:1;}
/* サムネイル（サイズはそのまま） */
.thm{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.thm label{
    width:19.2%;
    aspect-ratio:7/4;
    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"]{
    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;
}
/* スラ１ ここまで */

/* スラ２ */
.acs2{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl2.jpg) center / cover no-repeat;
    position:relative;
}
.acs2 .slbox2{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    right:18.7%;
}
.acs2 .ac-sl2-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.acs2 .ac-sl2-img>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
.acs2 input[name="slide-acs2"]{display:none;}
.acs2 #s1-acs2:checked~.ac-sl2-img>img:nth-child(1),
.acs2 #s2-acs2:checked~.ac-sl2-img>img:nth-child(2),
.acs2 #s3-acs2:checked~.ac-sl2-img>img:nth-child(3),
.acs2 #s4-acs2:checked~.ac-sl2-img>img:nth-child(4),
.acs2 #s5-acs2:checked~.ac-sl2-img>img:nth-child(5){opacity:1;}
.acs2 .thm2{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.acs2 .thm2 label{
    width:19.2%;
    aspect-ratio:7/4;
    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;
}
.acs2 .thm2 label:hover{opacity:1;transform:scale(1.05);}
.acs2 #s1-acs2:checked~.thm2 label[for="s1-acs2"],
.acs2 #s2-acs2:checked~.thm2 label[for="s2-acs2"],
.acs2 #s3-acs2:checked~.thm2 label[for="s3-acs2"],
.acs2 #s4-acs2:checked~.thm2 label[for="s4-acs2"],
.acs2 #s5-acs2:checked~.thm2 label[for="s5-acs2"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);}
.acs2 .thm2 img{width:100%;height:100%;object-fit:cover;display:block;}
/* スラ２ ここまで */

/* スラ３ */
.acs3{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl3.jpg) center / cover no-repeat;
    position:relative;
}
.acs3 .slbox3{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    left:18.7%;
}
.acs3 .ac-sl3-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.acs3 .ac-sl3-img>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
.acs3 input[name="slide-acs3"]{display:none;}
.acs3 #s1-acs3:checked~.ac-sl3-img>img:nth-child(1),
.acs3 #s2-acs3:checked~.ac-sl3-img>img:nth-child(2),
.acs3 #s3-acs3:checked~.ac-sl3-img>img:nth-child(3),
.acs3 #s4-acs3:checked~.ac-sl3-img>img:nth-child(4),
.acs3 #s5-acs3:checked~.ac-sl3-img>img:nth-child(5){opacity:1;}
.acs3 .thm3{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.acs3 .thm3 label{
    width:19.2%;
    aspect-ratio:7/4;
    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;
}
.acs3 .thm3 label:hover{opacity:1;transform:scale(1.05);}
.acs3 #s1-acs3:checked~.thm3 label[for="s1-acs3"],
.acs3 #s2-acs3:checked~.thm3 label[for="s2-acs3"],
.acs3 #s3-acs3:checked~.thm3 label[for="s3-acs3"],
.acs3 #s4-acs3:checked~.thm3 label[for="s4-acs3"],
.acs3 #s5-acs3:checked~.thm3 label[for="s5-acs3"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);}
.acs3 .thm3 img{width:100%;height:100%;object-fit:cover;display:block;}
/* スラ３ ここまで */

/* スラ４ */
.acs4{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl4.jpg) center / cover no-repeat;
    position:relative;
}
.acs4 .slbox4{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    right:18.7%;
}
.acs4 .ac-sl4-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.acs4 .ac-sl4-img>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
.acs4 input[name="slide-acs4"]{display:none;}
.acs4 #s1-acs4:checked~.ac-sl4-img>img:nth-child(1),
.acs4 #s2-acs4:checked~.ac-sl4-img>img:nth-child(2),
.acs4 #s3-acs4:checked~.ac-sl4-img>img:nth-child(3),
.acs4 #s4-acs4:checked~.ac-sl4-img>img:nth-child(4){opacity:1;}
.acs4 .thm4{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.acs4 .thm4 label{
    width:19.2%;
    aspect-ratio:7/4;
    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;
}
.acs4 .thm4 label:hover{opacity:1;transform:scale(1.05);}
.acs4 #s1-acs4:checked~.thm4 label[for="s1-acs4"],
.acs4 #s2-acs4:checked~.thm4 label[for="s2-acs4"],
.acs4 #s3-acs4:checked~.thm4 label[for="s3-acs4"],
.acs4 #s4-acs4:checked~.thm4 label[for="s4-acs4"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.acs4 .thm4 img{width:100%;height:100%;object-fit:cover;display:block;}
/* スラ４ ここまで */

/* スラ５ */
.acs5{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl5.jpg) center / cover no-repeat;
    position:relative;
}
.acs5 .slbox5{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    left:18.7%;
}
.acs5 .ac-sl5-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.acs5 .ac-sl5-img>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
.acs5 input[name="slide-acs5"]{display:none;}
.acs5 #s1-acs5:checked~.ac-sl5-img>img:nth-child(1),
.acs5 #s2-acs5:checked~.ac-sl5-img>img:nth-child(2),
.acs5 #s3-acs5:checked~.ac-sl5-img>img:nth-child(3),
.acs5 #s4-acs5:checked~.ac-sl5-img>img:nth-child(4),
.acs5 #s5-acs5:checked~.ac-sl5-img>img:nth-child(5){opacity:1;}
.acs5 .thm5{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.acs5 .thm5 label{
    width:19.2%;
    aspect-ratio:7/4;
    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;
}
.acs5 .thm5 label:hover{opacity:1;transform:scale(1.05);}
.acs5 #s1-acs5:checked~.thm5 label[for="s1-acs5"],
.acs5 #s2-acs5:checked~.thm5 label[for="s2-acs5"],
.acs5 #s3-acs5:checked~.thm5 label[for="s3-acs5"],
.acs5 #s4-acs5:checked~.thm5 label[for="s4-acs5"],
.acs5 #s5-acs5:checked~.thm5 label[for="s5-acs5"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);}
.acs5 .thm5 img{width:100%;height:100%;object-fit:cover;display:block;}
/* スラ５ ここまで */

/* スラ６ */
.acs6{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl6.jpg) center / cover no-repeat;
    position:relative;
}
.acs6 .slbox6{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    right:18.7%;
}
.acs6 .ac-sl6-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.acs6 .ac-sl6-img>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
.acs6 input[name="slide-acs6"]{display:none;}
.acs6 #s1-acs6:checked~.ac-sl6-img>img:nth-child(1),
.acs6 #s2-acs6:checked~.ac-sl6-img>img:nth-child(2),
.acs6 #s3-acs6:checked~.ac-sl6-img>img:nth-child(3),
.acs6 #s4-acs6:checked~.ac-sl6-img>img:nth-child(4),
.acs6 #s5-acs6:checked~.ac-sl6-img>img:nth-child(5){opacity:1;}
.acs6 .thm6{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.acs6 .thm6 label{
    width:19.2%;
    aspect-ratio:7/4;
    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;
}
.acs6 .thm6 label:hover{opacity:1;transform:scale(1.05);}
.acs6 #s1-acs6:checked~.thm6 label[for="s1-acs6"],
.acs6 #s2-acs6:checked~.thm6 label[for="s2-acs6"],
.acs6 #s3-acs6:checked~.thm6 label[for="s3-acs6"],
.acs6 #s4-acs6:checked~.thm6 label[for="s4-acs6"],
.acs6 #s5-acs6:checked~.thm6 label[for="s5-acs6"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.acs6 .thm6 img{width:100%;height:100%;object-fit:cover;display:block;}
/* スラ６ ここまで */

/* スラ７ */
.acs7{
    width:100%;
    aspect-ratio:40/11;
    background:url(https://p-c.pw/aso-f/img/ac-sl7.jpg) center / cover no-repeat;
    position:relative;
}
.acs7 .slbox7{
    width:30%;
    aspect-ratio:150/103;
    position:absolute;
    left:18.7%;
}
.acs7 .ac-sl7-img{
    width:100%;
    aspect-ratio:30/17;
    overflow:hidden;
    position:relative;
}
.acs7 .ac-sl7-img>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
}
.acs7 input[name="slide-acs7"]{display:none;}
.acs7 #s1-acs7:checked~.ac-sl7-img>img:nth-child(1),
.acs7 #s2-acs7:checked~.ac-sl7-img>img:nth-child(2),
.acs7 #s3-acs7:checked~.ac-sl7-img>img:nth-child(3),
.acs7 #s4-acs7:checked~.ac-sl7-img>img:nth-child(4),
.acs7 #s5-acs7:checked~.ac-sl7-img>img:nth-child(5){opacity:1;}
.acs7 .thm7{
    width:100%;
    aspect-ratio:75/8;
    display:flex;
    flex-wrap:wrap;
    gap:1%;
    margin-top:1%;
}
.acs7 .thm7 label{
    width:19.2%;
    aspect-ratio:7/4;
    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;
}
.acs7 .thm7 label:hover{opacity:1;transform:scale(1.05);}
.acs7 #s1-acs7:checked~.thm7 label[for="s1-acs7"],
.acs7 #s2-acs7:checked~.thm7 label[for="s2-acs7"],
.acs7 #s3-acs7:checked~.thm7 label[for="s3-acs7"],
.acs7 #s4-acs7:checked~.thm7 label[for="s4-acs7"],
.acs7 #s5-acs7:checked~.thm7 label[for="s5-acs7"]{
    opacity:1;
    border-color:#00875C;
    box-shadow:0 0 0 3px rgba(0,191,255,.2);
}
.acs7 .thm7 img{width:100%;height:100%;object-fit:cover;display:block;}
/* スラ７ ここまで */

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