/* Custom Styles - インラインスタイルから抽出 */

/* CSS Variables */
:root {
  --headline_font_size: 38px;
  --headline_font_size_sp: 20px;
  --single_post_title_font_size: 28px;
  --single_post_title_font_size_sp: 20px;
  --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;
  --single_post_title_font_family: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  --main_color: #e55529;
  --main_color_dark: #c3491e;
  --main_color_light: #f0fff0;
  --main_color_hex: 0, 178, 0;
  --content_link_color: #00b200;
  --content_link_color_light: #1ed01e;
}

/* Typography */
body {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font_family_type2);
}

body,
input,
textarea {
  font-weight: 500;
  font-family: var(--font_family_type2);
}

.rich_font {
  font-size: 38px !important;
  font-family: var(--font_family_type2);
  font-weight: 600;
}

.p-vertical {
  font-family: var(--font_family_type2);
  font-weight: 600;
}

#page_header .headline {
  font-family: var(--font_family_type2);
  font-weight: 600;
}

.rich_font_type1 {
  font-family: var(--font_family_type1);
  font-weight: 600;
}

.rich_font_type2 {
  font-family: var(--font_family_type2);
  font-weight: 600;
}

.rich_font_type3 {
  font-family: var(--font_family_type3);
  font-weight: 600;
}

.logo_text {
  font-size: 26px;
}

/* Heading Styles */
.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;
}

.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;
}

.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;
}

.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;
}

/* Service List */
#service_list_type1 .title,
#service_list_type2 .title {
  font-size: 32px;
}

/* Buttons */
.post_content a.q_custom_button1 {
  min-width: 280px;
  height: 60px;
  border-radius: 70px;
  color: #0085b2 !important;
  border-color: #0085b2;
}

.post_content a.q_custom_button1:before {
  background-color: #0085b2 !important;
  opacity: 0;
}

.post_content a.q_custom_button1:hover {
  color: #fff !important;
  border-color: #0085b2 !important;
}

.post_content a.q_custom_button1:hover:before {
  opacity: 1;
}

.post_content a.q_custom_button2 {
  min-width: 280px;
  height: 60px;
  border-radius: 70px;
  color: #fff !important;
  background-color: #0085b2;
  border: none;
}

.post_content a.q_custom_button2:before {
  background-color: #005380 !important;
  opacity: 0;
}

.post_content a.q_custom_button2:hover:before {
  opacity: 1;
}

.post_content a.q_custom_button3 {
  min-width: 280px;
  height: 60px;
  border-radius: 70px;
  color: #fff !important;
  border-color: #0085b2;
}

.post_content a.q_custom_button3:before {
  background-color: #0085b2;
  opacity: 1;
}

.post_content a.q_custom_button3:hover {
  color: #0085b2 !important;
  border-color: #0085b2 !important;
}

.post_content a.q_custom_button3:hover:before {
  opacity: 0;
}

/* Frames */
.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;
}

/* Underlines */
.q_underline1 {
  font-weight: 500;
  background-image: linear-gradient(to right, transparent 50%, #fff799 50%);
  background-position: -100% 0.8em;
}

.q_underline2 {
  font-weight: 600;
  background-image: linear-gradient(to right, transparent 50%, #99f9ff 50%);
}

.q_underline3 {
  font-weight: 600;
  background-image: linear-gradient(to right, transparent 50%, #ff99b8 50%);
}

/* Header Slider */
#header_slider_content .catch {
  font-size: 46px;
}

/* Animations */
@media (hover: hover) {
  .animate_background .image_wrap img {
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.5s ease;
  }

  .animate_background:hover .image_wrap img {
    transform: scale(1.2);
  }
}

/* Custom Selling Point */
.cb_selling_point.num5 .sp_content.num4 {
  color: #000000;
  background-color: #ffffff;
}

.cb_selling_point.num5 .sp_content.num4 .switch:before {
  color: #000000;
}

.cb_selling_point.num5 .sp_content.num4 .design_button {
  border-color: #000000;
  color: #000000;
}

/* Responsive Typography */
@media screen and (max-width: 1200px) {
  .rich_font {
    font-size: 29px !important;
  }

  .logo_text {
    font-size: 20px;
  }

  #service_list_type1 .title,
  #service_list_type2 .title {
    font-size: 26px;
  }

  #header_slider_content .catch {
    font-size: 34px;
  }

  .post_content a.q_custom_button1,
  .post_content a.q_custom_button2,
  .post_content a.q_custom_button3 {
    min-width: 260px;
  }

  #drawer_menu_button {
    display: none;
  }

  #header_logo img.mobile {
    width: 90%;
  }

  .drh-flow__item .icon img {
    width: 60%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .rich_font {
    font-size: 20px !important;
  }

  .styled_h2 {
    font-size: 22px !important;
  }

  .styled_h3 {
    font-size: 20px !important;
  }

  .styled_h4 {
    font-size: 18px !important;
  }

  .styled_h5 {
    font-size: 16px !important;
  }

  #service_list_type1 .title,
  #service_list_type2 .title {
    font-size: 20px;
  }

  #header_slider_content .catch {
    font-size: 22px;
  }

  .post_content a.q_custom_button1,
  .post_content a.q_custom_button2,
  .post_content a.q_custom_button3 {
    min-width: 240px;
    height: 50px;
  }

  h2.catch img {
    margin-top: 0px;
  }
}

/* Strong Element Animation */
strong {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

strong.appear {
  opacity: 1;
  transform: translateY(0);
}