@charset "utf-8";
img,svg{
    width: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}
html,body{
}
html{
    width: 100%;
    position: relative;
    overflow-x: hidden;
}
body{
    height: auto;
    width: 100%;
    background-color: #191919;
    overflow: hidden;
}
.box{
    opacity: 0;
    transform: translate(0%, 50px);
}
#sitecommon_inner{
    min-width: auto;
}
#sitecommon_inner02{
    width: calc(100% - 40px);
}
@media screen and (max-width: 767px) {
    #sitecommon{
        display: none;
    }
}
/* loading */
.bl_loading{
    background: #000;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    z-index: 1000;
    flex-direction: column;
}
.p_number{
    display: none;
}
.load_cont{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.loading_txt{
    display: flex;
    height: fit-content;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 20px;
    flex-direction: column;
}
@media screen and (max-width: 767px) {
    .loading_txt{
        gap: calc(10vw / 375 * 100);
    }
}
.load_logo{
    width: 300px;
}
@media screen and (max-width: 767px) {
    .load_logo{
        width: calc(180vw / 375 * 100);
    }
}
.load_copy{
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 165%; /* 29.7px */
}
@media screen and (max-width: 767px) {
    .load_copy{
        font-size: calc(15vw / 375 * 100);
    }
}
.load_icon{
    position: absolute;
    bottom: 50px;
    display: flex;
    width: 200px;
}
@media screen and (max-width: 767px) {
    .load_icon{
        bottom: 25px;
        width: 160px;
    }
}
.l_gauge_wrapper{
    width: 100%;
    margin: 0 auto;
    display: flex;
    background: rgba(0,0,0,0.1);
    height: 2px;
    align-items: center;
    justify-content: left;
}
.l_gauge{
    display: flex;
    height: 100%;
    background: #aaaaaa;
}
header{
    position: fixed;
    padding: 60px 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 10;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.40) 100%);
    transition: .4s cubic-bezier(.36,.67,.47,.87);
}
header.scroll{
    padding: 20px 0 20px;
    background: #000;
}
@media screen and (max-width: 767px) {
    header{
        display: none;
    }
}
header ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
header ul li a{
    display: flex;
    height: 12.54px;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.75));
}
main{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    min-height: 978px;
}
@media screen and (max-width: 1280px) {
    main{
        min-height: calc(978vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    main{
        min-height: calc(457vw / 375 * 100);
    }
}
.main_inner{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 160px;
}
@media screen and (max-width: 1280px) {
    .main_inner{
        padding-top: calc(160vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .main_inner{
        padding-top: calc(45vw / 375 * 100);
    }
}
.main_logo{
    height: 75px;
    display: flex;
    margin-bottom: 30px;
}
@media screen and (max-width: 1280px) {
    .main_logo{
        height: calc(75vw / 1280 * 100);
        margin-bottom: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .main_logo{
        height: calc(37.284vw / 375 * 100);
        margin-bottom: calc(15vw / 375 * 100);
    }
}
.main_logo h1{
    display: flex;
}
.main_copy{
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 165%;
    margin-bottom: 50px;
}
@media screen and (max-width: 1280px) {
    .main_copy{
        font-size: calc(32vw / 1280 * 100);
        margin-bottom: calc(50vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .main_copy{
        font-size: calc(16vw / 375 * 100);
        margin-bottom: calc(40vw / 375 * 100);
    }
}
.main_img{
    display: flex;
    position: relative;
    width: 820px;
}
@media screen and (max-width: 1280px) {
    .main_img{
        width: calc(820vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .main_img{
        width: calc(335vw / 375 * 100);
    }
}
.main_img > .shade{
    position: absolute;
    top: 0px;
    left: 0px;
    mix-blend-mode: lighten;
    transform:translate3d(0,0,0); /* safari hack */
}
.main_video{
    width: 100%;
    min-width: 1740px;
    z-index: -1;
}
@media screen and (max-width: 1280px){
    .main_video{
        width: 100%;
        min-width: calc(1740vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .main_video{
        width: 100%;
        min-width: calc(814vw / 375 * 100);
    }
}

.concept{
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
@media screen and (max-width: 1280px){
    .concept{
        padding: calc(80vw / 1280 * 100) 0;
        gap: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .concept{
        padding: calc(60vw / 375 * 100) 0;
        gap: calc(20vw / 375 * 100);
    }
}

.concept > h2{
    color: #FFF;
    text-align: center;
    font-feature-settings: 'pwid' on, 'palt' on;
    font-size: 40px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 66px */
    letter-spacing: 3.2px;
}
@media screen and (max-width: 1280px){
    .concept > h2{
        font-size: calc(40vw / 1280 * 100);
        letter-spacing: calc(3.2vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .concept > h2{
        font-size: calc(26vw / 375 * 100);
        letter-spacing: calc(1.56vw / 375 * 100);
    }
}
.concept > p{
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 205%; /* 32.8px */
}
@media screen and (max-width: 1280px){
    .concept > p{
        font-size: calc(16vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .concept > p{
        font-size: calc(14vw / 375 * 100);
    }
}
.reishi{
    background-image: url(../img/reishi_bg_pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .reishi{
        background-image: url(../img/reishi_bg_sp.jpg);
    }
}
.reishi_ttl{
    padding: 160px 0 100px;
    position: relative;
}
@media screen and (max-width: 1280px){
    .reishi_ttl{
        padding: calc(160vw / 1280 * 100) 0 calc(100vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_ttl{
        padding: calc(80vw / 375 * 100) 0 calc(60vw / 375 * 100);
    }
}
.reishi_ttl > h2{
    display: flex;
    width: 840px;
}
@media screen and (max-width: 1280px){
    .reishi_ttl > h2{
        width: calc(780vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_ttl > h2{
        width: calc(280vw / 375 * 100);
    }
}
.reishi_img{
    display: flex;
    width: 318px;
    position: absolute;
    right: 0px;
    top: 100px;
}
@media screen and (max-width: 1280px){
    .reishi_img{
        width: calc(280vw / 1280 * 100);
        top: calc(100vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_img{
        width: calc(157vw / 375 * 100);
        top: calc(190vw / 375 * 100);
        right: calc(-30vw / 375 * 100);
    }
}
.reishi_sec01{
    display: flex;
    margin-bottom: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}
@media screen and (max-width: 1280px){
    .reishi_sec01{
        margin-bottom: calc(100vw / 1280 * 100);
        gap: calc(80vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_sec01{
        margin-bottom: calc(40vw / 375 * 100);
        gap: calc(20vw / 375 * 100);
        flex-direction: column;
    }
}
.reishi_sec01.last{
    margin-bottom: 160px;
}
@media screen and (max-width: 1280px){
    .reishi_sec01.last{
        margin-bottom: calc(160vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_sec01.last{
        margin-bottom: calc(60vw / 375 * 100);
    }
}
.reishi_sec01_txt{
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
@media screen and (max-width: 1280px){
    .reishi_sec01_txt{
        width: calc(500vw / 1280 * 100);
        gap: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_sec01_txt{
        width: 100%;
        gap: calc(10vw / 375 * 100);
    }
}
.reishi_sec01_txt > h3,.design_txt_inner > h3{
    color: #37104A;
    font-feature-settings: 'pwid' on;
    font-size: 32px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 52.8px */
}
@media screen and (max-width: 1280px){
    .reishi_sec01_txt > h3,.design_txt_inner > h3{
        font-size: calc(32vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_sec01_txt > h3,.design_txt_inner > h3{
        font-size: calc(18vw / 375 * 100);
    }
}
.reishi_sec01_txt > p,.design_txt_inner > p{
    color: #000;
    text-align: justify;
    font-size: 15px;
    font-style: normal;
    font-weight: 450;
    line-height: 205%; /* 30.75px */
}
@media screen and (max-width: 1280px){
    .reishi_sec01_txt > p,.design_txt_inner > p{
        font-size: calc(15vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_sec01_txt > p,.design_txt_inner > p{
        font-size: calc(14vw / 375 * 100);
    }
}
.reishi_sec01_img{
    display: flex;
    width: 640px;
}
@media screen and (max-width: 1280px){
    .reishi_sec01_img{
        width: calc(640vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .reishi_sec01_img{
        width: 100%;
    }
}
.reishi_hr{
    margin: 0 0 100px 0;
    border-top: none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 1280px){
    .reishi_hr{
        margin: 0 0 calc(100vw / 1280 * 100) 0;
    }
}
@media screen and (max-width: 767px) {
    .reishi_hr{
        margin: 0 0 calc(40vw / 375 * 100) 0;
    }
}
.design{
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.80);
}
@media screen and (max-width: 767px) {
    .design{
        flex-direction: column;
    }
}
.design_txt{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}
@media screen and (max-width: 767px) {
    .design_txt{
        width: 100%;
    }
}
.design_txt_inner{
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
@media screen and (max-width: 1280px){
    .design_txt_inner{
        width: calc(500vw / 1280 * 100);
        gap: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .design_txt_inner{
        width: calc(335vw / 375 * 100);
        gap: calc(10vw / 375 * 100);
        padding: calc(60vw / 375 * 100) 0 calc(40vw / 375 * 100) 0;
    }
}
.design_video{
    position: relative;
    display: flex;
    width: calc(640vw / 1280 * 100);
    height: calc(640vw / 1280 * 100);
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .design_video{
        display: flex;
        width: calc(375vw / 375*100);
        height: calc(375vw / 375*100);
    }
}
.design_video > video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}
@media screen and (max-width: 1280px){
    .design_video > video{
        width: calc(640vw / 1280 * 100);
        height: calc(640vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .design_video > video{
        width: calc(375vw / 375 * 100);
        height: calc(375vw / 375 * 100);
    }
}

/* features */
.features{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.features_bg{
    position: absolute;
    display: flex;
    width: 100%;
    z-index: -1;
    align-items: center;
    justify-content: center;
}
.features_bg > video{
    width: 100%;
}
@media screen and (max-width: 767px) {
    .features_bg > video{
        width: 150%;
    }
}
.features_tabs{
    display: flex;
    width: 1220px;
    margin: 0 auto 20px;
    gap: 2px;
}
@media screen and (max-width: 1280px){
    .features_tabs{
        width: calc(1100vw / 1280 * 100);
        margin: 0 auto calc(20vw / 1280 * 100);
        gap: calc(2vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_tabs{
        width: calc(335vw / 375 * 100);
        margin: 0 auto calc(20vw / 375 * 100);
        gap: calc(2vw / 375 * 100);
    }
}
.features_tabs > .tab{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #393939;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%; /* 26.4px */
    padding: 16px 0;
    cursor: pointer;
    transition: .4s cubic-bezier(.36,.67,.47,.87);
    position: relative;
    text-align: center;
}
@media screen and (max-width: 1280px){
    .features_tabs > .tab{
        font-size: calc(16vw / 1280 * 100);
        padding: calc(16vw / 1280 * 100) 0;
    }
}
@media screen and (max-width: 767px) {
    .features_tabs > .tab{
        font-size: calc(12vw / 375 * 100);
        padding: calc(8vw / 375 * 100) 0;
    }
}
.features_tabs > .tab:hover{
    opacity: 0.6;
}
@media screen and (max-width: 767px) {
    .features_tabs > .tab:hover{
        opacity: 1;
    }
}
.features_tabs > .tab.active{
    background: #37104A;
    color: #FFF;
}
.features_tabs > .tab.active::after{
    content: "";
    background-image: url(../img/tab_arrow.svg);
    width: 30px;
    height: 12px;
    position: absolute;
    left: calc(50% - 15px);
    bottom: -12px;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (max-width: 1280px){
    .features_tabs > .tab.active::after{
        width: calc(30vw / 1280 * 100);
        height: calc(12vw / 1280 * 100);
        left: calc(50% - calc(15vw / 1280 * 100));
        bottom: calc(-12vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_tabs > .tab.active::after{
        width: calc(20vw / 375 * 100);
        height: calc(8vw / 375 * 100);
        left: calc(50% - calc(10vw / 375 * 100));
        bottom: calc(-8vw / 375 * 100);
    }
}
.features_content{
    display: none;
}
.features_content.active{
    display: flex;
    width: 1100px;
    margin: 0 auto;
    background: #101010;
    padding: 60px;
    align-items: flex-start;
    justify-content: space-between;
}
@media screen and (max-width: 1280px){
    .features_content.active{
        width: calc(1000vw / 1280 * 100);
        padding: calc(50vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content.active{
        width: calc(275vw / 375 * 100);
        padding: calc(30vw / 375 * 100);
        flex-direction: column;
        gap: calc(20vw / 375 * 100);
    }
}
.features_content > .txt{
    width: 420px;
}
@media screen and (max-width: 1280px){
    .features_content > .txt{
        width: calc(400vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content > .txt{
        width: 100%;
    }
}
.features_content > .txt > h3{
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 450;
    line-height: 135%; /* 40.5px */
    margin-bottom: 25px;
}
@media screen and (max-width: 1280px){
    .features_content > .txt > h3{
        font-size: calc(30vw / 1280 * 100);
        margin-bottom: calc(25vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content > .txt > h3{
        font-size: calc(22vw / 375 * 100);
        margin-bottom: calc(15vw / 375 * 100);
    }
}
.features_content > .txt > h3 > span{
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 33px */
}
@media screen and (max-width: 1280px){
    .features_content > .txt > h3 > span{
        font-size: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content > .txt > h3 > span{
        font-size: calc(13vw / 375 * 100);
    }
}
.features_content > .txt > p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 185%; /* 33.3px */
    margin-bottom: 25px;
}
@media screen and (max-width: 1280px){
    .features_content > .txt > p{
        font-size: calc(18vw / 1280 * 100);
        margin-bottom: calc(25vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content > .txt > p{
        font-size: calc(13vw / 375 * 100);
        margin-bottom: calc(10vw / 375 * 100);
    }
}
.features_content > .img{
    display: flex;
    width: 620px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    position: relative;
}
@media screen and (max-width: 1280px){
    .features_content > .img{
        width: calc(560vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content > .img{
        width: 100%;
    }
}
/* anno txt */
.anno_illust{
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 10px;
    color: #fff;
}
@media screen and (max-width: 1280px){
    .anno_illust{
        font-size: calc(12vw / 1280 * 100);
        right: calc(10vw / 1280 * 100);
        top: calc(10vw / 1280 * 100);

    }
}
@media screen and (max-width: 767px){
    .anno_illust{
        font-size: calc(8vw / 375 * 100);
        right: calc(5vw / 375 * 100);
        top: calc(5vw / 375 * 100);
    }
}
.anno_01_1{
    position: absolute;
    font-size: 15px;
    text-align: left;
    color: #fff;
    top: 67px;
    left: 20px;
    line-height: 145%;
}
@media screen and (max-width: 1280px){
    .anno_01_1{
        font-size: calc(14vw / 1280 * 100);
        top: calc(62vw / 1280 * 100);
        left: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .anno_01_1{
        font-size: calc(10vw / 375 * 100);
        top: calc(18vw / 375 * 100);
        left: calc(15vw / 375 * 100);
    }
}
.anno_01_2{
    position: absolute;
    font-size: 15px;
    text-align: right;
    color: #fff;
    top: 187px;
    left: 48px;
    line-height: 145%;
}
@media screen and (max-width: 1280px){
    .anno_01_2{
        font-size: calc(14vw / 1280 * 100);
        top: calc(166vw / 1280 * 100);
        left: calc(46vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .anno_01_2{
        font-size: calc(10vw / 375 * 100);
        top: calc(68vw / 375 * 100);
        left: calc(9vw / 375 * 100);
        line-height: 125%;
    }
}
.anno_01_3{
    position: absolute;
    font-size: 15px;
    color: #fff;
    text-align: right;
    left: 55px;
    bottom: 144px;
    line-height: 145%;
}
@media screen and (max-width: 1280px){
    .anno_01_3{
        font-size: calc(14vw / 1280 * 100);
        bottom: calc(131vw / 1280 * 100);
        left: calc(53vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .anno_01_3{
        font-size: calc(10vw / 375 * 100);
        bottom: calc(57vw / 375 * 100);
        left: calc(12vw / 375 * 100);
    }
}
.anno_01_4{
    position: absolute;
    font-size: 15px;
    color: #fff;
    top: 75px;
    left: 415px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    justify-content: flex-start;
}
@media screen and (max-width: 1280px){
    .anno_01_4{
        font-size: calc(14vw / 1280 * 100);
        top: calc(65vw / 1280 * 100);
        left: calc(376vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .anno_01_4{
        font-size: calc(10vw / 375 * 100);
        top: calc(30vw / 375 * 100);
        left: calc(184vw / 375 * 100);
        line-height: 125%;
        gap: calc(3vw / 375 * 100);
    }
}
.anno_01_5{
    position: absolute;
    font-size: 13px;
    color: #fff;
    text-align: right;
    bottom: 52px;
    right: 250px;
    line-height: 145%;
}
@media screen and (max-width: 1280px){
    .anno_01_5{
        font-size: calc(12vw / 1280 * 100);
        bottom: calc(46vw / 1280 * 100);
        right: calc(225vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .anno_01_5{
        font-size: calc(8vw / 375 * 100);
        bottom: calc(19vw / 375 * 100);
        right: calc(110vw / 375 * 100);
    }
}
/* anno txt till here */
.features_content > .img > .scroll{
    display: flex;
    height: 465px;
    overflow-y: scroll;
    width: 100%;
    flex-direction: column;
}
@media screen and (max-width: 1280px){
    .features_content > .img > .scroll{
        height: calc(420vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .features_content > .img > .scroll{
        height: calc(420vw / 375 * 100);
    }
}
/* use_box */
.use_box_wrapper{
    padding: 50px 40px 40px;
    gap: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 1280px){
    .use_box_wrapper{
        padding: calc(50vw / 1280 * 100) calc(40vw / 1280 * 100) calc(40vw / 1280 * 100);
        gap: calc(40vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .use_box_wrapper{
        padding: calc(30vw / 375 * 100) calc(20vw / 375 * 100) calc(20vw / 375 * 100);
        gap: calc(20vw / 375 * 100);
    }
}
.use_box_anno01{
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 10px;
    color: #fff;
}
@media screen and (max-width: 1280px){
    .use_box_anno01{
        font-size: calc(12vw / 1280 * 100);
        right: calc(10vw / 1280 * 100);
        top: calc(10vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .use_box_anno01{
        font-size: calc(8vw / 375 * 100);
        right: calc(5vw / 375 * 100);
        top: calc(5vw / 375 * 100);
    }
}
.use_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
@media screen and (max-width: 1280px){
    .use_box{
        gap: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .use_box{
        gap: calc(10vw / 375 * 100);
        flex-direction: column;
    }
}
.use_box_center{
    justify-content: center;
}
.use_box .img,.use_box .txt{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media screen and (max-width: 1280px){
    .use_box .img,.use_box .txt{
        gap: calc(10vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .use_box .img,.use_box .txt{
        gap: calc(10vw / 375 * 100);
        width: 100%;
    }
    .use_box .img{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .use_box .img > img{
        width: 80%;
    }
}
.use_box .img,.use_box .txt > p{
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 165%;
}
@media screen and (max-width: 1280px){
    .use_box .img,.use_box .txt > p{
        font-size: calc(15vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .use_box .img,.use_box .txt > p{
        font-size: calc(12vw / 375 * 100);
    }
}
.use_box_wrapper hr{
    width: 100%;
    border: none;
    border-bottom: solid 1px rgba(255, 255, 255, 0.30);
}
/* use_box until here */
/* perfume */
.perfume_wrapper{
    flex-direction: column;
}
.perfume_img{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 465px;
}
@media screen and (max-width: 1280px){
    .perfume_img{
        gap: calc(15vw / 1280 * 100);
        height: calc(420vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .perfume_img{
        gap: calc(8vw / 375 * 100);
        height: calc(210vw / 375 * 100);
    }
}
.perfume_img > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
@media screen and (max-width: 1280px){
    .perfume_img > div{
        gap: calc(10vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .perfume_img > div{
        gap: calc(5vw / 375 * 100);
    }
}
.perfume_img > div > span{
    display: flex;
    width: 170px;
}
@media screen and (max-width: 1280px){
    .perfume_img > div > span{
        width: calc(160vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .perfume_img > div > span{
        width: calc(80vw / 375 * 100);
    }
}
.perfume_img > div > p{
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 165%; /* 29.459px */
}
@media screen and (max-width: 1280px){
    .perfume_img > div > p{
        font-size: calc(17vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px){
    .perfume_img > div > p{
        font-size: calc(11vw / 375 * 100);
    }
}
.perfume_anno{
    text-align: right;
    color: #FFF;
    font-size: 12px;
    font-weight: 300;
    line-height: 165%; /* 20.13px */
    padding: 0 15px 20px 0;
}
@media screen and (max-width: 1280px){
    .perfume_anno{
        font-size: calc(12vw / 1280 * 100);
        padding: 0 calc(15vw / 1280 * 100) calc(20vw / 1280 * 100) 0;
    }
}
@media screen and (max-width: 767px){
    .perfume_anno{
        font-size: calc(10vw / 375 * 100);
        padding: 0 calc(10vw / 375 * 100) calc(15vw / 375 * 100) 0;
    }
}
/* perfume until here */
.features_content ul.sub{
    font-size: 13px;
    line-height: 165%; /* 21.96px */
    color: #fff;
}
.features_content ul.sub.sp{
    display: none;
}
@media screen and (max-width: 1280px){
    .features_content ul.sub{
        font-size: calc(12vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .features_content ul.sub{
        font-size: calc(11vw / 375 * 100);
    }
    .features_content ul.sub.sp{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .features_content ul.sub .pc{
        display: none;
    }
}
.features_content ul.sub li{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.features_content ul.sub li p:nth-child(1){
    white-space: nowrap;
}

.features_content > .img > .scroll::-webkit-scrollbar {
    display: none;
}
.features_content > .img > .scroll{
    scrollbar-width: none; /*Firefox*/  
    -ms-overflow-style: none;/*Internet Explore*/
}
.simplebar-vertical {
    background: #000000;
    width: 8px !important;
}
.simplebar-scrollbar {
    background: #565656;
    border-radius: 20px;
    border: solid 1px #000
}
.simplebar-scrollbar:before{
    display: none !important;
}
.features_content > .img > .scroll > img{
    height: fit-content;
}
/* 最新のsafari用 */
::-webkit-full-page-media, :future, :root .features_content > .img > .scroll > img {
	height: intrinsic;
}
/* 古いsafari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .features_content > .img > .scroll > img {
		height: intrinsic;
	}
}
.science_box{
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    background-size: cover;
    background-position: center;
    height: 600px;
    align-items: center;
}
.science_box02{
    flex-direction: row;
}
@media screen and (max-width: 1280px){
    .science_box{
        height: calc(600vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .science_box{
        flex-direction: column;
        height: auto;
    }
}
.science_box01{
    background-image: url(../img/science_img01_pc.jpg);
}
.science_box02{
    background-image: url(../img/science_img02_pc.jpg);
}
@media screen and (max-width: 767px) {
    .science_box01,.science_box02{
        background-image: none;
    }
}
.science_box .sp_img{
    display: none;
}
@media screen and (max-width: 767px) {
    .science_box .sp_img{
        display: flex;
    }
}
.science_box > .txt{
    display: flex;
    flex-direction: column;
    width: 500px;
    margin-right: 145px;
}
@media screen and (max-width: 1280px){
    .science_box > .txt{
        width: calc(500vw / 1280 * 100);
        margin-right: calc(145vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .science_box > .txt{
        width: calc(100% - calc(50vw / 375 * 100));
        margin-right: 0px;
        padding: calc(30vw / 375 * 100) calc(25vw / 375 * 100);
        background: linear-gradient(37deg, rgba(231, 231, 231, 0.10) 3.15%, rgba(244, 244, 244, 0.03) 40.79%, rgba(255, 255, 255, 0.00) 72.4%, rgba(255, 255, 255, 0.00) 136.53%);
    }
}
.science_box02 > .txt{
    margin-left: 145px;
    margin-right: 0px;
}
@media screen and (max-width: 1280px){
    .science_box02 > .txt{
        margin-left: calc(145vw / 1280 * 100);
        margin-right: 0px;
    }
}
@media screen and (max-width: 767px) {
    .science_box02 > .txt{
        margin-left: 0px;
    }
}
.science_box > .txt > h3{
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 450;
    line-height: 145%; /* 58px */
    margin-bottom: 20px;
}
@media screen and (max-width: 1280px){
    .science_box > .txt > h3{
        font-size: calc(30vw / 1280 * 100);
        margin-bottom: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .science_box > .txt > h3{
        font-size: calc(20vw / 375 * 100);
        margin-bottom: calc(15vw / 375 * 100);
    }
}
.science_box > .txt > p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 185%;
    margin-bottom: 40px;
}
@media screen and (max-width: 1280px){
    .science_box > .txt > p{
        font-size: calc(18vw / 1280 * 100);
        margin-bottom: calc(40vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .science_box > .txt > p{
        font-size: calc(14vw / 375 * 100);
        margin-bottom: calc(20vw / 375 * 100);
    }
}

/* lineup */
.lineup{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 0;
}
@media screen and (max-width: 1280px){
    .lineup{
        padding: calc(120vw / 1280 * 100) 0;
    }
}
@media screen and (max-width: 767px) {
    .lineup{
        padding: calc(80vw / 375 * 100) 0;
    }
}
.lineup_ttl{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    margin-bottom: 80px;
}
@media screen and (max-width: 1280px){
    .lineup_ttl{
        gap: calc(50vw / 1280 * 100);
        margin-bottom: calc(80vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .lineup_ttl{
        gap: calc(20vw / 375 * 100);
        margin-bottom: calc(60vw / 375 * 100);
    }
}
.lineup_ttl > h2{
    display: flex;
    width: fit-content;
    height: 56px;
}
@media screen and (max-width: 1280px){
    .lineup_ttl > h2{
        height: calc(56vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .lineup_ttl > h2{
        height: calc(26vw / 375 * 100);
    }
}
.lineup_ttl > p{
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 39.6px */
}
@media screen and (max-width: 1280px){
    .lineup_ttl > p{
        font-size: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .lineup_ttl > p{
        font-size: calc(15vw / 375 * 100);
    }
}
.sku_box{
    display: flex;
    justify-content: space-between;
    width: 1220px;
    margin: 0 auto 120px;
}
.sku_box:nth-child(2n-1){
    flex-direction: row-reverse;
}
.sku_box05{
    margin-bottom: 0px;
}
@media screen and (max-width: 1280px){
    .sku_box{
        width: calc(1100vw / 1280 * 100);
        margin: 0 auto calc(120vw / 1280 * 100);
    }
    .sku_box05{
        margin-bottom: 0px;
    }
}
@media screen and (max-width: 767px) {
    .sku_box{
        width: calc(335vw / 375 * 100);
        flex-direction: column;
        border-bottom: solid 1px rgba(255, 255, 255, 0.3);
        padding-bottom: calc(50vw / 375 * 100);
        margin-bottom: calc(50vw / 375 * 100);
    }
    .sku_box:nth-child(2n-1){
        flex-direction: column;
    }
    .sku_box05{
        border-bottom: none;
        margin-bottom: 0px;
    }
}

.sku_box_img{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* sku_setting */
.sku_box01 .sku_box_img > span{
    display: flex;
    width: 460px;
    margin-left: 100px;
}
@media screen and (max-width: 1280px){
    .sku_box01 .sku_box_img > span{
        width: calc(460vw / 1280 * 100);
        margin-left: calc(50vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box01 .sku_box_img > span{
        width: calc(230vw / 375 * 100);
        margin-left: calc(20vw / 375 * 100);
    }
}

.sku_box02 .sku_box_img > span{
    display: flex;
    width: 555.22px;
    margin-right: 60px;
}
@media screen and (max-width: 1280px){
    .sku_box02 .sku_box_img > span{
        width: calc(555.22vw / 1280 * 100);
        margin-right: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box02 .sku_box_img > span{
        width: calc(302.78vw / 375 * 100);
        margin-right: calc(10vw / 375 * 100);
    }
}

.sku_box03 .sku_box_img > span{
    display: flex;
    width: 486px;
    margin-left: 100px;
}
@media screen and (max-width: 1280px){
    .sku_box03 .sku_box_img > span{
        width: calc(486vw / 1280 * 100);
        margin-left: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box03 .sku_box_img > span{
        width: calc(237vw / 375 * 100);
        margin-left: 0px;
    }
}

.sku_box04 .sku_box_img > span{
    display: flex;
    width: 384px;
    margin-right: 160px;
}
@media screen and (max-width: 1280px){
    .sku_box04 .sku_box_img > span{
        width: calc(384vw / 1280 * 100);
        margin-right: calc(120vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box04 .sku_box_img > span{
        width: calc(219.39vw / 375 * 100);
        margin-right: 0px;
    }
}

.sku_box05 .sku_box_img > span{
    display: flex;
    width: 494px;
    margin-left: 100px;
}
@media screen and (max-width: 1280px){
    .sku_box05 .sku_box_img > span{
        width: calc(494vw / 1280 * 100);
        margin-left: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box05 .sku_box_img > span{
        width: calc(312vw / 375 * 100);
        margin-left: 0px;
    }
}
/* sku_setting till here*/

.sku_bg{
    position: absolute;
    mix-blend-mode: lighten;
    z-index: -1;
    transform:translate3d(0,0,0); /* safari hack */
}
/* bg_setting */
.sku_box01 .sku_bg{
    width: 864px;
    left: -210px;
    top: -50px;
}
@media screen and (max-width: 1280px){
    .sku_box01 .sku_bg{
        width: calc(864vw / 1280 * 100);
        left: calc(-210vw / 1280 * 100);
        top: calc(-50vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box01 .sku_bg{
        width: calc(444vw / 375 * 100);
        left: calc(-20vw / 375 * 100);
        top: calc(-50vw / 375 * 100);
    }
}

.sku_box02 .sku_bg{
    width: 842px;
    right: -210px;
    top: -50px;
}
@media screen and (max-width: 1280px){
    .sku_box02 .sku_bg{
        width: calc(842vw / 1280 * 100);
        right: calc(-210vw / 1280 * 100);
        top: calc(-50vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box02 .sku_bg{
        width: calc(460vw / 375 * 100);
        left: calc(-20vw / 375 * 100);
        top: calc(-50vw / 375 * 100);
    }
}

.sku_box03 .sku_bg{
    width: 889px;
    right: -10px;
    top: 0px;
}
@media screen and (max-width: 1280px){
    .sku_box03 .sku_bg{
        width: calc(889vw / 1280 * 100);
        right: calc(-10vw / 1280 * 100);
        top: calc(-0vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box03 .sku_bg{
        width: calc(499.19vw / 375 * 100);
        left: calc(-80vw / 375 * 100);
        top: calc(-50vw / 375 * 100);
    }
}

.sku_box04 .sku_bg{
    width: 946px;
    right: -90px;
    top: -170px;
}
@media screen and (max-width: 1280px){
    .sku_box04 .sku_bg{
        width: calc(946vw / 1280 * 100);
        right: calc(-90vw / 1280 * 100);
        top: calc(-170vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box04 .sku_bg{
        width: calc(538vw / 375 * 100);
        left: calc(-180vw / 375 * 100);
        top: calc(-100vw / 375 * 100);
    }
}

.sku_box05 .sku_bg{
    width: 903px;
    right: -90px;
    top: -170px;
}
@media screen and (max-width: 1280px){
    .sku_box05 .sku_bg{
        width: calc(903vw / 1280 * 100);
        right: calc(-90vw / 1280 * 100);
        top: calc(-170vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box05 .sku_bg{
        width: calc(521vw / 375 * 100);
        left: calc(-180vw / 375 * 100);
        top: calc(-100vw / 375 * 100);
    }
}
/* bg_setting till here*/

.sku_box_txt{
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 100px;
    z-index: 1;
}
@media screen and (max-width: 1280px){
    .sku_box_txt{
        width: calc(500vw / 1280 * 100);
        padding-bottom: calc(100vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt{
        width: 100%;
        padding-bottom: 0px;
        align-items: center;
    }
}
.sku_box_txt_ttl{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}
@media screen and (max-width: 1280px){
    .sku_box_txt_ttl{
        gap: calc(10vw / 1280 * 100);
        margin-bottom: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt_ttl{
        gap: calc(10vw / 375 * 100);
        margin-bottom: calc(30vw / 375 * 100);
    }
}
.sku_box_txt_ttl.sp{
    display: none;
}
@media screen and (max-width: 767px) {
    .sku_box_txt_ttl.sp{
        display: flex;
        align-items: center;
    }
    .sku_box_txt_ttl.pc{
        display: none;
    }
}
.sku_box_txt_ttl > h3{
    display: flex;
    height: 38px;
    width: fit-content;
    justify-content: flex-start;
    align-items: flex-start;
}
.sku_box_txt_ttl > h3.liquid{
    height: 46.85px;
}
.sku_box_txt_ttl > h3 > img{
    max-height: 100%;
    width: auto;
}
@media screen and (max-width: 1280px){
    .sku_box_txt_ttl > h3{
        height: calc(38vw / 1280 * 100);
    }
    .sku_box_txt_ttl > h3.liquid{
        height: calc(46.85vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt_ttl > h3{
        height: calc(20vw / 375 * 100);
    }
    .sku_box_txt_ttl > h3.liquid{
        height: calc(25.4vw / 375 * 100);
    }
}
.sku_box_txt_ttl > h4{
    color: #FFF;
    font-size: 22.5px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 37.125px */
}
@media screen and (max-width: 1280px){
    .sku_box_txt_ttl > h4{
        font-size: calc(22.5vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt_ttl > h4{
        font-size: calc(16vw / 375 * 100);
    }
}
.sku_box_txt .info{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
}
@media screen and (max-width: 1280px){
    .sku_box_txt .info{
        gap: calc(20vw / 1280 * 100);
        margin-bottom: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt .info{
        gap: calc(20vw / 375 * 100);
        margin-bottom: calc(20vw / 375 * 100);
    }
}
.sku_box_txt .info01{
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 39.6px */
}
@media screen and (max-width: 1280px){
    .sku_box_txt .info01{
        font-size: calc(22vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt .info01{
        font-size: calc(16vw / 375 * 100);
        text-align: center;
        margin-top: calc(-30vw / 375 * 100);
    }
}
.sku_box_txt .info02,.sku_box_txt .info02 a{
    color: #F5C071;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 165%; /* 29.7px */
}
@media screen and (max-width: 1280px){
    .sku_box_txt .info02,.sku_box_txt .info02 a{
        font-size: calc(16vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt .info02,.sku_box_txt .info02 a{
        font-size: calc(13vw / 375 * 100);
        text-align: center;
    }
}
.sku_box_txt .info02 a{
    text-decoration: underline;
}
.sku_box_txt .spec{
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 165%; /* 23.1px */
}
@media screen and (max-width: 1280px){
    .sku_box_txt .spec{
        font-size: calc(14vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_box_txt .spec{
        font-size: calc(12vw / 375 * 100);
        text-align: center;
    }
}

.sku_link{
    background: #000;
    width: 740px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 80px;
}
@media screen and (max-width: 1280px){
    .sku_link{
        width: calc(740vw / 1280 * 100);
        padding: calc(60vw / 1280 * 100) calc(80vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_link{
        flex-direction: column;
        width: calc(335vw / 375 * 100);
        padding: calc(40vw / 375 * 100) 0;
        gap: calc(25vw / 375 * 100);
    }
}
.sku_link_01{
    display: flex;
    gap: 15px;
    flex-direction: column;
}
@media screen and (max-width: 1280px){
    .sku_link_01{
        gap: calc(15vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_link_01{
        justify-content: center;
        align-items: center;
        gap: calc(10vw / 375 * 100);
    }
}
.sku_link_01 span{
    display: flex;
    height: 23.52px;
}
@media screen and (max-width: 1280px){
    .sku_link_01 span{
        height: calc(23.52vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_link_01 span{
        height: calc(15vw / 375 * 100);
    }
}
.sku_link_01 > p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 450;
    line-height: 100%; /* 33px */
}
@media screen and (max-width: 1280px){
    .sku_link_01 > p{
        font-size: calc(18vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_link_01 > p{
        font-size: calc(14vw / 375 * 100);
    }
}
.sku_link_02 p{
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 165%; /* 23.1px */
}
@media screen and (max-width: 1280px){
    .sku_link_02 p{
        font-size: calc(14vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sku_link_02 p{
        font-size: calc(14vw / 375 * 100);
        text-align: center;
    }
}
.lineup_info{
    color: #FFF;
    text-align: center;
    font-family: "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 165%; /* 23.1px */
    margin-top: 60px;
}
@media screen and (max-width: 1280px){
    .lineup_info{
        margin-top: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .lineup_info{
        font-size: 12px;
        margin-top: calc(30vw / 375 * 100);
    }
}
.lineup_info_upper{
    margin: 0 auto 100px;
}
@media screen and (max-width: 1280px){
    .lineup_info_upper{
        margin: 0 auto calc(100vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .lineup_info_upper{
        margin: 0 auto calc(50vw / 375 * 100);
    }
}

/* purchase */
.purchase{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
    padding: 120px 0;
    overflow: hidden;
}
@media screen and (max-width: 1280px){
    .purchase{
        padding: calc(120vw / 1280 * 100) 0;
    }
}
@media screen and (max-width: 767px) {
    .purchase{
        padding: calc(80vw / 375 * 100) 0;
    }
}
.purchase_bg{
    position: absolute;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.purchase_bg > video{
    width: 100%;
}
@media screen and (max-width: 767px) {
    .purchase_bg > video{
        width: 150%;
    }
}
.purchase_ttl{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 60px;
    z-index: 1;
}
@media screen and (max-width: 1280px){
    .purchase_ttl{
        gap: calc(30vw / 1280 * 100);
        margin-bottom: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .purchase_ttl{
        gap: calc(15vw / 375 * 100);
        margin-bottom: calc(40vw / 375 * 100);
    }
}
.purchase_ttl > h2{
    display: flex;
    width: fit-content;
    height: 46px;
}
@media screen and (max-width: 1280px){
    .purchase_ttl > h2{
        height: calc(46vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .purchase_ttl > h2,.purchase_ttl > h2 img{
        height: calc(73.22vw / 375 * 100);
    }
}
.purchase_ttl > p{
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 39.6px */
}
@media screen and (max-width: 1280px){
    .purchase_ttl > p{
        font-size: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .purchase_ttl > p{
        font-size: calc(16vw / 375 * 100);
    }
}
.sec_inner.flow_sec{
    z-index: 1;
    display: flex;
    gap: 25px;
    flex-direction: column;
    width: 1100px;
    margin-bottom: 60px;
}
@media screen and (max-width: 1280px){
    .sec_inner.flow_sec{
        gap: calc(25vw / 1280 * 100);
        width: calc(1100vw / 1280 * 100);
        margin-bottom: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sec_inner.flow_sec{
        gap: calc(20vw / 375 * 100);
        width: calc(335vw / 375 * 100);
        margin-bottom: calc(30vw / 375 * 100);
    }
}
.flow{
    background: linear-gradient(258deg, #101010 -0.47%, #1D1D1D 99.93%);
    padding: 50px 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
@media screen and (max-width: 1280px){
    .flow{
        padding: calc(50vw / 1280 * 100) calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow{
        padding: calc(30vw / 375 * 100);
        flex-direction: column;
        gap: calc(10vw / 375 * 100);
    }
}
.flow_ttl{
    width: 280px;
}
@media screen and (max-width: 1280px){
    .flow_ttl{
        width: calc(280vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow_ttl{
        width: 100%;
    }
}
.flow_ttl h3{
    color: #FFF;
    font-size: 26px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 42.9px */
}
@media screen and (max-width: 1280px){
    .flow_ttl h3{
        font-size: calc(26vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow_ttl h3{
        font-size: calc(18vw / 375 * 100);
    }
}
.flow_txt{
    width: 700px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
@media screen and (max-width: 1280px){
    .flow_txt{
        width: calc(700vw / 1280 * 100);
        gap: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow_txt{
        width: 100%;
        gap: calc(10vw / 375 * 100);
    }
}
.flow_txt p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 165%; /* 29.7px */
}
@media screen and (max-width: 1280px){
    .flow_txt p{
        font-size: calc(18vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow_txt p{
        font-size: calc(14vw / 375 * 100);
    }
}
.flow_txt ul{
    margin-top: 5px;
    padding-left: 20px;
}
@media screen and (max-width: 1280px){
    .flow_txt ul{
        margin-top: calc(5vw / 1280 * 100);
        padding-left: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow_txt ul{
        margin-top: calc(5vw / 375 * 100);
        padding-left: calc(20vw / 375 * 100);
    }
}
.flow_txt li{
    list-style-type: disc;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 165%; /* 23.1px */
}
@media screen and (max-width: 1280px){
    .flow_txt li{
        font-size: calc(14vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .flow_txt li{
        font-size: calc(13vw / 375 * 100);
    }
}
.cta{
    padding: 23px 0;
    width: 500px;
    z-index: 1;
    border-radius: 60px;
    background: linear-gradient(271deg, #37104A 2.85%, #8225B0 97.46%);
    transition: all .4s cubic-bezier(.36,.67,.47,.87);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    overflow: hidden;
}
@media screen and (max-width: 1280px){
    .cta{
        padding: calc(23vw / 1280 * 100) 0;
        width: calc(500vw / 1280 * 100);
        gap: calc(10vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .cta{
        padding: calc(16vw / 375 * 100) 0;
        width: calc(335vw / 375 * 100);
        gap: calc(10vw / 375 * 100);
    }
}
.cta:hover{
    opacity: 1;
}
.cta::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(271deg, #722598 2.85%, #B766E0 56.07%, #9F3ED0 97.46%);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.36,.67,.47,.87);
}
.cta:hover::after{
    opacity: 1;
}
.cta > .icon_data{
    display: flex;
    width: 30px;
}
@media screen and (max-width: 1280px){
    .cta > .icon_data{
        width: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .cta > .icon_data{
        width: calc(24vw / 375 * 100);
    }
}
.cta > p{
    color: #FFF;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 165%; /* 36.3px */
}
@media screen and (max-width: 1280px){
    .cta > p{
        font-size: calc(22vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .cta > p{
        font-size: calc(16vw / 375 * 100);
    }
}
.cta > .arrow{
    display: flex;
    width: 15px;
    position: absolute;
    right: 30px;
}
@media screen and (max-width: 1280px){
    .cta > .arrow{
        width: calc(15vw / 1280 * 100);
        right: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .cta > .arrow{
        width: calc(15vw / 375 * 100);
        right: calc(30vw / 375 * 100);
    }
}
.cta > .arrow img{
    transform: translate(0px, 0px);
    transition: .4s cubic-bezier(.36,.67,.47,.87);
}
.cta:hover > .arrow img{
    transform: translate(10px, 0px);
}
@media screen and (max-width: 1280px){
    .cta:hover > .arrow img{
        transform: translate(calc(10vw / 1280 * 100), 0px);
    }
}
@media screen and (max-width: 767px) {
    .cta:hover > .arrow img{
        transform: translate(calc(10vw / 375 * 100), 0px);
    }
}
/* modal */
.modal_open,.modal_close{
    transition: all .4s cubic-bezier(.36,.67,.47,.87);
    cursor: pointer;
}
.modal_close:hover{
    opacity: 0.6;
}
.modal{
    opacity: 0;
    z-index: -1;
    transition: all .4s cubic-bezier(.36,.67,.47,.87);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal.modal_show{
    opacity: 1;
    z-index: 9999;
}
.modal_bg{
    background: rgba(0, 0, 0, 0.85);
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
}
.modal_bg:hover{
    opacity: 1 !important;
}
.modal_close_btn{
    display: flex;
    width: 60px;
    height: 60px;
    position: absolute;
    cursor: pointer;
    right: 20px;
    top: 20px;
    z-index: 1;
}
@media screen and (max-width: 1280px) {
    .modal_close_btn{
        width: calc(60vw / 1280 * 100);
        height: calc(60vw / 1280 * 100);
        right: calc(20vw / 1280 * 100);
        top: calc(20vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_close_btn{
        width: calc(30vw / 375 * 100);
        height: calc(30vw / 375 * 100);
        right: calc(20vw / 375 * 100);
        top: calc(20vw / 375 * 100);
    }
}
.modal_box{
    z-index: 1;
    width: calc(100% - 200px);
    margin: 0 auto;
    display: flex;
}
@media screen and (max-width: 1280px) {
    .modal_box{
        width: calc(100% - calc(200vw / 1280 * 100));
    }
}
@media screen and (max-width: 767px) {
    .modal_box{
        width: calc(335vw / 375 * 100);
        margin-top: calc(40vw / 375 * 100);
    }
}
.modal_inner{
    background: linear-gradient(258deg, #101010 -0.47%, #1B1B1B 99.93%);
    width: 100%;
    max-height: calc(100vh - 320px);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 60px;
}
@media screen and (max-width: 1280px) {
    .modal_inner{
        max-height: calc(100vh - calc(320vw / 1280 * 100));
        padding: calc(60vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_inner{
        max-height: calc(100vh - calc(140vw / 375 * 100));
        padding: calc(20vw / 375 * 100);
    }
}

.modal_inner::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.modal_inner::-webkit-scrollbar-thumb {
    background: #D9D9D9;
}
.modal_inner::-webkit-scrollbar-track {
    background: #000000;
}
.modal_ttl01{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #FFF;
    padding-bottom: 6px;
    margin-bottom: 15px;
}
@media screen and (max-width: 1280px) {
    .modal_ttl01{
        padding-bottom: calc(6vw / 1280 * 100);
        margin-bottom: calc(15vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_ttl01{
        padding-bottom: calc(6vw / 375 * 100);
        margin-bottom: calc(15vw / 375 * 100);
    }
}
.modal_ttl01 > p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 29.7px */
}
@media screen and (max-width: 1280px) {
    .modal_ttl01 > p{
        font-size: calc(18vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_ttl01 > p{
        font-size: calc(15vw / 375 * 100);
    }
}
.modal_ttl02{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 40px;
}
@media screen and (max-width: 1280px) {
    .modal_ttl02{
        gap: calc(5vw / 1280 * 100);
        margin-bottom: calc(40vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_ttl02{
        gap: calc(5vw / 375 * 100);
        margin-bottom: calc(20vw / 375 * 100);
    }
}
.modal_ttl02 > h3{
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 39.6px */
}
@media screen and (max-width: 1280px) {
    .modal_ttl02 > h3{
        font-size: calc(24vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_ttl02 > h3{
        font-size: calc(18vw / 375 * 100);
    }
}
.modal_ttl02 > .ttl_sub{
    color: #FFF;
    font-size: 13px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 39.6px */
}
@media screen and (max-width: 1280px) {
    .modal_ttl02 > .ttl_sub{
        font-size: calc(13vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_ttl02 > .ttl_sub{
        font-size: calc(12vw / 375 * 100);
    }
}
.modal_sec{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}
@media screen and (max-width: 1280px) {
    .modal_sec{
        gap: calc(40vw / 1280 * 100);
        margin-bottom: calc(40vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_sec{
        gap: calc(20vw / 375 * 100);
        margin-bottom: calc(20vw / 375 * 100);
        flex-direction: column-reverse;
    }
}
.modal_txt{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media screen and (max-width: 1280px) {
    .modal_txt{
        gap: calc(10vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_txt{
        gap: calc(10vw / 375 * 100);
    }
}
.modal_txt p{
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 185%; /* 27.75px */
}
@media screen and (max-width: 1280px) {
    .modal_txt p{
        font-size: calc(15vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_txt p{
        font-size: calc(13vw / 375 * 100);
    }
}
.modal_txt p.small{
    font-size: 12px;
}
@media screen and (max-width: 1280px) {
    .modal_txt p.small{
        font-size: calc(12vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_txt p.small{
        font-size: calc(11vw / 375 * 100);
    }
}
.modal_img{
    display: flex;
    width: 100%;
}
.modal_sec02{
    flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
    .modal_sec02{
        flex-direction: column-reverse;
    }
}


/* commmon */
.sec_inner{
    width: 1220px;
    margin: 0 auto;
}
@media screen and (max-width: 1280px){
    .sec_inner{
        width: calc(1100vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sec_inner{
        width: calc(335vw / 375 * 100);
    }
}
.sec_02_ttl{
    width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 160px 0 80px;
}
@media screen and (max-width: 1280px){
    .sec_02_ttl{
        width: calc(1100vw / 1280 * 100);
        padding: calc(160vw / 1280 * 100) 0 calc(80vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sec_02_ttl{
        padding: calc(80vw / 375 * 100) 0 calc(40vw / 375 * 100);
        flex-direction: column;
        width: calc(335vw / 375 * 100);
        align-items: flex-start;
        gap: calc(10vw / 375 * 100);
    }
}
.sec_02_ttl > h2{
    display: flex;
    height: 56px;
}
@media screen and (max-width: 1280px){
    .sec_02_ttl > h2{
        height: calc(56vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sec_02_ttl > h2{
        height: calc(28vw / 375 * 100);
    }
    .science .sec_02_ttl > h2{
        height: calc(73vw / 375 * 100);
    }
    .sec_02_ttl > h2 img{
        height: calc(73vw / 375 * 100);
        width: auto;
        height: 100%;
    }
}
.sec_02_ttl > p{
    color: #FFF;
    text-align: right;
    font-size: 32px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 52.8px */
}
@media screen and (max-width: 1280px){
    .sec_02_ttl > p{
        font-size: calc(32vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .sec_02_ttl > p{
        font-size: calc(18vw / 375 * 100);
    }
}
.arrow_link{
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    border: solid 1px #fff;
    border-radius: 100px;
    padding: 10px 10px 10px 20px;
    flex-direction: row-reverse;
    transition: .4s cubic-bezier(.36,.67,.47,.87);
}
.arrow_link.sp{
    display: none;
}
@media screen and (max-width: 1280px){
    .arrow_link{
        gap: calc(5vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .arrow_link.sp,.arrow_link{
        gap: calc(13vw / 375 * 100);
        display: flex;
    }
    .arrow_link.pc{
        display: none;
    }
}
.arrow_link:hover{
    opacity: 1;
}
.arrow_link > span{
    display: flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    transition: .4s cubic-bezier(.36,.67,.47,.87);
    position: relative;
}
@media screen and (max-width: 1280px){
    .arrow_link > span{
        width: calc(25vw / 1280 * 100);
        height: calc(25vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .arrow_link > span{
        width: calc(15vw / 375 * 100);
        height: calc(15vw / 375 * 100);
    }
}
.arrow_link:hover{
    background: #fff;
}
.arrow_link_pp{
    border: none;
    background: linear-gradient(271deg, #37104A 2.85%, #8225B0 97.46%);
    overflow: hidden;
    position: relative;
    transition: all .4s cubic-bezier(.36,.67,.47,.87);
    z-index: 1;
    padding: 15px 20px 15px 35px;
}
@media screen and (max-width: 1280px){
    .arrow_link_pp{
        padding: calc(15vw / 1280 * 100) calc(20vw / 1280 * 100) calc(15vw / 1280 * 100) calc(35vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .arrow_link_pp{
        padding: calc(12vw / 375 * 100) calc(16vw / 375 * 100) calc(12vw / 375 * 100) calc(26vw / 375 * 100);
    }
}
.arrow_link_pp:hover{
    opacity: 1;
    background: linear-gradient(271deg, #37104A 2.85%, #8225B0 97.46%);
}
.arrow_link_pp::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(271deg, #722598 2.85%, #B766E0 56.07%, #9F3ED0 97.46%);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.36,.67,.47,.87);
}
.arrow_link_pp:hover::after{
    opacity: 1;
}
.arrow_link > span img{
    width: 15.75px;
    transition: .4s cubic-bezier(.36,.67,.47,.87);
    transform: translate(0px, 0px);
    position: absolute;
}
@media screen and (max-width: 1280px){
    .arrow_link > span img{
        width: calc(15.75vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .arrow_link > span img{
        width: calc(12vw / 375 * 100);
    }
}
.arrow_link > span img.bk{
   opacity: 0;
}
.arrow_link:hover > span img{
    transform: translate(5px, 0px);
}
@media screen and (max-width: 1280px){
    .arrow_link:hover > span img{
        transform: translate(calc(5vw / 1280 * 100), 0px);
    }
}
@media screen and (max-width: 767px) {
    .arrow_link:hover > span img{
        transform: translate(calc(5vw / 375 * 100), 0px);
    }
}
.modal_inner_close_btn{
    margin: 0 auto;
}
.modal_inner_close_btn:hover > span img{
    transform: translate(0px, 0px);
}
.arrow_link:hover > span img.bk{
    opacity: 1;
}
.arrow_link:hover > span img.w{
    opacity: 0;
}
.arrow_link_pp:hover > span img.bk{
    opacity: 0;
}
.arrow_link_pp:hover > span img.w{
    opacity: 1;
}
.arrow_link > p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 450;
    line-height: 165%; /* 29.7px */
    transition: .4s cubic-bezier(.36,.67,.47,.87);
}
.arrow_link:hover > p{
    color: #000;
}
.arrow_link_pp:hover > p{
    color: #fff;
}
@media screen and (max-width: 1280px){
    .arrow_link > p{
        font-size: calc(18vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .arrow_link > p{
        font-size: calc(15vw / 375 * 100);
    }
}
.arrow_link:hover > p{
    opacity: 0.6;
}
/* spmenu */
.sp_menu_btn{
    background: linear-gradient(271deg, rgba(55, 16, 74, 0.70) 0%, rgba(130, 37, 176, 0.70) 100%);
    display: flex;
    width: 54px;
    align-items: center;
    justify-content: center;
    height: 54px;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 10;
}
@media screen and (min-width: 768px){
    .sp_menu_btn{
        display: none;
    }
}
.sp_menu_btn img{
    width: 40%;
}
.sp_menu_modal{
    opacity: 0;
    z-index: -1;
    position: fixed;
    transition: all .2s;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp_menu_modal.subnav_show{
    opacity: 1;
    z-index: 9999;
}
.sp_menu_modal_inner{
    width: calc(335vw / 375*100);
}
.sp_menu_modal_bg{
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: -1;
}
.sp_menu_modal_close{
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    width: 30px;
}
.sp_menu_modal_inner ul{
    display: flex;
    gap: 20px;
    flex-direction: column;
    margin-bottom: 30px;
}
.sp_menu_modal_inner li{
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    padding-bottom: 8px;
}
.sp_menu_modal_inner li a{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sp_menu_modal_inner li a > span{
    display: flex;
    height: calc(15vw / 375*100);
}
.sp_menu_modal_inner li a > p{
    color: #FFF;
    text-align: right;
    font-size: calc(12vw / 375*100);
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 21px */
}
.lineup_footer_link{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
@media screen and (max-width: 1280px){
    .lineup_footer_link{
        gap: calc(20vw / 1280 * 100);
        margin-top: calc(40vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .lineup_footer_link{
        gap: calc(20vw / 375 * 100);
        margin-top: calc(20vw / 375 * 100);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
.modal_shiyou_wrapper{
    width: auto;
}
.modal_shiyou{
    width: auto;
    margin: 0 auto;
}
.modal_shiyou > img.shiyou{
    width: 280px;
    margin-bottom: 30px;
}
@media screen and (max-width: 1280px){
    .modal_shiyou > img.shiyou{
        width: calc(280vw / 1280 * 100);
        margin-bottom: calc(30vw / 1280 * 100);
    }
}
@media screen and (max-width: 767px) {
    .modal_shiyou > img.shiyou{
        width: calc(240vw / 375 * 100);
        margin-bottom: calc(30vw / 375 * 100);
    }
}
.footer_icon{
    display: flex;
    width: 200px;
    margin: 100px auto 0;
    z-index: 1;
}
.footer_icon .pc{
    display: flex;
}
.footer_icon .sp{
    display: none;
}
@media screen and (max-width: 767px) {
    .footer_icon{
        width: 160px;
        margin: 60px auto 0;
    }
    .footer_icon .pc{
        display: none;
    }
    .footer_icon .sp{
        display: flex;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    ruby > rt {
        margin-bottom: -0.5em;
    }
}
/* Safari */
_::-webkit-full-page-media, _:future, :root ruby > rt {
    margin-bottom: -0.5em;
}