/* ==================================================
    tas2025vr.css for Tokyo Auto Salon 2025
    
    Date Created:  2025-01-06
    Last Modified: 2024-01-10
    Developed by:  Miyazaki System Design Co.
    
    Description:
    This CSS file contains all styles for the 
    Tokyo Auto Salon 2025 website. Please 
    ensure proper maintenance and updates.
================================================== */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ********************************************
    Vriables
******************************************** */
:root{
    /* Base Font Size 1.0rem = 10px */
    font-size: 10px;

    --h1: clamp(2.8rem, calc(100vw / (460 / 32)), 3.8rem);
    --h2: clamp(2.0rem, calc(100vw / (460 / 28)), 3.0rem);
    --h3: clamp(1.8rem, calc(100vw / (460 / 20)), 2.4rem);
    --h4: clamp(1.4rem, calc(100vw / (460 / 16)), 1.8rem);
    --h5: clamp(1.0rem, calc(100vw / (460 / 12)), 1.4rem);
    --h6: clamp(0.8rem, calc(100vw / (460 / 10)), 1.2rem);

    --fsz-p-l : clamp(2.8rem, calc(100vw / (460 / 32)), 3.8rem);
    --fsz-p-m : clamp(2.2rem, calc(100vw / (460 / 26)), 3.0rem);
    --fsz-p-r : clamp(1.8rem, calc(100vw / (460 / 20)), 2.4rem);
    --fsz-p   : clamp(1.4rem, calc(100vw / (460 / 16)), 1.8rem);
    --fsz-p-s : clamp(1.0rem, calc(100vw / (460 / 12)), 1.4rem);
    --fsz-p-ss: clamp(0.8rem, calc(100vw / (460 / 10)), 1.2rem);

    /* Base color */
    /* --bg-color: #ffefaa; */
    --bg-color: #fff;
    --font-color: #333;

}



/* ~~~~~~~~~~~~~ for tablet & pc ~~~~~~~~~~~~~ */
@media screen and (min-width: 768px){
    :root{
        /* Base Font Size 1.0rem = 12px */
        font-size: 12px;
    }
}
@media screen and (max-width: 424px){
    :root{
        /* Base Font Size 1.0rem = 10px */
        font-size: 10px;
    }
}

/* ==================================================
    Reset 
================================================== */

*,
*::before,
*::after{
    box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, ol, ul, li, dl, dt, dd,
div, section, article, aside, 
header, main, footer, nav,
img, figure, figcaption,
table, tr, th, td{
    margin: 0;
    padding: 0;
    line-height: 1;
}
a{
    text-decoration: underline;
    color: #00f;
}
ul, ol{
    padding-left: 1.5em
}
/* 画像の時は必ず.img-outer（親BOX）で、サイズや位置を調整する */
img{
    width: 100%;
}

/* ==================================================
    Defalt Font Size
================================================== */
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

p.fsz-pl  { font-size: var(--fsz-p-l); }
p.fsz-pm  { font-size: var(--fsz-p-m); }
p.fsz-pr  { font-size: var(--fsz-p-r); }
p.fsz-p   { font-size: var(--fsz-p-p); }
p.fsz-ps  { font-size: var(--fsz-p-s); }
p.fsz-pss { font-size: var(--fsz-p-ss);}

p, li, th, td,
label, input, textarea, select, option,
.lead,
.chatch{
    font-size: var(--fsz-p);
}
figcaption,
.caption,
.copyright{
    font-size: var(--fsz-p-s);
}

/* for test */
aside{
    text-align: center;
}

.hidden{
    display: none !important;
}

/* ==================================================
    Basic Layout
================================================== */
body{
    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.wrapper{
    width: 100%;
}

body.mm-index .header{
    display: none;
}
.main{

}
.footer{
    background: #000;
    color: #fff;
    padding: 3em 0;
}

/* inner */
.inner{
    /* max-width: 640px; */
    margin: 0 auto;
    padding: 0;
    /* border: 1px solid #eee; */
}
.header-inner{
    
}
.main-inner{
    /* padding: 1em; */
    min-height: 80vh ;
}
.footer-inner{
    border: none;
}
@media screen and (min-width: 768px){
    .inner{
        max-width: 1920px;

    }
    .header-inner{
    
    }
    .main-inner{
        
    }
    .footer-inner{
        
    }
    
}
/* ~~~~~~~~~~~~~ for tablet & pc ~~~~~~~~~~~~~ */

/* @media screen and (min-width: 640px){
    .wrapper{
        max-width: 768px;
        margin: 0 auto;
        border: 1px solid #fff;
    }
    
} */

/* ==================================================
    Common Parts Layout & tools
================================================== */


.noto-sans-jp-bold {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* header */
.header-logo-nav{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* justify-content: space-between; */
    justify-content: left;
    align-items: center;
    text-align: center;
}
.header-logo-wrap{
    width: 100%;
    background: #000;
    padding: 1em 0;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-size: var(--fsz-p);
}
.header-logo-wrap img{
    width: 30%;
    max-width: 150px;
    margin: 0 auto;
}
.nav-menu{
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 2px;
    font-size: smaller;
    margin-left: 10px;
}
.nav-menu-item{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--bg-color);
    padding: .6em 0 .6em .3em;
    width: 6em;
    height: 100%;
    transform: skew(-25deg);
    transform-origin: top left;
    border: 1px dotted #f55;
}

/* 追加 20251226 */
.menu-body{
    justify-content: center;
}
.menu-body .nav-menu-item1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: .6em 0 .6em .3em;
    width: 6em;
    height: 100%;
    transform: skew(-25deg);
    transform-origin: top left;
    border: 1px dotted #f55;
    background: #F00;
    color: #fff;
}
.menu-body .nav-menu-item:hover{
    opacity: .5;
}

.menu-body .nav-menu-item-link{
    color: #fff;
}
/* ここまで */

.nav-menu-item-link{
    display: block;
    text-decoration: none;
    color: var(--font-color);
    transform: skew(25deg);
}
.nav-menu-item.active,
.nav-menu-item:hover{
    background: #f00;
}

.nav-menu-item.active .nav-menu-item-link,
.nav-menu-item:hover  .nav-menu-item-link{
    color: #fff;
}
.nav-menu-item.disable{
    opacity: .3;
}
.nav-menu-item.disable:hover{
    background: #fff;
    opacity: .3 !important;
}
.nav-menu-item.disable:hover .nav-menu-item-link{
    color: rgb(51, 51, 51);
}

.menu-jp{
    font-size: var(--fsz-p-s);
}
.menu-hall{
    font-size: var(--fsz-p-ss);
    padding-right: 1em;
}


@media screen and (min-width: 768px){
    .header-logo-nav{
        flex-direction: row;
    }
    .header-logo-wrap{
        width: 40%;
        max-width: 400px;
        min-height: 100%;
        background: #000;
        padding: .6em 0;
        flex: 1;
        justify-content: center;
        align-items: stretch;
        transform: skew(-25deg);
        transform-origin: top left;
    }
    .header-logo-wrap img{
        width: 100%;
        transform: skew(25deg);
        transform-origin: top left;
    }

}


/* footer */
.copy{
    text-align: center;
    font-size: var(--fsz-p-ss);
}

/* -------------------- row & column -------------------- */
.row{
    display: flex;
    flex-wrap: wrap;
}
.nowrap{
    flex-wrap: nowrap;
    justify-content: space-between;
}
.col-2{
    width: 49%;
}
.col-3{
    width: 33%;
}
.col-4{
    width: 24%;
}
/* -------------------- vartical-align -------------------- */
.vartical-middle{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------------- text-align -------------------- */
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}

/* -------------------- hide & show -------------------- */

.mm-index .disable {
    /* background: #530404 !important; */
    opacity: .5 !important;
}


.hide{
    display: none !important;
}
.show{
    display: block !important;
}
.show-fx{
    display: flex !important;
}
.sp-hide{
    display: none;
}
.sp-hide-inline{
    display: none;
}
.pc-hide{
    display: block;
}
.pc-hide-inline{
    display: inline;
}
/* ~~~~~~~~~~~~~ for tablet & pc ~~~~~~~~~~~~~ */
@media screen and (min-width: 768px){
    .sp-hide{
        display: block;
    }
    .sp-hide-inline{
        display: inline;
    }
    .pc-hide{
        display: none;
    }
    .pc-hide-inline{
        display: none;
    }

}


/* ================================================
    for index.html 
================================================ */
body.home{
    background: #000;
}

.home .header-inner{
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 2em;
}

.home .main-inner{
    min-height: initial;
}

.home .footer{
    border-top: 1px solid #fff;
}
.home .vr{
    margin: -3em 0 1em;
}
.home .vr-btn{
    display: block;
    font-size: var(--fsz-p);
    margin: 0 auto;
    padding: .5em;
    border: 1px solid #f00;
    background: #f00;
    color: #fff;
    text-align: center;
    border-radius: 1.5em;
    width: 100%;
    max-width: 350px;
    text-decoration: none;
    box-shadow: 
        2px 2px 3px #f00,
        2px -2px 3px #f00,
        -2px 2px 3px #f00,
        -2px -2px 3px #f00;
    z-index: 1;
    position: relative;
    }
.home .vr-btn.disabled{
    border: 1px solid #555;
    background: #555;
    box-shadow: none;
    opacity: .6;
}

.home .vr-btn .en{
    font-size: var(--fsz-p-s);
}
.home .vr .text p{
    line-height: 1.6;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
}

.home .booth-list,
.mm-index .booth-list{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0 1em;
    /* border: 1px solid #fff; */
    gap: 1em;
    margin: 0em auto 3em;
}
.home .booth-item,
.mm-index .booth-item{
    width: 30%;
}
.home .booth-item-img,
.mm-index .booth-item-img{
    margin: 0 auto 2em;
    border: 1px solid #555;
}
.home .booth-item .booth-text-link,
.mm-index .booth-item .booth-text-link{

    width: calc( 100% - 6px );
    max-width: initial;
    margin: 0 auto;
}

.home .text{
    color: #fff;
    padding: 2em;
}
.home .text h2{
    line-height: 1.3;
}
.home .text p{
    margin-top: 1em;
    line-height: 1.4;
}
/* ================================================
    for mm-index.html 
================================================ */
.mm-index main{
    background: #000;
}
/* 追加 20251226 */
.mm-index .individual-booth-head{
    margin-block: 2em;
}
.info-text.text{
    text-align: center;
    margin-top: 3em;
}
.info-text h2,
.mm-index .individual-booth.individual-booth-head h2{
    margin: 0 auto .5em;
}

.mm-index .individual-booth.individual-booth-head .text h2{
    margin-top: .5em;
}

.mm-index .individual-booth h2 .en{
    font-size: var(--fsz-p);
}

.info-text,
.mm-index .individual-booth-head .text{
    border: 1px solid #fff;
    border-radius: 1em;
    max-width: 800px;
    width: 95%;
    padding: 1.5em 1.5em 3em;
    margin: 1em auto 3em;
}
.info-text .text-center,
.mm-index .individual-booth-head .text-center{
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-size: clamp(1.6rem, calc(100vw / (480 / 16)), 1.7rem);;
}
.info-text .text-center a{
    color: #f00;
}
/* 追加ここまで */

.mm-index .individual-booth{
    padding-bottom: 3em;
}
.mm-index .individual-booth h2{
    margin: 1em auto .5em;
    text-align: center;
    font-size: var(--h2);
    color: #fff;
    font-weight: normal;
}
.mm-index .booth-item-img{
    display: block;
    margin-bottom: 2em;
}
.mm-index .booth-item-img img{
    line-height: 1;
    font-size: 0;
}
.mm-index .booth-item-img img:hover{
    cursor: pointer;
}

.mm-index .vr-space{
    width: 100%;
    max-width: 1920px;
    height: initial;
    min-height: initial;
    object-fit: contain;
}
.mm-index .select-navi-mes{
    padding: 1em;
    text-align: left;
    line-height: 1.3;
    font-size: var(--fsz-p-s);
}
.mm-index .footer{
    border-top: 1px solid #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

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

}

/* ================================================
    for mm-x.html 
================================================ */
.vr-space{
    width: 100%;
    max-width: 1920px;
    height: 65vh;
    min-height: 480px;
}

.booth{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fsz-p);
    /* gap: 1em; */
    padding-inline: 1em;
}
.booth-text-link{
    display: block;
    font-size: var(--fsz-p);
    margin: 1em;
    padding: .5em;
    border: 1px solid #f00;
    background: #f00;
    color: #fff;
    text-align: center;
    border-radius: 1.5em;
    width: 30%;
    max-width: 200px;
    text-decoration: none;
    box-shadow: 
        2px 2px 3px #f00,
        2px -2px 3px #f00,
        -2px 2px 3px #f00,
        -2px -2px 3px #f00;
}
.booth-text-link span{
    font-size: var(--fsz-p-s);
}
/* ================================================
    for boothxx.html 
================================================ */

.in-booth header{
    border-bottom: 1px solid #fff;
}
.in-booth .nav-menu{
    /* display: none; */
}