body{margin:0;background:#008000;overflow:hidden;}
.viewport{overflow:hidden;width:100vw}
.slide{flex:0 0 auto}

.container {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center;     /* 垂直方向の中央揃え */
}

.slide img{
    display:block;
    height:30vw;
    max-height:260px;
    width:auto;
    }
#track{display:flex;gap:8px}

/*------------------------------
 タイトルバー
------------------------------*/

.controls{

    width:100%;

    background: #008000;  /* #111; */

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px 10px;

    box-sizing:border-box;

}

/* 共通フォント */

.title-left,
.title-right{

    font-family:
        "AR P丸ゴシック体E",
        "Arial Rounded MT Bold",
        "Hiragino Maru Gothic Pro",
        "Yu Gothic",
        sans-serif;

    color:#ffffff;

}

/* 左タイトル */

.title-left{

    width:260px;

    text-align:right;

    margin-right:25px;

    line-height:1.25;

}

.title-left div:first-child{

    font-size:26px;

    /* font-weight:bold; */

}

.title-left div:last-child{

    font-size:22px;

    /* font-weight:bold; */

}

/* ボタン */

.button-area{

    width:70px;

    text-align:center;

}

.button-area img{

    width:60px;

    height:60px;

    cursor:pointer;

}

/* 右タイトル */

.title-right{

    width:320px;

    margin-left:25px;

    text-align:left;

    font-size:36px;  /* 48px; */

    /* font-weight:bold; */

    letter-spacing:2px;

}

/* スマホ */

@media (max-width:768px){

.controls{

    padding:10px 5px;

}

.title-left{

    width:120px;

    margin-right:10px;

}

.title-left div:first-child{

    font-size:14px;

}

.title-left div:last-child{

    font-size:12px;

}

.button-area{

    width:48px;

}

.button-area img{

    width:42px;

    height:42px;

}

.title-right{

    width:160px;

    margin-left:10px;

    font-size:22px;

}

}