/* ============================================
   Base Reset / 補助スタイル
   ----------------------------------------------
   Astra本体を再び読み込む構成に戻したため、
   画像のはみ出し防止などの基本的なリセットは
   Astra側が担当します。
   このファイルには、Astraがカバーしない
   独自テンプレート向けの補助だけを残しています。
   ============================================ */

/* ===== グリッド内での縮小を許可 =====
   これが無いと、中身が大きいときにカラムが
   押し広げられてレイアウトが崩れます。 */
.blog-layout > *,
.blog-main,
.blog-sidebar,
.single-post {
    min-width: 0;
}

/* ===== 長いURLなどの折り返し ===== */
.blog-main,
.blog-page-content,
.single-post,
.single-post__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 表は中で横スクロールさせる */
.single-post__content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* ===== 埋め込み動画のレスポンシブ対応 ===== */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}

/* サイドバーのYouTubeは専用スタイルを優先 */
.sidebar__video-wrap iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Twitter / Googleマップなど16:9でない埋め込みは対象外。
   ※ここで height を指定すると HTML側の height="450" が
     無効化されて潰れるため、高さには触れない。 */
iframe[src*="twitter.com"],
iframe[src*="platform.twitter"],
iframe[src*="instagram.com"],
iframe[src*="google.com/maps"],
iframe[id^="twitter-widget"] {
    aspect-ratio: auto;
}

/* アクセスページのGoogleマップの高さ */
.access__map iframe {
    width: 100%;
    height: 450px;
    aspect-ratio: auto;
    display: block;
    border: 0;
}

@media (max-width: 700px) {
    .access__map iframe {
        height: 320px;
    }
}

/* ===== 文字の描画方式を全ページで統一 =====
   同じ font-weight でもページによって太さが
   違って見えるのを防ぎます。 */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
.header,
.nav,
.nav__list,
.nav__item,
.nav__item a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 横スクロール防止（保険） ===== */
html,
body {
    overflow-x: hidden;
}