右から左へ縦書きで並べたい。

Question

実現したいこと

@media screen and (min-width: 768px),の条件で
右から左へ縦書きで
『あなたは知ってる？＜改行＞
蓼科を丸ごと味わう＜改行＞
喜びを』

と並べたいが、
『喜びを＜改行＞
蓼科を丸ごと味わう＜改行＞
あなたは知ってる？』

と左からに配置されてしまいます。
自分なりに調べましたがちっともわからないので
お分かりの方おられましたら宜しくお願い致します。

前提

https://www.webcreatorbox.com/tech/writing-mode
ネットで調べて試しました。
writing-mode: vertical-lr; vertical-rl;　どちらも変わらなかったです。

該当のソースコード

<header class="header">
        <div class="header__inner">
            <div class="header__ttl">
                <span>あなたは知ってる？</span>
                <span>蓼科を丸ごと味わう</span>
                <span>喜びを</span>
            </div><!-- /.header__ttl -->

        </div><!-- /.header-inner -->

    </header><!-- /.header -->

.header {
    position: relative;
}
.header__inner {
    background: $c_contact url(../img/fv.jpg) no-repeat center center/cover;
    height: 85vh;
    padding: 120px 30px;
    margin-left: auto;
    margin-right: auto;
    .header__ttl {
        margin-bottom: auto;
    }
    .header__ttl >span {
        background: #fff;
        padding: 7px;
        font-size: clamp(24px,2.8vw,32px);
        display: block;
        line-height: 1;
        font-weight: 700;
        max-width: 230px;
        margin-top: 6px;
        &:last-child {
            max-width: 86px;
        }
    }
}



@media screen and (min-width: 768px),
    print  {
    .header__inner {
        height: auto;
        height: 100vh;
        text-align: right;
        .header__ttl >span {
            vertical-align:top;
            background: #fff; 
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;/* IE,Edge用 */
            writing-mode: vertical-rl; /* Chrome,Safari,Opera用 */
            text-orientation: upright;
            display: inline-block;
            padding: 0 15px;
            letter-spacing: 0.5em;
            margin-top: 0;
            margin-left: 21px;
            max-width: 432px;
        }
    }
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

writing-mode: vertical-rl; を .header__ttl >span ではなく .header__ttl か .header__inner に付けてください。

Comments

[spn]

一番早く教えてくださりありがとうございました。
訂正したら思うようなデザインになりました。
感謝いたします。

Answer 2

writing-mode: vertical-rl;を設定するのは行(span)ではなくその親要素(.header__ttl)です。
これで親要素のテキストが右から左へ縦書きになります。
あと、親要素(.header__ttl)の幅を100%にする必要があります。

@media screen and (min-width: 768px), print {
  .header__inner {
    height: auto;
    height: 100vh;
 //   text-align: right; 削除
    .header__ttl { //こちらに移動
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl; /* IE,Edge用 */
        writing-mode: vertical-rl; /* Chrome,Safari,Opera用 */
        text-orientation: upright;
       width: 100%; //追加
      > span {
        vertical-align: top;
        background: #fff;
//        display: inline-block; 削除
        padding: 0 15px;
        letter-spacing: 0.5em;
        margin-top: 0;
        margin-left: 21px;
        max-width: 432px;
      }
    }
  }
}

Comments

[spn]

具体的でとてもわかりやすく、丁寧に教えてくださりありがとうございます。
訂正したら思ったような挙動になりました。