/* テーマオプションで出力されていたインラインCSS(配色など) */
#footer, #side_col, #global_menu, #global_menu ul ul a,
.post_list_title h3,
#bread_crumb, .article_top, #related_post h3, #comments h3,
.page_navi span.current,.page_navi a:hover
 { background-color:#000000; }

.category_list_widget li a, 
#side_col .styled_post_list1_widget li a,
.tcdw_archive_list_widget .no_dropdown__list li a,
#footer_widget .widget_headline,
.article_top .title, #bread_crumb ul
  { background-color:rgba(255,255,255,0.2); }
#footer_bottom { border-color: rgba(255,255,255,0.2); }
#global_menu > ul > li:first-of-type a, #global_menu > ul > li > a
{ border-color: rgb(255 255 255 / 30%); }

.page_navi span.current, .page_navi a:hover
  { border-color:#000000; }

.widget_content a:hover, #global_menu > ul > li.current-menu-item > a,
#global_menu > ul > li > a:hover, #global_menu ul ul a:hover,
.category:hover, #header_post_slider .category:hover, .post_tag a:hover,
#footer a:hover, .blog_list .link:hover .desc, .blog_list .title_link:hover,
#related_post a:hover, #next_prev_post a:hover
  { color:#999999; }  
.post_content a { color: #3366cc; text-decoration: underline; }
.custom-html-widget a { color:#333333; }
.post_content a:hover, .custom-html-widget a:hover { color:#666666; }
#container:before { background-color:#222222;}

/* トップページでのみ出力されていたもの */
#index_post_list .design_headline1 { font-size:16px; }
@media screen and (max-width:767px) { #index_post_list .design_headline1 { font-size:16px; } }

/* 記事・固定ページでのみ出力されていたもの */
#post_title .title { font-size:22px;  }
.post_content { font-size:16px; }
@media screen and (max-width:767px) {
  #post_title .title { font-size:16px; }
  .post_content { font-size:14px; }
}

/* WordPressの「追加CSS」 */
/** 追加したもの **/
.rich_font { font-family: "Noto Sans JP",sans-serif; }
.main_col_inner {border: none;}
#index_post_list .design_headline1 { text-align: center; }
.post_content { margin: 0 0 50px; }
.widget_tag_cloud .tagcloud a { color: #000; }
.tag-cloud-link { font-size: 12px!important;}
.widget_button {font-size:14px; margin: 0.4em auto;}
.widget_button a {width:100%; height:45px;}
#related_post .title a, .logo a { color: #333; }
.other_article {margin-top: 40px !important;}
.q_custom_button3 { background: #2da337; color: #ffffff !important; border-color: rgba(45, 163, 55, 1); text-decoration:underline; }
.widget_button { background-color: #333; border-radius: 6px; }
.blog_list .image_outer { padding: 0; background: none; }
#post_image { border: none; }
.new_arrival {color: red;padding-right: 10px;}
.warning_note {font-size: 12px !important;}
.form-btn {margin: 1em auto;text-align: center;}
.form-btn a {
  display: flex; justify-content: center; margin: 0 auto; align-items: center;
  font-weight: 400; line-height: 1.5; width:300px!important; height:50px!important; font-size:16px;
  background: #ff9800; color: #ffffff !important; border-radius: 6px;
}
.linktoform{
  background: #ff9800;
  color: #fff!important;
  text-decoration: none!important;
  border: none;
  width: 300px;
  height: 60px;
  font-size: 16px;
}
@media screen and (max-width:767px) {
  .blog_list .image_outer { max-width: 100%; }
  .widget_button { margin: 0px 5px 5px 0;  width: calc(50% - 5px); float: left; }
}

/* トップページ① */
.content01 { text-align: center; margin: 20px 0; }
.content01-title { font-size: 18px; font-weight: normal; line-height: 1.5; margin-bottom: 3px; }
.content01-text { color: #666; font-size: 12px; line-height: 1.6; }
/* トップページ② */
.contents-layout { margin: 20px 0 0; }
.contents-layout-image { height: auto; width: 100%; vertical-align: bottom; }
.contents-layout-content { padding: 5px 20px 20px; }
.contents-layout-title { font-size: 18px; font-weight: normal; line-height: 1.5; margin-bottom: 3px; }
.contents-layout-text { color: #666; font-size: 12px; line-height: 1.6;}

/* スマホ表示ではトップページのタグラインを隠す(ロゴがハンバーガーメニューと重なるため。H1には残す)。
   旧サイトでは隠しておらず、2026-10-01に変更 */
@media screen and (max-width:767px) {
  #header_logo .site_tagline { display:none !important; }
}

/* 本文中の動画(ブラウザ標準プレーヤー)。旧mediaelementのCSSにあった、画面幅に合わせて縮める指定 */
.wp-video { max-width:100%; height:auto; }
.wp-video video { display:block; max-width:100%; height:auto; background:#000; }

/* スマホ用の画面下の固定メニュー(partials/bottom_bar.blade.php)。PCでは出さない */
#bottom_bar { display:none; }
@media screen and (max-width:767px) {
  #bottom_bar {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:998;
    background:#000; border-top:1px solid rgba(255,255,255,0.2);
    padding-bottom:env(safe-area-inset-bottom);
  }
  #bottom_bar ul { display:flex; margin:0; padding:0; list-style:none; }
  #bottom_bar li { flex:1; }
  #bottom_bar a {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    height:56px; color:#ccc; font-size:11px; line-height:1.2; text-decoration:none;
  }
  #bottom_bar svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #bottom_bar li.is-current a { color:#fff; }
  #bottom_bar li.is-primary a { background:#ff9800; color:#fff; font-weight:bold; }
  /* フッターがバーに隠れないよう、ページ下端に余白を取る */
  body { padding-bottom:calc(56px + env(safe-area-inset-bottom)); }

  /* ヘッダー(サイト名とメニューボタン)を画面上部に固定する。背景は半透明にして後ろをぼかす。
     body に overflow-x:hidden があり position:sticky が効かないため fixed にして、その分だけ上に余白を取る */
  #header {
    position:fixed; top:0; left:0; right:0; z-index:997;
    background:rgba(255,255,255,0.85);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  body { padding-top:60px; }
}

/* フォームの送信ボタンを、応募ボタンと同じオレンジにそろえる(テーマの既定は濃いグレー) */
.wpcf7 .wpcf7-submit { background-color:#ff9800; border-radius:6px; font-weight:bold; }
.wpcf7 .wpcf7-submit:hover { background-color:#e68900; }

/* トップの画像。スマホでも縮小して全体を表示する(元サイズのまま左上だけ切り取られていた) */
.header_slider .image_wrap img { display:block; width:100%; height:auto; }

/* スマホのドロワーメニュー: 子メニュー(調教日記①〜⑥)は開閉させず、最初から字下げして表示する。
   テーマの字下げ指定(#mobile_menu ul ul a)は1階層ずれていて当たっていなかった */
#mobile_menu li ul { display:block; }
#mobile_menu li li a { padding-left:36px; }

/* 応募フォーム(/form)へ戻ったとき、スマホの固定ヘッダーに隠れないよう上に余白を取る */
#apply, #form-result { scroll-margin-top:80px; }

/* 応募フォームの必須項目の印 */
.wpcf7 .required { margin-left:4px; color:#d33; font-size:12px; font-weight:normal; }

/* フォームの表: スマホで行ごとに付く下マージン(フォームの背景のグレーが帯状に見えていた)をなくす */
.wpcf7 .rps_table tr { margin-bottom:0; }

/* 動画が続けて並ぶところ(/form の冒頭など)は1行分あける。記事本文の動画は <p> で区切られているため影響しない */
.wp-video + .wp-video { margin-top:1.5em; }

/* ヘッダーのサイト名の先頭にfaviconを置く */
#header_logo .logo a { display:inline-flex; align-items:center; gap:8px; }
#header_logo .logo_icon { width:40px; height:40px; border-radius:6px; flex-shrink:0; }
@media screen and (max-width:767px) {
  #header_logo .logo a { gap:6px; }
  #header_logo .logo_icon { width:28px; height:28px; border-radius:4px; }
}
/* アイコンの分だけサイト名が伸びるため、幅の狭いスマホではメニューボタンに重ならないよう、画面幅に合わせて文字を縮める(最大20px) */
#header_logo .mobile_logo_text { font-size:min(20px, 4.9vw) !important; }

/* スマホの左右余白をそろえる。一覧は10px、サイドバーは最大350px幅の中央寄せ(画面が広いほど余白が増える)で段差があった */
@media screen and (max-width:767px) {
  .blog_list .item_inner { padding-left:20px; padding-right:20px; }
  #side_col { padding-left:20px; padding-right:20px; }
  .side_col_inner { max-width:none; }
  #side_col .widget_content { max-width:none; margin-right:0; }
  /* トップページの一覧(見出しの黒帯と大きい記事)も同じ20pxにする(元は10px) */
  .index_post_list_wrap .post_list_title { padding-left:20px; padding-right:20px; }
  .index_post_list_wrap .large_item,
  .index_post_list_wrap .large_item_recommend,
  .index_post_list_wrap .item_recommend { padding-left:20px; padding-right:20px; }
}

/* ギャラリー(/gallery): スマホでは4列だと小さすぎるため2列にする。画像は srcset の250px版が使われる */
@media screen and (max-width:767px) {
  #gallery-1.gallery .gallery-item { width:50%; max-width:none; margin:0; padding:4px; box-sizing:border-box; }
  #gallery-1.gallery img { width:100%; height:auto; }
}

/* 記事本文のシリーズ一覧で、今読んでいる記事のカード(Article::contentForDisplay() が is-current を付ける) */
.cardlink.is-current { position:relative; background:#f3f3f3 !important; pointer-events:none; }
.cardlink.is-current img { opacity:.6; }
.cardlink.is-current .cardlink_title a { color:#666; text-decoration:none; }
.cardlink.is-current::after {
  content:'この記事'; position:absolute; top:-1px; left:-1px; z-index:1;
  padding:2px 10px; background:#555; color:#fff; font-size:11px; line-height:1.6;
}

/* 体験談(/experience)の吹き出し: スマホでは写真と名前を上に横並びで置き、吹き出しを全幅にする(しっぽは上向き) */
@media screen and (max-width:767px) {
  .speach_balloon { flex-direction:column; align-items:stretch; }
  .speach_balloon_user { display:flex; align-items:center; gap:12px; min-width:0; margin:0 0 14px; text-align:left; }
  .speach_balloon_user_image { width:56px; height:56px !important; }
  .speach_balloon_user_name { margin-top:0; }
  .speach_balloon_text::before, .speach_balloon_text::after { right:auto; top:auto; left:20px; margin:0; }
  .speech_balloon_left1 .speach_balloon_text::before, .speech_balloon_left2 .speach_balloon_text::before {
    bottom:calc(100% + 2px); border-width:0 8px 10px 8px; border-color:transparent transparent #ddd transparent;
  }
  .speech_balloon_left1 .speach_balloon_text::after, .speech_balloon_left2 .speach_balloon_text::after {
    bottom:calc(100% - 1px); border-width:0 8px 10px 8px; border-color:transparent transparent #fff transparent;
  }
}

/* PC(768px以上)のレイアウト。元は990px固定で、990px未満の画面では横にはみ出していた。
   最大990px、それより狭い画面では左右20pxを空けて縮める(990px以上の画面での見た目は元と同じ) */
@media screen and (min-width:768px) {
  #main_contents, #header_top, #global_menu > ul, #footer_inner, #footer_bottom_inner { width:min(990px, calc(100% - 40px)); }
  #main_contents.layout_type1 { width:min(750px, calc(100% - 40px)); }
  #main_contents.layout_type1.wide_content { width:min(990px, calc(100% - 40px)); }
  #main_col { flex:1 1 0; min-width:0; width:auto; }
  #side_col { flex:0 0 240px; }
  .header_slider { height:auto; }
  #header_top { flex-wrap:nowrap; }
  #header_logo { flex:0 0 auto; }
  #header_banner { flex:0 1 468px; min-width:0; margin-left:20px; }
  #global_menu > ul > li > a { font-size:clamp(11px, 1.45vw, 14px); white-space:nowrap; }
}