/* Bootstrap 5 compatibility fixes
   Bootstrap 4の見え方を大きく崩さず、必要最小限だけ補正。
   main.css / adj.css は変更しない前提。
*/

/* リンク下線を元の見た目に戻す */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

/* Bootstrap 4と同じcontainerの左右余白 */
.container {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

/* Bootstrap 4と同じPC最大幅
   1200px以上は1140px固定。1400px以上でも広げない。 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px !important;
    }
}

/* Bootstrap 4に近いrowの左右余白 */
.row {
    --bs-gutter-x: 30px;
}

/* Bootstrap 5でleadが少し大きく細く見えるため、元の印象に寄せる
   フォントファミリーは触らない。 */
.lead {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
}

/* Bootstrap 5がデフォルトで入れるscroll-behavior:smoothを打ち消す。
   GSAP(TweenMax/ScrollToPlugin)のJSスクロールと毎フレーム競合し、
   スクロールトップボタン等の動きがガクつく原因になるため。
   Bootstrap 4にはこの指定がない。 */
:root {
    scroll-behavior: auto !important;
}

/* Bootstrap 5で廃止された.embed-responsive(動画/iframeの16:9埋め込み)を復元。
   サイト内の<video>埋め込み(vimeo以外の直接mp4埋め込み)がこのクラスに依存しており、
   なければ<video>が素の実寸サイズで表示され列幅を無視して巨大化してしまうため。 */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    display: block;
    content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.embed-responsive-21by9::before {
    padding-top: 42.857143%;
}
.embed-responsive-16by9::before {
    padding-top: 56.25%;
}
.embed-responsive-4by3::before {
    padding-top: 75%;
}
.embed-responsive-1by1::before {
    padding-top: 100%;
}

/* Bootstrap 5で.text-left/.text-rightが.text-start/.text-endに改名され、
   旧クラス名はCSSが存在しなくなったため復元(jewelry/cdr以下12ページで使用)。 */
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}