@charset "UTF-8";

    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        font-size: 10px;
    }

    body {
        font-family: 'メイリオ', 'Hirgino Kaku Gothic Pro', "Gruppo", sans-serif;
        /* font-family: "Sawarabi Mincho", 'Noto Serif JP', 'Cinzel', serif; */
        margin: 0;
        padding: 0;
        background-color: #F0F0F5;
        min-width: 320px;
    }

    a {
        text-decoration: none;
        transition: 0.2s;
        color: rgb(255, 255, 255);
    }

    a:hover {
        transition: 0.2s;
    }

    .top_buttom {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: rgb(25, 30, 35);
        border-radius: 12px;
        font-family: Cinzel;
        font-size: 1.4rem;
        width: 70px;
        height: 25px;
        padding: 3px;
        text-align: center;
        margin-top: 50px;
        z-index: 10;
    }

    .top_buttom a {
        text-decoration: none;
        vertical-align: middle;
        color: #fff;
    }

    .top_buttom:hover {
        background-color: rgb(165, 150, 105);
    }

    /* ヘッダー */

    .header {
        text-align: center;
        padding: 15px 10px 5px 10px;
        background-color: rgb(165, 150, 105);
    }

    .header table {
        margin: auto;
    }

    .header a {
        padding: 10px;
    }

    .header img {
        height: 65px;
        filter: drop-shadow(0 0 3px rgba(105, 90, 95, 0.7));
    }

    .mainvisual {
        position: relative;
    }

    .mainvisual img {
        width: 100%;
        vertical-align: bottom;
    }

    .copy {
        position: absolute;
        bottom: 0;
        text-align: center;
        line-height: 4vw;
        font-size: 3.5vw;
        width: 100%;
        margin: 0;
        padding: 10px;
        color: rgb(160, 148, 110);
        text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1);
        background-color: rgb(255, 255, 255, 0.8);
    }

    .coution {
        font-family: 'メイリオ', 'Hirgino Kaku Gothic Pro', sans-serif;
        font-weight: 100;
        font-size: 1.6rem;
        /* line-height: 16px; */
        margin: 0;
        padding: 10px;
        text-align: center;
        color: #000;
        background-color: rgb(255, 255, 0);
    }

    .coution span {
        font-size: 1.3rem;
    }


    .obi {
        font-family: 'メイリオ', 'Hirgino Kaku Gothic Pro', sans-serif;
        font-weight: 100;
        font-size: 2.5rem;
        line-height: 28px;
        padding: 10px 20px;
        text-align: center;
        text-shadow: 0 0 10px rgb(210, 200, 175), 0 0 5px rgb(210, 200, 175);
        background-color: rgb(165, 150, 105);
    }

    /* メニュー ///////////////////////////////////////////////*/

    .menu {
        vertical-align: top;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-family: "Gruppo", sans-serif;
        font-size: 1.8rem;
        line-height: 45px;
        text-decoration: none;
        list-style: none;
        width: 100%;
        margin: 0;
        padding: 10px 0;
        background-color: rgb(165, 155, 105);
    }

    .menu a {
        text-align: center;
        margin: 0 3px;
        padding: 10px 20px;
        color: rgb(0, 0, 0);
        background-color: rgb(165, 155, 105);
        border: 1px solid rgb(165, 155, 105);
        border-radius: 20px;
    }

    .menu a:hover {
        /* color: rgb(255, 255, 255); */
        background-color: rgb(215, 205, 150);
        border: 1px solid rgb(215, 205, 150);
    }


    /* タイトル ///////////////////////////////////////////////*/

    .title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 30px 0 10px;
        padding: 0;
        background-color: rgb(165, 155, 105);
        border-radius: 10px;
    }

    .title2 {
        font-size: 1.6rem;
        text-align: center;
        width: 100%;
        margin: 40px 0 0 0;
        padding: 10px;
        background-color: rgb(165, 155, 105);
        border-radius: 10px;
    }

    .ti1 {

        font-family: "Gruppo", sans-serif;
        font-size: 3.5vw;
        width: 25%;
        padding: 20px 0;
        color: rgb(255, 255, 255);
    }

    .ti1 img {
        padding: 0 20px;
    }

    .ti2 {
        font-family: 'メイリオ', sans-serif;
        font-size: 1.6rem;
        /* line-height: 2.5rem; */
        text-align: left;
        height: 100%;
        width: 75%;
        margin: 0;
        padding: 0;
        border-left: solid 1px rgb(255, 255, 255);
    }

    .ti2 p {
        font-size: 1.6rem;
        line-height: 2.3rem;
        margin: 0;
        padding: 15px;
    }

    /* .ti2 p span {
        font-size: 1.4rem;
        margin: 0;
        padding: 0;
        color: rgb(0, 0, 0);
        background-color: rgb(255, 255, 0);
    } */

    .batch {
        display: inline-block;
        /* z-index: 1000; */
        font-family: "Gruppo", sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        text-align: center;
        width: 100px;
        margin: 5px 5px 0 0;
        padding: 0 3px;
        color: rgb(255, 255, 255);
        background-color: rgb(120, 55, 255);
        border-radius: 10px;
    }


    /* .title2 {
        line-height: 2.5rem;
        text-align: center;
        width: 100%;
        margin: 0 0 10px;
        padding: 10px;
        background-color: rgb(165, 155, 105);
    } */


    /* コンテンツ */

    .contents {
        margin: 0;
        padding: 15px 0;
        color: rgb(255, 255, 255);
        background-color: rgb(50, 55, 65);
        padding: 15px 30px;
    }

    .update {
        font-size: 1.6rem;
        text-align: center;
        padding: 10px;
        margin: 0;
        color: rgb(255, 255, 255);
        background-color: rgb(200, 0, 0);
        border-radius: 10px;
    }

    .cont {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-weight: 100;
        width: 100%;
        padding: 30px;
    }

    .cos {}

    .cont1 {
        flex-direction: row;
    }

    .cont2 {
        flex-direction: row-reverse;
    }

    .cont3 {
        padding: 0 30px 0 30px;
    }

    .cont_info {
        width: 48%;
    }

    .cont_info h1 {
        font-family: "Gruppo", sans-serif;
        /* font-family: 'Josefin Slab', serif; */
        font-size: 5vw;
        font-weight: 100;
        line-height: 5vw;
        margin: 0;
        padding: 0;
        padding-bottom: 5px;
        color: rgb(165, 150, 105);
    }

    .cont_info h2 {
        font-size: 1.8rem;
        font-weight: 100;
        margin: 0;
        padding: 6px 15px;
        color: rgb(0, 0, 0);
        background-color: rgb(165, 150, 105);
    }

    .cont_info p {
        font-size: 1.6rem;
        margin: 0;
        padding: 10px;
    }

    .ci1 {
        padding-right: 0;
    }

    .ci2 {
        padding-right: 0;
    }

    .ci1 h1 {
        text-align: left;
        margin-left: 5px;
        padding-right: 0;
    }

    .ci2 h1 {
        text-align: right;
        margin-right: 5px;
        padding-left: 0;
    }

    .ci1 h2 {
        border-radius: 10px 0 0 10px;
    }

    .ci2 h2 {
        border-radius: 0 10px 10px 0;
    }

    .cos_img {
        width: 14.28%;
        padding: 0.3rem;
    }

    .cont_img {
        width: 52%;
    }

    /*  {
        width: 50%;
        background-color: rgb(165, 155, 105);
    } */


    /* 
    .cont_img3 a {
        margin: 10px
    } */

    .cos_img img,
    .cont_img img {
        width: 100%;
        vertical-align: bottom;
        border-radius: 10px;
    }

    .cont_img a {
        display: block;
        border-radius: 10px;
    }

    .cont_img a:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
    }

    .cont_img3,
    .cont_video {
        width: 50%;
        background-color: rgb(165, 155, 105);
        border-radius: 10px;
        border: 2px solid rgb(25, 30, 35);
    }

    .cont_img3 p,
    .cont_video p {
        font-size: 1.6rem;
        text-align: center;
        margin: 5px;
    }

    .cont_img3 {
        width: 33.33%;
    }

    .cont_video video {
        width: 100%;
        border-radius: 10px;
    }

    .skill {
        display: flex;
        flex-wrap: wrap;
        font-size: 1.4rem;
        text-align: center;
        margin: 0;
        padding: 15px 30px;
    }

    .skill li {
        list-style: none;
    }

    .li3 {
        width: 50%;
        margin: 0px;
        padding: 5px;
        color: rgb(0, 0, 0);
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgb(50, 55, 65);
    }

    .li4 {
        width: 100%;
        margin: 0px;
        padding: 5px;
        color: rgb(0, 0, 0);
        background-color: rgba(165, 150, 105, 1);
        border: 1px solid rgb(50, 55, 65);
    }

    .buttom a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: rgb(0, 0, 0);
        background-color: rgb(165, 150, 105);
        border-radius: 10px;
    }

    .buttom a:hover {
        background-color: rgb(215, 195, 140);
    }


    /* ボイス ///////////////////////////////////////////////*/


    .voice_flame {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 30px;
    }

    .voice_flame h1 {
        font-family: "Gruppo", sans-serif;
        font-size: 5vw;
        font-weight: 100;
        line-height: 5vw;
        margin: 0;
        padding: 0;
        padding-bottom: 5px;
        text-align: center;
        color: rgb(165, 150, 105);
        /* background-color: rgb(165, 155, 105); */
        /* border-radius: 10px 10px 0 0; */
    }

    .voice_flame h2 {
        font-size: 1.8rem;
        font-weight: 100;
        text-align: center;
        margin: 0;
        padding: 6px 15px;
        color: rgb(0, 0, 0);
        background-color: rgb(165, 150, 105);
        border-radius: 10px;
    }

    .voice_flame span {
        display: inline-block;
        font-family: 'メイリオ', 'Hirgino Kaku Gothic Pro', sans-serif;
        font-size: 1.6rem;
        font-weight: 300;
        width: 100%;
        margin: 0;
        padding: 10px;
        text-align: center;
        color: rgb(255, 255, 255);
        /* background-color: rgb(165, 155, 105); */
        /* border-radius: 10px 10px 0 0; */
    }

    .cont_flex {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .voice_set {
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
        /* border-radius: 0 0 10px 10px; */
    }

    .voice {
        width: 100px;
        text-align: center;
        margin: 1px;
        /* border-radius: 20px; */
    }

    .on,
    .off,
    .on p,
    .off p {
        color: rgb(0, 0, 0);
    }

    .on,
    .off {
        font-family: "Gruppo", sans-serif;
        font-size: 1.6rem;
        font-weight: 300;
        padding: 20px 0;
    }

    .on,
    .on p {
        color: rgb(255, 255, 255);
        background-color: rgb(195, 185, 135);
        border-radius: 10px;
        /* border: 2px solid rgb(25, 30, 35); */

    }

    .off {
        background-color: rgb(165, 155, 105);
        transition: 0.3s;
        border-radius: 10px;
        /* border: 2px solid rgb(25, 30, 35); */
    }

    .off:hover {
        background-color: rgb(195, 185, 135);
        transition: 0.3s;
        border-radius: 10px;
        /* border: 2px solid rgb(25, 30, 35); */
    }

    .on p,
    .off p {
        font-family: 'メイリオ', 'Hirgino Kaku Gothic Pro', sans-serif;
        font-size: 1.4rem;
        font-weight: 100;
        line-height: 20px;

        margin: 0;
    }

    /* 動作環境 */

    .spec {
        box-sizing: border-box;
        font-family: 'メイリオ', 'Hirgino Kaku Gothic Pro', sans-serif;
        font-size: 1.6rem;
        width: 100%;
        margin: 0 auto;
        padding: 0 50px 50px;
        color: rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
    }

    .spec h1 {
        font-family: "Gruppo", sans-serif;
        font-size: 5vw;
        font-weight: 100;
        line-height: 5vw;
        color: rgb(165, 150, 105);
        margin: 0 0 -15px 0;
        padding-top: 25px;
    }

    .spec h2 {
        font-weight: 100;
        margin: 10px;
        font-size: 1.6rem;
    }

    .spec_in {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        font-size: 1.4rem;
        width: 100%;
        padding: 0 10px;
        margin: 10px 0;
        border-left: solid 1px rgb(170, 170, 170);
    }

    a {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    dl,
    dt,
    dd {
        box-sizing: border-box;
    }

    dt,
    dd {
        padding: 5px 10px 0 5px;
    }

    dt {
        width: 80px;
        float: left;
        font-weight: 100;
        text-align: center;
        color: rgb(165, 150, 105);
    }

    dd {
        margin-left: 70px;
        padding-bottom: 0px;
    }

    dd:after {
        content: '';
        display: block;
        clear: both;
    }


    .dl_sale {
        font-size: 1.6rem;
        padding-bottom: 30px;
    }


    .c_buttom {
        width: 100%;
        margin-bottom: 1px;
    }

    .c_buttom a {
        display: block;
        padding: 10px;
        background-color: rgb(165, 155, 105);
        text-align: center;
        font-size: 1.3rem;
        text-decoration: none;
        color: rgb(0, 0, 0);
        border-radius: 10px;
        transition: 0.3s;
    }

    .c_buttom a:hover {
        padding: 10px;
        background-color: rgb(255, 255, 105);
    }



    .br02 {
        display: none;
    }



    /* フッター */

    .footer {
        margin: 0;
        padding: 0;
        height: 120px;
        text-align: center;
        background-color: #F0F0F5;
        border-top: solid 1px #aaa;
        vertical-align: top;
    }

    .footer img {
        margin: 30px 0 0 0;
    }

    .footer p {
        font-family: Cinzel;
        margin-top: 3px;
        font-size: 1.0rem;
        color: #000;
    }


    @media(min-width:1920px) {
        .cos_img {
            width: 7.69%;
        }
    }

    @media(max-width:768px) {
        .header img {
            width: 160px;
        }

        .ti1 {
            font-size: 3.0rem;

        }

        .ti1,
        .ti2 {
            width: 100%;
            align-items: center;
        }

        .ti1 img {
            width: 60%;
        }

        .ti1 {
            border-radius: 10px 10px 0 0;
        }

        .ti2 {
            border-radius: 0 0 10px 10px;
            border: none;
        }

        .cont_info h1 {
            font-size: 3.0rem;
        }

        .cont_info {
            width: 100%;
        }

        .cos_img {
            width: 20%;
        }

        .cont_img {
            width: 100%;
        }

        .cont_img3 {
            width: 100%;
        }

        .cont_video {
            width: 100%;
        }

        .ci1 h1,
        .ci2 h1 {
            text-align: center;
        }

        .ci1 h2,
        .ci2 h2 {
            text-align: center;
            border-radius: 10px;
        }

        .buttom {
            width: 100%;
        }


        .spec {
            padding: 10px;
        }


        .spec h1 {
            margin: 0 0 10px 0;
        }

        .spec h2 {
            border-bottom: solid 1px #aaa;
            margin: 0 0 -10px 0;
        }

        .spec_in {
            border: none;
        }

        .li1 {
            width: 100%;
        }

        .li3 {
            width: 100%;
        }
    }

    @media(max-width:420px) {
        .header img {
            width: 120px;
            height: auto;
        }
    }