@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

html,
body,
button,
input,
select,
textarea {
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif !important;
}

/* トップページのヒーロー画像を画面いっぱいに広げる */
.home .wp-block-cover:first-of-type {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/*---------------------------------
固定ヘッダー（スマホ・タブレット）
---------------------------------*/
.fixed-menu ul li i {
  font-size: 38px !important;
}

@media only screen and (max-width: 767px) {
  .header {
    position: fixed; /* ヘッダーを固定 */
    width: 100%;     /* 横幅を100％に変更 */
    top: 0;          /* 画面の上から0地点に固定 */
    left: 0;         /* 画面の左から0地点に固定 */
  }

  /* ヘッダーのスペースを確保 */
  #container {
    padding-top: 62px;
  }

  /* 目次からジャンプ後の着地点を調整 */
  h2 span,
  h3 span {
    padding-top: 77px; /* お好みで調整 */
  }
}

.article-footer .footer-contents .sns-btn {
  display: none;
}

/* デスクトップ＆タブレット：縦いっぱいに伸ばす */
.wp-block-cover:first-of-type {
  min-height: 1000px !important;
}

.wp-block-cover:first-of-type .wp-block-cover__image-background {
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* スマホ：幅に対して常に比率どおりの高さを確保 */
@media (max-width: 767px) {
  .wp-block-cover:first-of-type {
    min-height: calc(100vw * 1.33) !important;
  }

  .wp-block-cover:first-of-type .wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* スマホだけヘッダー内のタイトル文字サイズを小さくする */
@media (max-width: 480px) {
  .header .site-title,
  .header .site-title a,
  .header .logo,
  .header .logo a,
  .header .logo__title,
  .header .logo__text {
    font-size: 18px !important;   /* 小さめにして様子を見る */
    line-height: 1.2 !important;
    white-space: nowrap !important; /* できるだけ折り返さない */
  }
}
/* スマホ版ヘッダータイトルをさらに小さく */
@media (max-width: 480px) {
  .header .site-title,
  .header .site-title a,
  .header .logo__text {
    font-size: 18px !important; /* ←必要なら小さく調整 */
    line-height: 1.1 !important;
    white-space: nowrap !important; /* 折り返し防止 */
  }
}
@media (max-width: 480px) {
  .logo__text {
    font-size: 18px !important;
    white-space: nowrap !important;
  }
}

/* ===== ホームのヒーロー画像を画面いっぱいにする ===== */

/* ホームだけ、コンテンツの枠を広げる */
body.home .l-contents,
body.home .l-contents-inner,
body.home .entry-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ホームの一番上のカバーブロックを全幅に広げる */
body.home .entry-content > .wp-block-cover:first-of-type {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}