@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ========== SWELL: PCでもハンバーガーメニュー ========== */
.c-gnav { display: none !important; }
@media screen and (min-width: 960px) {
  .l-header__menuBtn { display: flex !important; }
  .p-spMenu { display: block !important; }
  .p-spMenu__inner { max-width: 400px; }
}
/* ========== SWELL: メインビジュアル上の余白を詰める ========== */
#main_visual { padding-top: 0 !important; margin-top: 0 !important; }
#content { padding-top: 0 !important; }
.l-mainContent { padding-top: 0 !important; margin-top: 0 !important; }


/* 縦書き（2つ目のセクション用）スマホ=横・PC=縦 */
.tate {
  writing-mode: horizontal-tb;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 641px) {
  /* .tateの親セクションを基準にする（:has()非対応の場合はセクションに position:relative を手動で付与） */
  section:has(.tate),
.swell-block-fullWide:has(.tate),
.swell-block-fullWide_inner:has(.tate) {
    position: relative;
  }
/* margin-top:0 !important 対策：親要素に上部余白を追加 */
.post_content > div:first-child,
.swell-block-fullWide {
    padding-top: 150px !important;  /* 上部に余白（100〜200pxで調整可） */
}
/* 詳細度を上げて !important なしで適用 */
section .tate,
.post_content .tate,
.swell-block-fullWide .tate,
.swell-block-fullWide_inner .tate,
.wp-block-heading.tate,
h2.tate {
    
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      text-orientation: mixed;
      position: absolute;
      left: 75%;              /* 水色バー付近（55〜70%で微調整可） */
      top: 10%;
      transform: translate(-50%, -50%);  /* 縦横中央に配置 */
      z-index: 2;
  }
}
/* ========== SWELL: ページャーの文字色をグレーに変更 ========== */
[class*="page-numbers"] {
  color: #666 !important;
}

[class*=page-numbers].current,
[class*=page-numbers]:hover {
  color: #666 !important;
}

/* ========== SWELL: カテゴリリストの文字色をグレーに変更 ========== */
[class*="categoryList__link"] {
  color: #666 !important;
}

[class*="categoryList__link"]:hover,
[class*="categoryList__link"]:active {
  color: #666 !important;
}
/* ========== SWELL: カテゴリリストのアイコンアイコンをグレーに変更 ========== */
[class*="c-categoryList"] {
  color: #666 !important;
}

[class*="c-categoryList"]:hover,
[class*="c-categoryList"]:active {
  color: #666 !important;
}