@charset "utf-8";

/*================================================================================================================
 * 定義
================================================================================================================*/
:root {
    /*色*/
    --primary-color: #000064;
    --on-primary-color: #fff;
    --secondary-color: #00ff00;
    --on-secondary-color: #000;
    --accent-color: #000064;
    --on-accent-color: #fff;
    --background-color: rgba(255, 255, 255, 0.5);

    /*文字サイズ*/
    --normal-fontsize: 1rem;
    --large-fontsize: 1.5rem;

    /*フォント*/
    --gothic-font: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック','Yu Gothic','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    --mincho-font: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','游明朝','Yu Mincho','游明朝体','YuMincho','ＭＳ Ｐ明朝','MS PMincho',serif;

    /*要素のサイズ*/
    --header-height: 3.75rem;
    --footer-height: 3rem;

    /*要素間の間隔*/
    --space-between-element: 3rem;

    /*ハンバーガーボタンの大きさ*/
    --humberger-size: 2.5rem;
}

/*================================================================================================================
 * 全体共通の項目
================================================================================================================*/
body {
    /*スクロールバー部分を加味した幅にする(スクロールバーの有無によるずれを防ぐため)*/
    width: calc(100vw - 15px);

    margin: 0;
    font-size: var(--normal-fontsize);
    font-family: var(--gothic-font);

    /*ホーム画面表示時のイベント用*/
    &:has(.page[pagename="home"][showpage="true"][titleshow="true"]) {
        position: fixed;
    }
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    font-size: var(--normal-fontsize);
}

a {
    text-decoration: none;
    color: #000;
}

.mobile_br {
    display: none;
}

.svg_symbol {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile_br {
        display: initial;
    }
}

/*================================================================================================================
 * ヘッダー
================================================================================================================*/
header {
    position: fixed;
    top: calc(var(--header-height) * (-1) - 2px);
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: top .3s ease-in-out;
    z-index: 100;
    /*background-color: rgba(30, 144, 225);*/
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: solid 2px #fff;
    

    &[headershow="true"] {
        top: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .maintitle {
        margin-left: 1rem;
        font-size: clamp(1rem, 6vw, 1.5rem);
        color: var(--primary-color);
        font-weight: bold;
    }
}

/*ハンバーガーメニュー*/
.humbergermenu_contentswraper {
    position: fixed;
    display: grid;
    grid-template-columns: 1fr;
    
    box-sizing: border-box;
    padding: 1rem;
    top: 10px;
    right: 10px;
    z-index: 50;
    width: var(--humberger-size);
    height: var(--humberger-size);
    background-color: var(--primary-color);
    border-radius: calc(var(--humberger-size) / 2);
    overflow: hidden;
    transition: .3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    opacity: 0;
    pointer-events: none;
    transition: .3s ease-in-out;
}

.humbergermenu_contbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--on-primary-color);
    font-size: 1.2rem;
    /*アニメーション用*/
    opacity: 0;
    transition: .3s ease-in-out;
    
    
    &:not(:last-child) {
        border-bottom: solid 1px var(--on-primary-color);
    }
}

/*ハンバーガーボタン*/
#humbergermenu_humbergerbutton {
    /*閉じているとき*/
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--humberger-size);
    height: var(--humberger-size);
    border-radius: var(--humberger-size);
    z-index: 999;
    background-color: var(--primary-color);
    opacity: 0;
    pointer-events: none;
    transition: .3s ease-in-out;

    span, span:before, span:after {
        content: '';
        position: absolute;
        display: block;
        height: calc(var(--humberger-size) * 0.05);
        width: calc(var(--humberger-size) * 0.416666);
        border-radius: calc(var(--humberger-size) * 0.05);
        background-color: var(--on-primary-color);
        transition: .3s ease-in-out;
    }
    span:before {
        bottom: calc(var(--humberger-size) * 0.133333);
    }
    span:after {
        top: calc(var(--humberger-size) * 0.133333);
    }
    
    /*表示状態*/
    &[hmbtnshow="true"] {
        opacity: 1;
        pointer-events: auto;

        & + .humbergermenu_contentswraper {
            opacity: 1;
            pointer-events: auto;
        }
    }
    
    
    /*開いているとき*/
    &[menuopen="true"] {
        span {
            background-color: rgba(255, 255, 255, 0);
        }
        span:before {
            bottom: 0;
            transform: rotate(45deg);
        }
        span:after {
            top: 0;
            transform: rotate(-45deg);
        }

        & + .humbergermenu_contentswraper {
            width: min(calc(100% - 20px), 20rem);
            height: min(calc(100% - 20px), 20rem);

            .humbergermenu_contbtn {
                opacity: 1;
            }
        }
    }
}

body:has(button[menuopen="true"]) .page_background_cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 90;
    background-color: transparent;
}

/*================================================================================================================
 * フッター
================================================================================================================*/
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: calc(100% - 2rem);
    margin-top: var(--space-between-element);
}

/*================================================================================================================
 * ページ背景
================================================================================================================*/
.page_background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.page_background_img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: 0 0;
}

/*================================================================================================================
 * ページ全体
================================================================================================================*/
.page {
    display: flex;
    flex-direction: column;
    gap: var(--space-between-element);
    overflow: hidden;
    transition: opacity .3s ease-in-out;
}

/*================================================================================================================
 * ホーム画面
================================================================================================================*/
/*--------------------------------------------------------------------------------------------------------------*/
/*タイトル部分*/
.home_title_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    padding: 1rem;
}
.home_title_text {
    display: flex;
    flex-direction: column;
    font-size: min(9vw, 5.5vh);
    font-weight: bolder;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;
    padding: 1rem;
    width: calc(100% - 2rem);
    max-width: 25rem;
    /*アニメーション用*/
    transform: scale(0);
    opacity: 0;

    span {
        width: 100%;
        
        &:first-child {
            text-align: left;
            text-align-last: left;
        }
        &:nth-child(2) {
            text-align: center;
            text-align-last: center;
        }
        &:last-child {
            text-align: right;
            text-align-last: right;
        }
    }
}
.home_title_date_wrapper {
    padding: 1rem;
    width: calc(100% - 2rem);
    max-width: 30rem;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    
    /*アニメーション用*/
    opacity: 0;
    transform: translateX(5px)translateY(10px);
    
    .home_title_date_inner {
        display: grid;
        justify-items: center;
        grid-template-columns: repeat(5, max-content);
        grid-template-rows: repeat(4, max-content);
        font-weight: bold;
        margin: auto;
        
        .home_title_day {
            grid-column: 1 / 6;
            display: grid;
            justify-items: center;
            grid-template-columns: subgrid;
            
            span {
                &:first-child {
                    grid-column: 2 / 3;
                    font-size: min(13vw, 8.5vh);
                }
                &:nth-child(2) {
                    font-size: min(13vw, 8.5vh);
                }
                &:nth-child(3) {
                    font-size: min(13vw, 8.5vh);
                }
                &:nth-child(4) {
                    font-size: min(13vw, 8.5vh);
                }
                &:last-child {
                    font-size: min(13vw, 8.5vh);
                }
            }
        }
        .home_title_date {
            grid-column: 3 / 6;
            display: grid;
            justify-items: center;
            grid-template-columns: subgrid;
            
            span {
                &:first-child {
                    font-size: min(7.5vw, 6vh);
                }
                &:last-child {
                    grid-column: 3 / 4;
                    font-size: min(7.5vw, 6vh);
                }
            }
        }
        .home_title_hour {
            grid-column: 1 / 6;
            display: grid;
            justify-items: center;
            align-items: center;
            grid-template-columns: subgrid;
        
            span {
                &:first-child {
                    grid-column: 1 / 3;
                    font-weight: normal;
                    font-size: min(7vw, 5vh);
                }
                &:nth-child(2) {
                    font-size: min(7.5vw, 6vh);
                }
                &:nth-child(3) {
                    font-size: min(5vw, 4vh);
                }
                &:last-child {
                    font-size: min(7.5vw, 6vh);
                }
            }
        }
        .home_title_reception {
            grid-column: 1 / 6;
            display: grid;
            justify-items: center;
            align-items: center;
            grid-template-columns: subgrid;
        
            span {
                &:first-child {
                    grid-column: 1 / 3;
                    font-weight: normal;
                    font-size: min(7vw, 5vh);
                }
                &:nth-child(2) {
                    font-size: min(7.5vw, 6vh);
                }
                &:nth-child(3) {
                    font-size: min(5vw, 4vh);
                }
                &:last-child {
                    font-size: min(7.5vw, 6vh);
                }
            }
        }
    }
}

.home_title_scroll {
    width: 1rem;
    height: 1rem;
    border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    transform: rotate(45deg);
    position: fixed;
    bottom: 15px;
    left: calc(50% - 0.707106rem);
    animation-name: scroll_arrow;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

    opacity: 0;
    transition: .3s ease-in-out;

    &[scrollShow="true"] {
        opacity: 1;
    }
}

/*--------------------------------------------------------------------------------------------------------------*/
/*ホーム画面のコンテンツ共通*/
.home_cont_title {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: var(--large-fontsize);
}

.home_cont_wrapper {
    opacity: 0;
    margin: 1rem;
    padding: 1rem;
    width: calc(100% - 4rem);
    max-width: 700px;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    &:last-child {
        margin-bottom: 0.5rem;
    }
}

.home_cont_inner {
    padding: 0.5rem 1rem;
    width: calc(100% - 2rem);
}

.home_cont_minititle {
    margin: 2rem auto 1rem auto;
    padding-top: 1rem;
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: bold;
    text-align: center;
    border-top: dotted 1px #000;
}

.home_cont_list {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    
    li {
        padding-left: 1.5rem;
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
        list-style-type: none;
        line-height: 1.5rem;

        &:not(:first-child) {
            margin-top: 0.5rem;
        }

        &:before {
            position: absolute;
            content: '';
            width: 1rem;
            height: 1rem;
            top: 0.25rem;
            left: 0;
            border-radius: 1rem;
            background-color: var(--primary-color);
        }
    }
}

.home_cont_subcont {
    margin: 2rem auto 0.5rem auto;
    padding-top: 1rem;
    border-top: dotted 1px #000;
}

.home_cont_subexp {
    padding: 0.5rem 1rem 0 2rem;
    width: calc(100% - 3rem);
    text-indent: -1rem;
    font-size: 0.9rem;
}

.home_link_btn {
    margin: 1rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    height: 2rem;
    border-radius: 2rem;
    border: solid 2px var(--accent-color);
    color: var(--accent-color);
    font-weight: bold;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media print {
    body {
        width: 100%;
    }
    header {
        display: none;
    }
    .home_title_scroll {
        display: none;
    }
    .home_cont_wrapper {
        opacity: 1;
    }
}

/*--------------------------------------------------------------------------------------------------------------*/
/*お知らせ部分*/
.home_notice_cont_day {
    font-weight: bold;

    &:not(:first-child) {
        margin-top: 1rem;
    }
}
.home_notice_cont_cont {
    width: calc(100% - 1rem);
    padding-left: 1rem;
    border-bottom: dotted 1px #000;
}

/*--------------------------------------------------------------------------------------------------------------*/
/*対象者部分*/
.home_participant_cont_notice {
    span {
        font-weight: bold;
        color: var(--accent-color);
    }
}

/*--------------------------------------------------------------------------------------------------------------*/
/*参加企業部分*/
.home_company_cont_exp {
    font-size: 1.2rem;
    font-weight: bold;
}

.home_company_list_date {
    margin: 1rem 0 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8rem;
    border-bottom: solid 1px #000;
}
.home_company_list {
    margin-left: 1rem;
}

/*注目の企業部分*/
.home_company_cont_topcompany_wrapper {
    
}
.home_company_cont_topcompany_cont {
    width: 100%;
    display: grid;
    grid-template-columns: 1.2rem 1fr 1.2rem;
    grid-template-rows: max-content 1rem;
}
.home_company_cont_topcompany_cont_wrapper {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;

    .home_company_cont_topcompany_cont_each {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        transition: left .3s ease-in-out;

        .home_company_cont_topcompany_imgwrapper {
            /*暫定*/
            width: 100%;
            height: 100%;
            background-color: #fff;
            
            .hcct_img {
                object-fit: cotain;
                width: 100%;
                height: 100%;
            }
        }
        .home_company_cont_topcompany_companyname {
            width: 100%;
            height: 2rem;
            display: flex;
            justify-content: left;
            align-items: center;
            font-weight: bold;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.5);
        }

        /*位置による*/
        &[tcpos="show"] {
            left: 0;
        }
        &[tcpos="right"] {
            left: 100%;
        }
        &[tcpos="left"] {
            left: -100%;
        }
    }

}
.home_company_cont_topcompany_button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;

    &:after {
        content: '';
        width: 0.7rem;
        height: 0.7rem;
        border-top: solid 1px #000;
        border-right: solid 1px #000;
    }
}
#hcctb_back {
    grid-row: 1 / 2;
    grid-column: 1 / 2;

    &:after {
        transform: rotate(-135deg);
    }
}
#hcctb_next {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    
    &:after {
        transform: rotate(45deg);
    }
}
.home_company_cont_topcompany_indicator_wrapper {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.home_company_cont_topcompany_indicator {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.4rem;
    background-color: #ccc;
    transition: .3s ease-in-out;

    &[tcselect="true"] {
        width: 0.6rem;
        height: 0.6rem;
        background-color: #999;
    }
}

/*--------------------------------------------------------------------------------------------------------------*/
/*会場案内部分*/
.home_contents_map {
    margin: 0 1rem;
    width: calc(100% - 2rem);
    aspect-ratio: 4 / 3;
    background-color: #fff;
}
.home_contents_cont_exp {
    line-height: 1rem;
    margin-top: 1rem;
}

/*--------------------------------------------------------------------------------------------------------------*/
/*アクセス部分*/
.home_access_cont_exp {
    font-size: 1.2rem;
    font-weight: bold;
}
.home_access_cont_map {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #fff;
}

/*--------------------------------------------------------------------------------------------------------------*/
/*問い合わせ部分*/
#inquiry_tel {
    color: #0000ff;
    text-decoration: underline;
}

/*--------------------------------------------------------------------------------------------------------------*/
/*アニメーション*/
/*ホーム画面のコンテンツのフェードイン*/
.fade_in {
    animation-name: fadein;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateX(5px)translateY(10px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/*ホーム画面下部のスクロールを促す矢印*/
@keyframes scroll_arrow {
    0% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(45deg);
    }
    75% {
        transform: translateY(10px)rotate(45deg)
    }
    100% {
        transform: translateY(10px)rotate(45deg);
    }
}

/*ホーム画面のトップ部分のアニメーション*/
.animating_title {
    animation-name: title_animation;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.title_date_animation {
    
}

@keyframes title_animation {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}