.message{
    position: relative;
}
@media (min-width: 1000px){/*PC画面のみ、左上ピンクボタンの位置調整*/
    .message{
        text-align: left;
        margin-left: 25%;
    }
}

.top-message{/*左上メッセージの設定*/
    background-color: #ffc6c2 !important;
    padding: 10px 60px;
    border: 2px solid;
    border-radius: 20px;
    border-color: #000000;
    color: #000000;
    text-decoration: none;
}

.top-message:hover{/*左上メッセージのホバー時動作設定*/
    cursor: pointer;
    background-color: #dba09c !important;
}

.btn-top{/*TOP画面全ボタンの基本設計*/
    color: black;/*ボタン内テキスト色*/
    width: 180px;
    height: 100px;
    display: flex;
    justify-content: center;/*文字位置（ｘ）*/
    border-radius:15px;/*丸角調整*/
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    font-size: large;
    margin-bottom: -999px;/*ボタンが無反応になってしまう謎のspan要素を小さくするコード。*/
    box-shadow: 0px 7px #454020;
    transition: all 0.2s ease;
    border: solid 3px rgb(0, 0, 0);
    display: block;/*TOPの表示崩れ直し*/    
}
@media(max-width: 1000px){
    .btn-top rt{/*TOPページボタン内のルビサイズ調整*/
        transform: scale(0.9);
    }
}
@media(max-width: 280px){
    .btn-top rt{/*TOPページボタン内のルビサイズ調整*/
        transform: scale(0.7);
    }
}
.btn-top:hover{/*ボタンホバー時にカーソル変更*/
    cursor: pointer;
    box-shadow: none;
    transition: all 0.15s ease;
    color: #000000;
    background-color: #ffffff !important;
}

/*TOPページのボタン内テキスト位置調整ここから(日本語はjpn.cssにて調整)*/
.top-btn-txt{
    margin-top: 35px;
}
.top-btn-txt-li{
    margin-top: 34px;
}

.top-btn-txt-sp{/*話すことの位置調整*/
    margin-top: 23px;
}
@media(max-width: 1000px){
    .top-btn-txt-li{
        margin-top: 27px;
    }
    .top-btn-txt{
        margin-top: 27px;
    }
    .top-btn-txt-sp{/*話すことの位置調整*/
        margin-top: 22px;
    }
}
@media(max-width: 280px){
    .top-btn-txt-li{
        margin-top: 21px;
    }
    .top-btn-txt{
        margin-top: 21px;
    }
    .top-btn-txt-sp {
        margin-top: 18px;
        font-size: smaller;
    }
 }
 /*TOPページのボタン内テキスト位置調整ここまで*/

  .subtext{/*ボタンの（）内のタイトル文字サイズ＆位置調整*/
    font-size: 12px;
    height: 20px;
    width: 170px;
    transform: translateY(75%) translateX(-50%);
    font-weight: normal;
  }
  .subtext rt{
    transform: scale(0.75);
  }

  /*各ボタンの通常時＆ホバー時の設定（位置設定等）ここから*/
.listening{
    background-color: #ff9393 !important;
    transform: translate3D(0, -120px, 0) translate(-50%,-123%); /* translate3D(x軸, y軸, z軸)*/
}

.listening:hover{
    transform: translate3D(0, -113px, 0) translate(-50%,-123%); /* translate3D(x軸, y軸, z軸)*/
    border: solid 3px #940e0e;
}

.reading{
    background-color: #93ffff !important;
    transform: rotate(60deg) translate3D(90px, -220px, 0) rotate(-60deg) translate(-70%,-35%);
}

.reading:hover{
    transform: rotate(60deg) translate3D(90px, -220px, 0) rotate(-60deg) translate(-70%,-28%);
    border: solid 3px #046666;
}

.speaking-c{
    background-color: #c9ff93 !important;
    transform: rotate(120deg) translate3D(0px, -170px, 0) rotate(-120deg) translate(-50%,21%); 
}

.speaking-c:hover{
    transform: rotate(120deg) translate3D(0px, -170px, 0) rotate(-120deg) translate(-50%,28%); 
    border: solid 3px #366904;
}

.speaking-p{
    background-color: #ffff93 !important;
    transform: rotate(210deg) translate3D(0, -120px,0) rotate(-210deg) translate(-100%,4%); 
}

.speaking-p:hover{
    transform: rotate(210deg) translate3D(0, -120px,0) rotate(-210deg) translate(-100%,11%); 
    border: solid 3px #7f7f06;
}

.writing{
    background-color: #ffc993 !important;
    transform: rotate(300deg) translate3D(-90px, -220px, 0) rotate(-300deg) translate(-30%,-35%);
}

.writing:hover{
    transform: rotate(300deg) translate3D(-90px, -220px, 0) rotate(-300deg) translate(-30%,-28%);
    border: solid 3px #a4580c;
}

 /*各ボタンの通常時＆ホバー時の設定（位置設定等）ここまで*/

.btn-circle span{/*ボタンの円形配置の位置設定*/
    position: absolute;
    left: 50%;
    top: 50%;
    /*background-color: palevioletred !important;span要素の基準点確認用コード*/
}

.circle-border {/*円（黒枠）の設定*/
    position: relative;
    top: 300px;/*円形ボタン要素の縦位置*/
    left: 58%;/*円形ボタン要素の横位置*/
    transform: translateY(-52%) translateX(-50%);
    width: 25rem;/*黒丸線の横幅*/
    height: 25rem;/*黒丸線の立幅*/
    border: solid 3px black;
    border-radius: 50%;
    margin-bottom: 150px;
}
.top-bunchan{/*ぶんちゃんの写真詳細設定*/
    position: absolute;
    left: 50%;
    top: 46%;
    width: 185px;
    height: 185px;
    transform: translate(-50%, -50%);
}

.top-bunchan-text{/*ぶんちゃん紹介文詳細設定*/
    font-size: medium;
}
.top-bunchan-text-space{/*紹介文のスペース調整のためのdivクラス*/
    margin-left: 25%;
    margin-bottom: 10px
}
/*スマホ向けレイアウトここから*/
@media (max-width: 1000px) {
    .message{
        text-align: center;
        margin-top: 40px;
    }
    .circle-border {
        top: 200px;
        left: 50%;
        width: 16rem;/*黒丸線の横幅*/
        height: 16rem;/*黒丸線の立幅*/
        border: solid 2px black;
        border-radius: 50%;
        position: relative;
        margin-bottom: 160px;/*サークル（ぶんちゃん要素）とフッターの間の間隔設定*/
    }

    .top-bunchan{/*ぶんちゃんの画像位置＆サイズ設定*/
        top: 44%;
        width: 108px;
        height: 108px;
        transform: translate(-50.2%, -35%);
    }

    .top-bunchan-text{/*ぶんちゃん紹介文詳細設定*/
        width: 300px;
        margin-left: 0%;
        font-size: 14px;
    }
    .top-bunchan-text-space{
        margin-left: 0px;
        text-align: center;
    }
    .top-bunchan-text rt{
        transform: scale(0.9);/*文字をさらに小さく*/
    }
    .btn-top{/*全ボタンの基本設計*/
        width: 110px;
        height: 75px;
        font-size: small;
        box-shadow: 0px 5px #454020;/*スマホ版のボタン影サイズ調整*/
    }
    .btn-top ruby{/*TOPの５つのボタンのルビ位置調整*/
        position: relative;
        margin-bottom: 7px;
      }
      .subtext rt{
        transform: scale(0.6);/*文字をさらに小さく*/
      }

    .subtext{/*ボタンの（）内のタイトル文字サイズ＆位置調整*/
        font-size: 6px;
        margin-top: 4px;
        width: 100px;
        height: 12px;
        transform: translateY(60%) translateX(-50%);

      }

    /*５つのボタン位置微調整ここから*/
    .listening{
        transform: translate3D(0, -120px, 0) translate(-50%,-60%);
    }
    .listening:hover{
        transform: translate3D(0, -120px, 0) translate(-50%,-55%);
    }
    .reading{
        transform: rotate(60deg) translate3D(90px, -220px, 0) rotate(-60deg) translate(-154.5%,-15%);
    }
    .reading:hover{
        transform: rotate(60deg) translate3D(90px, -220px, 0) rotate(-60deg) translate(-154.5%,-10%);
    }
    .speaking-c{
        transform: rotate(120deg) translate3D(0px, -170px, 0) rotate(-120deg) translate(-120%,15%);
    }
    .speaking-c:hover{
        transform: rotate(120deg) translate3D(0px, -170px, 0) rotate(-120deg) translate(-120%,20%);
    }
    .speaking-p{
        transform: rotate(210deg) translate3D(0, -120px,0) rotate(-210deg) translate(-70%,-8%);
    }
    .speaking-p:hover{
        transform: rotate(210deg) translate3D(0, -120px,0) rotate(-210deg) translate(-70%,-3%);
    }
    .writing{
        transform: rotate(300deg) translate3D(-90px, -220px, 0) rotate(-300deg) translate(54%,-15%);
    }
    .writing:hover{
        transform: rotate(300deg) translate3D(-90px, -220px, 0) rotate(-300deg) translate(54%,-10%);
    }
     /*５つのボタン位置微調整ここまで*/
}

/*Galaxy FoldのTOPページ表示設定ここから*/
@media(max-width: 280px){
    .circle-border {
        width: 13rem;/*黒丸線の横幅*/
        height: 13rem;/*黒丸線の立幅*/
    }
    .top-bunchan{/*ぶんちゃんの写真詳細設定*/
        top: 43%;
        left: 49.8%;
        width: 80px;
        height: 80px;
    }
     .top-bunchan-text{/*ぶんちゃん紹介文詳細設定*/
        left: 56%;
        top: 76%;
        width: 190px;
        height: 30px;
        font-size: 14px;
        word-break: keep-all;
    }
    .btn-top{/*TOP画面全ボタンの基本設計*/
        width: 90px;
        height: 60px;
        border: solid 2px rgb(0, 0, 0);
        box-shadow: 0px 4px #454020;
        font-size: x-small;
    }
    /*５つのボタン位置微調整ここから*/
    .listening{
        transform: translate3D(0, -120px, 0) translate(-52%,-26%);
    }
    .listening:hover{
        transform: translate3D(0, -114px, 0) translate(-52%,-26%);
    }
    .reading{
        transform: rotate(60deg) translate3D(90px, -220px, 0) rotate(-60deg) translate(-206%,-15%);
    }
    .reading:hover{
        transform: rotate(60deg) translate3D(96px, -220px, 0) rotate(-60deg) translate(-206%,-15%);
    }
    .speaking-c{
        transform: rotate(120deg) translate3D(0px, -170px, 0) rotate(-120deg) translate(-149%,-18%);
    }
    .speaking-c:hover{
        transform: rotate(120deg) translate3D(2px, -174px, 0) rotate(-120deg) translate(-149%,-18%);
    }
    .speaking-p{
        transform: rotate(210deg) translate3D(0, -120px,0) rotate(-210deg) translate(-47%,-48%);
    }
    .speaking-p:hover{
        transform: rotate(210deg) translate3D(0, -124px,0) rotate(-210deg) translate(-45%,-48%);
    }
    .writing{
        transform: rotate(300deg) translate3D(-90px, -220px, 0) rotate(-300deg) translate(104%,-15%);
    }
    .writing:hover{
        transform: rotate(300deg) translate3D(-97px, -219px, 0) rotate(-300deg) translate(104%,-15%);
    }
     /*５つのボタン位置微調整ここまで*/
}
/*Galaxy FoldのTOPページ表示設定ここまで*/

/*スマホ向けレイアウトここまで*/