/*
 * このサイト独自のCSS。
 * 1. 旧テーマの設定画面の値として <head> にインラインで出力されていたCSS(id="current-page-style")をそのまま移したもの
 * 2. 移行で簡略化した部分の調整
 */

/* ------------------------------------------------------------------------------------
 1. テーマ設定(旧 current-page-style)
------------------------------------------------------------------------------------ */
:root {
  --headline_font_size: 24px;
  --headline_font_size_sp: 18px;
  --headline_font_type:Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --single_title_font_size: 30px;
  --single_title_font_size_sp: 20px;
  --single_title_font_type:Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --content_font_size: 18px;
  --content_font_size_sp: 16px;
  --content_font_type:Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --global_menu_font_size: 16px;
  --global_menu_font_size_sp: 14px;
  --font_family_type1: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --font_family_type2: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  --font_family_type3: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  --scrollbar-width: calc(100vw - 100%);
}


.logo_text { font-size:30px; }
@media screen and (max-width:1200px) {
  .logo_text { font-size:20px; }
}
@media(hover: hover) {
  .animate_background .image_wrap img { width:100%; height:100%; transition: transform  0.5s ease; }
  .animate_background:hover .image_wrap img { transform: scale(1.1); }
}

:root {
  --main_color: #003366;
  --main_color_dark: #001548;
  --main_color_light: #326598;
  --main_color_light2: #6e8397;
  --main_color_hex: 0,51,102;
  --content_link_color: #003366;
  --content_link_color_hover: rgba(0,51,102,0.5);
}
.styled_h2 {
  font-size:28px!important;
  text-align:center!important;
  font-weight:600!important;
  color:#000000;
  border-color:#000000;
  border-width:1px;
  border-style:solid;
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
background-color:transparent;
}
@media screen and (max-width:800px) {
  .styled_h2 { font-size:22px!important; }
}
.styled_h3 {
  font-size:26px!important;
  text-align:left!important;
  font-weight:600!important;
  color:#000000;
  border-color:#000000;
  border-width:2px;
  border-style:solid;
padding-left:1em!important;
padding-top:0.5em!important;
padding-bottom:0.5em!important;
border-right:none;
border-top:none;
border-bottom:none;
background-color:transparent;
}
@media screen and (max-width:800px) {
  .styled_h3 { font-size:20px!important; }
}
.styled_h4 {
  font-size:22px!important;
  text-align:left!important;
  font-weight:500!important;
  color:#000000;
  border-color:#dddddd;
  border-width:1px;
  border-style:dotted;
border-left:none;
border-right:none;
border-top:none;
padding-bottom:0.8em!important;
background-color:transparent;
}
@media screen and (max-width:800px) {
  .styled_h4 { font-size:18px!important; }
}
.styled_h5 {
  font-size:20px!important;
  text-align:left!important;
  font-weight:500!important;
  color:#000000;
  border-color:#000000;
  border-width:3px;
  border-style:double;
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
background-color:#f2f2f2;
padding:0.8em 1em!important;
}
@media screen and (max-width:800px) {
  .styled_h5 { font-size:16px!important; }
}
.post_content a.q_custom_button1 { min-width:280px; height:60px;border-radius:70px;color:#00698c !important; border-color:#00698c; }
.post_content a.q_custom_button1:before { background-color:#00698c !important;opacity:0; }
.post_content a.q_custom_button1:hover { color:#fff !important; border-color:#00698c !important; }
.post_content a.q_custom_button1:hover:before { opacity:1; }
@media (max-width: 1200px) {
  .post_content a.q_custom_button1 { min-width:260px; }
}
@media (max-width: 800px) {
  .post_content a.q_custom_button1 { min-width:240px; height:50px; }
}
.post_content a.q_custom_button2 { min-width:280px; height:60px;border-radius:70px;color:#fff !important; background-color:#00698c;border:none; }
.post_content a.q_custom_button2:before { background-color:#00375a !important;opacity:0; }
.post_content a.q_custom_button2:hover {  }
.post_content a.q_custom_button2:hover:before { opacity:1; }
@media (max-width: 1200px) {
  .post_content a.q_custom_button2 { min-width:260px; }
}
@media (max-width: 800px) {
  .post_content a.q_custom_button2 { min-width:240px; height:50px; }
}
.post_content a.q_custom_button3 { min-width:280px; height:60px;border-radius:70px;color:#fff !important; border-color:#00698c; }
.post_content a.q_custom_button3:before { background-color:#00698c;opacity:1; }
.post_content a.q_custom_button3:hover { color:#00698c !important; border-color:#00698c; !important }
.post_content a.q_custom_button3:hover:before { opacity:0; }
@media (max-width: 1200px) {
  .post_content a.q_custom_button3 { min-width:260px; }
}
@media (max-width: 800px) {
  .post_content a.q_custom_button3 { min-width:240px; height:50px; }
}
.q_frame1 {
  background:#ffffff;
  border-radius:0px;
  border-width:1px;
  border-color:#dddddd;
  border-style:solid;
}
.q_frame1 .q_frame_label {
  color:#000000;
}
.q_frame2 {
  background:#ffffff;
  border-radius:0px;
  border-width:1px;
  border-color:#009aff;
  border-style:solid;
}
.q_frame2 .q_frame_label {
  color:#009aff;
}
.q_frame3 {
  background:#ffffff;
  border-radius:10px;
  border-width:1px;
  border-color:#f9b42d;
  border-style:solid;
}
.q_frame3 .q_frame_label {
  color:#f9b42d;
}
.q_underline1 {
  font-weight:500;
  background-image: -webkit-linear-gradient(left, transparent 50%, #fff799 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #fff799 50%);
  background-image: linear-gradient(to right, transparent 50%, #fff799 50%);
  background-position:-100% 0.8em;}
.q_underline2 {
  font-weight:600;
  background-image: -webkit-linear-gradient(left, transparent 50%, #99f9ff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #99f9ff 50%);
  background-image: linear-gradient(to right, transparent 50%, #99f9ff 50%);
  }
.q_underline3 {
  font-weight:600;
  background-image: -webkit-linear-gradient(left, transparent 50%, #ff99b8 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #ff99b8 50%);
  background-image: linear-gradient(to right, transparent 50%, #ff99b8 50%);
  }
.speech_balloon1 .speech_balloon_text_inner {
  color:#000000;
  background-color:#ffdfdf;
  border-color:#ffdfdf;
}
.speech_balloon1 .before { border-left-color:#ffdfdf; }
.speech_balloon1 .after { border-right-color:#ffdfdf; }
.speech_balloon2 .speech_balloon_text_inner {
  color:#000000;
  background-color:#ffffff;
  border-color:#ff5353;
}
.speech_balloon2 .before { border-left-color:#ff5353; }
.speech_balloon2 .after { border-right-color:#ffffff; }
.speech_balloon3 .speech_balloon_text_inner {
  color:#000000;
  background-color:#ccf4ff;
  border-color:#ccf4ff;
}
.speech_balloon3 .before { border-left-color:#ccf4ff; }
.speech_balloon3 .after { border-right-color:#ccf4ff; }
.speech_balloon4 .speech_balloon_text_inner {
  color:#000000;
  background-color:#ffffff;
  border-color:#0789b5;
}
.speech_balloon4 .before { border-left-color:#0789b5; }
.speech_balloon4 .after { border-right-color:#ffffff; }
.qt_google_map .pb_googlemap_custom-overlay-inner { background:#000000; color:#ffffff; }
.qt_google_map .pb_googlemap_custom-overlay-inner::after { border-color:#000000 transparent transparent transparent; }


.header_slider_content .catch { font-size:44px; }
@media screen and (max-width:800px) {
  .header_slider_content .catch { font-size:24px; }
}

#header_slider_container .height_type2 {
    height: auto;
    aspect-ratio: 1740 / 780;
}

/* ------------------------------------------------------------------------------------
 2. 移行で簡略化した部分の調整
------------------------------------------------------------------------------------ */

/* カテゴリボタン: 旧テーマはSwiperで横スクロールさせ、初期化が済むまで非表示にしていた。
   Swiperを使わず横に並べ、スマホでははみ出した分を横スクロールにする */
#blog_category_sort { opacity:1; visibility:visible; }
.blog_category_sort_button { display:flex; }
.blog_category_sort_button.category_center { justify-content:center; }
@media screen and (max-width:800px) {
  .blog_category_sort_button.category_center { justify-content:flex-start; }
}

/* トップの「もっと見る」: 旧テーマはAjaxで続きを読み込むボタン。ブログ一覧の2ページ目へのリンクにした */
#index_tab_post_list a.post_list_more { display:block; color:inherit; text-decoration:none; }
#index_tab_post_list a.post_list_more span { display:flex; margin:70px auto 0; cursor:pointer; }
@media screen and (max-width:800px) {
  #index_tab_post_list a.post_list_more span { margin-top:40px; }
}

/* 404: 検索フォームの代わりにトップへのリンク */
#no_search_result .return_top_link { text-align:center; margin-top:30px; }

/* トップのタブ: 旧テーマはタブが3つあり、横にはみ出すため左右の余白用の疑似要素が縮んで0になっていた。
   タブが1つだと余白が残って右にずれるため、旧サイトと同じ位置にする */
@media screen and (max-width:600px) {
  #index_tab ol::before, #index_tab ol::after { display:none; }
}