@charset "UTF-8";
/* =====================================
	index
===================================== */

.visual{
    width: 100%;
    height: 100vh;
    background: url("../img/index/fv01.png") center;
    background-size: cover;
    position: relative;
    color: #fff;
}

.visual h1{
    position: absolute;
    bottom: 13.15%;
    left: 10%;
}

.visual h1 small{
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1;
    display: block;
    margin-bottom: 30px;
    letter-spacing: 0.07em;
}

.visual p{
    font-size: 2.2rem;
    line-height: 1;
    writing-mode: vertical-rl;
    position: absolute;
    top: 8.9815%;
    right: 16.875%;
    letter-spacing: 1em;
    padding-bottom: 132px;
}

.visual p::before{
    content: "";
    width: 1px;
    height: 105px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.visual a{
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    position: absolute;
    bottom: 109px;
    right: 8%;
    padding-right: 106px;
    transform: rotate(90deg);
    transform-origin: top left;
}

.visual a::before{
    content: "";
    width: 100px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.visual a::after{
    content: "";
    width: 23px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 3px;
    right: 0;
    transform: rotate(33deg);
}

.sideNav{
    position: absolute;
    top: 100vh;
    left: 0;
    padding-top: 46px;
    mix-blend-mode: difference;
}

.sideNav.is-fixed{
    position: fixed;
    top: var(--nav-offset, 0px);
    z-index: 1000;
}

.sideNav h2{
    margin: 0 40px 140px;
}

.sideNav .gNav{
    padding-left:40px; 
}

.sideNav .gNav h3{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    margin-bottom: 20px;
}

.sideNav .gNav ul{
    position: relative;
}

.sideNav .gNav ul::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    background: #fff;
    width: 1px;
    height: 110px;
}

.sideNav .gNav ul li{
    margin-bottom: 21px;
}

.sideNav .gNav ul li span{
    display: block;
    transition: .4s all ease;
}

.sideNav.is-fixed .gNav ul li.active span,
.sideNav.is-fixed .gNav ul li a:hover span{
    opacity: 1;
    transform: translateX(0);
}

.sideNav .gNav ul li:last-child{
    margin-bottom: 0;
}

.sideNav .gNav ul li a{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: #7A7A7A;
    padding-left: 34px;
    display: block;
    position: relative;
}

.sideNav .gNav ul li a:hover{
    opacity: 1;
}

.sideNav .gNav ul li a::before{
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: .4s all ease;
}

.sideNav.is-fixed .gNav ul li a::before{
    background: #000;
}

.sideNav.is-fixed .gNav ul li.active a::before,
.sideNav.is-fixed .gNav ul li a:hover::before{
    background: #fff;
}

.sideNav .sNav{
    margin-top: 130px;
}

.sideNav .sNav ul li{
    margin-bottom: 22px;
}

.sideNav .sNav ul li:last-child{
    margin-bottom: 0;
}

main{
    width: 100%;
}

main .lead{
    width: 100%;
    padding: 155.2px 32px 0; /* 194px → 155.2px, 40px → 32px */
    background: #000;
}

main .lead .inner{
    width: 100%;
    max-width: 716.8px; /* 896px → 716.8px */
    margin: 0 auto;
}

main .lead h2{
    font-size: 2.24rem; /* 2.8rem → 2.24rem */
    font-weight: bold;
    line-height: 1;      /* そのまま */
    color: #7A7A7A;
}

main .lead h2 strong{
    color: #fff;
}

main .lead p{
    font-size: 1.6rem;   /* 2.0rem → 1.6rem */
    line-height: 2.2;
    color: #7A7A7A;
    margin-top: 28.8px;  /* 36px → 28.8px */
}

main .lead p strong{
    color: #fff;
}

main .lead .movieWrap{
    position: relative;
    padding-bottom: 54.9107%; /* %はそのまま */
    height: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 28.8px;  /* 36px → 28.8px */
}

main .lead .movieWrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* 100%はそのまま */
    height: 100%; /* 100%はそのまま */
}

#features{
    width: 100%;
    padding: 96px 32px 164.8px; /* 120px 40px 206px → 80% */
    background: #000;
}

#features .inner{
    width: 100%;
    max-width: 713.6px; /* 892px → 80% */
    margin: 0 auto;
}

#features h2{
    margin-bottom: 76px; /* 95px → 80% */
}

#features h2 small{
    font-size: 2.24rem; /* 2.8rem → 80% */
    font-weight: bold;
    line-height: 1; /* そのまま */
    color: #fff;
    display: block;
    margin-top: 23px;
}

#features ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 49.6px;   /* 62px → 80% */
    column-gap: 24px;  /* 30px → 80% */
}

#features ul li{
    width: calc((100% - 24px) / 2); /* 30px → 80% */
    max-width: 296px; /* 370px → 80% */
}

#features ul li img{
    width: 100%;
    margin-bottom: 36px; /* 45px → 80% */
}

#features ul li .movieWrap{
    position: relative;
    padding-bottom: 67.56757%; /* %はそのまま */
    height: 0;
    width: 100%;
    overflow: hidden;
    margin-bottom: 36px; /* 45px → 80% */
}

#features ul li .movieWrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* 100%はそのまま */
    height: 100%; /* 100%はそのまま */
}

#features ul li video{
    width: 100%;
}

#features ul li h3{
    font-size: 1.6rem; /* 2.0rem → 80% */
    font-weight: bold;
    line-height: 1.25; /* そのまま */
    color: #fff;
    display: flex;
}

#features ul li h3 span{
    font-weight: 900;
    color: #7A7A7A;
    margin-right: 8.1%; /* %なのでそのまま */
}

#features ul li p{
    font-size: 1.28rem; /* 1.6rem → 80% */
    font-weight: 500;
    line-height: 1.75; /* そのまま */
    color: #fff;
    margin-top: 30.4px; /* 38px → 80% */
}

#lineup{
    width: 100%;
    background: #303030;
    padding: 121.6px 32px 150.4px; /* 152px 40px 188px → 80% */
}

#lineup h2{
    text-align: center;
    margin-bottom: 93.6px; /* 117px → 80% */
}

#lineup h2 img{
    margin: 0 auto;
}

#lineup h2 small{
    font-size: 2.24rem; /* 2.8rem → 80% */
    font-weight: bold;
    line-height: 1;
    color: #fff;
    display: block;
    margin-top: 14px;
}

#lineup > img{
    margin: 0 auto 55.2px; /* 69px → 80% */
    width: 100%;
    max-width: 960px;
}

#lineup ul{
    width: 100%;
    max-width: 1036.8px; /* 1296px → 80% */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#lineup ul li{
    width: 30.71%;
}

#lineup ul li h3{
    font-size: 1.68rem; /* 2.1rem → 80% */
    font-weight: bold;
    line-height: 1;
    text-align: center;
    color: #fff;
    margin-bottom: 13.6px; /* 17px → 80% */
}

#lineup ul li p{
    font-size: 1.28rem; /* 1.6rem → 80% */
    font-weight: 500;
    line-height: 2.1875;
    color: #fff;
    margin-bottom: 16px; /* 20px → 80% */
    min-height: calc(1em * 2.1875 * 2); /* 行数キープのためそのまま */
}

#lineup ul li dl{
    width: 100%;
    padding: 29.6px 0 25.6px; /* 37px 0 32px → 80% */
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    display: flex;
}

#lineup ul li dl div{
    padding: 0 7.0351% 12px; /* 15px → 80% */
    border-right: 1px solid #fff;
}

#lineup ul li dl div:first-child{
    padding: 0 7.0351% 12px 0; /* 15px → 80% */
}

#lineup ul li dl div:last-child{
    border-right: none;
    padding: 0 0 12px 7.0351%; /* 15px → 80% */
}

#lineup ul li dl div dt{
    font-size: 1.04rem; /* 1.3rem → 80% (>=1.0rem) */
    font-weight: 500;
    line-height: 1;
    color: #fff;
    margin-bottom: 9.6px; /* 12px → 80% */
}

#lineup ul li dl div dd{
    font-size: 1.84rem; /* 2.3rem → 80% */
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    display: flex;
    align-items: center;
    min-height: calc(0.78261em * 1.5 * 2); /* 調整用係数はそのまま */
}

#lineup ul li dl div.multiple dd{
    font-size: 1.44rem; /* 1.8rem → 80% */
    min-height: calc(1em * 1.5 * 2);
}

#lineup ul li a{
    font-size: 1.04rem; /* 1.3rem → 80% (>=1.0rem) */
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    margin: 28.8px auto 0; /* 36px → 80% */
    padding-bottom: 20.8px; /* 26px → 80% */
    display: table;
    position: relative;
}

#lineup ul li a::before,
#lineup ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 1.6px); /* 2px → 80% */
    width: 3.2px;  /* 4px → 80% */
    height: 10.4px; /* 13px → 80% */
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: 50% calc(100% - 1.6px); /* 2px → 80% */
}

#lineup ul li a::before {
    transform: rotate(45deg);
}

#lineup ul li a::after {
    transform: rotate(-45deg);
}

.list{
    padding: 132.8px 32px 62.4px; /* 166px 40px 78px → 80% */
    background: #f2f2f2;
}

#other{
    padding-bottom: 104px; /* 130px → 80% */
}

.list h2{
    display: table;
    margin: 0 auto 54.4px; /* 68px → 80% */
}

.list h2 img{
    margin: 0 auto;
}

.list h2 small{
    display: block;
    font-size: 2.24rem; /* 2.8rem → 80% */
    font-weight: 600;
    line-height: 1;
    color: #000000;
    margin-top: 17px;
}

.list > ul{
    width: 100%;
    max-width: 1080px; /* 1350px → 80% */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 3.2222%;
}

#tenshiLight > ul,
#tenshi > ul{
    column-gap: 17.5926%;
}

#other > ul{
    max-width: 1246.4px; /* 1558px → 80% */
    padding: 0 83.2px; /* 0 104px → 80% */
}

.list > ul > li{
    width: 31.1852%;
}

.list > ul li img{
    width: 100%;
    margin-bottom: 12.8px; /* 16px → 80% */
}

.list > ul li h3{
    font-size: 1.68rem; /* 2.1rem → 80% */
    font-weight: bold;
    line-height: 1.1905;
    max-width: 277.6px; /* 347px → 80% */
    min-height: calc(2 * 1.68rem * 1.1905 + 1.12rem + 4.8px);
    /* 2 * 2.1rem * 1.1905 + 1.4rem + 6px → 80% */
    margin: 0 auto 19.2px; /* 24px → 80% */
}

.list > ul li h3 small{
    font-size: 1.12rem; /* 1.4rem → 80% (>=1.0rem) */
    line-height: 1;
    margin-top: 4.8px; /* 6px → 80% */
    display: flex;
}

.list > ul li dl{
    max-width: 308.8px; /* 386px → 80% */
    margin: 0 auto;
    border-bottom: 1px solid #7A7A7A;
}

.list > ul li dl div{
    border-top: 1px solid #7A7A7A;
    padding: 5.6px 8px 7.2px; /* 7px 10px 9px → 80% */
    font-size: 1.28rem; /* 1.6rem → 80% */
    font-weight: bold;
    line-height: 1.75;
    display: flex;
}

.list > ul li dl div dt{
    width: 32.787%;
}

.list > ul li dl div dd{
    width: 67.213%;
}

.list > ul li a{
    width: 100%;
    max-width: 228.8px; /* 286px → 80% */
    height: 42.4px; /* 53px → 80% */
    margin: 12px auto 0; /* 15px → 80% */
    font-size: 1.44rem; /* 1.8rem → 80% */
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 12.8px; /* 16px → 80% */
    display: table;
}

#crowdy > ul li a{
    background-image: linear-gradient(90deg, rgba(129, 176, 185, 1), rgba(188, 188, 188, 1));
}

#tenshiLight > ul li a{
    background-image: linear-gradient(90deg, rgba(153, 129, 185, 1), rgba(188, 188, 188, 1));
}

#tenshi > ul li a{
    background-image: linear-gradient(90deg, rgba(136, 185, 129, 1), rgba(188, 188, 188, 1));
}

#other > ul li a{
    background-image: linear-gradient(90deg, rgba(185, 163, 129, 1), rgba(188, 188, 188, 1));
}

#other > ul .slick-prev, #other > ul .slick-next{
    width: 26.4px;  /* 33px → 80% */
    height: 26.4px; /* 33px → 80% */
}

#other > ul .slick-prev{
    background: url("../img/common/prev01.png") no-repeat center;
    background-size: contain;
    left: 0;
}

#other > ul .slick-next{
    background: url("../img/common/next01.png") no-repeat center;
    background-size: contain;
    right: 0;
}

#other .slick-dots{
  position: static;
  bottom: auto;
  right: auto;
  display: flex!important;
  margin: 38.4px 0 0; /* 48px → 80% */
  transform: none;
}

#other .slick-dots li{
    display: inline-block;
    width: 7.2px;  /* 9px → 80% */
    height: 7.2px; /* 9px → 80% */
    margin: 0 9.6px; /* 0 12px → 80% */
    border-radius: 50%;
    background: #fff;
    border: 1px solid #000;
}

#other .slick-dots li.slick-active{
    background: #000;
}

#other .slick-dots li button::before{
    display: none;
}

.list .btn01{
    width: 100%;
    max-width: 636px; /* 795px → 80% */
    height: 88.8px;   /* 111px → 80% */
    margin: 95.2px auto 0; /* 119px → 80% */
    font-size: 1.68rem; /* 2.1rem → 80% */
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 35.2px; /* 44px → 80% */
    display: table;
    background: #000;
}

.option{
    width: 100%;
    padding: 172px 32px 142.4px; /* 215px 40px 178px → 80% */
    background: #e6e6e6;
}

.option h2{
    text-align: center;
    margin-bottom: 94.4px; /* 118px → 80% */
}

.option h2 img{
    margin: 0 auto;
}

.option h2 small{
    display: block;
    font-size: 2.24rem; /* 2.8rem → 80% */
    font-weight: 600;
    line-height: 1;
    color: #000000;
    margin-top: 15px;
}

.option ul{
    width: 100%;
    max-width: 812.8px; /* 1016px → 80% */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 40px; /* 50px → 80% */
    row-gap: 67.2px;  /* 84px → 80% */
    margin: 0 auto;
}

.option ul li{
    width: 100%;
    max-width: 281.6px; /* 352px → 80% */
}

.option ul li h3{
    font-size: 1.68rem; /* 2.1rem → 80% */
    font-weight: bold;
    text-align: center;
    line-height: 1;
}

.option ul li img{
    width: 100%;
    margin-top: 14.4px; /* 18px → 80% */
}

.option ul li p{
    font-size: 1.28rem; /* 1.6rem → 80% */
    font-weight: 500;
    line-height: 1.75;
    margin-top: 8px; /* 10px → 80% */
}

.option ul li a{
    width: 100%;
    max-width: 228.8px; /* 286px → 80% */
    height: 42.4px;      /* 53px → 80% */
    margin: 20px auto 0; /* 25px → 80% */
    font-size: 1.44rem;  /* 1.8rem → 80% */
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 12.8px; /* 16px → 80% */
    display: table;
    background-image: linear-gradient(90deg, rgba(185, 133, 129, 1), rgba(188, 188, 188, 1));
}

.option .btn01{
    width: 100%;
    max-width: 636px;   /* 795px → 80% */
    height: 88.8px;     /* 111px → 80% */
    margin: 95.2px auto 0; /* 119px → 80% */
    font-size: 1.68rem; /* 2.1rem → 80% */
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 35.2px; /* 44px → 80% */
    display: table;
    background: #000;
}

#customize{
    width: 100%;
    padding: 168.8px 32px 160px; /* 211,40,200 → 80% */
    background: #000;
}

#customize h2{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    margin: 0 auto 139.2px; /* 174 → 80% */
}

#customize h2 small{
    display: block;
    font-size: 2.24rem; /* 2.8 → 80% */
    font-weight: 600;
    line-height: 1;
    color: #fff;
    margin-top: 22px;
}

#customize > ul{
    width: 100%;
    max-width: 1059.2px; /* 1324 → 80% */
    margin: 0 auto;
    padding: 0 43.2px; /* 54 → 80% */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 2.878295%;
}

#customize > ul li{
    width: 31.41447%;
    font-size: 1.44rem; /* 1.8 → 80% */
    font-weight: 500;
    line-height: 1;
    text-align: right;
    color: #fff;
}

#customize > ul li img{
    width: 100%;
    margin-bottom: 11.2px; /* 14 → 80% */
}

#customize > ul .slick-prev,
#customize > ul .slick-next{
    width: 15.2px;  /* 19 → 80% */
    height: 15.2px; /* 19 → 80% */
}

#customize > ul .slick-prev{
    background: url("../img/common/prev02.png") no-repeat center;
    background-size: contain;
    left: 0;
}

#customize > ul .slick-next{
    background: url("../img/common/next02.png") no-repeat center;
    background-size: contain;
    right: 0;
}

/* ----- voice ----- */

.voice{
    width: 100%;
    padding: 0 32px 198.4px; /* 0,40,248 → 80% */
    background: #000;
}

.voice h2{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    margin: 0 auto 96px; /* 120 → 80% */
}

.voice h2 small{
    display: block;
    font-size: 2.24rem; /* 2.8 → 80% */
    font-weight: 600;
    line-height: 1;
    color: #fff;
    margin-top: 22px;
}

.voice ul{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    display: flex;
    justify-content: space-between;
    column-gap: 40px; /* 50 → 80% */
    margin: 0 auto;
}

.voice ul li{
    width: 100%;
    max-width: 425.6px; /* 532 → 80% */
    border: 1px solid #fff;
    padding: 76.8px 60px 52.8px; /* 96,75,66 → 80% */
}

.voice ul li img{
    max-width: 100%;
}

.voice ul li h3{
    width: 100%;
    margin-top: 52px; /* 65 → 80% */
    font-size: 1.68rem; /* 2.1 → 80% */
    font-weight: bold;
    line-height: 1;
    color: #fff;
}

.voice ul li dl{
    width: 100%;
    display: flex;
    margin-top: 22.4px; /* 28 → 80% */
    font-size: 1.44rem; /* 1.8 → 80% */
    font-weight: bold;
    line-height: 1;
    color: #fff;
}

.voice ul li dl dt{
    color: #7A7A7A;
}

.voice ul li p{
    width: 100%;
    margin-top: 20px; /* 25 → 80% */
    font-size: 1.28rem; /* 1.6 → 80% */
    font-weight: 500;
    line-height: 1.75;
    color: #fff;
}

/* ----- media ----- */

.media{
    width: 100%;
    padding: 156.8px 32px 170.4px; /* 196,40,213 → 80% */
    background: #303030;
}

.media h2{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    margin: 0 auto 96px; /* 120 → 80% */
    text-align: center;
}

.media h2 img{
    margin: 0 auto;
}

.media h2 small{
    display: block;
    font-size: 2.24rem; /* 2.8 → 80% */
    font-weight: 600;
    line-height: 1;
    color: #fff;
    margin-top: 22px;
}

.media .youtube{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    display: flex;
    justify-content: space-between;
    column-gap: 40px; /* 50 → 80% */
    margin: 112px auto 0; /* 140 → 80% */
}

.media .youtube li{
    width: 100%;
    max-width: 425.6px; /* 532 → 80% */
    font-size: 1.68rem; /* 2.1 → 80% */
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-align: center;
}

.media .youtube li .movieWrap {
    position: relative;
    padding-bottom: 54.9107%;
    height: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 20px; /* 25 → 80% */
}

.media .youtube li .movieWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.media .post{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    display: flex;
    justify-content: space-between;
    gap: calc(156px / 4); /* 195px → 80% */
    margin: 92.8px auto 0; /* 116 → 80% */
}

.media .post li{
    font-size: 1.68rem; /* 2.1 → 80% */
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-align: center;
}

.media .post li img{
    margin-top: 28px; /* 35 → 80% */
    max-width: 100%;
}

/* ----- showroom ----- */

#showroom{
    width: 100%;
    padding: 146.4px 32px 0; /* 183,40 → 80% */
    margin-bottom: -54.4px;  /* -68 → 80% */
    background: #fff;
}

#showroom h2{
    text-align: center;
    margin: 0 auto 126.4px; /* 158 → 80% */
}

#showroom h2 img{
    margin: 0 auto;
}

#showroom h2 small{
    display: block;
    font-size: 2.24rem; /* 2.8 → 80% */
    font-weight: 600;
    line-height: 1;
    margin-top: 22px;
    color: #000;
}

#showroom .wrap{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    display: flex;
    margin: 0 auto;
}

#showroom .wrap .map{
    width: 58.8%;
}

#showroom .wrap iframe{
    width: 100%;
    height: 100%;
}

#showroom .wrap img{
    width: 41.2%;
}

#showroom h3{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    font-size: 1.68rem; /* 2.1 → 80% */
    font-weight: bold;
    line-height: 1;
    margin: 54.4px auto 19.2px; /* 68,24 → 80% */
}

#showroom p{
    width: 100%;
    max-width: 972.8px; /* 1216 → 80% */
    font-size: 1.44rem; /* 1.8 → 80% */
    font-weight: bold;
    line-height: 1.944;
    margin: 0 auto;
}

.productPop{
    width: 100%;
    max-width: 1067.2px; /* 1334 * 0.8 */
    margin: 0 auto;
    background: #fff;
    padding: 84px 91.2px 71.2px; /* 105 114 89 */
    display: flex;
    justify-content: space-between;
    position: relative;
}

.productPop .slideArea{
    width: 44.485%;
}

.productPop .slideArea .main{
    width: 87.805%;
}

.productPop .slideArea .main img{
    width: 100%;
}

.productPop .slideArea .thum{
    width: 100%;
    margin-top: 26.4px; /* 33 */
}

.productPop .slideArea .thum li{
    width: 20.732%;
}

.productPop .slideArea .thum img{
    width: 100%;
}

.productPop .slideArea .thum .slick-prev,
.productPop .slideArea .thum .slick-next{
    width: 15.2px;  /* 19 */
    height: 15.2px; /* 19 */
}

.productPop .slideArea .thum .slick-prev{
    background: url("../img/common/prev01.png") no-repeat center;
    background-size: contain;
    left: -24.8px; /* -31 */
}

.productPop .slideArea .thum .slick-next{
    background: url("../img/common/next01.png") no-repeat center;
    background-size: contain;
    right: -24.8px; /* -31 */
}

.productPop .txtArea{
    width: 44.485%;
}

.productPop .txtArea h2{
    font-size: 1.84rem; /* 2.3 */
    font-weight: bold;
    line-height: 1.1905;
    margin: 0 auto 19.2px; /* 24 */
}

.productPop .txtArea h2 small{
    font-size: 1.2rem; /* 1.5 */
    line-height: 1;
    margin-top: 4.8px; /* 6 */
    display: flex;
}

.productPop .txtArea dl{
    border-bottom: 1px solid #7A7A7A;
}

.productPop .txtArea dl div{
    width: 100%;
    border-top: 1px solid #7A7A7A;
    padding: 8.8px 6.4px 10.4px; /* 11 8 13 */
    font-size: 1.28rem; /* 1.6 */
    font-weight: bold;
    line-height: 1.25;
    display: flex;
}

.productPop .txtArea dl dt{
    width: 32.272%;
}

/* ===== optionPop ===== */

.optionPop{
    width: 100%;
    max-width: 1067.2px;
    /* height: 622.4px;  は inner 側に持たせる */
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden; /* 外側はスクロールさせない */
}

/* 中身だけスクロールするエリア */
.optionPop__inner{
    height: 622.4px;           /* もともとの高さ */
    overflow-y: auto;          /* スクロールはこちらに */
    padding: 72.8px 55.2px 74.4px;
}

.optionPop ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 40.8px; /* 51 */
}

.optionPop ul li{
    width: 32.274%;
}

.optionPop ul li img{
    max-width: 100%;
    margin: 0 auto;
}

.optionPop ul li h2{
    font-size: 1.68rem; /* 2.1 */
    font-weight: bold;
    line-height: 1.1905;
    max-width: 284.8px; /* 356 */
    min-height: calc(2 * 1.68rem * 1.1905 + 1.12rem + 4.8px);
    /* 元: calc(2 * 2.1rem * 1.1905 + 1.4rem + 6px) を 0.8倍 */
    margin: 11.2px auto 19.2px; /* 14 24 */
}

.optionPop ul li h2 small{
    font-size: 1.12rem; /* 1.4 */
    line-height: 1;
    margin-top: 4.8px;  /* 6 */
    display: flex;
}

.optionPop ul li dl{
    border-bottom: 1px solid #7A7A7A;
}

.optionPop ul li dl div{
    width: 100%;
    border-top: 1px solid #7A7A7A;
    padding: 8.8px 6.4px 10.4px; /* 11 8 13 */
    font-size: 1.28rem; /* 1.6 */
    font-weight: bold;
    line-height: 1.25;
    display: flex;
}

.optionPop ul li dl dt{
    width: 32.272%;
}

.optionPop a{
    width: 100%;
    max-width: 636px;  /* 795 */
    height: 88.8px;    /* 111 */
    margin: 78.4px auto 0; /* 98 */
    font-size: 1.68rem; /* 2.1 */
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding-top: 35.2px; /* 44 */
    display: table;
    background: #000;
}

/* ===== mfp-close ===== */

.mfp-close{
    width: 34.4px;  /* 43 */
    height: 34.4px; /* 43 */
    background: #7A7A7A;
    position: absolute;
    top: 36px;      /* 45 */
    right: 48.8px;  /* 61 */
    z-index: 100;
    opacity: 1;
    cursor: pointer;
    line-height: 0;
    padding: 0;
}

.mfp-close:active{
    top: 36px; /* 45 */
}

.mfp-close::before{
    content: "";
    width: 2px;
    height: 14.4px; /* 18 */
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.mfp-close::after{
    content: "";
    width: 2px;
    height: 14.4px; /* 18 */
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}




@media screen and (max-width:768px){

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
    font-size: 3.90625vw;
    width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
    padding-top: 13.067vw;
}

header{
    width: 100%;
    height: 13.067vw;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

header ul{
    display: flex;
    position: absolute;
    top: 50%;
    right: 14.133vw;
    transform: translateY(-50%);
}

header ul li{
    width: 22.4vw;
    margin-left: 2.933vw;
}

header ul li img{
    width: 100%;
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger {
    position: absolute;
    top: 3.733vw;
    right: 4.267vw;
    width: 5.33vw;
    height: 5.33vw;
    border: none;
    appearance: none;
    background: transparent;
    z-index: 1000;
}
.menu-trigger span {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 0.533vw;
    background-color: #000;
    transform: translateX(-50%);
    transform-origin: center center;
}
.menu-trigger span:nth-of-type(1) {
    top: 0;
}
.menu-trigger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}

.visual{
    background: url("../img/index/sp/fv01.png") center;
    background-size: cover;
}

.visual h1{
    width: 73.846vw;
    bottom: 54.4vw;
    left: 5.6vw;
}

.visual h1 img{
    width: 100%;
}

.visual h1 small{
    font-size: 4vw;
    margin-bottom: 4.9487vw;
}

.visual p{
    font-size: 4vw;
    top: 12.533vw;
    right: 17.467vw;
    padding-bottom: 10.67vw;
}

.visual p::before{
    width: 0.533vw;
    height: 10.67vw;
}

.visual a{
    font-size: 4vw;
    bottom: 23vw;
    right: -19vw;
    padding-right: 25.067vw;
}

.visual a::before{
    width: 20.38933vw;
}

.visual a::after{
    width: 4.67vw;
    top: 0.66vw;
    right: -0.6vw;
}

.sideNav{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #303030;
    padding-top: 37.6vw;
    z-index: 1000;
    display: none;
    mix-blend-mode: normal;
}

.sideNav .gNav{
    padding-left: 6.67vw; 
}

.sideNav .gNav h3{
    font-size: 7.2vw;
    font-weight: 320;
    margin: 0 0 5.067vw 2.67vw;
}

.sideNav .gNav ul::before{
    display: none;
}

.sideNav .gNav ul li{
    margin-bottom: 0;
}

.sideNav.is-fixed .gNav ul li span{
    opacity: 1;
    transform: translateX(0);
    display: flex;
    align-items: center;
}

.sideNav.is-fixed .gNav ul li span small{
    font-size: 3.2vw;
    font-weight: bold;
    margin-left: 4.8vw;
    color: #fff;
}

.sideNav .gNav ul li a{
    font-size: 5.867vw;
    font-weight: 320;
    padding: 5.6vw 2.67vw;
    border-bottom: 1px solid #fff;
    width: 82.67vw;
}

.sideNav .gNav ul li a:hover{
    opacity: 1;
}

.sideNav .gNav ul li a::before{
    display: none;
}

.sideNav .sNav{
    margin: 10.933vw 0 0 9.33vw;
}

.sideNav .sNav ul li{
    margin-bottom: 6.4vw;
}

.sideNav .sNav ul li a{
    width: 36.533vw;
    height: 11.467vw;
    font-size: 4.267vw;
    padding-top: 3vw;
}

.sideNav .close{
    width: 5.33vw;
    height: 5.33vw;
    position: absolute;
    top: 4.8vw;
    right: 4.8vw;
}

.sideNav .close::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 0.533vw;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center center;
}

.sideNav .close::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 0.533vw;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center center;
}

main .lead{
    padding: 13.33vw 12vw 0;
}

main .lead h2{
    font-size: 4.533vw;
}

main .lead p{
    font-size: 3.2vw;
    margin-top: 8.533vw;
}

main .lead .movieWrap{
    margin-top: 8.533vw;
}

#features{
    width: 100%;
    padding: 19.733vw 12vw 16vw;
}

#features h2{
    margin-bottom: 10.133vw;
}

#features h2 img{
    width: 32.1359vw;
}

#features h2 small{
    font-size: 3.467vw;
    margin-top: 3.48718vw;
}

#features ul{
    row-gap: 8.533vw;
}

#features ul li{
    width: 100%;
    max-width: inherit;
}

#features ul li img{
    margin-bottom: 6vw;
}

#features ul li .movieWrap{
    margin-bottom: 6vw;
}

#features ul li h3{
    font-size: 4.533vw;
    line-height: 1;
    display: block;
}

#features ul li h3 span{
    margin: 0 0 2.67vw;
    display: block;
}

#features ul li p{
    font-size: 3.2vw;
    margin-top: 3.733vw;
    color: #7A7A7A;
}

#lineup{
    padding: 16vw 5.467vw 12.48vw;
}

#lineup h2{
    margin-bottom: 10.67vw;
}

#lineup h2 img{
    width: 24.71vw;
}

#lineup h2 small{
    font-size: 3.467vw;
    margin-top: 2.1538vw;
}

#lineup img{
    margin: 0 auto 8vw;
    max-width: 65.33vw;
}

#lineup ul{
    flex-wrap: wrap;
    gap: 10.67vw;
}

#lineup ul li{
    width: 100%;
}

#lineup ul li h3{
    font-size: 4.533vw;
    margin-bottom: 3.467vw;
}

#lineup ul li p{
    font-size: 3.2vw;
    margin-bottom: 10.133vw;
    min-height: inherit;
    padding: 0 6.67vw;
}

#lineup ul li dl{
    padding: 5.6vw 3.467vw;
}

#lineup ul li dl div{
    padding: 0 5.33vw;
}

#lineup ul li dl div:first-child{
    padding: 0 5.33vw;
}

#lineup ul li dl div:last-child{
    padding: 0 5.33vw;
}

#lineup ul li dl div dt{
    font-size: 3.2vw;
    margin-bottom: 3.2vw;
}

#lineup ul li dl div dd{
    font-size: 4.533vw;
}

#lineup ul li dl div.multiple dd{
    font-size: 4vw;
}

#lineup ul li a{
    font-size: 3.467vw;
    margin: 4.8vw auto 0;
    padding-bottom: 6.4vw;
}

#lineup ul li a::before,
#lineup ul li a::after {
    left: calc(50% - 0.4vw);
    width: 0.8vw;
    height: 2.67vw;
    transform-origin: 50% calc(100% - 0.4vw);
}

.list{
    padding: 20.533vw 7.2vw 0;
}

#other{
    padding-bottom: 20.267vw;
}

.list h2{
    font-size: 6.4vw;
    margin: 0 auto 11.733vw;
}

.list h2 small{
    font-size: 3.467vw;
    margin-top: 2.33vw;
}

#crowdy h2 img{
    width: 70vw;
}

#tenshiLight h2 img{
    width: 75.3846vw;
}

#tenshi h2 img{
    width: 57.9487vw;
}

#other h2 img{
    width: 18.205vw;
}

.list > ul{
    justify-content: space-between;
    column-gap: normal;
    row-gap: 12vw;
}

#tenshiLight > ul,
#tenshi > ul{
    column-gap: normal;
}

#other > ul{
    max-width: 100%;
    padding: 0;
}

.list > ul > li{
    width: 39.6vw;
    display: flex;
    flex-direction: column;
}
.list > ul li picture{
    order: 2;
}

.list > ul li img{
    margin-bottom: 2.6133vw;
}

.list > ul li h3{
    font-size: 4vw;
    max-width: 100%;
    min-height: inherit;
    margin: 0 0 2.613vw;
    order: 1;
}

.list > ul li h3 small{
    font-size: 2.933vw;
    margin-top: 1.6vw;
}

.list > ul li dl{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border: none;
    order: 3;
}

.list > ul li dl div{
    padding: 1.867vw 0 2.4vw;
    font-size: 3.2vw;
    line-height: 1.3;
}

.list > ul li dl div dt{
    width: 39%;
}

.list > ul li dl div dd{
    width: 61%;
}

.list > ul li dl div dd span{
    display: block;
    font-size: 2.67vw;
}

.list > ul li a{
    width: 100%;
    max-width: 100%;
    height: 7.392vw;
    margin: 0 auto;
    font-size: 3.2vw;
    padding-top: 2.1vw;
    order: 4;
}

#other > ul .slick-prev, #other > ul .slick-next{
    width: 3.733vw;
    height: 3.733vw;
    top: auto;
    bottom: -3.2vw;
}

#other > ul .slick-prev{
    left: 27.2vw;
}

#other > ul .slick-next{
    right: 27.2vw;
}

#other .slick-dots{
  margin: 7.467vw auto 0;
}

#other .slick-dots li{
    width: 0.8vw;
    height: 0.8vw;
    margin: 0 1.33vw;
}

.list .btn01{
    max-width: 80vw;
    height: 14.4vw;
    margin: 12.8vw auto 0;
    font-size: 3.2vw;
    padding-top: 5.6vw;
}

.option{
    padding: 18.133vw 7.467vw 20.267vw;
}

.option h2{
    margin-bottom: 11.867vw;
}

.option h2 img{
    width: 18.0359vw;
}

.option h2 small{
    font-size: 3.467vw;
    margin-top: 2.33vw;
}

.option ul{
    column-gap: 9.6267vw;
    row-gap: 9.733vw;
}

.option ul li{
    max-width: calc((100% - 9.6267vw) / 2);
}

.option ul li h3{
    font-size: 3.733vw;
}

.option ul li img{
    width: 37.7vw;
    margin-top: 1.6vw;
}

.option ul li p{
    font-size: 3.2vw;
    margin-top: 5.867vw;
}

.option ul li a{
    max-width: 37.73867vw;
    height: 7.392vw;
    margin: 3.2vw auto 0;
    font-size: 3.2vw;
    padding-top: 2.1vw;
}

.option .btn01{
    max-width: 80vw;
    height: 14.4vw;
    margin: 12.8vw auto 0;
    font-size: 3.2vw;
    padding-top: 5.6vw;
}

#customize{
    padding: 24.267vw 5.36vw 24vw;
}

#customize h2{
    margin: 0 auto 11.733vw;
}

#customize h2 img{
    width: 39.4846vw;
}

#customize h2 small{
    font-size: 3.467vw;
    margin-top: 2.33vw;
}

#customize > ul{
    padding: 0 6.64vw;
    column-gap: 3.2vw;
}

#customize > ul li{
    width: 36.4vw;
    font-size: 3.2vw;
}

#customize > ul li img{
    margin-bottom: 1.6vw;
}

#customize > ul .slick-prev, #customize > ul .slick-next{
    width: 3.733vw;
    height: 3.733vw;
}

.voice{
    padding: 0 7.467vw 26.4vw;
}

.voice h2{
    margin: 0 auto 11.733vw;
}

.voice h2 img{
    width: 22.0846vw;
}

.voice h2 small{
    font-size: 3.467vw;
    margin-top: 2.33vw;
}

.voice ul{
    flex-wrap: wrap;
    column-gap: normal;
    row-gap: 11.2vw;
}

.voice ul li{
    padding: 7.467vw 7.733vw 5.33vw;
}

.voice ul li:nth-child(1) img{
    width: 73.6vw;
}

.voice ul li:nth-child(2) img{
    width: 48.8vw;
}

.voice ul li h3{
    margin-top: 6.133vw;
    font-size: 4.533vw;
}

.voice ul li dl{
    margin-top: 2.67vw;
    font-size: 3.2vw;
}

.voice ul li p{
    margin-top: 4.267vw;
    font-size: 3.2vw;
}

.media{
    padding: 17.067vw 0 16.2933vw;
}

.media h2{
    margin: 0 auto 11.733vw;
}

.media h2 img{
    width: 48.48718vw;
}

.media h2 small{
    font-size: 3.467vw;
    margin-top: 2.33vw;
}

.media .youtube{
    max-width: 80vw;
    flex-wrap: wrap;
    column-gap: normal;
    row-gap: 11.733vw;
    margin: 0 auto;
}

.media .youtube li{
    font-size: 4vw;
}

.media .youtube li .movieWrap {
    margin-top: 2.67vw;
}

.media .post{
    max-width: 93.2933vw;
    flex-wrap: wrap;
    gap: 7.22133vw;
    margin: 10.933vw auto 0;
    padding: 0 6.42265vw;
}

.media .post li{
    width: 36.6133vw;
    font-size: 3.2vw;
}

.media .post li img{
    width: auto;
    height: 31.488vw;
    margin: 3.467vw auto 0;
}

.media .post .slick-prev, .media .post .slick-next{
    width: 3.733vw;
    height: 3.733vw;
    top: calc((100% - 7.35733vw) / 2);
}

.media .post .slick-prev{
    background: url("../img/common/prev02.png") no-repeat center;
    background-size: contain;
    left: 0;
}

.media .post .slick-next{
    background: url("../img/common/next02.png") no-repeat center;
    background-size: contain;
    right: 0;
}

#showroom{
    padding: 18.67vw 11.867vw 0;
    margin-bottom: 0;
}

#showroom h2{
    margin: 0 auto 12.267vw;
}

#showroom h2 img{
    width: 40.2564vw;
}

#showroom h2 small{
    font-size: 3.467vw;
    margin-top: 2.33vw;
}

#showroom .wrap{
    flex-wrap: wrap;
}

#showroom .map{
    width: 100%;
    margin-top: 4.267vw;
}

#showroom iframe{
    width: 100%;
    height: 100%;
}

#showroom .wrap img{
    width: 72.8vw;
    margin: 0 auto 5.867vw;
}

#showroom h3{
    font-size: 4vw;
    margin: 0 auto 4.533vw;
    text-align: center;
}

#showroom p{
    font-size: 3.2vw;
    font-weight: 500;
}

.productPop{
    max-width: 84.267vw;
    padding: 17.6vw 7.6vw 9.6vw;
    flex-wrap: wrap;
}

.productPop .slideArea{
    width: 100%;
}

.productPop .slideArea .main{
    width: 53.33vw;
    margin: 0 auto 5.067vw;
}

.productPop .slideArea .main li img{
    width: 100%;
}

.productPop .slideArea .thum{
    width: 57.33vw;
    margin: 0 auto 5.6vw;
}

.productPop .slideArea .thum li{
    width: 16vw;
}

.productPop .slideArea .thum .slick-prev, .productPop .slideArea .thum .slick-next{
    width: 3.733vw;
    height: 3.733vw;
}

.productPop .slideArea .thum .slick-prev{
    left: -5.067vw;
}

.productPop .slideArea .thum .slick-next{
    right: -5.067vw;
}

.productPop .txtArea{
    width: 100%;
}

.productPop .txtArea h2{
    font-size: 4.533vw;
    margin: 0 auto 5.067vw;
}

.productPop .txtArea h2 small{
    font-size: 2.933vw;
    margin-top: 1.33vw;
}

.productPop .txtArea dl div{
    padding: 1.867vw 0 2.4vw;
    font-size: 3.2vw;
}

.optionPop{
    max-width: 88vw;
    height: auto;
    overflow-y: visible;
    padding: 17.6vw 6vw 9.6vw;
}

.optionPop ul{
    row-gap: 9.8133vw;
}

.optionPop ul li{
    width: 36vw;
}

.optionPop ul li h2{
    font-size: 4vw;
    max-width: 100%;
    min-height: inherit;
    margin: 3.733vw auto 2.613vw;
}

.optionPop ul li h2 small{
    font-size: 3.2vw;
    margin-top: 1.6vw;
}

.optionPop ul li dl div{
    padding: 1.867vw 0 2.4vw;
    font-size: 3.2vw;
}

.optionPop ul li dl dt{
    width: 39%;
}

.optionPop ul li dl dd{
    width: 61%;
    word-break: break-all;
}

.optionPop ul li dl div dd span{
        display: block;
        font-size: 2.67vw;
    }

.optionPop a{
    max-width: 80vw;
    height: 14.4vw;
    margin: 12.8vw auto 0;
    font-size: 3.2vw;
    padding-top: 5.6vw;
}

.mfp-close{
    width: 8.267vw;
    height: 8.267vw;
    top: 4.267vw;
    right: 5.33vw;
}

.mfp-close:active{
    top: 4.267vw;
}

.mfp-close::before{
    width: 0.533vw;
    height: 3.733vw;
}

.mfp-close::after{
    width: 0.533vw;
    height: 3.733vw;
}


}