/*
cssの記述ですが初めに基本設定（殆どがスマホ設定）
続いてPC表示時に上書きされる設定
最後にIE様の設定になってます。
*/

* {
    margin: 0px;
    padding: 0px;
}

html {
    font-size: calc(10px * var(--reit));
    /* 基本フォントサイズ 10px に設定 */
}

.add a {
    color: #433c00;
}

/*=============================================*/
/* 基本設定 */
/*=============================================*/

body {
    background-color: rgb(0, 44, 52);
    margin: 0px;
/*
    font-family: 'Noto Serif JP', serif;
    */
    font-family: 'M PLUS Rounded 1c', sans-serif;
    -webkit-text-size-adjust: 100%;
    font-weight: 300;
    margin: 0px;
    display: flex;
}

.container {
    background-color: #ffffff;
}

.wrap {
    overflow: hidden;
}

.tex-center {
        text-align: center;
    }

article {
    background-color: #000000;
}

/* --テキスト選択時のオリジナルハイライト色設定-- */

::-moz-selection {
    background-color: var(--text-hilight1);
    color: var(--text-hilight2);
}

::selection {
    background-color: var(--text-hilight1);
    color: var(--text-hilight2);
}

/* --Firefox用-- */

::-moz-selection {
    background-color: var(--text-hilight1);
    color: var(--text-hilight2);
}

/* Text　基本設定 */

h1 {
    line-height: 10.5vw;
    font-size: min(7.5vw, 48px);
    font-weight: 400;
    color: #797979;
}

p {
    margin: 0px;
    font-size: 4vw;
    line-height: 6vw;
    letter-spacing: 0.5vw;
}

.tex-orange {
    /*
    color: #ff7e00;
    */
    color: #ff6c00;
}

.wsnw { white-space:nowrap; }

/*===================================*/
/*  スクロールバー設定                          */
/*===================================*/

/*Chrome*/
::-webkit-scrollbar {
    /*縦方向スクロールバーの幅*/
    width: 8px;
}

::-webkit-scrollbar:horizontal {
    /*横方向スクロールバーの高さ*/
    height: 12px;
}

::-webkit-scrollbar-track {
    /*スクロールバーの軌道*/
    background: rgba(172, 172, 172, 0.24);
}

::-webkit-scrollbar-thumb {
    /*つまみの部分*/
    box-shadow: inset 0 0 10px #ff7e00;
    border-radius: 10px;
    background: rgba(144, 144, 144, 0.48);
}

::-webkit-scrollbar-thumb:hover {
    /*マウスホバー時*/
    background: gold;
}

/*Firefox*/
.info_tx {
    /*適用させる箇所のID, クラス名に置き換えてください*/
    scrollbar-width: thin;
    /*細さ(幅・高さ両方に適用)*/
    scrollbar-color: #ff7e00 rgba(87, 87, 87, 0.18);
    /*つまみの色 軌道の色*/
}

header {}

.tx-mini {
    font-size: 3.2vw;
    /*
    color: #a3a3a3;
    */
}

.box-cen {
    display: flex;
    justify-content: center;
}

.box1 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15vw;
}

.box2 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10vw;
}

.aso-1st {
    width: 25%;
    height: 100%;
}

.aso-2nd {
    
    width: 46%;
    /*
    width: 33.3%;
    */
    height: auto;
    margin: 2px;
}

.aso-map {
    width: 100vw;
    height: min(90vh, 1000px);
    margin-bottom: 30vw;
}

.vivo {
    width: 100vw;
    height: 60vw;
}

/*============================================*/
/* footer セクション                            */
/*============================================*/

.ft-cen {
    font-size: min(5vw, 20px);
    color: #FF6000;
    margin-top: 30px;
    margin-bottom: 10px;
}


/*==================================================*/
/*   PC TAB用（660px以上)                            */
/*==================================================*/

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

    /* Text　基本設定 */
    h1 {}

    p {
        margin: 0px;
        /*
        font-size: 17px;
        */
        font-size: 22px;
        letter-spacing: 5px;
        line-height: 40px;
    }

    .tx-mini {
        font-size: 16px;
        color:
    }

    .tex-center {
        text-align: center;
    }

    body {
        min-width: 660px;
    }

    .box1 {
        margin-bottom: 60px;
        padding: 0px;
    }

    .aso-1st {
        width: 10%;
        height: 100%;
        margin: 0px;
    }

    .box2 {
        width: min(80%, 1440px);
        margin-bottom: 100px;
    }

    .vivo {
        width: 47.5vw;
        height: 27vw;
        margin: 1vw;
    }

    .aso-map {
        margin-bottom: 200px;
    }

    /*============================================*/
    /*  660px footer 設定                          */
    /*============================================*/

    footer {}

    /*==================================*/
    /*  横幅830px以上                     */
    /*==================================*/

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

        .aso-2nd {
            width: calc(100% / 5 - 8px);
        }

        .aso-map {
            width: min(100%, 1560px);
            height: min(100vh, 1200px);
        }

        .e-mov {
            display: flex;
            flex-wrap: wrap;
            width: min(100%, 1600px);
            margin: 10px auto;
        }

        .vivo {
            /*
            width: 24.7vw;
            width: 50%;
            */
        }


        /*==================================================*/
        /*   PC TAB用（1600px以上)                            */
        /*==================================================*/
        @media screen and (min-width: 1599px) {

            .container {
                width: 1600px;
                margin: 0px auto 0px auto;
            }

            .box1 {
                width: 1600px;
            }

            .aso-1st {
                width: 160px;
            }

            .e-mov {
                width: 1600px;
            }

            .vivo {
                width: 775px;
                height: 430px;
                margin: 20px 10px;
            }
        }

        footer {}

        .fft {
            display: flex;
            justify-content: center;
        }
    }
}