/*TOC --------------- 共通設定 ├ 色 ├ フォントファミリー ├ フォントサイズ ├ フォントウェイト ├ 行間 ├ 文字間 ├ 動きの速度（ホバーなど） ├ ホバー時の透過具合 --------------- ヘッダー設定（p-header） ├ 背景色 ├ 高さ ├ 左右余白 ├ ロゴ ├ メニュー（SPのみ） ├ ナビゲーション ├ ボタン（PCのみ） --------------- フッター設定（p-footer） ├ 背景色 ├ ナビゲーション ├ コピーライト --------------- リッチテキスト設定（c-richtext） ├ フォントサイズ ├ フォントウェイト ├ 行間 ├ 文字間 ├ 上余白 --------------- セクションモジュール設定（p-section） ├ タイトル　装飾など ├ リード文 ├ コンテンツ 余白 ├ ボタン　余白 ├ オブション　背景 ├ オプション　上下余白 ├ オプション　コンテンツの左右幅 --------------- カラムの余白設定（p-row） --------------- ボタン設定（c-btn） ├ 共通ボタン ├ v2 ├ v3 --------------- タグ設定（p-tags） --------------- ページタイトル設定（p-page_head） --------------- */ :root { /* //////////////////////////////////////////////////////////////////////////////// 共通設定 */ /* ======================================== 色 */ /* 黒（テキスト） */ --common_color_black: #333; /* プライマリー（メイン） */ --common_color_primary: #2E3191; /* バリアント（サブ） */ --common_color_primary_variant: #ff967f; /* セカンダリー（アクセント） */ --common_color_secondary: #1B1055; /* 全体背景 */ --common_color_bg: #fff; /* ライン */ --common_color_line: #CACACA; /* 文字選択時の背景 */ --common_color_selection_bg: var(--common_color_black); /* 文字選択時のテキスト */ --common_color_selection_text: #fff; /* リンク */ --common_color_link: #000; /* ======================================== フォントファミリー */ /* 日本語ゴシック */ --common_font_family_jp_sans: 'Noto Sans JP', sans-serif; /* 日本語明朝 */ --common_font_family_jp_serif: 'Noto Serif JP', serif; /* 日本語基本フォント */ --common_font_family_jp: var(--common_font_family_jp_serif); /* 英語基本フォント */ --common_font_family_en: 'Lato', sans-serif; /* ======================================== フォントサイズ */ /* heading1 */ /* [SP] */ --common_heading1_font_size_sp: 24px; /* [PC] */ --common_heading1_font_size_pc: 32px; /* heading2 */ /* [SP] */ --common_heading2_font_size_sp: 24px; /* [PC] */ --common_heading2_font_size_pc: 32px; /* heading3 */ /* [SP] */ --common_heading3_font_size_sp: 20px; /* [PC] */ --common_heading3_font_size_pc: 28px; /* heading4 */ /* [SP] */ --common_heading4_font_size_sp: 16px; /* [PC] */ --common_heading4_font_size_pc: 24px; /* heading5 */ /* [SP] */ --common_heading5_font_size_sp: 15px; /* [PC] */ --common_heading5_font_size_pc: 20px; /* heading6 */ /* [SP] */ --common_heading6_font_size_sp: 15px; /* [PC] */ --common_heading6_font_size_pc: 18px; /* paragraph */ /* [SP] */ --common_paragraph_font_size_sp: 13px; /* [PC] */ --common_paragraph_font_size_pc: 16px; /* paragraph small */ /* [SP] */ --common_paragraph_small_font_size_sp: 12px; /* [PC] */ --common_paragraph_small_font_size_pc: 14px; /* annotation */ /* [SP] */ --common_annotation_font_size_sp: 12px; /* [PC] */ --common_annotation_font_size_pc: 14px; /* ======================================== フォントウェイト */ /* heading1 */ --common_heading1_font_weight: 700; /* heading2 */ --common_heading2_font_weight: 500; /* heading3 */ --common_heading3_font_weight: 500; /* heading4 */ --common_heading4_font_weight: 500; /* heading5 */ --common_heading5_font_weight: 500; /* heading6 */ --common_heading6_font_weight: 500; /* paragraph */ --common_paragraph_font_weight: 400; /* paragraph small */ --common_paragraph_small_font_weight: 400; /* annotation */ --common_annotation_font_weight: 400; /* ======================================== 行間 */ /* heading1 */ --common_heading1_line_height: 160%; /* heading2 */ --common_heading2_line_height: 160%; /* heading3 */ --common_heading3_line_height: 160%; /* heading4 */ --common_heading4_line_height: 160%; /* heading5 */ --common_heading5_line_height: 160%; /* heading6 */ --common_heading6_line_height: 160%; /* paragraph */ --common_paragraph_line_height: 200%; /* paragraph small */ --common_paragraph_small_line_height: 200%; /* annotation */ --common_annotation_line_height: 200%; /* ======================================== 文字間 */ /* heading1 */ --common_heading1_letter_spacing: 0.04em; /* heading2 */ --common_heading2_letter_spacing: 0.04em; /* heading3 */ --common_heading3_letter_spacing: 0.04em; /* heading4 */ --common_heading4_letter_spacing: 0.04em; /* heading5 */ --common_heading5_letter_spacing: 0.04em; /* heading6 */ --common_heading6_letter_spacing: 0.04em; /* paragraph */ --common_paragraph_letter_spacing: 0.04em; /* paragraph small */ --common_paragraph_small_letter_spacing: 0.04em; /* annotation */ --common_annotation_letter_spacing: 0.04em; /* ======================================== 動きの速度（ホバーなど） */ --common_transition_duration: 0.3s; /* ======================================== ホバー時の透過具合 */ --common_hover_opacity: 0.7; /* //////////////////////////////////////////////////////////////////////////////// ヘッダー設定（p-header） */ /* ======================================== 背景色 */ --header_bg_color: #fff; /* ======================================== 高さ */ /* [SP] */ --header_height_sp: 65px; /* [PC] */ --header_height_pc: 80px; /* ======================================== 左右余白 */ /* ロゴ左 */ /* [SP] */ --header_padding_left_sp: 15px; /* [PC] */ --header_padding_left_pc: 20px; /* メニューバー右（SPのみ） */ --header_menu_right_sp: 15px; /* ナビゲーション右（PCのみ） */ --header_padding_right_pc: 20px; /* ======================================== ロゴ */ /* 幅 */ /* [SP] */ --header_logo_width_sp: 60%; /* [PC] */ --header_logo_width_pc: 310px; /* ======================================== メニュー（SPのみ） */ /* メニューのサイズ */ /* [高さ] */ --header_menu_height: 13px; /* [幅] */ --header_menu_width: 20px; /* バーの色 */ --header_menu_border_color: var(--common_color_black); /* バーの太さ */ --header_menu_border_width: 1px; /* ======================================== ナビゲーション */ /* 親ナビゲーション　フォントサイズ */ /* [sp] */ --header_nav_global_font_size_sp: 15px; /* [pc] */ --header_nav_global_font_size_pc: 16px; /* 親ナビゲーション　フォントウェイト */ --header_nav_global_font_weight: 400; /* 親ナビゲーション　文字間 */ --header_nav_global_letter_spacing: 0.04em; /* 子ナビゲーション　フォントサイズ */ /* [sp] */ --header_nav_child_font_size_sp: 13px; /* [pc] */ --header_nav_child_font_size_pc: 13px; /* 子ナビゲーション　フォントウェイト */ --header_nav_child_font_weight: 500; /* 子ナビゲーション　文字間 */ --header_nav_child_letter_spacing: 0.04em; /* 子ナビゲーション　横幅（PCのみ） */ --header_nav_child_width_pc: 220px; /* ======================================== ボタン（PCのみ） */ /* 左余白（PCのみ） */ --header_nav_btn_left_margin_pc: 20px; /* 高さ（PCのみ） */ --header_nav_btn_height_pc: 37px; /* ボーダー幅（PCのみ） */ --header_nav_btn_border_width_pc: 2px; /* 角丸（PCのみ） */ --header_nav_btn_border_radius_pc: 4px; /* ボタン1　背景色（PCのみ） */ /* [通常] */ --header_nav_btn1_bg_color_pc: var(--common_color_primary); /* [ホバー] */ --header_nav_btn1_bg_color_pc_hover: #fff; /* ボタン1　ボーダーカラー（PCのみ） */ /* [通常] */ --header_nav_btn1_border_color_pc: var(--common_color_primary); /* [ホバー] */ --header_nav_btn1_border_color_pc_hover: var(--common_color_primary); /* ボタン1　文字色（PCのみ） */ /* [通常] */ --header_nav_btn1_font_color_pc: #fff; /* [ホバー] */ --header_nav_btn1_font_color_pc_hover: var(--common_color_primary); /* ボタン2　背景色（PCのみ） */ /* [通常] */ --header_nav_btn2_bg_color_pc: var(--common_color_secondary); /* [ホバー] */ --header_nav_btn2_bg_color_pc_hover: #fff; /* ボタン2　ボーダーカラー（PCのみ） */ /* [通常] */ --header_nav_btn2_border_color_pc: var(--common_color_secondary); /* [ホバー] */ --header_nav_btn2_border_color_pc_hover: var(--common_color_secondary); /* ボタン2　文字色（PCのみ） */ /* [通常] */ --header_nav_btn2_font_color_pc: #fff; /* [ホバー] */ --header_nav_btn2_font_color_pc_hover: var(--common_color_secondary); /* //////////////////////////////////////////////////////////////////////////////// フッター設定（p-footer） */ /* ======================================== 背景色 */ --footer_bg_color: #fff; /* ======================================== ナビゲーション */ /* 親ナビゲーション　フォントサイズ */ --footer_nav_global_font_size: 16px; /* 親ナビゲーション　フォントウェイト */ --footer_nav_global_font_weight: 700; /* 親ナビゲーション　色 */ --footer_nav_global_color: #2E3191; /* 子ナビゲーション　フォントサイズ */ --footer_nav_child_font_size: 15px; /* 子ナビゲーション　フォントウェイト */ --footer_nav_child_font_weight: 400; /* 子ナビゲーション　色 */ --footer_nav_child_color: #333333; /* ======================================== コピーライト */ /* 背景色 */ --footer_copyright_bg_color: #fff; /* 文字色 */ --footer_copyright_color: #333; /* フォントウェイト */ --footer_copyright_font_weight: 400; /* フォントサイズ */ --footer_copyright_font_size: 14px; /* 文字間 */ --footer_copyright_letter_spacing: 0.1em; /* //////////////////////////////////////////////////////////////////////////////// リッチテキスト設定（c-richtext） */ /* ======================================== フォントサイズ */ /* h1 */ /* [SP] */ --richtext_h1_font_size_sp: var(--common_heading1_font_size_sp); /* [PC] */ --richtext_h1_font_size_pc: var(--common_heading1_font_size_pc); /* h2 */ /* [SP] */ --richtext_h2_font_size_sp: var(--common_heading2_font_size_sp); /* [PC] */ --richtext_h2_font_size_pc: var(--common_heading2_font_size_pc); /* h3 */ /* [SP] */ --richtext_h3_font_size_sp: var(--common_heading3_font_size_sp); /* [PC] */ --richtext_h3_font_size_pc: var(--common_heading3_font_size_pc); /* h4 */ /* [SP] */ --richtext_h4_font_size_sp: var(--common_heading4_font_size_sp); /* [PC] */ --richtext_h4_font_size_pc: var(--common_heading4_font_size_pc); /* h5 */ /* [SP] */ --richtext_h5_font_size_sp: var(--common_heading5_font_size_sp); /* [PC] */ --richtext_h5_font_size_pc: var(--common_heading5_font_size_pc); /* h6 */ /* [SP] */ --richtext_h6_font_size_sp: var(--common_heading6_font_size_sp); /* [PC] */ --richtext_h6_font_size_pc: var(--common_heading6_font_size_pc); /* p */ /* [SP] */ --richtext_p_font_size_sp: var(--common_paragraph_font_size_sp); /* [PC] */ --richtext_p_font_size_pc: var(--common_paragraph_font_size_pc); /* その他 */ /* [SP] */ --richtext_other_font_size_sp: var(--common_paragraph_small_font_size_sp); /* [PC] */ --richtext_other_font_size_pc: var(--common_paragraph_small_font_size_pc); /* ======================================== フォントウェイト */ /* h1 */ --richtext_h1_font_weight: var(--common_heading1_font_weight); /* h2 */ --richtext_h2_font_weight: var(--common_heading2_font_weight); /* h3 */ --richtext_h3_font_weight: var(--common_heading3_font_weight); /* h4 */ --richtext_h4_font_weight: var(--common_heading4_font_weight); /* h5 */ --richtext_h5_font_weight: var(--common_heading5_font_weight); /* h6 */ --richtext_h6_font_weight: var(--common_heading6_font_weight); /* p */ --richtext_p_font_weight: var(--common_paragraph_font_weight); /* その他 */ --richtext_other_font_weight: var(--common_paragraph_small_font_weight); /* ======================================== 行間 */ /* h1 */ --richtext_h1_line_height: var(--common_heading1_line_height); /* h2 */ --richtext_h2_line_height: var(--common_heading2_line_height); /* h3 */ --richtext_h3_line_height: var(--common_heading3_line_height); /* h4 */ --richtext_h4_line_height: var(--common_heading4_line_height); /* h5 */ --richtext_h5_line_height: var(--common_heading5_line_height); /* h6 */ --richtext_h6_line_height: var(--common_heading6_line_height); /* p */ --richtext_p_line_height: var(--common_paragraph_line_height); /* その他 */ --richtext_other_line_height: var(--common_paragraph_small_line_height); /* ======================================== 文字間 */ /* h1 */ --richtext_h1_letter_spacing: var(--common_heading1_letter_spacing); /* h2 */ --richtext_h2_letter_spacing: var(--common_heading2_letter_spacing); /* h3 */ --richtext_h3_letter_spacing: var(--common_heading3_letter_spacing); /* h4 */ --richtext_h4_letter_spacing: var(--common_heading4_letter_spacing); /* h5 */ --richtext_h5_letter_spacing: var(--common_heading5_letter_spacing); /* h6 */ --richtext_h6_letter_spacing: var(--common_heading6_letter_spacing); /* p */ --richtext_p_letter_spacing: var(--common_paragraph_letter_spacing); /* その他 */ --richtext_other_letter_spacing: var(--common_paragraph_small_letter_spacing); /* ======================================== 上余白 */ /* h1 */ /* [SP] */ --richtext_h1_margin_top_sp: 32px; /* [PC] */ --richtext_h1_margin_top_pc: 32px; /* h2 */ /* [SP] */ --richtext_h2_margin_top_sp: 24px; /* [PC] */ --richtext_h2_margin_top_pc: 24px; /* h3 */ /* [SP] */ --richtext_h3_margin_top_sp: 24px; /* [PC] */ --richtext_h3_margin_top_pc: 24px; /* h4 */ /* [SP] */ --richtext_h4_margin_top_sp: 24px; /* [PC] */ --richtext_h4_margin_top_pc: 24px; /* h5 */ /* [SP] */ --richtext_h5_margin_top_sp: 16px; /* [PC] */ --richtext_h5_margin_top_pc: 16px; /* h6 */ /* [SP] */ --richtext_h6_margin_top_sp: 16px; /* [PC] */ --richtext_h6_margin_top_pc: 16px; /* p */ /* [SP] */ --richtext_p_margin_top_sp: 12px; /* [PC] */ --richtext_p_margin_top_pc: 12px; /* その他 */ /* [SP] */ --richtext_other_margin_top_sp: 12px; /* [PC] */ --richtext_other_margin_top_pc: 12px; /* //////////////////////////////////////////////////////////////////////////////// セクションモジュール設定（p-section） */ /* ======================================== タイトル　装飾など */ /* フォントサイズ */ /* [SP] */ --section_ttl_font_size_sp: 24px; /* [PC] */ --section_ttl_font_size_pc: 32px; /* 行間 */ --section_ttl_line_height: 150%; /* 文字間 */ --section_ttl_letter_spacing: 0.1em; /* ウェイト */ --section_ttl_font_weight: 400; /* 下余白（下線装飾までの距離） */ --section_ttl_padding_bottom: 25px; /* 装飾の横幅 */ --section_ttl_decoration_width: 30px; /* 装飾の高さ */ --section_ttl_decoration_height: 1px; /* 左半分の色 */ --section_ttl_decoration_left_color: var(--common_color_black); /* 右半分の色 */ --section_ttl_decoration_right_color: var(--common_color_black); /* ======================================== リード文 */ /* 上余白（タイトルとの間隔） */ --section_lead_margin_top: 30px; /* ======================================== コンテンツ 余白 */ /* 上余白（タイトルとの間隔） */ /* [SP] */ --section_body_margin_top_sp: 25px; /* [PC] */ --section_body_margin_top_pc: 50px; /* ======================================== ボタン　余白 */ /* 上余白 */ --section_btns_margin_top: 30px; /* ======================================== オブション　背景 */ /* なし */ --section_bg_default: var(--common_color_bg); /* グレー */ --section_bg_gray: #f0f0f0; /* ライトカラー */ --section_bg_light_theme: #f5f8fa; /* ======================================== オプション　上下余白 */ /* デフォルト */ /* [SP] */ --section_padding_default_sp: 60px; /* [PC] */ --section_padding_default_pc: 85px; /* 狭い */ /* [SP] */ --section_padding_low_sp: 30px; /* [PC] */ --section_padding_low_pc: 40px; /* ======================================== オプション　コンテンツの左右幅 */ /* デフォルト */ --section_width_default: 1080px; /* 広くする */ --section_width_wide: 1200px; /* 狭くする */ --section_width_narrow: 720px; /* スマホ時の左右余白 */ --section_side_padding_sp: 15px; /* //////////////////////////////////////////////////////////////////////////////// カラムの余白設定（p-row） */ /* 横 余白 */ /* [SP][2カラム] */ --row2_space_horizon_sp: 32px; /* [SP][3カラム] */ --row3_space_horizon_sp: 16px; /* [PC][2カラム] */ --row2_space_horizon_pc: 40px; /* [PC][3カラム] */ --row3_space_horizon_pc: 40px; /* [PC][4カラム] */ --row4_space_horizon_pc: 32px; /* [PC][5カラム] */ --row5_space_horizon_pc: 24px; /* [SP] 縦 余白 */ /* [SP][1カラム] */ --row1_space_vertical_sp: 32px; /* [SP][2カラム] */ --row2_space_vertical_sp: 32px; /* [SP][3カラム] */ --row3_space_vertical_sp: 16px; /* [PC][2カラム] */ --row2_space_vertical_pc: 40px; /* [PC][3カラム] */ --row3_space_vertical_pc: 40px; /* [PC][4カラム] */ --row4_space_vertical_pc: 32px; /* [PC][5カラム] */ --row5_space_vertical_pc: 24px; /* //////////////////////////////////////////////////////////////////////////////// ボタン設定（c-btn） */ /* ======================================== 共通ボタン */ /* 背景色 */ /* [通常時] */ --btn_bg_color: var(--common_color_primary); /* [ホバー時] */ --btn_bg_color_hover: #fff; /* 文字色 */ /* [通常時] */ --btn_font_color: #fff; /* [ホバー時] */ --btn_font_color_hover: var(--common_color_primary); /* ボーダー色 */ /* [通常時] */ --btn_border_color: var(--common_color_primary); /* [ホバー時] */ --btn_border_color_hover: var(--common_color_primary); /* ボーダー太さ */ /* [SP] */ --btn_border_width_sp: 2px; /* [PC] */ --btn_border_width_pc: 2px; /* フォントサイズ */ /* [SP] */ --btn_font_size_sp: var(--common_paragraph_font_size_sp); /* [PC] */ --btn_font_size_pc: var(--common_paragraph_font_size_pc); /* フォントウェイト */ --btn_font_weight: 700; /* 角丸 */ /* [SP] */ --btn_radius_sp: 27px; /* [PC] */ --btn_radius_pc: 27px; /* 高さ */ /* [SP] */ --btn_height_sp: 54px; /* [PC] */ --btn_height_pc: 54px; /* ======================================== v2 */ /* 背景色 */ /* [通常時] */ --btn_v2_bg_color: var(--btn_bg_color); /* [ホバー時] */ --btn_v2_bg_color_hover: var(--btn_bg_color_hover); /* 文字色 */ /* [通常時] */ --btn_v2_font_color: var(--btn_font_color); /* [ホバー時] */ --btn_v2_font_color_hover: var(--btn_font_color_hover); /* ボーダー色 */ /* [通常時] */ --btn_v2_border_color: var(--btn_border_color); /* [ホバー時] */ --btn_v2_border_color_hover: var(--btn_border_color_hover); /* ボーダー太さ */ /* [SP] */ --btn_v2_border_width_sp: var(--btn_border_width_sp); /* [PC] */ --btn_v2_border_width_pc: var(--btn_border_width_pc); /* フォントサイズ */ /* [SP] */ --btn_v2_font_size_sp: var(--btn_font_size_sp); /* [PC] */ --btn_v2_font_size_pc: var(--btn_font_size_pc); /* フォントウェイト */ --btn_v2_font_weight: var(--btn_font_weight); /* 角丸 */ /* [SP] */ --btn_v2_radius_sp: var(--btn_radius_sp); /* [PC] */ --btn_v2_radius_pc: var(--btn_radius_pc); /* 高さ */ /* [SP] */ --btn_v2_height_sp: var(--btn_height_sp); /* [PC] */ --btn_v2_height_pc: var(--btn_height_pc); /* ======================================== v3 */ /* 背景色 */ /* [通常時] */ --btn_v3_bg_color: var(--btn_bg_color); /* [ホバー時] */ --btn_v3_bg_color_hover: var(--btn_bg_color_hover); /* 文字色 */ /* [通常時] */ --btn_v3_font_color: var(--btn_font_color); /* [ホバー時] */ --btn_v3_font_color_hover: var(--btn_font_color_hover); /* ボーダー色 */ /* [通常時] */ --btn_v3_border_color: var(--btn_border_color); /* [ホバー時] */ --btn_v3_border_color_hover: var(--btn_border_color_hover); /* ボーダー太さ */ /* [SP] */ --btn_v3_border_width_sp: var(--btn_border_width_sp); /* [PC] */ --btn_v3_border_width_pc: var(--btn_border_width_pc); /* フォントサイズ */ /* [SP] */ --btn_v3_font_size_sp: var(--btn_font_size_sp); /* [PC] */ --btn_v3_font_size_pc: var(--btn_font_size_pc); /* フォントウェイト */ --btn_v3_font_weight: var(--btn_font_weight); /* 角丸 */ /* [SP] */ --btn_v3_radius_sp: var(--btn_radius_sp); /* [PC] */ --btn_v3_radius_pc: var(--btn_radius_pc); /* 高さ */ /* [SP] */ --btn_v3_height_sp: var(--btn_height_sp); /* [PC] */ --btn_v3_height_pc: var(--btn_height_pc); /* //////////////////////////////////////////////////////////////////////////////// タグ設定（p-tags） */ /* 背景色 */ /* [通常時] */ --tag_bg_color: #fff; /* [ホバー時] */ --tag_bg_color_hover: var(--common_color_black); /* 文字色 */ /* [通常時] */ --tag_font_color: var(--common_color_black); /* [ホバー時] */ --tag_font_color_hover: #fff; /* ボーダー色 */ /* [通常時] */ --tag_border_color: var(--common_color_black); /* [ホバー時] */ --tag_border_color_hover: var(--common_color_black); /* ボーダー太さ */ /* [SP] */ --tag_border_width_sp: 1px; /* [PC] */ --tag_border_width_pc: 1px; /* フォントサイズ */ /* [SP] */ --tag_font_size_sp: var(--common_annotation_font_size_sp); /* [PC] */ --tag_font_size_pc: var(--common_annotation_font_size_pc); /* フォントウェイト */ --tag_font_weight: 400; /* 角丸 */ /* [SP] */ --tag_radius_sp: 12px; /* [PC] */ --tag_radius_pc: 12px; /* 高さ */ /* [SP] */ --tag_height_sp: 24px; /* [PC] */ --tag_height_pc: 24px; /* 左右余白 */ /* [SP] */ --tag_padding_sp: 15px; /* [PC] */ --tag_padding_pc: 30px; /* //////////////////////////////////////////////////////////////////////////////// ページタイトル設定（p-page_head） */ /* 高さ（PCのみ） */ --page_head_height_pc: 160px; /* 余白（SPのみ） */ /* [上下] */ --page_head_padding_vertical_sp: 35px; /* [左右] */ --page_head_padding_horizon_sp: 10px; } .row-fluid [class*=span] { min-height: auto !important; } body .hs-tools-menu { top: 120px !important; } #wrap .hs_recaptcha { margin-top: 60px; } body { font-family: var(--common_font_family_jp); color: var(--common_color_black); background-color: var(--common_color_bg); } body.is-open { overflow: hidden; height: 100%; } img, svg { max-width: 100%; height: auto; vertical-align: top; } ::-moz-selection { background-color: var(--common_color_selection_bg); color: var(--common_color_selection_text); } ::-moz-selection, ::selection { background-color: var(--common_color_selection_bg); color: var(--common_color_selection_text); } a, .a { cursor: pointer; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); } a:hover, .a:hover { cursor: pointer; } a, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, div, main, article, section, header, footer, aside, input, button, select, textarea, body, table, tr, th, td, figure { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; word-break: normal; line-break: strict; word-wrap: break-word; overflow-wrap: break-word; } iframe { max-width: 100% !important; } #wrap { position: relative; overflow: hidden; } #header { position: relative; z-index: 5; /* by #wrap */ } #page-contents { position: relative; z-index: 3; /* by #wrap */ } #foot-contents { position: relative; z-index: 2; /* by #wrap */ } #footer { position: relative; z-index: 1; /* by #wrap */ } #header { position: fixed; top: 0; left: 0; width: 100%; margin: 0 auto; } .c-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-decoration: none; font-weight: var(--btn_font_weight); background-color: var(--btn_bg_color); color: var(--btn_font_color); } .c-btn:hover, .c-btn.is-current { text-decoration: none; background-color: var(--btn_bg_color_hover); color: var(--btn_font_color_hover); } .c-btn.-v2 { font-weight: var(--btn_v2_font_weight); background-color: var(--btn_v2_bg_color); color: var(--btn_v2_font_color); } .c-btn.-v2:hover, .c-btn.-v2.is-current { background-color: var(--btn_v2_bg_color_hover); color: var(--btn_v2_font_color_hover); } .c-btn.-v3 { font-weight: var(--btn_v3_font_weight); background-color: var(--btn_v3_bg_color); color: var(--btn_v3_font_color); } .c-btn.-v3:hover, .c-btn.-v3.is-current { background-color: var(--btn_v3_bg_color_hover); color: var(--btn_v3_font_color_hover); } .c-btn.-directory_nav { background-color: #ECECEC; border: 2px solid #ECECEC; color: var(--common_color_black); font-weight: normal; padding-left: 24px; padding-right: 24px; } .c-btn.-directory_nav.is-current, .c-btn.-directory_nav:hover { background-color: var(--common_color_black); border: 2px solid var(--common_color_black); color: #fff; } .c-heading1 { font-weight: var(--common_heading1_font_weight); line-height: var(--common_heading1_line_height); letter-spacing: var(--common_heading1_letter_spacing); } .c-heading2 { font-weight: var(--common_heading2_font_weight); line-height: var(--common_heading2_line_height); letter-spacing: var(--common_heading2_letter_spacing); } .c-heading3 { font-weight: var(--common_heading3_font_weight); line-height: var(--common_heading3_line_height); letter-spacing: var(--common_heading3_letter_spacing); } .c-heading4 { font-weight: var(--common_heading4_font_weight); line-height: var(--common_heading4_line_height); letter-spacing: var(--common_heading4_letter_spacing); } .c-heading5 { font-weight: var(--common_heading5_font_weight); line-height: var(--common_heading5_line_height); letter-spacing: var(--common_heading5_letter_spacing); } .c-heading6 { font-weight: var(--common_heading6_font_weight); line-height: var(--common_heading6_line_height); letter-spacing: var(--common_heading6_letter_spacing); } .c-paragraph { font-weight: var(--common_paragraph_font_weight); line-height: var(--common_paragraph_line_height); letter-spacing: var(--common_paragraph_letter_spacing); } .c-paragraph_small { font-weight: var(--common_paragraph_small_font_weight); line-height: var(--common_paragraph_small_line_height); letter-spacing: var(--common_paragraph_small_letter_spacing); } .c-annotation { font-weight: var(--common_annotation_font_weight); line-height: var(--common_annotation_line_height); letter-spacing: var(--common_annotation_letter_spacing); } #blog-contents, .c-blog-contents, .c-richtext { font-weight: var(--richtext_other_font_weight); line-height: var(--richtext_other_line_height); letter-spacing: var(--richtext_other_letter_spacing); } #blog-contents h1, .c-blog-contents h1, .c-richtext h1 { font-weight: var(--richtext_h1_font_weight); line-height: var(--richtext_h1_line_height); letter-spacing: var(--richtext_h1_letter_spacing); } #blog-contents h2, .c-blog-contents h2, .c-richtext h2 { font-weight: var(--richtext_h2_font_weight); line-height: var(--richtext_h2_line_height); letter-spacing: var(--richtext_h2_letter_spacing); } #blog-contents h3, .c-blog-contents h3, .c-richtext h3 { font-weight: var(--richtext_h3_font_weight); line-height: var(--richtext_h3_line_height); letter-spacing: var(--richtext_h3_letter_spacing); } #blog-contents h4, .c-blog-contents h4, .c-richtext h4 { font-weight: var(--richtext_h4_font_weight); line-height: var(--richtext_h4_line_height); letter-spacing: var(--richtext_h4_letter_spacing); } #blog-contents h5, .c-blog-contents h5, .c-richtext h5 { font-weight: var(--richtext_h5_font_weight); line-height: var(--richtext_h5_line_height); letter-spacing: var(--richtext_h5_letter_spacing); } #blog-contents h6, .c-blog-contents h6, .c-richtext h6 { font-weight: var(--richtext_h6_font_weight); line-height: var(--richtext_h6_line_height); letter-spacing: var(--richtext_h6_letter_spacing); } #blog-contents p, .c-blog-contents p, .c-richtext p { font-weight: var(--richtext_p_font_weight); line-height: var(--richtext_p_line_height); letter-spacing: var(--richtext_p_letter_spacing); } #blog-contents table, .c-blog-contents table, .c-richtext table { width: 100%; } .p-anchor { position: relative; height: 0; } .p-anchor__position { position: absolute; height: 0; left: 0; } .p-section { background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: var(--section_bg_default); position: relative; } .p-section.-bg_gray { background-color: var(--section_bg_gray); } .p-section.-bg_light_theme { background-color: var(--section_bg_light_theme); } .p-section__anchor { position: absolute; height: 0; } .p-section__ttl { position: relative; text-align: center; line-height: var(--section_ttl_line_height); letter-spacing: var(--section_ttl_letter_spacing); font-weight: var(--section_ttl_font_weight); padding-bottom: var(--section_ttl_padding_bottom); } .p-section__ttl::before, .p-section__ttl::after { content: ""; display: block; position: absolute; bottom: 0; height: var(--section_ttl_decoration_height); width: calc(var(--section_ttl_decoration_width) / 2); } .p-section__ttl::before { background-color: var(--section_ttl_decoration_left_color); right: 50%; } .p-section__ttl::after { background-color: var(--section_ttl_decoration_right_color); left: 50%; } .p-section__ttl.-white { color: #fff; } .p-section__ttl.-white::before, .p-section__ttl.-white::after { background-color: #fff; } .p-section__ttl.-no_decoration { padding-bottom: 0; } .p-section__ttl.-no_decoration::before, .p-section__ttl.-no_decoration::after { display: none; } * + .p-section__lead { margin-top: var(--section_lead_margin_top); } .p-section__lead.-white { color: #fff; } * + .p-section__btns { margin-top: var(--section_btns_margin_top); } .p-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-row__col { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; } .p-card__link { text-decoration: none; color: var(--common_color_black); } .p-card__head { overflow: hidden; background-color: #000; } .p-card__figure { padding-bottom: 56.333%; background-repeat: no-repeat; background-position: center center; background-size: cover; will-change: transform; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); } .p-card__figure img { display: none; } .p-card__link:hover .p-card__figure { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: var(--common_hover_opacity); } .p-card__txt { font-weight: var(--common_annotation_font_weight); line-height: var(--common_annotation_line_height); letter-spacing: var(--common_annotation_letter_spacing); } .p-tags__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-tags__item { list-style: none; } .p-tags__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 24px; background-color: var(--tag_bg_color); color: var(--tag_font_color); font-weight: var(--tag_font_weight); } .p-tags__btn:hover { background-color: var(--tag_bg_color_hover); color: var(--tag_font_color_hover); } .p-banner { display: block; } .p-banner__contents { position: relative; overflow: hidden; } .p-banner__bg { background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; will-change: transform; } .p-banner__bg img { display: none; } .p-page_head { background-repeat: no-repeat; background-position: center center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-page_head__ttl { font-weight: var(--common_heading1_font_weight); line-height: var(--common_heading1_line_height); letter-spacing: var(--common_heading1_letter_spacing); } .p-page_head__ttl.-white { color: #fff; } .p-page_head__ttl.-black { color: var(--common_color_black); } .p-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p-block__ttl { font-weight: 700; font-size: 18px; line-height: 160%; } .p-block__txt { font-size: 14px; line-height: 228.571%; } .p-block_v2__icon { background: var(--common_color_black); color: #fff; width: 120px; height: 30px; border-radius: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; font-weight: 700; font-size: 14px; } * + .p-block_v4 { margin-top: 20px; } .p-block_v4__figure img { vertical-align: top; } .p-block_v4__main { background-color: #f0f0f0; } .p-modal_bg { background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1000; display: none; } .p-modal_contents { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; max-height: 90vh; z-index: 1001; display: none; } .p-modal_contents__closearea { position: relative; height: 0; z-index: 3; } .p-modal_contents__close { position: absolute; top: 0; right: 0; } .p-modal_contents__closebtn { position: relative; background-color: #fff; cursor: pointer; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); width: 70px; height: 70px; } .p-modal_contents__closebtn::before, .p-modal_contents__closebtn::after { content: ""; display: block; background-color: #696969; position: absolute; top: 50%; left: 50%; border-radius: 2px; width: 48px; height: 4px; } .p-modal_contents__closebtn::before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .p-modal_contents__closebtn::after { -webkit-transform: translate(-50%, -50%) rotate(315deg); transform: translate(-50%, -50%) rotate(315deg); } .p-modal_contents__board { position: relative; max-height: 90vh; background-color: #fff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); overflow: scroll; z-index: 2; } .p-bread { padding: 15px; border-top: 1px solid var(--common_color_line); border-bottom: 1px solid var(--common_color_line); } .p-bread__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-bread__item { list-style: none; } .p-bread__link { color: var(--common_color_black); } .p-top_hero__main { z-index: 4; /* by .p-top_hero */ } .p-top_hero__nav { z-index: 3; /* by .p-top_hero */ } .p-top_hero__bar { z-index: 2; /* by .p-top_hero */ } .p-top_hero__bg { z-index: 1; /* by .p-top_hero */ } .p-top_hero { position: relative; } .p-top_hero__main { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-top_hero__nav { position: relative; } .p-top_hero__bg { background-repeat: no-repeat; background-position: center center; background-size: cover; display: block; position: absolute; top: 0; left: 0; width: 100%; } .p-top_hero__bg img { display: none; } .p-tab_nav__section.is-active { z-index: 3; /* by .p-tab_nav */ } .p-tab_nav__section { z-index: 2; /* by .p-tab_nav */ } .p-tab_nav__height { z-index: 1; /* by .p-tab_nav */ } .p-tab_nav { position: relative; -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); border-radius: 10px; } .p-tab_nav__section { position: absolute; top: 0; left: 0; width: 100%; } .p-tab_nav__height { position: relative; } .p-tab_nav__contents { position: relative; } .p-tab_nav__head { position: absolute; width: 50%; bottom: 100%; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #444; color: #fff; cursor: pointer; border-radius: 10px 10px 0 0; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); } .p-tab_nav__head:hover { background-color: var(--common_color_black); } .is-active .p-tab_nav__head { background-color: #fff; color: var(--common_color_black); } .p-tab_nav__section.-left .p-tab_nav__head { left: 0; } .p-tab_nav__section.-right .p-tab_nav__head { right: 0; } .p-tab_nav__ttl { font-weight: 700; font-size: 18px; } .p-tab_nav__body { background-color: #fff; border-radius: 0 0 10px 10px; } .p-top_news__ttl::before, .p-top_news__ttl::after { content: ""; display: block; width: 25px; height: 3px; position: absolute; bottom: 0; } .p-top_news__ttl::before { background-color: #aaa; right: 50%; } .p-top_news__ttl::after { background-color: #ccc; left: 50%; } .p-top_news__full { font-size: 14px; line-height: 160%; } .p-top_news__body { font-size: 14px; line-height: 160%; } .p-top_news__item { list-style: none; } * + .p-top_news__item { margin-top: 25px; } .p-top_news__date { margin-right: 15px; } .p-top_news__link { color: var(--common_color_black); text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: justify; } .p-top_news__link:hover { text-decoration: underline; } .p-top_news__icon { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 9px; flex: 0 0 9px; height: 19px; position: relative; overflow: hidden; } .p-top_news__icon::before, .p-top_news__icon::after { content: ""; display: block; width: 200%; height: 2px; background: var(--common_color_black); position: absolute; right: 0; } .p-top_news__icon::before { bottom: 50%; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate(-2px, 1px) rotate(45deg); transform: translate(-2px, 1px) rotate(45deg); } .p-top_news__icon::after { top: 50%; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: translate(-2px, -1px) rotate(-45deg); transform: translate(-2px, -1px) rotate(-45deg); } .p-top_news__foot { font-weight: 700; font-size: 14px; } .p-top_news__more_link { color: var(--common_color_black); text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .p-top_news__more_link:hover { text-decoration: underline; } .p-top_news__more_icon { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 9px; flex: 0 0 9px; height: 19px; position: relative; overflow: hidden; } .p-top_news__more_icon::before, .p-top_news__more_icon::after { content: ""; display: block; width: 200%; height: 2px; background: var(--common_color_black); position: absolute; right: 0; } .p-top_news__more_icon::before { bottom: 50%; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate(-2px, 1px) rotate(45deg); transform: translate(-2px, 1px) rotate(45deg); } .p-top_news__more_icon::after { top: 50%; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: translate(-2px, -1px) rotate(-45deg); transform: translate(-2px, -1px) rotate(-45deg); } * + .p-topics__archive { margin-top: 35px; } * + .p-topics__tags { margin-top: 40px; } .p-flow_list_rt { max-width: 520px; margin: 0 auto; } .p-flow_list_rt__item { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding-bottom: 40px; } .p-flow_list_rt__item:last-child { padding-bottom: 0; } .p-flow_list_rt__item::before { content: ""; display: block; width: 2px; height: 100%; background-color: var(--common_color_secondary); position: absolute; z-index: 1; top: 30px; left: 29px; } .p-flow_list_rt__item:last-child { padding-bottom: 0; } .p-flow_list_rt__item:last-child::before { display: none; } .p-flow_list_rt__num { -webkit-box-flex: 0; -ms-flex: 0 0 60px; flex: 0 0 60px; height: 60px; background-color: var(--common_color_secondary); border: 2px solid var(--common_color_secondary); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 20px; color: #fff; font-weight: 500; z-index: 2; } .p-flow_list_rt__txt { padding-left: 32px; } .p-slider_area__item { text-align: center; } .p-slider_area__item img { vertical-align: top; } .p-slider_area .bx-wrapper { position: relative; } .p-slider_area .bx-prev, .p-slider_area .bx-next { background-repeat: no-repeat; background-position: center center; background-size: contain; display: block; text-indent: -999999px; position: absolute; top: 50%; } .p-faq__head { background-color: var(--common_color_black); color: #fff; } .p-faq__section { border-bottom: 1px solid var(--common_color_line); } .p-faq__q { position: relative; cursor: pointer; } .p-faq__q_inner { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 700; position: relative; } .p-faq__q_inner .icon { font-family: var(--common_font_family_en); padding-top: 4px; } .p-faq__q_inner .btn { position: absolute; top: 50%; right: 0; width: 20px; height: 20px; border-radius: 10px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); border: 1px solid var(--common_color_primary); display: block; } .p-faq__q_inner .btn::before, .p-faq__q_inner .btn::after { content: ""; display: block; background-color: var(--common_color_primary); position: absolute; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); width: 10px; height: 1px; top: 50%; left: 50%; } .p-faq__q_inner .btn::before { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .p-faq__q_inner .btn::after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .p-faq__section.is-open .p-faq__q_inner .btn::after { opacity: 0; } .p-faq__a { display: none; } .p-faq__a_inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-faq__a_inner .icon { font-family: var(--common_font_family_en); padding-top: 4px; font-weight: 700; } .p-banner_blocks__label { position: relative; z-index: 2; /* by .p-banner_blocks__link */ } .p-banner_blocks__bg { position: relative; z-index: 1; /* by .p-banner_blocks__link */ } .p-banner_blocks { -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-banner_blocks__link { display: block; text-decoration: none; color: #fff; position: relative; overflow: hidden; background-color: #000; } .p-banner_blocks__label { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 185px; height: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--common_color_secondary); position: absolute; bottom: 0; left: 0; max-width: 100%; padding-left: 25px; padding-right: 25px; } .p-banner_blocks__icon { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 9px; flex: 0 0 9px; height: 19px; position: relative; overflow: hidden; } .p-banner_blocks__icon::before, .p-banner_blocks__icon::after { content: ""; display: block; width: 200%; height: 2px; background-color: #fff; position: absolute; right: 0; } .p-banner_blocks__icon::before { bottom: 50%; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate(-2px, 1px) rotate(45deg); transform: translate(-2px, 1px) rotate(45deg); } .p-banner_blocks__icon::after { top: 50%; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: translate(-2px, -1px) rotate(-45deg); transform: translate(-2px, -1px) rotate(-45deg); } .p-banner_blocks__txt { font-weight: 500; letter-spacing: var(--common_paragraph_letter_spacing); } .p-banner_blocks__bg { display: block; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); will-change: transform; position: relative; } .p-banner_blocks__item.-square .p-banner_blocks__bg { padding-bottom: 84.21%; } .p-banner_blocks__item.-rectangle .p-banner_blocks__bg { padding-bottom: 27.777%; } .p-banner_blocks__bg img { display: none; } .p-banner_blocks__link:hover .p-banner_blocks__bg { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: var(--common_hover_opacity); } .p-interview_accordion { position: relative; } .p-interview_accordion__anchor { position: absolute; left: 0; height: 0; } .p-interview_accordion__head { position: relative; } .p-interview_accordion__board { background-color: #F7F7F7; } .p-interview_accordion__body { display: none; } .p-interview_accordion__btn { background-color: #F7F7F7; border: 1px solid var(--common_color_line); height: 50px; cursor: pointer; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-interview_accordion__arr_area { width: 40px; height: 20px; overflow: hidden; position: relative; } .p-interview_accordion__arr { width: 28px; height: 28px; border: 5px solid var(--common_color_black); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); position: absolute; top: 50%; left: 50%; margin-top: -10px; } .is-interview-open .p-interview_accordion__arr { margin-top: 10px; } .p-carousel .bx-wrapper { position: relative; } .p-carousel .bx-prev, .p-carousel .bx-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; } .p-carousel .bx-prev::before, .p-carousel .bx-prev::after, .p-carousel .bx-next::before, .p-carousel .bx-next::after { content: ""; display: block; width: 200%; height: 7px; background-color: var(--common_color_primary); position: absolute; right: 0; } .p-carousel .bx-prev img, .p-carousel .bx-next img { opacity: 0; } .p-carousel .bx-prev::before { bottom: 50%; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate(35px, 4px) rotate(-45deg); transform: translate(35px, 4px) rotate(-45deg); } .p-carousel .bx-prev::after { top: 50%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: translate(35px, -4px) rotate(45deg); transform: translate(35px, -4px) rotate(45deg); } .p-carousel .bx-next::before { bottom: 50%; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate(-6px, 4px) rotate(45deg); transform: translate(-6px, 4px) rotate(45deg); } .p-carousel .bx-next::after { top: 50%; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: translate(-6px, -4px) rotate(-45deg); transform: translate(-6px, -4px) rotate(-45deg); } .p-carousel .bx-pager { margin-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-carousel .bx-pager-item { padding-left: 9px; } .p-carousel .bx-pager-item:last-child { padding-right: 9px; } .p-carousel .bx-pager-link { display: block; text-indent: -9999999px; background-color: #fff; width: 9px; height: 9px; } .p-carousel .bx-pager-link.active { background-color: var(--common_color_black); } .p-carousel.-board .bx-prev, .p-carousel.-board .bx-next { -webkit-transform: none; transform: none; } .p-directory_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-directory_nav__item { list-style: none; } .p-directory_nav__link { text-decoration: none; background-color: #E0E0E0; color: var(--common_color_black); font-size: 14px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-directory_nav__link:hover, .p-directory_nav__link.is-current { background-color: var(--common_color_black); color: #fff; } .p-table__th, .p-table__td { text-align: left; line-height: 150%; } .p-table__th { font-weight: 500; } .p-scroll_table > table { float: none !important; } * + .p-left_image__row { margin-top: 40px; } .p-pager { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-pager__all, .p-pager__prev, .p-pager__next { -webkit-box-flex: 0; -ms-flex: 0 0 120px; flex: 0 0 120px; margin: 0 10px; } .p-pager__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 120px; height: 60px; background-color: #f0f0f0; border: 2px solid #dadada; text-decoration: none; color: var(--common_color_black); } .p-pager__btn i { color: var(--common_color_black); } .p-sns_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .p-sns_list__item { list-style: none; margin-right: 10px; } .p-sns_list__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 80px; height: 30px; border-radius: 5px; text-decoration: none; } .p-sns_list__btn.-tw { background-color: #55ADEF; color: #fff; } .p-sns_list__btn.-fb { background-color: #325096; color: #fff; } .p-sns_list__btn.-hb { background-color: #008FDE; color: #fff; } .p-category_bar { background-color: var(--common_color_black); padding: 10px 0; } .p-category_bar__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-category_bar__item { list-style: none; padding: 5px 15px; letter-spacing: 0.04em; } .p-category_bar__link { color: #fff; text-decoration: none; } .p-loop_slider { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-loop_slider__group { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-loop_slider__group:first-child { -webkit-animation: loopSolider 90s linear infinite; animation: loopSolider 90s linear infinite; } .p-loop_slider__group:nth-child(2) { -webkit-animation: loopSolider2 90s -60s linear infinite; animation: loopSolider2 90s -60s linear infinite; } .p-loop_slider__group:last-child { -webkit-animation: loopSolider3 90s -30s linear infinite; animation: loopSolider3 90s -30s linear infinite; } .p-loop_slider__figure { width: 330px; height: 185px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .p-loop_slider__figure img { display: none; } @-webkit-keyframes loopSolider { 0% { -webkit-transform: translateX(200%); transform: translateX(200%); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes loopSolider { 0% { -webkit-transform: translateX(200%); transform: translateX(200%); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes loopSolider2 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes loopSolider2 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes loopSolider3 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } to { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @keyframes loopSolider3 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } to { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } .p-header { background-color: var(--header_bg_color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p-hdr_nav_global__item { list-style: none; position: relative; font-weight: var(--header_nav_global_font_weight); letter-spacing: var(--header_nav_global_letter_spacing); } .p-hdr_nav_global__link { text-decoration: none; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); } .p-hdr_nav_global__child { display: none; } .p-hdr_nav_child__item { list-style: none; font-weight: var(--header_nav_child_font_weight); letter-spacing: var(--header_nav_child_letter_spacing); } .p-hdr_nav_child__link { text-decoration: none; } .p-footer { background-color: var(--footer_bg_color); } .p-footer__item { font-weight: var(--footer_nav_global_font_weight); padding-top: 15px; padding-bottom: 15px; font-size: var(--footer_nav_global_font_size); } .p-footer__item.-child { font-weight: var(--footer_nav_child_font_weight); padding-top: 0; padding-bottom: 15px; font-size: var(--footer_nav_child_font_size); } .p-footer__link { text-decoration: none; color: var(--footer_nav_global_color); } .p-footer__link.-child { color: var(--footer_nav_child_color); } .p-footer__copyright { text-align: center; background-color: var(--footer_copyright_bg_color); color: var(--footer_copyright_color); font-weight: var(--footer_copyright_font_weight); font-size: var(--footer_copyright_font_size); letter-spacing: var(--footer_copyright_letter_spacing); padding: 20px 10px; } .u-dib { display: inline-block !important; } .u-db { display: block !important; } .u-dn { display: none !important; } .u-df { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .u-aac { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .u-aafs { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .u-aafe { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .u-jcc { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .u-jcfs { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .u-jcfe { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .u-jcsb { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .u-fwwrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-bold { font-weight: 700 !important; } .u-medium { font-weight: 500 !important; } .u-normal { font-weight: 400 !important; } .u-light { font-weight: 300 !important; } .u-black { color: var(--common_color_black) !important; } .u-black-heading { color: var(--common_color_black) !important; } .u-white { color: #fff !important; } .u-primary { color: var(--common_color_primary) !important; } .u-primary_variant { color: var(--common_color_primary_variant) !important; } .u-secondary { color: var(--common_color_secondary) !important; } .u-jp { font-family: var(--common_font_jp) !important; } .u-en { font-family: var(--common_font_en) !important; } .u-jp_sans { font-family: var(--common_font_family_jp_sans) !important; } .u-jp_serif { font-family: var(--common_font_family_jp_serif) !important; } .u-center { text-align: center !important; } .u-left { text-align: left !important; } .u-right { text-align: right !important; } .u-justify { text-align: justify !important; } .u-fz08 { font-size: 8px !important; } .u-fz09 { font-size: 9px !important; } .u-fz10 { font-size: 10px !important; } .u-fz11 { font-size: 11px !important; } .u-fz12 { font-size: 12px !important; } .u-fz13 { font-size: 13px !important; } .u-fz14 { font-size: 14px !important; } .u-fz15 { font-size: 15px !important; } .u-fz16 { font-size: 16px !important; } .u-fz17 { font-size: 17px !important; } .u-fz18 { font-size: 18px !important; } .u-fz19 { font-size: 19px !important; } .u-fz20 { font-size: 20px !important; } .u-fz21 { font-size: 21px !important; } .u-fz22 { font-size: 22px !important; } .u-fz23 { font-size: 23px !important; } .u-fz24 { font-size: 24px !important; } .u-fz25 { font-size: 25px !important; } .u-fz26 { font-size: 26px !important; } .u-fz27 { font-size: 27px !important; } .u-fz28 { font-size: 28px !important; } .u-fz29 { font-size: 29px !important; } .u-fz30 { font-size: 30px !important; } .u-fz31 { font-size: 31px !important; } .u-fz32 { font-size: 32px !important; } .u-fz33 { font-size: 33px !important; } .u-fz34 { font-size: 34px !important; } .u-fz35 { font-size: 35px !important; } .u-fz36 { font-size: 36px !important; } .u-fz37 { font-size: 37px !important; } .u-fz38 { font-size: 38px !important; } .u-fz39 { font-size: 39px !important; } .u-fz40 { font-size: 40px !important; } .u-fz41 { font-size: 41px !important; } .u-fz42 { font-size: 42px !important; } .u-fz43 { font-size: 43px !important; } .u-fz44 { font-size: 44px !important; } .u-fz45 { font-size: 45px !important; } .u-fz46 { font-size: 46px !important; } .u-fz47 { font-size: 47px !important; } .u-fz48 { font-size: 48px !important; } .u-fz49 { font-size: 49px !important; } .u-fz50 { font-size: 50px !important; } .u-fz51 { font-size: 51px !important; } .u-fz52 { font-size: 52px !important; } .u-fz53 { font-size: 53px !important; } .u-fz54 { font-size: 54px !important; } .u-fz55 { font-size: 55px !important; } .u-fz56 { font-size: 56px !important; } .u-fz57 { font-size: 57px !important; } .u-fz58 { font-size: 58px !important; } .u-fz59 { font-size: 59px !important; } .u-fz60 { font-size: 60px !important; } .u-marginauto { margin-left: auto !important; margin-right: auto !important; } .u-mt00 { margin-top: 0px !important; } .u-mt05 { margin-top: 5px !important; } .u-mt10 { margin-top: 10px !important; } .u-mt15 { margin-top: 15px !important; } .u-mt20 { margin-top: 20px !important; } .u-mt25 { margin-top: 25px !important; } .u-mt30 { margin-top: 30px !important; } .u-mt35 { margin-top: 35px !important; } .u-mt40 { margin-top: 40px !important; } .u-mt45 { margin-top: 45px !important; } .u-mt50 { margin-top: 50px !important; } .u-mt55 { margin-top: 55px !important; } .u-mt60 { margin-top: 60px !important; } .u-mt65 { margin-top: 65px !important; } .u-mt70 { margin-top: 70px !important; } .u-mt75 { margin-top: 75px !important; } .u-mt80 { margin-top: 80px !important; } .u-mt85 { margin-top: 85px !important; } .u-mt90 { margin-top: 90px !important; } .u-mt95 { margin-top: 95px !important; } .u-mt100 { margin-top: 100px !important; } .u-mt110 { margin-top: 110px !important; } .u-mt120 { margin-top: 120px !important; } .u-mt130 { margin-top: 130px !important; } .u-mt140 { margin-top: 140px !important; } .u-mt150 { margin-top: 150px !important; } .u-mt160 { margin-top: 160px !important; } .u-mt170 { margin-top: 170px !important; } .u-mt180 { margin-top: 180px !important; } .u-mt190 { margin-top: 190px !important; } .u-mt200 { margin-top: 200px !important; } .u-mr00 { margin-right: 0px !important; } .u-mr05 { margin-right: 5px !important; } .u-mr10 { margin-right: 10px !important; } .u-mr15 { margin-right: 15px !important; } .u-mr20 { margin-right: 20px !important; } .u-mr25 { margin-right: 25px !important; } .u-mr30 { margin-right: 30px !important; } .u-mr35 { margin-right: 35px !important; } .u-mr40 { margin-right: 40px !important; } .u-mr45 { margin-right: 45px !important; } .u-mr50 { margin-right: 50px !important; } .u-mr55 { margin-right: 55px !important; } .u-mr60 { margin-right: 60px !important; } .u-mr65 { margin-right: 65px !important; } .u-mr70 { margin-right: 70px !important; } .u-mr75 { margin-right: 75px !important; } .u-mr80 { margin-right: 80px !important; } .u-mr85 { margin-right: 85px !important; } .u-mr90 { margin-right: 90px !important; } .u-mr95 { margin-right: 95px !important; } .u-mr100 { margin-right: 100px !important; } .u-mr110 { margin-right: 110px !important; } .u-mr120 { margin-right: 120px !important; } .u-mr130 { margin-right: 130px !important; } .u-mr140 { margin-right: 140px !important; } .u-mr150 { margin-right: 150px !important; } .u-mr160 { margin-right: 160px !important; } .u-mr170 { margin-right: 170px !important; } .u-mr180 { margin-right: 180px !important; } .u-mr190 { margin-right: 190px !important; } .u-mr200 { margin-right: 200px !important; } .u-mb00 { margin-bottom: 0px !important; } .u-mb05 { margin-bottom: 5px !important; } .u-mb10 { margin-bottom: 10px !important; } .u-mb15 { margin-bottom: 15px !important; } .u-mb20 { margin-bottom: 20px !important; } .u-mb25 { margin-bottom: 25px !important; } .u-mb30 { margin-bottom: 30px !important; } .u-mb35 { margin-bottom: 35px !important; } .u-mb40 { margin-bottom: 40px !important; } .u-mb45 { margin-bottom: 45px !important; } .u-mb50 { margin-bottom: 50px !important; } .u-mb55 { margin-bottom: 55px !important; } .u-mb60 { margin-bottom: 60px !important; } .u-mb65 { margin-bottom: 65px !important; } .u-mb70 { margin-bottom: 70px !important; } .u-mb75 { margin-bottom: 75px !important; } .u-mb80 { margin-bottom: 80px !important; } .u-mb85 { margin-bottom: 85px !important; } .u-mb90 { margin-bottom: 90px !important; } .u-mb95 { margin-bottom: 95px !important; } .u-mb100 { margin-bottom: 100px !important; } .u-mb110 { margin-bottom: 110px !important; } .u-mb120 { margin-bottom: 120px !important; } .u-mb130 { margin-bottom: 130px !important; } .u-mb140 { margin-bottom: 140px !important; } .u-mb150 { margin-bottom: 150px !important; } .u-mb160 { margin-bottom: 160px !important; } .u-mb170 { margin-bottom: 170px !important; } .u-mb180 { margin-bottom: 180px !important; } .u-mb190 { margin-bottom: 190px !important; } .u-mb200 { margin-bottom: 200px !important; } .u-ml00 { margin-left: 0px !important; } .u-ml05 { margin-left: 5px !important; } .u-ml10 { margin-left: 10px !important; } .u-ml15 { margin-left: 15px !important; } .u-ml20 { margin-left: 20px !important; } .u-ml25 { margin-left: 25px !important; } .u-ml30 { margin-left: 30px !important; } .u-ml35 { margin-left: 35px !important; } .u-ml40 { margin-left: 40px !important; } .u-ml45 { margin-left: 45px !important; } .u-ml50 { margin-left: 50px !important; } .u-ml55 { margin-left: 55px !important; } .u-ml60 { margin-left: 60px !important; } .u-ml65 { margin-left: 65px !important; } .u-ml70 { margin-left: 70px !important; } .u-ml75 { margin-left: 75px !important; } .u-ml80 { margin-left: 80px !important; } .u-ml85 { margin-left: 85px !important; } .u-ml90 { margin-left: 90px !important; } .u-ml95 { margin-left: 95px !important; } .u-ml100 { margin-left: 100px !important; } .u-ml110 { margin-left: 110px !important; } .u-ml120 { margin-left: 120px !important; } .u-ml130 { margin-left: 130px !important; } .u-ml140 { margin-left: 140px !important; } .u-ml150 { margin-left: 150px !important; } .u-ml160 { margin-left: 160px !important; } .u-ml170 { margin-left: 170px !important; } .u-ml180 { margin-left: 180px !important; } .u-ml190 { margin-left: 190px !important; } .u-ml200 { margin-left: 200px !important; } .u-nmt00 { margin-top: 0px !important; } .u-nmt05 { margin-top: -5px !important; } .u-nmt10 { margin-top: -10px !important; } .u-nmt15 { margin-top: -15px !important; } .u-nmt20 { margin-top: -20px !important; } .u-nmt25 { margin-top: -25px !important; } .u-nmt30 { margin-top: -30px !important; } .u-nmt35 { margin-top: -35px !important; } .u-nmt40 { margin-top: -40px !important; } .u-nmt45 { margin-top: -45px !important; } .u-nmt50 { margin-top: -50px !important; } .u-nmt55 { margin-top: -55px !important; } .u-nmt60 { margin-top: -60px !important; } .u-nmt65 { margin-top: -65px !important; } .u-nmt70 { margin-top: -70px !important; } .u-nmt75 { margin-top: -75px !important; } .u-nmt80 { margin-top: -80px !important; } .u-nmt85 { margin-top: -85px !important; } .u-nmt90 { margin-top: -90px !important; } .u-nmt95 { margin-top: -95px !important; } .u-nmt100 { margin-top: -100px !important; } .u-nmr00 { margin-right: 0px !important; } .u-nmr05 { margin-right: -5px !important; } .u-nmr10 { margin-right: -10px !important; } .u-nmr15 { margin-right: -15px !important; } .u-nmr20 { margin-right: -20px !important; } .u-nmr25 { margin-right: -25px !important; } .u-nmr30 { margin-right: -30px !important; } .u-nmr35 { margin-right: -35px !important; } .u-nmr40 { margin-right: -40px !important; } .u-nmr45 { margin-right: -45px !important; } .u-nmr50 { margin-right: -50px !important; } .u-nmr55 { margin-right: -55px !important; } .u-nmr60 { margin-right: -60px !important; } .u-nmr65 { margin-right: -65px !important; } .u-nmr70 { margin-right: -70px !important; } .u-nmr75 { margin-right: -75px !important; } .u-nmr80 { margin-right: -80px !important; } .u-nmr85 { margin-right: -85px !important; } .u-nmr90 { margin-right: -90px !important; } .u-nmr95 { margin-right: -95px !important; } .u-nmr100 { margin-right: -100px !important; } .u-nml00 { margin-left: 0px !important; } .u-nml05 { margin-left: -5px !important; } .u-nml10 { margin-left: -10px !important; } .u-nml15 { margin-left: -15px !important; } .u-nml20 { margin-left: -20px !important; } .u-nml25 { margin-left: -25px !important; } .u-nml30 { margin-left: -30px !important; } .u-nml35 { margin-left: -35px !important; } .u-nml40 { margin-left: -40px !important; } .u-nml45 { margin-left: -45px !important; } .u-nml50 { margin-left: -50px !important; } .u-nml55 { margin-left: -55px !important; } .u-nml60 { margin-left: -60px !important; } .u-nml65 { margin-left: -65px !important; } .u-nml70 { margin-left: -70px !important; } .u-nml75 { margin-left: -75px !important; } .u-nml80 { margin-left: -80px !important; } .u-nml85 { margin-left: -85px !important; } .u-nml90 { margin-left: -90px !important; } .u-nml95 { margin-left: -95px !important; } .u-nml100 { margin-left: -100px !important; } .u-pt00 { padding-top: 0px !important; } .u-pt05 { padding-top: 5px !important; } .u-pt10 { padding-top: 10px !important; } .u-pt15 { padding-top: 15px !important; } .u-pt20 { padding-top: 20px !important; } .u-pt25 { padding-top: 25px !important; } .u-pt30 { padding-top: 30px !important; } .u-pt35 { padding-top: 35px !important; } .u-pt40 { padding-top: 40px !important; } .u-pt45 { padding-top: 45px !important; } .u-pt50 { padding-top: 50px !important; } .u-pt55 { padding-top: 55px !important; } .u-pt60 { padding-top: 60px !important; } .u-pt65 { padding-top: 65px !important; } .u-pt70 { padding-top: 70px !important; } .u-pt75 { padding-top: 75px !important; } .u-pt80 { padding-top: 80px !important; } .u-pt85 { padding-top: 85px !important; } .u-pt90 { padding-top: 90px !important; } .u-pt95 { padding-top: 95px !important; } .u-pt100 { padding-top: 100px !important; } .u-pt110 { padding-top: 110px !important; } .u-pt120 { padding-top: 120px !important; } .u-pt130 { padding-top: 130px !important; } .u-pt140 { padding-top: 140px !important; } .u-pt150 { padding-top: 150px !important; } .u-pt160 { padding-top: 160px !important; } .u-pt170 { padding-top: 170px !important; } .u-pt180 { padding-top: 180px !important; } .u-pt190 { padding-top: 190px !important; } .u-pt200 { padding-top: 200px !important; } .u-pr00 { padding-right: 0px !important; } .u-pr05 { padding-right: 5px !important; } .u-pr10 { padding-right: 10px !important; } .u-pr15 { padding-right: 15px !important; } .u-pr20 { padding-right: 20px !important; } .u-pr25 { padding-right: 25px !important; } .u-pr30 { padding-right: 30px !important; } .u-pr35 { padding-right: 35px !important; } .u-pr40 { padding-right: 40px !important; } .u-pr45 { padding-right: 45px !important; } .u-pr50 { padding-right: 50px !important; } .u-pr55 { padding-right: 55px !important; } .u-pr60 { padding-right: 60px !important; } .u-pr65 { padding-right: 65px !important; } .u-pr70 { padding-right: 70px !important; } .u-pr75 { padding-right: 75px !important; } .u-pr80 { padding-right: 80px !important; } .u-pr85 { padding-right: 85px !important; } .u-pr90 { padding-right: 90px !important; } .u-pr95 { padding-right: 95px !important; } .u-pr100 { padding-right: 100px !important; } .u-pr110 { padding-right: 110px !important; } .u-pr120 { padding-right: 120px !important; } .u-pr130 { padding-right: 130px !important; } .u-pr140 { padding-right: 140px !important; } .u-pr150 { padding-right: 150px !important; } .u-pr160 { padding-right: 160px !important; } .u-pr170 { padding-right: 170px !important; } .u-pr180 { padding-right: 180px !important; } .u-pr190 { padding-right: 190px !important; } .u-pr200 { padding-right: 200px !important; } .u-pb00 { padding-bottom: 0px !important; } .u-pb05 { padding-bottom: 5px !important; } .u-pb10 { padding-bottom: 10px !important; } .u-pb15 { padding-bottom: 15px !important; } .u-pb20 { padding-bottom: 20px !important; } .u-pb25 { padding-bottom: 25px !important; } .u-pb30 { padding-bottom: 30px !important; } .u-pb35 { padding-bottom: 35px !important; } .u-pb40 { padding-bottom: 40px !important; } .u-pb45 { padding-bottom: 45px !important; } .u-pb50 { padding-bottom: 50px !important; } .u-pb55 { padding-bottom: 55px !important; } .u-pb60 { padding-bottom: 60px !important; } .u-pb65 { padding-bottom: 65px !important; } .u-pb70 { padding-bottom: 70px !important; } .u-pb75 { padding-bottom: 75px !important; } .u-pb80 { padding-bottom: 80px !important; } .u-pb85 { padding-bottom: 85px !important; } .u-pb90 { padding-bottom: 90px !important; } .u-pb95 { padding-bottom: 95px !important; } .u-pb100 { padding-bottom: 100px !important; } .u-pb110 { padding-bottom: 110px !important; } .u-pb120 { padding-bottom: 120px !important; } .u-pb130 { padding-bottom: 130px !important; } .u-pb140 { padding-bottom: 140px !important; } .u-pb150 { padding-bottom: 150px !important; } .u-pb160 { padding-bottom: 160px !important; } .u-pb170 { padding-bottom: 170px !important; } .u-pb180 { padding-bottom: 180px !important; } .u-pb190 { padding-bottom: 190px !important; } .u-pb200 { padding-bottom: 200px !important; } .u-pl00 { padding-left: 0px !important; } .u-pl05 { padding-left: 5px !important; } .u-pl10 { padding-left: 10px !important; } .u-pl15 { padding-left: 15px !important; } .u-pl20 { padding-left: 20px !important; } .u-pl25 { padding-left: 25px !important; } .u-pl30 { padding-left: 30px !important; } .u-pl35 { padding-left: 35px !important; } .u-pl40 { padding-left: 40px !important; } .u-pl45 { padding-left: 45px !important; } .u-pl50 { padding-left: 50px !important; } .u-pl55 { padding-left: 55px !important; } .u-pl60 { padding-left: 60px !important; } .u-pl65 { padding-left: 65px !important; } .u-pl70 { padding-left: 70px !important; } .u-pl75 { padding-left: 75px !important; } .u-pl80 { padding-left: 80px !important; } .u-pl85 { padding-left: 85px !important; } .u-pl90 { padding-left: 90px !important; } .u-pl95 { padding-left: 95px !important; } .u-pl100 { padding-left: 100px !important; } .u-pl110 { padding-left: 110px !important; } .u-pl120 { padding-left: 120px !important; } .u-pl130 { padding-left: 130px !important; } .u-pl140 { padding-left: 140px !important; } .u-pl150 { padding-left: 150px !important; } .u-pl160 { padding-left: 160px !important; } .u-pl170 { padding-left: 170px !important; } .u-pl180 { padding-left: 180px !important; } .u-pl190 { padding-left: 190px !important; } .u-pl200 { padding-left: 200px !important; } .u-lh100 { line-height: 100% !important; } .u-lh110 { line-height: 110% !important; } .u-lh120 { line-height: 120% !important; } .u-lh130 { line-height: 130% !important; } .u-lh140 { line-height: 140% !important; } .u-lh150 { line-height: 150% !important; } .u-lh160 { line-height: 160% !important; } .u-lh170 { line-height: 170% !important; } .u-lh180 { line-height: 180% !important; } .u-lh190 { line-height: 190% !important; } .u-lh200 { line-height: 200% !important; } .u-radius01 { border-radius: 1px !important; } .u-radius02 { border-radius: 2px !important; } .u-radius03 { border-radius: 3px !important; } .u-radius04 { border-radius: 4px !important; } .u-radius05 { border-radius: 5px !important; } .u-radius06 { border-radius: 6px !important; } .u-radius07 { border-radius: 7px !important; } .u-radius08 { border-radius: 8px !important; } .u-radius09 { border-radius: 9px !important; } .u-radius10 { border-radius: 10px !important; } .u-radius11 { border-radius: 11px !important; } .u-radius12 { border-radius: 12px !important; } .u-radius13 { border-radius: 13px !important; } .u-radius14 { border-radius: 14px !important; } .u-radius15 { border-radius: 15px !important; } .u-radius16 { border-radius: 16px !important; } .u-radius17 { border-radius: 17px !important; } .u-radius18 { border-radius: 18px !important; } .u-radius19 { border-radius: 19px !important; } .u-radius20 { border-radius: 20px !important; } @media screen and (min-width: 769px ) { #wrap { min-width: calc(40px + var(--section_width_default)); } #header { min-width: calc(40px + var(--section_width_default)); } #page-contents { padding-top: var(--header_height_pc); } .l-inner-default-pc { margin: 0 auto; padding: 0; width: var(--section_width_default); } .l-inner-wide-pc { margin: 0 auto; padding: 0 20px; width: 100%; min-width: calc(40px + var(--section_width_default)); max-width: calc(40px + var(--section_width_wide)); } .l-inner-narrow-pc { margin: 0 auto; padding: 0; width: var(--section_width_narrow); } .l-inner-full-pc { margin: 0 auto; padding: 0; width: 100%; max-width: none; } .l-minwidth { margin: 0 auto; min-width: calc(40px + var(--section_width_default)); } .c-btn { font-size: var(--btn_font_size_pc); border: var(--btn_border_width_pc) solid var(--btn_border_color); border-radius: var(--btn_radius_pc); height: var(--btn_height_pc); } .c-btn:hover, .c-btn.is-current { border: var(--btn_border_width_pc) solid var(--btn_border_color_hover); } .c-btn.-v2 { font-size: var(--btn_v2_font_size_pc); border: var(--btn_v2_border_width_pc) solid var(--btn_v2_border_color); border-radius: var(--btn_v2_radius_pc); height: var(--btn_v2_height_pc); } .c-btn.-v2:hover, .c-btn.-v2.is-current { border: var(--btn_v2_border_width_pc) solid var(--btn_v2_border_color_hover); } .c-btn.-v3 { font-size: var(--btn_v3_font_size_pc); border: var(--btn_v3_border_width_pc) solid var(--btn_v3_border_color); border-radius: var(--btn_v3_radius_pc); height: var(--btn_v3_height_pc); } .c-btn.-v3:hover, .c-btn.-v3.is-current { border: var(--btn_v3_border_width_pc) solid var(--btn_v3_border_color_hover); } .c-btn.-directory_nav { font-size: 15px; height: 38px; } .c-heading1 { font-size: var(--common_heading1_font_size_pc); } .c-heading1-pc { font-weight: var(--common_heading1_font_weight); line-height: var(--common_heading1_line_height); letter-spacing: var(--common_heading1_letter_spacing); font-size: var(--common_heading1_font_size_pc); } .c-heading2 { font-size: var(--common_heading2_font_size_pc); } .c-heading2-pc { font-weight: var(--common_heading2_font_weight); line-height: var(--common_heading2_line_height); letter-spacing: var(--common_heading2_letter_spacing); font-size: var(--common_heading2_font_size_pc); } .c-heading3 { font-size: var(--common_heading3_font_size_pc); } .c-heading3-pc { font-weight: var(--common_heading3_font_weight); line-height: var(--common_heading3_line_height); letter-spacing: var(--common_heading3_letter_spacing); font-size: var(--common_heading3_font_size_pc); } .c-heading4 { font-size: var(--common_heading4_font_size_pc); } .c-heading4-pc { font-weight: var(--common_heading4_font_weight); line-height: var(--common_heading4_line_height); letter-spacing: var(--common_heading4_letter_spacing); font-size: var(--common_heading4_font_size_pc); } .c-heading5 { font-size: var(--common_heading5_font_size_pc); } .c-heading5-pc { font-weight: var(--common_heading5_font_weight); line-height: var(--common_heading5_line_height); letter-spacing: var(--common_heading5_letter_spacing); font-size: var(--common_heading5_font_size_pc); } .c-heading6 { font-size: var(--common_heading6_font_size_pc); } .c-heading6-pc { font-weight: var(--common_heading6_font_weight); line-height: var(--common_heading6_line_height); letter-spacing: var(--common_heading6_letter_spacing); font-size: var(--common_heading6_font_size_pc); } .c-paragraph { font-size: var(--common_paragraph_font_size_pc); } .c-paragraph-pc { font-weight: var(--common_paragraph_font_weight); line-height: var(--common_paragraph_line_height); letter-spacing: var(--common_paragraph_letter_spacing); font-size: var(--common_paragraph_font_size_pc); } .c-paragraph_small { font-size: var(--common_paragraph_small_font_size_pc); } .c-paragraph_small-pc { font-weight: var(--common_paragraph_small_font_weight); line-height: var(--common_paragraph_small_line_height); letter-spacing: var(--common_paragraph_small_letter_spacing); font-size: var(--common_paragraph_small_font_size_pc); } .c-annotation { font-size: var(--common_annotation_font_size_pc); } .c-annotation-pc { font-weight: var(--common_annotation_font_weight); line-height: var(--common_annotation_line_height); letter-spacing: var(--common_annotation_letter_spacing); font-size: var(--common_annotation_font_size_pc); } #blog-contents, .c-blog-contents, .c-richtext { font-size: var(--richtext_other_font_size_pc); } #blog-contents h1, .c-blog-contents h1, .c-richtext h1 { font-size: var(--richtext_h1_font_size_pc); margin-top: var(--richtext_h1_margin_top_pc); } #blog-contents h1:first-child, .c-blog-contents h1:first-child, .c-richtext h1:first-child { margin-top: 0; } #blog-contents h2, .c-blog-contents h2, .c-richtext h2 { font-size: var(--richtext_h2_font_size_pc); margin-top: var(--richtext_h2_margin_top_pc); } #blog-contents h2:first-child, .c-blog-contents h2:first-child, .c-richtext h2:first-child { margin-top: 0; } #blog-contents h3, .c-blog-contents h3, .c-richtext h3 { font-size: var(--richtext_h3_font_size_pc); margin-top: var(--richtext_h3_margin_top_pc); } #blog-contents h3:first-child, .c-blog-contents h3:first-child, .c-richtext h3:first-child { margin-top: 0; } #blog-contents h4, .c-blog-contents h4, .c-richtext h4 { font-size: var(--richtext_h4_font_size_pc); margin-top: var(--richtext_h4_margin_top_pc); } #blog-contents h4:first-child, .c-blog-contents h4:first-child, .c-richtext h4:first-child { margin-top: 0; } #blog-contents h5, .c-blog-contents h5, .c-richtext h5 { font-size: var(--richtext_h5_font_size_pc); margin-top: var(--richtext_h5_margin_top_pc); } #blog-contents h5:first-child, .c-blog-contents h5:first-child, .c-richtext h5:first-child { margin-top: 0; } #blog-contents h6, .c-blog-contents h6, .c-richtext h6 { font-size: var(--richtext_h6_font_size_pc); margin-top: var(--richtext_h6_margin_top_pc); } #blog-contents h6:first-child, .c-blog-contents h6:first-child, .c-richtext h6:first-child { margin-top: 0; } #blog-contents p, .c-blog-contents p, .c-richtext p { font-size: var(--richtext_p_font_size_pc); margin-top: var(--richtext_p_margin_top_pc); } #blog-contents p:first-child, .c-blog-contents p:first-child, .c-richtext p:first-child { margin-top: 0; } #blog-contents div, #blog-contents ul, #blog-contents ol, #blog-contents table, .c-blog-contents div, .c-blog-contents ul, .c-blog-contents ol, .c-blog-contents table, .c-richtext div, .c-richtext ul, .c-richtext ol, .c-richtext table { margin-top: var(--richtext_p_margin_top_pc); } #blog-contents div:first-child, #blog-contents ul:first-child, #blog-contents ol:first-child, #blog-contents table:first-child, .c-blog-contents div:first-child, .c-blog-contents ul:first-child, .c-blog-contents ol:first-child, .c-blog-contents table:first-child, .c-richtext div:first-child, .c-richtext ul:first-child, .c-richtext ol:first-child, .c-richtext table:first-child { margin-top: 0; } #blog-contents li, .c-blog-contents li, .c-richtext li { margin-top: 10px; } #blog-contents li:first-child, .c-blog-contents li:first-child, .c-richtext li:first-child { margin-top: 0; } #blog-contents table th, #blog-contents table td, .c-blog-contents table th, .c-blog-contents table td, .c-richtext table th, .c-richtext table td { padding: 15px 20px; } .p-anchor__position { top: calc(0px - var(--section_padding_default_pc)); } .p-section { padding: var(--section_padding_default_pc) 0; } .p-section.-low { padding: var(--section_padding_low_pc) 0; } .p-section.-pt00 { padding-top: 0; } .p-section.-pb00 { padding-bottom: 0; } .p-section.-ptb00 { padding-top: 0; padding-bottom: 0; } .p-section__anchor { top: calc(0px - var(--section_padding_default_pc) - var(--page_head_height_pc)); } .p-section.-low > .p-section__anchor { top: calc(0px - var(--section_padding_low_pc) - var(--page_head_height_pc)); } .p-section.-pt00 > .p-section__anchor { top: calc(0px - var(--page_head_height_pc)); } .p-section.-pb00 > .p-section__anchor { top: calc(0px - var(--section_padding_default_pc) - var(--page_head_height_pc)); } .p-section.-ptb00 > .p-section__anchor { top: calc(0px - var(--page_head_height_pc)); } .p-section__ttl { font-size: var(--section_ttl_font_size_pc); } * + .p-section__body { margin-top: var(--section_body_margin_top_pc); } .p-row.-pc_column2 { margin-right: calc(0px - var(--row2_space_horizon_pc)); margin-top: calc(0px - var(--row2_space_vertical_pc)); } .p-row.-pc_column3 { margin-right: calc(0px - var(--row3_space_horizon_pc)); margin-top: calc(0px - var(--row3_space_vertical_pc)); } .p-row.-pc_column4 { margin-right: calc(0px - var(--row4_space_horizon_pc)); margin-top: calc(0px - var(--row4_space_vertical_pc)); } .p-row.-pc_column5 { margin-right: calc(0px - var(--row5_space_horizon_pc)); margin-top: calc(0px - var(--row5_space_vertical_pc)); } .p-row__col.-pc_column2 { -ms-flex-preferred-size: 50%; flex-basis: 50%; padding-right: var(--row2_space_horizon_pc); padding-top: var(--row2_space_vertical_pc); } .p-row__col.-pc_column3 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; padding-right: var(--row3_space_horizon_pc); padding-top: var(--row3_space_vertical_pc); } .p-row__col.-pc_column4 { -ms-flex-preferred-size: 25%; flex-basis: 25%; padding-right: var(--row4_space_horizon_pc); padding-top: var(--row4_space_vertical_pc); } .p-row__col.-pc_column5 { -ms-flex-preferred-size: 20%; flex-basis: 20%; padding-right: var(--row5_space_horizon_pc); padding-top: var(--row5_space_vertical_pc); } .p-card__body { margin-top: 15px; } .p-card__txt { font-size: var(--common_annotation_font_size_pc); } .p-tags__item { font-size: var(--common_annotation_font_size_pc); padding: 5 13px; } .p-tags__btn { border: var(--tag_border_width_pc) solid var(--tag_border_color); font-size: var(--tag_font_size_pc); border-radius: var(--tag_radius_pc); height: var(--tag_height_pc); padding: 0 var(--tag_padding_pc); } .p-tags__btn:hover { border: var(--tag_border_width_pc) solid var(--tag_border_color_hover); } .p-banner__contents { height: 140px; } .p-page_head { height: var(--page_head_height_pc); } .p-page_head__ttl { font-size: var(--common_heading1_font_size_pc); } .p-block__head { -webkit-box-flex: 0; -ms-flex: 0 0 22%; flex: 0 0 22%; padding-right: 20px; } .p-block__txt { margin-top: 20px; } .p-block_v2 { display: -webkit-box; display: -ms-flexbox; display: flex; } * + .p-block_v2 { margin-top: 30px; } .p-block_v2__head { -webkit-box-flex: 0; -ms-flex: 0 0 120px; flex: 0 0 120px; } .p-block_v2__body { padding-left: 20px; } .p-block_v4 { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-block_v4__figure, .p-block_v4__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-block_v4__figure { padding: 20px 0; position: relative; display: block; -webkit-box-flex: 0; -ms-flex: 0 0 57.5%; flex: 0 0 57.5%; } .p-block_v4__figure::before { content: ""; display: block; background-color: #f0f0f0; width: 500px; max-width: calc(100% - 185px); height: 100%; position: absolute; top: 0; right: 0; z-index: 1; } .p-block_v4__figure img { position: relative; z-index: 2; } .p-block_v4__main { /* min-height: 525px; */ padding: 20px 40px 20px 30px; -webkit-box-flex: 0; -ms-flex: 0 0 42.5%; flex: 0 0 42.5%; } .p-block_v4__main_inner { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .p-modal_contents { max-width: var(--section_width_default); } .p-modal_contents__inner { padding: 0 60px; } .p-bread__item { font-size: 15px; } .p-top_hero__main { height: 345px; } .p-top_hero__nav { -webkit-transform: translateY(38px); transform: translateY(38px); } .p-top_hero__bar { position: absolute; bottom: 0; left: 0; width: 100%; } .p-top_hero__bg { height: 100%; } .p-tab_nav__body { padding: 28px 60px 38px; } .p-top_news { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p-top_news__head { -webkit-box-flex: 0; -ms-flex: 0 0 140px; flex: 0 0 140px; border-right: 1px solid var(--common_color_line); } .p-top_news__ttl { font-size: 28px; font-weight: 500; } .p-top_news__ttl::before, .p-top_news__ttl::after { display: none; } .p-top_news__full { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .p-top_news__body { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 140px - 140px); flex: 0 0 calc(100% - 140px - 140px); padding: 0 0 15px 40px; } .p-top_news__list { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-top_news__item { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-top_news__date { -webkit-box-flex: 0; -ms-flex: 0 0 130px; flex: 0 0 130px; margin-right: 0; } .p-top_news__link { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 130px); flex: 0 0 calc(100% - 130px); } .p-top_news__icon { margin-right: 15px; } .p-top_news__txt { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 9px - 15px); flex: 0 0 calc(100% - 9px - 15px); } .p-top_news__foot { -webkit-box-flex: 0; -ms-flex: 0 0 140px; flex: 0 0 140px; } .p-top_news__more_icon { margin-right: 15px; } .p-topics__more { width: 280px; } .p-flow_list_rt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-slider_area .bx-prev, .p-slider_area .bx-next { width: 69px; height: 80px; -webkit-transform: translateY(-40px); transform: translateY(-40px); } .p-slider_area .bx-prev { left: -20px; } .p-slider_area .bx-next { right: -20px; } * + .p-faq { margin-top: 40px; } .p-faq__head { padding: 5px 20px; } .p-faq__ttl { font-size: 18px; } .p-faq__body { font-size: 14px; } .p-faq__section { padding: 20px 0; } .p-faq__q_inner { font-size: 20px; } .p-faq__q_inner .icon { -webkit-box-flex: 0; -ms-flex: 0 0 45px; flex: 0 0 45px; } .p-faq__q_inner .text { -webkit-box-flex: calc(100% - 45px); -ms-flex: calc(100% - 45px); flex: calc(100% - 45px); padding-right: 30px; } .p-faq__a { padding-top: 20px; } .p-faq__a_inner { font-size: 20px; } .p-faq__a_inner .icon { -webkit-box-flex: 0; -ms-flex: 0 0 45px; flex: 0 0 45px; } .p-faq__a_inner .text { -webkit-box-flex: calc(100% - 45px); -ms-flex: calc(100% - 45px); flex: calc(100% - 45px); } .p-banner_blocks { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -20px; } .p-banner_blocks__square { -webkit-box-flex: 0; -ms-flex: 0 0 42.553%; flex: 0 0 42.553%; padding-right: 20px; } .p-banner_blocks__rectangle { -webkit-box-flex: 0; -ms-flex: 0 0 57.447%; flex: 0 0 57.447%; padding-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p-banner_blocks__icon { margin-right: 15px; } .p-banner_blocks__txt { font-size: 16px; } * + .p-interview_accordion { margin-top: 20px; } .p-interview_accordion__anchor { top: -105px; } .p-interview_accordion__figure { width: 460px; } .p-interview_accordion__board { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 500px; padding: 40px 25px; } .p-interview_accordion__body { padding-top: 47px; padding-bottom: 15px; } .p-interview_accordion__btn { margin-top: 8px; } .p-carousel .bx-prev, .p-carousel .bx-next { width: 29px; height: 57px; } .p-carousel .bx-prev { left: -40px; } .p-carousel .bx-next { right: -40px; } .p-carousel.-board .bx-prev, .p-carousel.-board .bx-next { top: 45px; } .p-carousel__list { margin: 0 -13px; } .p-carousel__item { padding: 0 13px; } .p-carousel__board { padding: 10px 0 0; } .p-directory_nav__item { padding: 10px; } .p-directory_nav__link { height: 60px; border-radius: 30px; width: 150px; } .p-page_directory_nav { padding: 20px 0; } .p-page_directory_nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -20px; } .p-page_directory_nav__item { margin-top: 15px; margin-right: 20px; } .p-page_directory_nav__item:last-child { margin-right: 0; } .p-table { width: 100%; border-collapse: collapse; } .p-table__th, .p-table__td { border-bottom: 1px solid var(--common_color_line); font-size: 14px; vertical-align: top; } .c-table__tr:last-child .p-table__th, .c-table__tr:last-child .p-table__td { border-bottom: none; } .p-table__th { width: 240px; padding: 15px 20px 15px 0px; } .p-table__td { padding: 15px 0; } .p-scroll_table > table { width: 100%; } .p-scroll_table > table table { width: 100%; } .p-scroll_table > table th, .p-scroll_table > table td { padding: 15px 20px; } .p-image_contents { display: -webkit-box; display: -ms-flexbox; display: flex; } * + .p-image_contents { margin-top: 60px; } .p-image_contents.-reserve { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .p-image_contents__figure { -webkit-box-flex: 0; -ms-flex: 0 0 400px; flex: 0 0 400px; padding-right: 20px; } .-reverse .p-image_contents__figure { padding-right: 0; padding-left: 20px; } .p-image_contents__contents { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 400px); flex: 0 0 calc(100% - 400px); } .p-left_image__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .p-left_image__col.-figure { margin-right: 20px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; } .p-left_image__col.-contents { margin-top: 20px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; } .p-pager { margin-top: 100px; } .p-sns_list { margin-top: 40px; } .p-category_bar__list.-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-category_bar__item { font-size: 15px; } .p-header { height: var(--header_height_pc); min-width: calc(40px + var(--section_width_default)); } .p-header__logos { padding-left: var(--header_padding_left_pc); width: var(--header_logo_width_pc); } .p-header__menu { display: none; } .p-header__nav { padding-right: var(--header_padding_right_pc); display: block !important; } .p-hdr_logos__link:hover { opacity: var(--common_hover_opacity); } .p-hdr_nav__sub { display: none; } .p-hdr_nav_global { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-hdr_nav_global__item { font-size: var(--header_nav_global_font_size_pc); } .p-hdr_nav_global__item.-sp { display: none; } .p-hdr_nav_global__item.-btn { margin-left: var(--header_nav_btn_left_margin_pc); } .p-hdr_nav_global__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 0 15px; height: var(--header_nav_btn_height_pc); color: var(--common_color_black); } .p-hdr_nav_global__item:hover .p-hdr_nav_global__link { -webkit-transform: translateY(3px); transform: translateY(3px); } .p-hdr_nav_global__link.-btn1 { background-color: var(--header_nav_btn1_bg_color_pc); border: var(--header_nav_btn_border_width_pc) solid var(--header_nav_btn1_border_color_pc); color: var(--header_nav_btn1_font_color_pc); border-radius: var(--header_nav_btn_border_radius_pc); } .p-hdr_nav_global__item:hover .p-hdr_nav_global__link.-btn1 { background-color: var(--header_nav_btn1_bg_color_pc_hover); border: var(--header_nav_btn_border_width_pc) solid var(--header_nav_btn1_border_color_pc_hover); color: var(--header_nav_btn1_font_color_pc_hover); -webkit-transform: translateY(0); transform: translateY(0); } .p-hdr_nav_global__link.-btn2 { background-color: var(--header_nav_btn2_bg_color_pc); border: var(--header_nav_btn_border_width_pc) solid var(--header_nav_btn2_border_color_pc); color: var(--header_nav_btn2_font_color_pc); border-radius: var(--header_nav_btn_border_radius_pc); } .p-hdr_nav_global__item:hover .p-hdr_nav_global__link.-btn2 { background-color: var(--header_nav_btn2_bg_color_pc_hover); border: var(--header_nav_btn_border_width_pc) solid var(--header_nav_btn2_border_color_pc_hover); color: var(--header_nav_btn2_font_color_pc_hover); -webkit-transform: translateY(0); transform: translateY(0); } .p-hdr_nav_global__child { position: absolute; top: 100%; left: 20px; padding-top: calc((var(--header_height_pc) - var(--header_nav_btn_height_pc)) / 2); width: var(--header_nav_child_width_pc); } .p-hdr_nav_child { background-color: #f0f0f0; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6); padding: 25px 25px 30px; } .p-hdr_nav_child__item { font-size: var(--header_nav_child_font_size_pc); } * + .p-hdr_nav_child__item { margin-top: 15px; } .p-hdr_nav_child__link { color: var(--common_color_black); } .p-hdr_nav_child__link:hover { opacity: var(--common_hover_opacity); } .p-footer__head { padding: 80px 0; } .p-footer__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p-footer__item.-child { padding-left: 10px; } .p-footer__item:first-child { padding-top: 0; } .p-footer__item:last-child { padding-bottom: 0; } .p-footer__link:hover { text-decoration: underline; } .p-footer__link.-nolink:hover { text-decoration: none; } .u-dib-pc { display: inline-block !important; } .u-db-pc { display: block !important; } .u-dn-pc { display: none !important; } .u-df-pc { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .u-aac-pc { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .u-aafs-pc { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .u-aafe-pc { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .u-jcc-pc { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .u-jcfs-pc { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .u-jcfe-pc { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .u-jcsb-pc { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .u-fwwrap-pc { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-bold-pc { font-weight: 700 !important; } .u-medium-pc { font-weight: 500 !important; } .u-normal-pc { font-weight: 400 !important; } .u-light-pc { font-weight: 300 !important; } .u-black-pc { color: var(--common_color_black) !important; } .u-black-heading-pc { color: var(--common_color_black) !important; } .u-white-pc { color: #fff !important; } .u-primary-pc { color: var(--common_color_primary) !important; } .u-primary_variant-pc { color: var(--common_color_primary_variant) !important; } .u-secondary-pc { color: var(--common_color_secondary) !important; } .u-jp-pc { font-family: var(--common_font_jp) !important; } .u-en-pc { font-family: var(--common_font_en) !important; } .u-jp_sans-pc { font-family: var(--common_font_family_jp_sans) !important; } .u-jp_serif-pc { font-family: var(--common_font_family_jp_serif) !important; } .u-center-pc { text-align: center !important; } .u-left-pc { text-align: left !important; } .u-right-pc { text-align: right !important; } .u-justify-pc { text-align: justify !important; } .u-fz08-pc { font-size: 8px !important; } .u-fz09-pc { font-size: 9px !important; } .u-fz10-pc { font-size: 10px !important; } .u-fz11-pc { font-size: 11px !important; } .u-fz12-pc { font-size: 12px !important; } .u-fz13-pc { font-size: 13px !important; } .u-fz14-pc { font-size: 14px !important; } .u-fz15-pc { font-size: 15px !important; } .u-fz16-pc { font-size: 16px !important; } .u-fz17-pc { font-size: 17px !important; } .u-fz18-pc { font-size: 18px !important; } .u-fz19-pc { font-size: 19px !important; } .u-fz20-pc { font-size: 20px !important; } .u-fz21-pc { font-size: 21px !important; } .u-fz22-pc { font-size: 22px !important; } .u-fz23-pc { font-size: 23px !important; } .u-fz24-pc { font-size: 24px !important; } .u-fz25-pc { font-size: 25px !important; } .u-fz26-pc { font-size: 26px !important; } .u-fz27-pc { font-size: 27px !important; } .u-fz28-pc { font-size: 28px !important; } .u-fz29-pc { font-size: 29px !important; } .u-fz30-pc { font-size: 30px !important; } .u-fz31-pc { font-size: 31px !important; } .u-fz32-pc { font-size: 32px !important; } .u-fz33-pc { font-size: 33px !important; } .u-fz34-pc { font-size: 34px !important; } .u-fz35-pc { font-size: 35px !important; } .u-fz36-pc { font-size: 36px !important; } .u-fz37-pc { font-size: 37px !important; } .u-fz38-pc { font-size: 38px !important; } .u-fz39-pc { font-size: 39px !important; } .u-fz40-pc { font-size: 40px !important; } .u-fz41-pc { font-size: 41px !important; } .u-fz42-pc { font-size: 42px !important; } .u-fz43-pc { font-size: 43px !important; } .u-fz44-pc { font-size: 44px !important; } .u-fz45-pc { font-size: 45px !important; } .u-fz46-pc { font-size: 46px !important; } .u-fz47-pc { font-size: 47px !important; } .u-fz48-pc { font-size: 48px !important; } .u-fz49-pc { font-size: 49px !important; } .u-fz50-pc { font-size: 50px !important; } .u-fz51-pc { font-size: 51px !important; } .u-fz52-pc { font-size: 52px !important; } .u-fz53-pc { font-size: 53px !important; } .u-fz54-pc { font-size: 54px !important; } .u-fz55-pc { font-size: 55px !important; } .u-fz56-pc { font-size: 56px !important; } .u-fz57-pc { font-size: 57px !important; } .u-fz58-pc { font-size: 58px !important; } .u-fz59-pc { font-size: 59px !important; } .u-fz60-pc { font-size: 60px !important; } .u-marginauto-pc { margin-left: auto !important; margin-right: auto !important; } .u-mt00-pc { margin-top: 0px !important; } .u-mt05-pc { margin-top: 5px !important; } .u-mt10-pc { margin-top: 10px !important; } .u-mt15-pc { margin-top: 15px !important; } .u-mt20-pc { margin-top: 20px !important; } .u-mt25-pc { margin-top: 25px !important; } .u-mt30-pc { margin-top: 30px !important; } .u-mt35-pc { margin-top: 35px !important; } .u-mt40-pc { margin-top: 40px !important; } .u-mt45-pc { margin-top: 45px !important; } .u-mt50-pc { margin-top: 50px !important; } .u-mt55-pc { margin-top: 55px !important; } .u-mt60-pc { margin-top: 60px !important; } .u-mt65-pc { margin-top: 65px !important; } .u-mt70-pc { margin-top: 70px !important; } .u-mt75-pc { margin-top: 75px !important; } .u-mt80-pc { margin-top: 80px !important; } .u-mt85-pc { margin-top: 85px !important; } .u-mt90-pc { margin-top: 90px !important; } .u-mt95-pc { margin-top: 95px !important; } .u-mt100-pc { margin-top: 100px !important; } .u-mt110-pc { margin-top: 110px !important; } .u-mt120-pc { margin-top: 120px !important; } .u-mt130-pc { margin-top: 130px !important; } .u-mt140-pc { margin-top: 140px !important; } .u-mt150-pc { margin-top: 150px !important; } .u-mt160-pc { margin-top: 160px !important; } .u-mt170-pc { margin-top: 170px !important; } .u-mt180-pc { margin-top: 180px !important; } .u-mt190-pc { margin-top: 190px !important; } .u-mt200-pc { margin-top: 200px !important; } .u-mr00-pc { margin-right: 0px !important; } .u-mr05-pc { margin-right: 5px !important; } .u-mr10-pc { margin-right: 10px !important; } .u-mr15-pc { margin-right: 15px !important; } .u-mr20-pc { margin-right: 20px !important; } .u-mr25-pc { margin-right: 25px !important; } .u-mr30-pc { margin-right: 30px !important; } .u-mr35-pc { margin-right: 35px !important; } .u-mr40-pc { margin-right: 40px !important; } .u-mr45-pc { margin-right: 45px !important; } .u-mr50-pc { margin-right: 50px !important; } .u-mr55-pc { margin-right: 55px !important; } .u-mr60-pc { margin-right: 60px !important; } .u-mr65-pc { margin-right: 65px !important; } .u-mr70-pc { margin-right: 70px !important; } .u-mr75-pc { margin-right: 75px !important; } .u-mr80-pc { margin-right: 80px !important; } .u-mr85-pc { margin-right: 85px !important; } .u-mr90-pc { margin-right: 90px !important; } .u-mr95-pc { margin-right: 95px !important; } .u-mr100-pc { margin-right: 100px !important; } .u-mr110-pc { margin-right: 110px !important; } .u-mr120-pc { margin-right: 120px !important; } .u-mr130-pc { margin-right: 130px !important; } .u-mr140-pc { margin-right: 140px !important; } .u-mr150-pc { margin-right: 150px !important; } .u-mr160-pc { margin-right: 160px !important; } .u-mr170-pc { margin-right: 170px !important; } .u-mr180-pc { margin-right: 180px !important; } .u-mr190-pc { margin-right: 190px !important; } .u-mr200-pc { margin-right: 200px !important; } .u-mb00-pc { margin-bottom: 0px !important; } .u-mb05-pc { margin-bottom: 5px !important; } .u-mb10-pc { margin-bottom: 10px !important; } .u-mb15-pc { margin-bottom: 15px !important; } .u-mb20-pc { margin-bottom: 20px !important; } .u-mb25-pc { margin-bottom: 25px !important; } .u-mb30-pc { margin-bottom: 30px !important; } .u-mb35-pc { margin-bottom: 35px !important; } .u-mb40-pc { margin-bottom: 40px !important; } .u-mb45-pc { margin-bottom: 45px !important; } .u-mb50-pc { margin-bottom: 50px !important; } .u-mb55-pc { margin-bottom: 55px !important; } .u-mb60-pc { margin-bottom: 60px !important; } .u-mb65-pc { margin-bottom: 65px !important; } .u-mb70-pc { margin-bottom: 70px !important; } .u-mb75-pc { margin-bottom: 75px !important; } .u-mb80-pc { margin-bottom: 80px !important; } .u-mb85-pc { margin-bottom: 85px !important; } .u-mb90-pc { margin-bottom: 90px !important; } .u-mb95-pc { margin-bottom: 95px !important; } .u-mb100-pc { margin-bottom: 100px !important; } .u-mb110-pc { margin-bottom: 110px !important; } .u-mb120-pc { margin-bottom: 120px !important; } .u-mb130-pc { margin-bottom: 130px !important; } .u-mb140-pc { margin-bottom: 140px !important; } .u-mb150-pc { margin-bottom: 150px !important; } .u-mb160-pc { margin-bottom: 160px !important; } .u-mb170-pc { margin-bottom: 170px !important; } .u-mb180-pc { margin-bottom: 180px !important; } .u-mb190-pc { margin-bottom: 190px !important; } .u-mb200-pc { margin-bottom: 200px !important; } .u-ml00-pc { margin-left: 0px !important; } .u-ml05-pc { margin-left: 5px !important; } .u-ml10-pc { margin-left: 10px !important; } .u-ml15-pc { margin-left: 15px !important; } .u-ml20-pc { margin-left: 20px !important; } .u-ml25-pc { margin-left: 25px !important; } .u-ml30-pc { margin-left: 30px !important; } .u-ml35-pc { margin-left: 35px !important; } .u-ml40-pc { margin-left: 40px !important; } .u-ml45-pc { margin-left: 45px !important; } .u-ml50-pc { margin-left: 50px !important; } .u-ml55-pc { margin-left: 55px !important; } .u-ml60-pc { margin-left: 60px !important; } .u-ml65-pc { margin-left: 65px !important; } .u-ml70-pc { margin-left: 70px !important; } .u-ml75-pc { margin-left: 75px !important; } .u-ml80-pc { margin-left: 80px !important; } .u-ml85-pc { margin-left: 85px !important; } .u-ml90-pc { margin-left: 90px !important; } .u-ml95-pc { margin-left: 95px !important; } .u-ml100-pc { margin-left: 100px !important; } .u-ml110-pc { margin-left: 110px !important; } .u-ml120-pc { margin-left: 120px !important; } .u-ml130-pc { margin-left: 130px !important; } .u-ml140-pc { margin-left: 140px !important; } .u-ml150-pc { margin-left: 150px !important; } .u-ml160-pc { margin-left: 160px !important; } .u-ml170-pc { margin-left: 170px !important; } .u-ml180-pc { margin-left: 180px !important; } .u-ml190-pc { margin-left: 190px !important; } .u-ml200-pc { margin-left: 200px !important; } .u-nmt00-pc { margin-top: 0px !important; } .u-nmt05-pc { margin-top: -5px !important; } .u-nmt10-pc { margin-top: -10px !important; } .u-nmt15-pc { margin-top: -15px !important; } .u-nmt20-pc { margin-top: -20px !important; } .u-nmt25-pc { margin-top: -25px !important; } .u-nmt30-pc { margin-top: -30px !important; } .u-nmt35-pc { margin-top: -35px !important; } .u-nmt40-pc { margin-top: -40px !important; } .u-nmt45-pc { margin-top: -45px !important; } .u-nmt50-pc { margin-top: -50px !important; } .u-nmt55-pc { margin-top: -55px !important; } .u-nmt60-pc { margin-top: -60px !important; } .u-nmt65-pc { margin-top: -65px !important; } .u-nmt70-pc { margin-top: -70px !important; } .u-nmt75-pc { margin-top: -75px !important; } .u-nmt80-pc { margin-top: -80px !important; } .u-nmt85-pc { margin-top: -85px !important; } .u-nmt90-pc { margin-top: -90px !important; } .u-nmt95-pc { margin-top: -95px !important; } .u-nmt100-pc { margin-top: -100px !important; } .u-nmr00-pc { margin-right: 0px !important; } .u-nmr05-pc { margin-right: -5px !important; } .u-nmr10-pc { margin-right: -10px !important; } .u-nmr15-pc { margin-right: -15px !important; } .u-nmr20-pc { margin-right: -20px !important; } .u-nmr25-pc { margin-right: -25px !important; } .u-nmr30-pc { margin-right: -30px !important; } .u-nmr35-pc { margin-right: -35px !important; } .u-nmr40-pc { margin-right: -40px !important; } .u-nmr45-pc { margin-right: -45px !important; } .u-nmr50-pc { margin-right: -50px !important; } .u-nmr55-pc { margin-right: -55px !important; } .u-nmr60-pc { margin-right: -60px !important; } .u-nmr65-pc { margin-right: -65px !important; } .u-nmr70-pc { margin-right: -70px !important; } .u-nmr75-pc { margin-right: -75px !important; } .u-nmr80-pc { margin-right: -80px !important; } .u-nmr85-pc { margin-right: -85px !important; } .u-nmr90-pc { margin-right: -90px !important; } .u-nmr95-pc { margin-right: -95px !important; } .u-nmr100-pc { margin-right: -100px !important; } .u-nml00-pc { margin-left: 0px !important; } .u-nml05-pc { margin-left: -5px !important; } .u-nml10-pc { margin-left: -10px !important; } .u-nml15-pc { margin-left: -15px !important; } .u-nml20-pc { margin-left: -20px !important; } .u-nml25-pc { margin-left: -25px !important; } .u-nml30-pc { margin-left: -30px !important; } .u-nml35-pc { margin-left: -35px !important; } .u-nml40-pc { margin-left: -40px !important; } .u-nml45-pc { margin-left: -45px !important; } .u-nml50-pc { margin-left: -50px !important; } .u-nml55-pc { margin-left: -55px !important; } .u-nml60-pc { margin-left: -60px !important; } .u-nml65-pc { margin-left: -65px !important; } .u-nml70-pc { margin-left: -70px !important; } .u-nml75-pc { margin-left: -75px !important; } .u-nml80-pc { margin-left: -80px !important; } .u-nml85-pc { margin-left: -85px !important; } .u-nml90-pc { margin-left: -90px !important; } .u-nml95-pc { margin-left: -95px !important; } .u-nml100-pc { margin-left: -100px !important; } .u-pt00-pc { padding-top: 0px !important; } .u-pt05-pc { padding-top: 5px !important; } .u-pt10-pc { padding-top: 10px !important; } .u-pt15-pc { padding-top: 15px !important; } .u-pt20-pc { padding-top: 20px !important; } .u-pt25-pc { padding-top: 25px !important; } .u-pt30-pc { padding-top: 30px !important; } .u-pt35-pc { padding-top: 35px !important; } .u-pt40-pc { padding-top: 40px !important; } .u-pt45-pc { padding-top: 45px !important; } .u-pt50-pc { padding-top: 50px !important; } .u-pt55-pc { padding-top: 55px !important; } .u-pt60-pc { padding-top: 60px !important; } .u-pt65-pc { padding-top: 65px !important; } .u-pt70-pc { padding-top: 70px !important; } .u-pt75-pc { padding-top: 75px !important; } .u-pt80-pc { padding-top: 80px !important; } .u-pt85-pc { padding-top: 85px !important; } .u-pt90-pc { padding-top: 90px !important; } .u-pt95-pc { padding-top: 95px !important; } .u-pt100-pc { padding-top: 100px !important; } .u-pt110-pc { padding-top: 110px !important; } .u-pt120-pc { padding-top: 120px !important; } .u-pt130-pc { padding-top: 130px !important; } .u-pt140-pc { padding-top: 140px !important; } .u-pt150-pc { padding-top: 150px !important; } .u-pt160-pc { padding-top: 160px !important; } .u-pt170-pc { padding-top: 170px !important; } .u-pt180-pc { padding-top: 180px !important; } .u-pt190-pc { padding-top: 190px !important; } .u-pt200-pc { padding-top: 200px !important; } .u-pr00-pc { padding-right: 0px !important; } .u-pr05-pc { padding-right: 5px !important; } .u-pr10-pc { padding-right: 10px !important; } .u-pr15-pc { padding-right: 15px !important; } .u-pr20-pc { padding-right: 20px !important; } .u-pr25-pc { padding-right: 25px !important; } .u-pr30-pc { padding-right: 30px !important; } .u-pr35-pc { padding-right: 35px !important; } .u-pr40-pc { padding-right: 40px !important; } .u-pr45-pc { padding-right: 45px !important; } .u-pr50-pc { padding-right: 50px !important; } .u-pr55-pc { padding-right: 55px !important; } .u-pr60-pc { padding-right: 60px !important; } .u-pr65-pc { padding-right: 65px !important; } .u-pr70-pc { padding-right: 70px !important; } .u-pr75-pc { padding-right: 75px !important; } .u-pr80-pc { padding-right: 80px !important; } .u-pr85-pc { padding-right: 85px !important; } .u-pr90-pc { padding-right: 90px !important; } .u-pr95-pc { padding-right: 95px !important; } .u-pr100-pc { padding-right: 100px !important; } .u-pr110-pc { padding-right: 110px !important; } .u-pr120-pc { padding-right: 120px !important; } .u-pr130-pc { padding-right: 130px !important; } .u-pr140-pc { padding-right: 140px !important; } .u-pr150-pc { padding-right: 150px !important; } .u-pr160-pc { padding-right: 160px !important; } .u-pr170-pc { padding-right: 170px !important; } .u-pr180-pc { padding-right: 180px !important; } .u-pr190-pc { padding-right: 190px !important; } .u-pr200-pc { padding-right: 200px !important; } .u-pb00-pc { padding-bottom: 0px !important; } .u-pb05-pc { padding-bottom: 5px !important; } .u-pb10-pc { padding-bottom: 10px !important; } .u-pb15-pc { padding-bottom: 15px !important; } .u-pb20-pc { padding-bottom: 20px !important; } .u-pb25-pc { padding-bottom: 25px !important; } .u-pb30-pc { padding-bottom: 30px !important; } .u-pb35-pc { padding-bottom: 35px !important; } .u-pb40-pc { padding-bottom: 40px !important; } .u-pb45-pc { padding-bottom: 45px !important; } .u-pb50-pc { padding-bottom: 50px !important; } .u-pb55-pc { padding-bottom: 55px !important; } .u-pb60-pc { padding-bottom: 60px !important; } .u-pb65-pc { padding-bottom: 65px !important; } .u-pb70-pc { padding-bottom: 70px !important; } .u-pb75-pc { padding-bottom: 75px !important; } .u-pb80-pc { padding-bottom: 80px !important; } .u-pb85-pc { padding-bottom: 85px !important; } .u-pb90-pc { padding-bottom: 90px !important; } .u-pb95-pc { padding-bottom: 95px !important; } .u-pb100-pc { padding-bottom: 100px !important; } .u-pb110-pc { padding-bottom: 110px !important; } .u-pb120-pc { padding-bottom: 120px !important; } .u-pb130-pc { padding-bottom: 130px !important; } .u-pb140-pc { padding-bottom: 140px !important; } .u-pb150-pc { padding-bottom: 150px !important; } .u-pb160-pc { padding-bottom: 160px !important; } .u-pb170-pc { padding-bottom: 170px !important; } .u-pb180-pc { padding-bottom: 180px !important; } .u-pb190-pc { padding-bottom: 190px !important; } .u-pb200-pc { padding-bottom: 200px !important; } .u-pl00-pc { padding-left: 0px !important; } .u-pl05-pc { padding-left: 5px !important; } .u-pl10-pc { padding-left: 10px !important; } .u-pl15-pc { padding-left: 15px !important; } .u-pl20-pc { padding-left: 20px !important; } .u-pl25-pc { padding-left: 25px !important; } .u-pl30-pc { padding-left: 30px !important; } .u-pl35-pc { padding-left: 35px !important; } .u-pl40-pc { padding-left: 40px !important; } .u-pl45-pc { padding-left: 45px !important; } .u-pl50-pc { padding-left: 50px !important; } .u-pl55-pc { padding-left: 55px !important; } .u-pl60-pc { padding-left: 60px !important; } .u-pl65-pc { padding-left: 65px !important; } .u-pl70-pc { padding-left: 70px !important; } .u-pl75-pc { padding-left: 75px !important; } .u-pl80-pc { padding-left: 80px !important; } .u-pl85-pc { padding-left: 85px !important; } .u-pl90-pc { padding-left: 90px !important; } .u-pl95-pc { padding-left: 95px !important; } .u-pl100-pc { padding-left: 100px !important; } .u-pl110-pc { padding-left: 110px !important; } .u-pl120-pc { padding-left: 120px !important; } .u-pl130-pc { padding-left: 130px !important; } .u-pl140-pc { padding-left: 140px !important; } .u-pl150-pc { padding-left: 150px !important; } .u-pl160-pc { padding-left: 160px !important; } .u-pl170-pc { padding-left: 170px !important; } .u-pl180-pc { padding-left: 180px !important; } .u-pl190-pc { padding-left: 190px !important; } .u-pl200-pc { padding-left: 200px !important; } .u-lh100-pc { line-height: 100% !important; } .u-lh110-pc { line-height: 110% !important; } .u-lh120-pc { line-height: 120% !important; } .u-lh130-pc { line-height: 130% !important; } .u-lh140-pc { line-height: 140% !important; } .u-lh150-pc { line-height: 150% !important; } .u-lh160-pc { line-height: 160% !important; } .u-lh170-pc { line-height: 170% !important; } .u-lh180-pc { line-height: 180% !important; } .u-lh190-pc { line-height: 190% !important; } .u-lh200-pc { line-height: 200% !important; } .u-radius01-pc { border-radius: 1px !important; } .u-radius02-pc { border-radius: 2px !important; } .u-radius03-pc { border-radius: 3px !important; } .u-radius04-pc { border-radius: 4px !important; } .u-radius05-pc { border-radius: 5px !important; } .u-radius06-pc { border-radius: 6px !important; } .u-radius07-pc { border-radius: 7px !important; } .u-radius08-pc { border-radius: 8px !important; } .u-radius09-pc { border-radius: 9px !important; } .u-radius10-pc { border-radius: 10px !important; } .u-radius11-pc { border-radius: 11px !important; } .u-radius12-pc { border-radius: 12px !important; } .u-radius13-pc { border-radius: 13px !important; } .u-radius14-pc { border-radius: 14px !important; } .u-radius15-pc { border-radius: 15px !important; } .u-radius16-pc { border-radius: 16px !important; } .u-radius17-pc { border-radius: 17px !important; } .u-radius18-pc { border-radius: 18px !important; } .u-radius19-pc { border-radius: 19px !important; } .u-radius20-pc { border-radius: 20px !important; } } @media screen and (max-width: 768px ) { #page-contents { padding-top: var(--header_height_sp); } .l-inner-default-sp { margin: 0 auto; padding: 0 var(--section_side_padding_sp); } .l-inner-narrow-sp { margin: 0 auto; padding: 0 calc(var(--section_side_padding_sp) * 2); } .l-inner-full-sp { margin: 0 auto; padding: 0; } .c-btn { font-size: var(--btn_font_size_sp); border: var(--btn_border_width_sp) solid var(--btn_border_color); border-radius: var(--btn_radius_sp); height: var(--btn_height_sp); } .c-btn:hover, .c-btn.is-current { border: var(--btn_border_width_sp) solid var(--btn_border_color_hover); } .c-btn.-v2 { font-size: var(--btn_v2_font_size_sp); border: var(--btn_v2_border_width_sp) solid var(--btn_v2_border_color); border-radius: var(--btn_v2_radius_sp); height: var(--btn_v2_height_sp); } .c-btn.-v2:hover, .c-btn.-v2.is-current { border: var(--btn_v2_border_width_sp) solid var(--btn_v2_border_color_hover); } .c-btn.-v3 { font-size: var(--btn_v3_font_size_sp); border: var(--btn_v3_border_width_sp) solid var(--btn_v3_border_color); border-radius: var(--btn_v3_radius_sp); height: var(--btn_v3_height_sp); } .c-btn.-v3:hover, .c-btn.-v3.is-current { border: var(--btn_v3_border_width_sp) solid var(--btn_v3_border_color_hover); } .c-btn.-directory_nav { font-size: 14px; height: 38px; } .c-heading1 { font-size: var(--common_heading1_font_size_sp); } .c-heading1-sp { font-weight: var(--common_heading1_font_weight); line-height: var(--common_heading1_line_height); letter-spacing: var(--common_heading1_letter_spacing); font-size: var(--common_heading1_font_size_sp); } .c-heading2 { font-size: var(--common_heading2_font_size_sp); } .c-heading2-sp { font-weight: var(--common_heading2_font_weight); line-height: var(--common_heading2_line_height); letter-spacing: var(--common_heading2_letter_spacing); font-size: var(--common_heading2_font_size_sp); } .c-heading3 { font-size: var(--common_heading3_font_size_sp); } .c-heading3-sp { font-weight: var(--common_heading3_font_weight); line-height: var(--common_heading3_line_height); letter-spacing: var(--common_heading3_letter_spacing); font-size: var(--common_heading3_font_size_sp); } .c-heading4 { font-size: var(--common_heading4_font_size_sp); } .c-heading4-sp { font-weight: var(--common_heading4_font_weight); line-height: var(--common_heading4_line_height); letter-spacing: var(--common_heading4_letter_spacing); font-size: var(--common_heading4_font_size_sp); } .c-heading5 { font-size: var(--common_heading5_font_size_sp); } .c-heading5-sp { font-weight: var(--common_heading5_font_weight); line-height: var(--common_heading5_line_height); letter-spacing: var(--common_heading5_letter_spacing); font-size: var(--common_heading5_font_size_sp); } .c-heading6 { font-size: var(--common_heading6_font_size_sp); } .c-heading6-sp { font-weight: var(--common_heading6_font_weight); line-height: var(--common_heading6_line_height); letter-spacing: var(--common_heading6_letter_spacing); font-size: var(--common_heading6_font_size_sp); } .c-paragraph { font-size: var(--common_paragraph_font_size_sp); } .c-paragraph-sp { font-weight: var(--common_paragraph_font_weight); line-height: var(--common_paragraph_line_height); letter-spacing: var(--common_paragraph_letter_spacing); font-size: var(--common_paragraph_font_size_sp); } .c-paragraph_small { font-size: var(--common_paragraph_small_font_size_sp); } .c-paragraph_small-sp { font-weight: var(--common_paragraph_small_font_weight); line-height: var(--common_paragraph_small_line_height); letter-spacing: var(--common_paragraph_small_letter_spacing); font-size: var(--common_paragraph_small_font_size_sp); } .c-annotation { font-size: var(--common_annotation_font_size_sp); } .c-annotation-sp { font-weight: var(--common_annotation_font_weight); line-height: var(--common_annotation_line_height); letter-spacing: var(--common_annotation_letter_spacing); font-size: var(--common_annotation_font_size_sp); } #blog-contents, .c-blog-contents, .c-richtext { font-size: var(--richtext_other_font_size_sp); } #blog-contents h1, .c-blog-contents h1, .c-richtext h1 { font-size: var(--richtext_h1_font_size_sp); margin-top: var(--richtext_h1_margin_top_sp); } #blog-contents h1:first-child, .c-blog-contents h1:first-child, .c-richtext h1:first-child { margin-top: 0; } #blog-contents h2, .c-blog-contents h2, .c-richtext h2 { font-size: var(--richtext_h2_font_size_sp); margin-top: var(--richtext_h2_margin_top_sp); } #blog-contents h2:first-child, .c-blog-contents h2:first-child, .c-richtext h2:first-child { margin-top: 0; } #blog-contents h3, .c-blog-contents h3, .c-richtext h3 { font-size: var(--richtext_h3_font_size_sp); margin-top: var(--richtext_h3_margin_top_sp); } #blog-contents h3:first-child, .c-blog-contents h3:first-child, .c-richtext h3:first-child { margin-top: 0; } #blog-contents h4, .c-blog-contents h4, .c-richtext h4 { font-size: var(--richtext_h4_font_size_sp); margin-top: var(--richtext_h4_margin_top_sp); } #blog-contents h4:first-child, .c-blog-contents h4:first-child, .c-richtext h4:first-child { margin-top: 0; } #blog-contents h5, .c-blog-contents h5, .c-richtext h5 { font-size: var(--richtext_h5_font_size_sp); margin-top: var(--richtext_h5_margin_top_sp); } #blog-contents h5:first-child, .c-blog-contents h5:first-child, .c-richtext h5:first-child { margin-top: 0; } #blog-contents h6, .c-blog-contents h6, .c-richtext h6 { font-size: var(--richtext_h6_font_size_sp); margin-top: var(--richtext_h6_margin_top_sp); } #blog-contents h6:first-child, .c-blog-contents h6:first-child, .c-richtext h6:first-child { margin-top: 0; } #blog-contents p, .c-blog-contents p, .c-richtext p { font-size: var(--richtext_p_font_size_sp); margin-top: var(--richtext_p_margin_top_sp); } #blog-contents p:first-child, .c-blog-contents p:first-child, .c-richtext p:first-child { margin-top: 0; } #blog-contents div, #blog-contents ul, #blog-contents ol, #blog-contents table, .c-blog-contents div, .c-blog-contents ul, .c-blog-contents ol, .c-blog-contents table, .c-richtext div, .c-richtext ul, .c-richtext ol, .c-richtext table { margin-top: var(--richtext_p_margin_top_sp); } #blog-contents div:first-child, #blog-contents ul:first-child, #blog-contents ol:first-child, #blog-contents table:first-child, .c-blog-contents div:first-child, .c-blog-contents ul:first-child, .c-blog-contents ol:first-child, .c-blog-contents table:first-child, .c-richtext div:first-child, .c-richtext ul:first-child, .c-richtext ol:first-child, .c-richtext table:first-child { margin-top: 0; } #blog-contents li, .c-blog-contents li, .c-richtext li { margin-top: 7px; } #blog-contents li:first-child, .c-blog-contents li:first-child, .c-richtext li:first-child { margin-top: 0; } #blog-contents table, .c-blog-contents table, .c-richtext table { display: block; } #blog-contents table thead, #blog-contents table tbody, #blog-contents table tr, #blog-contents table th, #blog-contents table td, .c-blog-contents table thead, .c-blog-contents table tbody, .c-blog-contents table tr, .c-blog-contents table th, .c-blog-contents table td, .c-richtext table thead, .c-richtext table tbody, .c-richtext table tr, .c-richtext table th, .c-richtext table td { display: block; width: auto !important; height: auto !important; border: none !important; margin-top: 15px; } #blog-contents table img, .c-blog-contents table img, .c-richtext table img { display: block; margin: 0 auto; } .p-anchor__position { top: calc(0px - var(--section_padding_default_sp)); } .p-section { padding: var(--section_padding_default_sp) 0; } .p-section.-low { padding: var(--section_padding_low_sp) 0; } .p-section.-pt00 { padding-top: 0; } .p-section.-pb00 { padding-bottom: 0; } .p-section.-ptb00 { padding-top: 0; padding-bottom: 0; } .p-section__anchor { top: calc(0px - var(--section_padding_default_sp) - var(--page_head_height_sp)); } .p-section.-low > .p-section__anchor { top: calc(0px - var(--section_padding_low_sp) - var(--page_head_height_sp)); } .p-section.-pt00 > .p-section__anchor { top: calc(0px - var(--page_head_height_sp)); } .p-section.-pb00 > .p-section__anchor { top: calc(0px - var(--section_padding_default_sp) - var(--page_head_height_sp)); } .p-section.-ptb00 > .p-section__anchor { top: calc(0px - var(--page_head_height_sp)); } .p-section__ttl { font-size: var(--section_ttl_font_size_sp); } * + .p-section__body { margin-top: var(--section_body_margin_top_sp); } .p-row.-sp_column1 { margin-top: calc(0px - var(--row1_space_vertical_sp)); } .p-row.-sp_column2 { margin-right: calc(0px - var(--row2_space_horizon_sp)); margin-top: calc(0px - var(--row2_space_vertical_sp)); } .p-row.-sp_column3 { margin-right: calc(0px - var(--row3_space_horizon_sp)); margin-top: calc(0px - var(--row3_space_vertical_sp)); } .p-row__col.-sp_column1 { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding-top: var(--row1_space_vertical_sp); } .p-row__col.-sp_column2 { -ms-flex-preferred-size: 50%; flex-basis: 50%; padding-right: var(--row2_space_horizon_sp); padding-top: var(--row2_space_vertical_sp); } .p-row__col.-sp_column3 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; padding-right: var(--row3_space_horizon_sp); padding-top: var(--row3_space_vertical_sp); } .p-card__body { margin-top: 10px; } .p-card__txt { font-size: var(--common_annotation_font_size_sp); } .p-tags__item { font-size: var(--common_annotation_font_size_sp); padding: 10px; } .p-tags__btn { border: var(--tag_border_width_sp) solid var(--tag_border_color); font-size: var(--tag_font_size_sp); border-radius: var(--tag_radius_sp); height: var(--tag_height_sp); padding: 0 var(--tag_padding_sp); } .p-tags__btn:hover { border: var(--tag_border_width_sp) solid var(--tag_border_color_hover); } .p-banner__contents { height: 120px; } .p-page_head { padding: var(--page_head_padding_vertical_sp) var(--page_head_padding_horizon_sp); } .p-page_head__ttl { font-size: var(--common_heading1_font_size_sp); } .p-block__head { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; padding-right: 10px; } .p-block__txt { margin-top: 10px; } * + .p-block_v2 { margin-top: 20px; } .p-block_v2__body { margin-top: 10px; } .p-block_v4__main { padding: 15px 25px; } .p-modal_contents__inner { padding: 0 20px; } .p-bread__item { font-size: 14px; } .p-top_hero { padding-bottom: 15px; } .p-top_hero__main { padding: 80px 0 60px; } .p-top_hero__nav { margin-top: 45px; } .p-top_hero__bg { height: 360px; } .p-tab_nav__body { padding: 30px 15px 25px; } .p-top_news__ttl { font-size: 24px; font-weight: 700; text-align: center; position: relative; padding-bottom: 15px; } .p-top_news__body { margin-top: 20px; } .p-top_news__link { padding-top: 5px; } .p-top_news__icon { margin-right: 5px; } .p-top_news__foot { margin-top: 20px; } .p-top_news__more_icon { margin-right: 5px; } .p-slider_area .bx-prev, .p-slider_area .bx-next { width: 35px; height: 40px; -webkit-transform: translateY(-20px); transform: translateY(-20px); } .p-slider_area .bx-prev { left: -15px; } .p-slider_area .bx-next { right: -15px; } * + .p-faq { margin-top: 30px; } .p-faq__head { padding: 4px 15px; } .p-faq__ttl { font-size: 14px; } .p-faq__body { font-size: 14px; } .p-faq__section { padding: 15px 0; } .p-faq__q_inner { font-size: 16px; } .p-faq__q_inner .icon { -webkit-box-flex: 0; -ms-flex: 0 0 30px; flex: 0 0 30px; } .p-faq__q_inner .text { -webkit-box-flex: calc(100% - 30px); -ms-flex: calc(100% - 30px); flex: calc(100% - 30px); padding-right: 30px; } .p-faq__a { padding-top: 15px; } .p-faq__a_inner { font-size: 16px; } .p-faq__a_inner .icon { -webkit-box-flex: 0; -ms-flex: 0 0 30px; flex: 0 0 30px; } .p-faq__a_inner .text { -webkit-box-flex: calc(100% - 30px); -ms-flex: calc(100% - 30px); flex: calc(100% - 30px); } * + .p-banner_blocks__square { margin-top: 20px; } * + .p-banner_blocks__rectangle { margin-top: 20px; } * + .p-banner_blocks__item { margin-top: 20px; } .p-banner_blocks__icon { margin-right: 5px; } .p-banner_blocks__txt { font-size: 14px; } * + .p-interview_accordion { margin-top: 20px; } .p-interview_accordion__anchor { top: -85px; } .p-interview_accordion__board { padding: 20px 15px; } .p-interview_accordion__body { padding-top: 27px; padding-bottom: 15px; } .p-interview_accordion__btn { margin-top: 8px; } .p-carousel .bx-wrapper { margin: 0 auto; } .p-carousel .bx-prev, .p-carousel .bx-next { width: 29px; height: 57px; } .p-carousel .bx-prev { left: -45px; } .p-carousel .bx-next { right: -45px; } .p-carousel.-board .bx-prev, .p-carousel.-board .bx-next { top: 35px; } .p-carousel__board { padding: 10px 0 0; } .p-directory_nav { margin-top: -20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-directory_nav__item { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 20px 10px 0; } .p-directory_nav__link { height: 54px; border-radius: 27px; } .p-page_directory_nav { padding: 15px 0; } .p-page_directory_nav__list { margin: 0 auto; padding: 0; width: 90%; overflow-x: auto; white-space: nowrap; overflow-scrolling: touch; } .p-page_directory_nav__item { display: inline-block; padding-left: 15px; } .p-table { display: block; } .p-table__tbody { display: block; } .p-table__tr { display: block; } * + .p-table__tr { margin-top: 40px; } .p-table__th, .p-table__td { display: block; font-size: 14px; } .p-table__th { background-color: #E0E0E0; padding: 10px 15px; } .p-table__td { margin-top: 10px; } .p-scroll_table { overflow: scroll; padding-bottom: 20px; } .p-scroll_table > table { min-width: var(--section_width_default); } .p-scroll_table > table table { width: 100%; } * + .p-image_contents { margin-top: 40px; } .p-image_contents__contents { margin-top: 10px; } .p-pager { margin-top: 50px; } .p-sns_list { margin-top: 20px; } .p-category_bar__item { font-size: 14px; } .p-header { height: var(--header_height_sp); } .p-header__logos { padding-left: var(--header_padding_left_sp); width: var(--header_logo_width_sp); } .p-header__menu { padding-right: var(--header_menu_right_sp); } .p-header__nav { position: absolute; top: 100%; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); padding-right: 20vw; display: none; opacity: 0; } .p-header__nav.is-open { opacity: 1; } .p-hdr_menu { position: relative; height: var(--header_menu_height); width: var(--header_menu_width); cursor: pointer; } .p-hdr_menu__top, .p-hdr_menu__mdl, .p-hdr_menu__btm { background-color: var(--header_menu_border_color); position: absolute; width: 100%; height: var(--header_menu_border_width); left: 50%; -webkit-transition: var(--common_transition_duration); transition: var(--common_transition_duration); -webkit-transform: translate(-50%, 0) scale(1) rotate(0deg); transform: translate(-50%, 0) scale(1) rotate(0deg); } .p-hdr_menu__top { top: 0; } #header-menu.is-open .p-hdr_menu__top { top: 50%; -webkit-transform: translate(-50%, -50%) scale(1) rotate(45deg); transform: translate(-50%, -50%) scale(1) rotate(45deg); } .p-hdr_menu__mdl { top: calc((var(--header_menu_height) - var(--header_menu_border_width)) / 2); } #header-menu.is-open .p-hdr_menu__mdl { -webkit-transform: translate(-50%, 0) scale(2, 0) rotate(0deg); transform: translate(-50%, 0) scale(2, 0) rotate(0deg); } .p-hdr_menu__btm { top: calc(var(--header_menu_height) - var(--header_menu_border_width)); } #header-menu.is-open .p-hdr_menu__btm { top: 50%; -webkit-transform: translate(-50%, -50%) scale(1) rotate(315deg); transform: translate(-50%, -50%) scale(1) rotate(315deg); } .p-hdr_nav { height: calc(100vh - var(--header_height_sp)); overflow: scroll; background-color: #fff; -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); -webkit-transform: translateX(-80vw); transform: translateX(-80vw); } #header-nav.is-open .p-hdr_nav { -webkit-transform: translateX(0); transform: translateX(0); } .p-hdr_nav__contents { padding: 30px 20px; } .p-hdr_nav__sub { padding-top: 20px; margin-top: 20px; border: 1px solid #dbdbdb; } .p-hdr_nav_global__item { font-size: var(--header_nav_global_font_size_sp); } * + .p-hdr_nav_global__item { margin-top: 30px; } .p-hdr_nav_global__item.-pc { display: none; } .p-hdr_nav_global__link { color: var(--common_color_black); display: block; } .p-hdr_nav_global__link.-haschild { position: relative; } .p-hdr_nav_global__link.-haschild::before, .p-hdr_nav_global__link.-haschild::after { content: ""; display: block; background-color: var(--common_color_black); position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition-duration: var(--common_transition_duration); transition-duration: var(--common_transition_duration); } .p-hdr_nav_global__link.-haschild::before { width: 7px; height: 1px; right: 0; } .js-header-nav-haschild.is-open .p-hdr_nav_global__link.-haschild::before { -webkit-transform: translateY(-50%) rotate(-360deg); transform: translateY(-50%) rotate(-360deg); } .p-hdr_nav_global__link.-haschild::after { width: 1px; height: 7px; right: 3px; } .js-header-nav-haschild.is-open .p-hdr_nav_global__link.-haschild::after { -webkit-transform: translateY(-50%) rotate(-270deg); transform: translateY(-50%) rotate(-270deg); } .p-hdr_nav_global__child { padding-top: 25px; } .p-hdr_nav_child { padding-right: 15px; } .p-hdr_nav_child__item { font-size: var(--header_nav_child_font_size_sp); } * + .p-hdr_nav_child__item { margin-top: 20px; } .p-hdr_nav_child__link { color: var(--common_color_black); } .p-footer__head { padding: 40px 0; } .p-footer__copyright { line-height: 140%; } .u-dib-sp { display: inline-block !important; } .u-db-sp { display: block !important; } .u-dn-sp { display: none !important; } .u-df-sp { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .u-aac-sp { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .u-aafs-sp { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .u-aafe-sp { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .u-jcc-sp { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .u-jcfs-sp { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .u-jcfe-sp { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .u-jcsb-sp { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .u-fwwrap-sp { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-bold-sp { font-weight: 700 !important; } .u-medium-sp { font-weight: 500 !important; } .u-normal-sp { font-weight: 400 !important; } .u-light-sp { font-weight: 300 !important; } .u-black-sp { color: var(--common_color_black) !important; } .u-black-heading-sp { color: var(--common_color_black) !important; } .u-white-sp { color: #fff !important; } .u-primary-sp { color: var(--common_color_primary) !important; } .u-primary_variant-sp { color: var(--common_color_primary_variant) !important; } .u-secondary-sp { color: var(--common_color_secondary) !important; } .u-jp-sp { font-family: var(--common_font_jp) !important; } .u-en-sp { font-family: var(--common_font_en) !important; } .u-jp_sans-sp { font-family: var(--common_font_family_jp_sans) !important; } .u-jp_serif-sp { font-family: var(--common_font_family_jp_serif) !important; } .u-center-sp { text-align: center !important; } .u-left-sp { text-align: left !important; } .u-right-sp { text-align: right !important; } .u-justify-sp { text-align: justify !important; } .u-fz08-sp { font-size: 8px !important; } .u-fz09-sp { font-size: 9px !important; } .u-fz10-sp { font-size: 10px !important; } .u-fz11-sp { font-size: 11px !important; } .u-fz12-sp { font-size: 12px !important; } .u-fz13-sp { font-size: 13px !important; } .u-fz14-sp { font-size: 14px !important; } .u-fz15-sp { font-size: 15px !important; } .u-fz16-sp { font-size: 16px !important; } .u-fz17-sp { font-size: 17px !important; } .u-fz18-sp { font-size: 18px !important; } .u-fz19-sp { font-size: 19px !important; } .u-fz20-sp { font-size: 20px !important; } .u-fz21-sp { font-size: 21px !important; } .u-fz22-sp { font-size: 22px !important; } .u-fz23-sp { font-size: 23px !important; } .u-fz24-sp { font-size: 24px !important; } .u-fz25-sp { font-size: 25px !important; } .u-fz26-sp { font-size: 26px !important; } .u-fz27-sp { font-size: 27px !important; } .u-fz28-sp { font-size: 28px !important; } .u-fz29-sp { font-size: 29px !important; } .u-fz30-sp { font-size: 30px !important; } .u-fz31-sp { font-size: 31px !important; } .u-fz32-sp { font-size: 32px !important; } .u-fz33-sp { font-size: 33px !important; } .u-fz34-sp { font-size: 34px !important; } .u-fz35-sp { font-size: 35px !important; } .u-fz36-sp { font-size: 36px !important; } .u-fz37-sp { font-size: 37px !important; } .u-fz38-sp { font-size: 38px !important; } .u-fz39-sp { font-size: 39px !important; } .u-fz40-sp { font-size: 40px !important; } .u-fz41-sp { font-size: 41px !important; } .u-fz42-sp { font-size: 42px !important; } .u-fz43-sp { font-size: 43px !important; } .u-fz44-sp { font-size: 44px !important; } .u-fz45-sp { font-size: 45px !important; } .u-fz46-sp { font-size: 46px !important; } .u-fz47-sp { font-size: 47px !important; } .u-fz48-sp { font-size: 48px !important; } .u-fz49-sp { font-size: 49px !important; } .u-fz50-sp { font-size: 50px !important; } .u-fz51-sp { font-size: 51px !important; } .u-fz52-sp { font-size: 52px !important; } .u-fz53-sp { font-size: 53px !important; } .u-fz54-sp { font-size: 54px !important; } .u-fz55-sp { font-size: 55px !important; } .u-fz56-sp { font-size: 56px !important; } .u-fz57-sp { font-size: 57px !important; } .u-fz58-sp { font-size: 58px !important; } .u-fz59-sp { font-size: 59px !important; } .u-fz60-sp { font-size: 60px !important; } .u-marginauto-sp { margin-left: auto !important; margin-right: auto !important; } .u-mt00-sp { margin-top: 0px !important; } .u-mt05-sp { margin-top: 5px !important; } .u-mt10-sp { margin-top: 10px !important; } .u-mt15-sp { margin-top: 15px !important; } .u-mt20-sp { margin-top: 20px !important; } .u-mt25-sp { margin-top: 25px !important; } .u-mt30-sp { margin-top: 30px !important; } .u-mt35-sp { margin-top: 35px !important; } .u-mt40-sp { margin-top: 40px !important; } .u-mt45-sp { margin-top: 45px !important; } .u-mt50-sp { margin-top: 50px !important; } .u-mt55-sp { margin-top: 55px !important; } .u-mt60-sp { margin-top: 60px !important; } .u-mt65-sp { margin-top: 65px !important; } .u-mt70-sp { margin-top: 70px !important; } .u-mt75-sp { margin-top: 75px !important; } .u-mt80-sp { margin-top: 80px !important; } .u-mt85-sp { margin-top: 85px !important; } .u-mt90-sp { margin-top: 90px !important; } .u-mt95-sp { margin-top: 95px !important; } .u-mt100-sp { margin-top: 100px !important; } .u-mt110-sp { margin-top: 110px !important; } .u-mt120-sp { margin-top: 120px !important; } .u-mt130-sp { margin-top: 130px !important; } .u-mt140-sp { margin-top: 140px !important; } .u-mt150-sp { margin-top: 150px !important; } .u-mt160-sp { margin-top: 160px !important; } .u-mt170-sp { margin-top: 170px !important; } .u-mt180-sp { margin-top: 180px !important; } .u-mt190-sp { margin-top: 190px !important; } .u-mt200-sp { margin-top: 200px !important; } .u-mr00-sp { margin-right: 0px !important; } .u-mr05-sp { margin-right: 5px !important; } .u-mr10-sp { margin-right: 10px !important; } .u-mr15-sp { margin-right: 15px !important; } .u-mr20-sp { margin-right: 20px !important; } .u-mr25-sp { margin-right: 25px !important; } .u-mr30-sp { margin-right: 30px !important; } .u-mr35-sp { margin-right: 35px !important; } .u-mr40-sp { margin-right: 40px !important; } .u-mr45-sp { margin-right: 45px !important; } .u-mr50-sp { margin-right: 50px !important; } .u-mr55-sp { margin-right: 55px !important; } .u-mr60-sp { margin-right: 60px !important; } .u-mr65-sp { margin-right: 65px !important; } .u-mr70-sp { margin-right: 70px !important; } .u-mr75-sp { margin-right: 75px !important; } .u-mr80-sp { margin-right: 80px !important; } .u-mr85-sp { margin-right: 85px !important; } .u-mr90-sp { margin-right: 90px !important; } .u-mr95-sp { margin-right: 95px !important; } .u-mr100-sp { margin-right: 100px !important; } .u-mr110-sp { margin-right: 110px !important; } .u-mr120-sp { margin-right: 120px !important; } .u-mr130-sp { margin-right: 130px !important; } .u-mr140-sp { margin-right: 140px !important; } .u-mr150-sp { margin-right: 150px !important; } .u-mr160-sp { margin-right: 160px !important; } .u-mr170-sp { margin-right: 170px !important; } .u-mr180-sp { margin-right: 180px !important; } .u-mr190-sp { margin-right: 190px !important; } .u-mr200-sp { margin-right: 200px !important; } .u-mb00-sp { margin-bottom: 0px !important; } .u-mb05-sp { margin-bottom: 5px !important; } .u-mb10-sp { margin-bottom: 10px !important; } .u-mb15-sp { margin-bottom: 15px !important; } .u-mb20-sp { margin-bottom: 20px !important; } .u-mb25-sp { margin-bottom: 25px !important; } .u-mb30-sp { margin-bottom: 30px !important; } .u-mb35-sp { margin-bottom: 35px !important; } .u-mb40-sp { margin-bottom: 40px !important; } .u-mb45-sp { margin-bottom: 45px !important; } .u-mb50-sp { margin-bottom: 50px !important; } .u-mb55-sp { margin-bottom: 55px !important; } .u-mb60-sp { margin-bottom: 60px !important; } .u-mb65-sp { margin-bottom: 65px !important; } .u-mb70-sp { margin-bottom: 70px !important; } .u-mb75-sp { margin-bottom: 75px !important; } .u-mb80-sp { margin-bottom: 80px !important; } .u-mb85-sp { margin-bottom: 85px !important; } .u-mb90-sp { margin-bottom: 90px !important; } .u-mb95-sp { margin-bottom: 95px !important; } .u-mb100-sp { margin-bottom: 100px !important; } .u-mb110-sp { margin-bottom: 110px !important; } .u-mb120-sp { margin-bottom: 120px !important; } .u-mb130-sp { margin-bottom: 130px !important; } .u-mb140-sp { margin-bottom: 140px !important; } .u-mb150-sp { margin-bottom: 150px !important; } .u-mb160-sp { margin-bottom: 160px !important; } .u-mb170-sp { margin-bottom: 170px !important; } .u-mb180-sp { margin-bottom: 180px !important; } .u-mb190-sp { margin-bottom: 190px !important; } .u-mb200-sp { margin-bottom: 200px !important; } .u-ml00-sp { margin-left: 0px !important; } .u-ml05-sp { margin-left: 5px !important; } .u-ml10-sp { margin-left: 10px !important; } .u-ml15-sp { margin-left: 15px !important; } .u-ml20-sp { margin-left: 20px !important; } .u-ml25-sp { margin-left: 25px !important; } .u-ml30-sp { margin-left: 30px !important; } .u-ml35-sp { margin-left: 35px !important; } .u-ml40-sp { margin-left: 40px !important; } .u-ml45-sp { margin-left: 45px !important; } .u-ml50-sp { margin-left: 50px !important; } .u-ml55-sp { margin-left: 55px !important; } .u-ml60-sp { margin-left: 60px !important; } .u-ml65-sp { margin-left: 65px !important; } .u-ml70-sp { margin-left: 70px !important; } .u-ml75-sp { margin-left: 75px !important; } .u-ml80-sp { margin-left: 80px !important; } .u-ml85-sp { margin-left: 85px !important; } .u-ml90-sp { margin-left: 90px !important; } .u-ml95-sp { margin-left: 95px !important; } .u-ml100-sp { margin-left: 100px !important; } .u-ml110-sp { margin-left: 110px !important; } .u-ml120-sp { margin-left: 120px !important; } .u-ml130-sp { margin-left: 130px !important; } .u-ml140-sp { margin-left: 140px !important; } .u-ml150-sp { margin-left: 150px !important; } .u-ml160-sp { margin-left: 160px !important; } .u-ml170-sp { margin-left: 170px !important; } .u-ml180-sp { margin-left: 180px !important; } .u-ml190-sp { margin-left: 190px !important; } .u-ml200-sp { margin-left: 200px !important; } .u-nmt00-sp { margin-top: 0px !important; } .u-nmt05-sp { margin-top: -5px !important; } .u-nmt10-sp { margin-top: -10px !important; } .u-nmt15-sp { margin-top: -15px !important; } .u-nmt20-sp { margin-top: -20px !important; } .u-nmt25-sp { margin-top: -25px !important; } .u-nmt30-sp { margin-top: -30px !important; } .u-nmt35-sp { margin-top: -35px !important; } .u-nmt40-sp { margin-top: -40px !important; } .u-nmt45-sp { margin-top: -45px !important; } .u-nmt50-sp { margin-top: -50px !important; } .u-nmt55-sp { margin-top: -55px !important; } .u-nmt60-sp { margin-top: -60px !important; } .u-nmt65-sp { margin-top: -65px !important; } .u-nmt70-sp { margin-top: -70px !important; } .u-nmt75-sp { margin-top: -75px !important; } .u-nmt80-sp { margin-top: -80px !important; } .u-nmt85-sp { margin-top: -85px !important; } .u-nmt90-sp { margin-top: -90px !important; } .u-nmt95-sp { margin-top: -95px !important; } .u-nmt100-sp { margin-top: -100px !important; } .u-nmr00-sp { margin-right: 0px !important; } .u-nmr05-sp { margin-right: -5px !important; } .u-nmr10-sp { margin-right: -10px !important; } .u-nmr15-sp { margin-right: -15px !important; } .u-nmr20-sp { margin-right: -20px !important; } .u-nmr25-sp { margin-right: -25px !important; } .u-nmr30-sp { margin-right: -30px !important; } .u-nmr35-sp { margin-right: -35px !important; } .u-nmr40-sp { margin-right: -40px !important; } .u-nmr45-sp { margin-right: -45px !important; } .u-nmr50-sp { margin-right: -50px !important; } .u-nmr55-sp { margin-right: -55px !important; } .u-nmr60-sp { margin-right: -60px !important; } .u-nmr65-sp { margin-right: -65px !important; } .u-nmr70-sp { margin-right: -70px !important; } .u-nmr75-sp { margin-right: -75px !important; } .u-nmr80-sp { margin-right: -80px !important; } .u-nmr85-sp { margin-right: -85px !important; } .u-nmr90-sp { margin-right: -90px !important; } .u-nmr95-sp { margin-right: -95px !important; } .u-nmr100-sp { margin-right: -100px !important; } .u-nml00-sp { margin-left: 0px !important; } .u-nml05-sp { margin-left: -5px !important; } .u-nml10-sp { margin-left: -10px !important; } .u-nml15-sp { margin-left: -15px !important; } .u-nml20-sp { margin-left: -20px !important; } .u-nml25-sp { margin-left: -25px !important; } .u-nml30-sp { margin-left: -30px !important; } .u-nml35-sp { margin-left: -35px !important; } .u-nml40-sp { margin-left: -40px !important; } .u-nml45-sp { margin-left: -45px !important; } .u-nml50-sp { margin-left: -50px !important; } .u-nml55-sp { margin-left: -55px !important; } .u-nml60-sp { margin-left: -60px !important; } .u-nml65-sp { margin-left: -65px !important; } .u-nml70-sp { margin-left: -70px !important; } .u-nml75-sp { margin-left: -75px !important; } .u-nml80-sp { margin-left: -80px !important; } .u-nml85-sp { margin-left: -85px !important; } .u-nml90-sp { margin-left: -90px !important; } .u-nml95-sp { margin-left: -95px !important; } .u-nml100-sp { margin-left: -100px !important; } .u-pt00-sp { padding-top: 0px !important; } .u-pt05-sp { padding-top: 5px !important; } .u-pt10-sp { padding-top: 10px !important; } .u-pt15-sp { padding-top: 15px !important; } .u-pt20-sp { padding-top: 20px !important; } .u-pt25-sp { padding-top: 25px !important; } .u-pt30-sp { padding-top: 30px !important; } .u-pt35-sp { padding-top: 35px !important; } .u-pt40-sp { padding-top: 40px !important; } .u-pt45-sp { padding-top: 45px !important; } .u-pt50-sp { padding-top: 50px !important; } .u-pt55-sp { padding-top: 55px !important; } .u-pt60-sp { padding-top: 60px !important; } .u-pt65-sp { padding-top: 65px !important; } .u-pt70-sp { padding-top: 70px !important; } .u-pt75-sp { padding-top: 75px !important; } .u-pt80-sp { padding-top: 80px !important; } .u-pt85-sp { padding-top: 85px !important; } .u-pt90-sp { padding-top: 90px !important; } .u-pt95-sp { padding-top: 95px !important; } .u-pt100-sp { padding-top: 100px !important; } .u-pt110-sp { padding-top: 110px !important; } .u-pt120-sp { padding-top: 120px !important; } .u-pt130-sp { padding-top: 130px !important; } .u-pt140-sp { padding-top: 140px !important; } .u-pt150-sp { padding-top: 150px !important; } .u-pt160-sp { padding-top: 160px !important; } .u-pt170-sp { padding-top: 170px !important; } .u-pt180-sp { padding-top: 180px !important; } .u-pt190-sp { padding-top: 190px !important; } .u-pt200-sp { padding-top: 200px !important; } .u-pr00-sp { padding-right: 0px !important; } .u-pr05-sp { padding-right: 5px !important; } .u-pr10-sp { padding-right: 10px !important; } .u-pr15-sp { padding-right: 15px !important; } .u-pr20-sp { padding-right: 20px !important; } .u-pr25-sp { padding-right: 25px !important; } .u-pr30-sp { padding-right: 30px !important; } .u-pr35-sp { padding-right: 35px !important; } .u-pr40-sp { padding-right: 40px !important; } .u-pr45-sp { padding-right: 45px !important; } .u-pr50-sp { padding-right: 50px !important; } .u-pr55-sp { padding-right: 55px !important; } .u-pr60-sp { padding-right: 60px !important; } .u-pr65-sp { padding-right: 65px !important; } .u-pr70-sp { padding-right: 70px !important; } .u-pr75-sp { padding-right: 75px !important; } .u-pr80-sp { padding-right: 80px !important; } .u-pr85-sp { padding-right: 85px !important; } .u-pr90-sp { padding-right: 90px !important; } .u-pr95-sp { padding-right: 95px !important; } .u-pr100-sp { padding-right: 100px !important; } .u-pr110-sp { padding-right: 110px !important; } .u-pr120-sp { padding-right: 120px !important; } .u-pr130-sp { padding-right: 130px !important; } .u-pr140-sp { padding-right: 140px !important; } .u-pr150-sp { padding-right: 150px !important; } .u-pr160-sp { padding-right: 160px !important; } .u-pr170-sp { padding-right: 170px !important; } .u-pr180-sp { padding-right: 180px !important; } .u-pr190-sp { padding-right: 190px !important; } .u-pr200-sp { padding-right: 200px !important; } .u-pb00-sp { padding-bottom: 0px !important; } .u-pb05-sp { padding-bottom: 5px !important; } .u-pb10-sp { padding-bottom: 10px !important; } .u-pb15-sp { padding-bottom: 15px !important; } .u-pb20-sp { padding-bottom: 20px !important; } .u-pb25-sp { padding-bottom: 25px !important; } .u-pb30-sp { padding-bottom: 30px !important; } .u-pb35-sp { padding-bottom: 35px !important; } .u-pb40-sp { padding-bottom: 40px !important; } .u-pb45-sp { padding-bottom: 45px !important; } .u-pb50-sp { padding-bottom: 50px !important; } .u-pb55-sp { padding-bottom: 55px !important; } .u-pb60-sp { padding-bottom: 60px !important; } .u-pb65-sp { padding-bottom: 65px !important; } .u-pb70-sp { padding-bottom: 70px !important; } .u-pb75-sp { padding-bottom: 75px !important; } .u-pb80-sp { padding-bottom: 80px !important; } .u-pb85-sp { padding-bottom: 85px !important; } .u-pb90-sp { padding-bottom: 90px !important; } .u-pb95-sp { padding-bottom: 95px !important; } .u-pb100-sp { padding-bottom: 100px !important; } .u-pb110-sp { padding-bottom: 110px !important; } .u-pb120-sp { padding-bottom: 120px !important; } .u-pb130-sp { padding-bottom: 130px !important; } .u-pb140-sp { padding-bottom: 140px !important; } .u-pb150-sp { padding-bottom: 150px !important; } .u-pb160-sp { padding-bottom: 160px !important; } .u-pb170-sp { padding-bottom: 170px !important; } .u-pb180-sp { padding-bottom: 180px !important; } .u-pb190-sp { padding-bottom: 190px !important; } .u-pb200-sp { padding-bottom: 200px !important; } .u-pl00-sp { padding-left: 0px !important; } .u-pl05-sp { padding-left: 5px !important; } .u-pl10-sp { padding-left: 10px !important; } .u-pl15-sp { padding-left: 15px !important; } .u-pl20-sp { padding-left: 20px !important; } .u-pl25-sp { padding-left: 25px !important; } .u-pl30-sp { padding-left: 30px !important; } .u-pl35-sp { padding-left: 35px !important; } .u-pl40-sp { padding-left: 40px !important; } .u-pl45-sp { padding-left: 45px !important; } .u-pl50-sp { padding-left: 50px !important; } .u-pl55-sp { padding-left: 55px !important; } .u-pl60-sp { padding-left: 60px !important; } .u-pl65-sp { padding-left: 65px !important; } .u-pl70-sp { padding-left: 70px !important; } .u-pl75-sp { padding-left: 75px !important; } .u-pl80-sp { padding-left: 80px !important; } .u-pl85-sp { padding-left: 85px !important; } .u-pl90-sp { padding-left: 90px !important; } .u-pl95-sp { padding-left: 95px !important; } .u-pl100-sp { padding-left: 100px !important; } .u-pl110-sp { padding-left: 110px !important; } .u-pl120-sp { padding-left: 120px !important; } .u-pl130-sp { padding-left: 130px !important; } .u-pl140-sp { padding-left: 140px !important; } .u-pl150-sp { padding-left: 150px !important; } .u-pl160-sp { padding-left: 160px !important; } .u-pl170-sp { padding-left: 170px !important; } .u-pl180-sp { padding-left: 180px !important; } .u-pl190-sp { padding-left: 190px !important; } .u-pl200-sp { padding-left: 200px !important; } .u-lh100-sp { line-height: 100% !important; } .u-lh110-sp { line-height: 110% !important; } .u-lh120-sp { line-height: 120% !important; } .u-lh130-sp { line-height: 130% !important; } .u-lh140-sp { line-height: 140% !important; } .u-lh150-sp { line-height: 150% !important; } .u-lh160-sp { line-height: 160% !important; } .u-lh170-sp { line-height: 170% !important; } .u-lh180-sp { line-height: 180% !important; } .u-lh190-sp { line-height: 190% !important; } .u-lh200-sp { line-height: 200% !important; } .u-radius01-sp { border-radius: 1px !important; } .u-radius02-sp { border-radius: 2px !important; } .u-radius03-sp { border-radius: 3px !important; } .u-radius04-sp { border-radius: 4px !important; } .u-radius05-sp { border-radius: 5px !important; } .u-radius06-sp { border-radius: 6px !important; } .u-radius07-sp { border-radius: 7px !important; } .u-radius08-sp { border-radius: 8px !important; } .u-radius09-sp { border-radius: 9px !important; } .u-radius10-sp { border-radius: 10px !important; } .u-radius11-sp { border-radius: 11px !important; } .u-radius12-sp { border-radius: 12px !important; } .u-radius13-sp { border-radius: 13px !important; } .u-radius14-sp { border-radius: 14px !important; } .u-radius15-sp { border-radius: 15px !important; } .u-radius16-sp { border-radius: 16px !important; } .u-radius17-sp { border-radius: 17px !important; } .u-radius18-sp { border-radius: 18px !important; } .u-radius19-sp { border-radius: 19px !important; } .u-radius20-sp { border-radius: 20px !important; } }/* いじらない */ @import url(https://fonts.googleapis.com/css?family=Oswald); @import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap); @import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap); @charset "UTF-8"; @font-face { font-family: "Oriya MN"; src: url("https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/fonts/oriya-mn.ttf"); } li { list-style-position: inside; } .p-section__ttl { color: #333; font-family: "Oriya MN", serif; font-size: 60px; font-weight: 400; line-height: normal; text-align: left; letter-spacing: -0.01em; padding-left: 20px; } .p-section__ttl::before { background-color: #FF223A; border-radius: 50%; left: 0; top: 0.7em; width: 16px; height: 16px; content: ""; display: block; } .p-section__ttl::after { content: none; } @media (max-width: 767px) { .p-section__ttl { font-size: 30px; } .p-section__ttl::before { top: 0.5em; width: 12px; height: 12px; } } .c-h2 { color: #05161A; font-family: "Noto Serif JP", sans-serif; font-size: 40px; font-style: normal; font-weight: 900; line-height: 130%; letter-spacing: 1px; } @media (max-width: 767px) { .c-h2 { font-size: 32px; } } .c-h3 { color: #05161A; font-family: "Noto Serif JP", sans-serif; font-size: 28px; font-style: normal; font-weight: 900; line-height: 130%; letter-spacing: 1px; } .c-h3.is_border { border-bottom: solid 1px #A2B4C7; padding-bottom: 9px; } .c-h3.is_center { text-align: center; } @media (max-width: 767px) { .c-h3 { font-size: 24px; } } .c-h4 { color: #333; font-family: "Noto Serif JP", sans-serif; font-size: 24px; font-style: normal; font-weight: 900; line-height: 150%; letter-spacing: 1px; } @media (max-width: 767px) { .c-h4 { font-size: 20px; } } .c-p { color: #333; font-family: "Noto Serif JP", sans-serif; font-size: 18px; font-style: normal; font-weight: 350; line-height: 2; letter-spacing: 1px; } @media (max-width: 767px) { .c-p { font-size: 16px; } } .c-p20 { font-size: 20px; font-weight: 350; line-height: 150%; letter-spacing: 1px; } .c-p15 { color: #333; font-family: "Noto Serif JP", sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: 180%; letter-spacing: 0.6px; } @media (max-width: 767px) { .c-p15 { font-size: 14px; } } a { cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } a:hover { opacity: 0.8; } @media screen and (min-width: 768px) { .sp { display: none !important; } } @media screen and (max-width: 767px) { .pc { display: none !important; } } .p-header { font-family: "Oriya MN", serif; } .p-hdr_nav_global__link.-haschild { padding-right: 30px; position: relative; } .p-hdr_nav_global__link.-haschild::before { background: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/header/ico_arrow_down01.svg) no-repeat center center/contain; content: ""; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 6px; } .p-hdr_nav_global__link.-haschild:after { content: none; } @media (max-width: 767px) { .p-hdr_nav_global__link.-haschild { padding-right: 15px; } .p-hdr_nav_global__link.-haschild::before { right: 0; } } @media (max-width: 767px) { .js-header-nav-haschild.is-open .p-hdr_nav_global__link.-haschild:before { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } } .p-hdr_nav_global__item:hover .p-hdr_nav_global__link.-btn1 { background-color: #fff; border: 1px solid #1B1055; color: #1B1055; } .p-hdr_nav_global__link.-btn1 { border: 1px solid #1B1055; background-color: #1B1055; color: #fff; border-radius: 100px; min-width: 160px; position: relative; } .p-hdr_nav_global__link.-btn1::before { border-radius: 100px; border: 1px solid #1B1055; content: ""; position: absolute; top: -4px; left: -4px; width: calc(100% + 6px); height: calc(100% + 6px); } @media (max-width: 767px) { .p-hdr_nav_global__link.-btn1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 40px; } } .p-hdr_nav_child { background-color: #333; } @media (max-width: 767px) { .p-hdr_nav_child { padding: 15px; } } .p-hdr_nav_child__link { color: #fff; } .p-hdr_nav_global__child.is_global { left: auto; right: 0; width: 160px; } @media (max-width: 767px) { .p-hdr_nav_global__child.is_global { width: 100%; } } .p-footer-cta { background-color: #1B1055; } .p-footer-cta__imgList { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-footer-cta__imgList__item { list-style: none; width: 20%; aspect-ratio: 4/3; } .p-footer-cta__imgList__item img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .p-footer-cta .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .p-footer-cta__btnList { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 40px; padding: 95px 0 85px; } .p-footer-cta__btnList__item { color: #fff; list-style: none; text-align: center; } .p-footer-cta__btnList__ttl { font-family: "Noto Serif JP", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: 0.05em; margin-top: 30px; } .p-footer-cta__btnList__txt { font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 15px; } .p-footer-cta__btnList__btn { margin-top: 50px; } .p-footer-cta__btnList__btn a { background-color: #fff; border-radius: 30px; color: #1B1055; font-family: "Oriya MN", serif; font-size: 22px; font-weight: normal; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; max-width: 340px; width: 100%; height: 60px; margin: 0 auto; position: relative; } .p-footer-cta__btnList__btn a span { position: absolute; top: 0; bottom: 0; right: 37px; margin: auto; width: 12px; height: 12px; border-top: 2px solid #1B1055; border-right: 2px solid #1B1055; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media (max-width: 767px) { .p-footer-cta__btnList { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding: 60px 0 50px; } .p-footer-cta__btnList__ttl { font-size: 18px; } .p-footer-cta__btnList__btn { margin-top: 30px; } .p-footer-cta__btnList__btn a { height: 50px; } .p-footer-cta__btnList__btn a span { right: 20px; width: 12px; height: 12px; } } .p-footer__middle { border-top: 1px solid #CACACA; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px 80px 70px; } @media (max-width: 767px) { .p-footer__middle { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; padding: 50px 20px 70px; } } .p-footer__middle__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 20px; } @media (max-width: 767px) { .p-footer__middle__left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-footer__middle__logo { max-width: 105px; } .p-footer__middle__ttl { font-size: 20px; letter-spacing: 0.8px; } @media (max-width: 767px) { .p-footer__middle__ttl { font-size: 16px; } } .p-footer__middle__address { margin-top: 14px; line-height: 1.6; } .p-footer__middle__tel { line-height: 1.6; } .p-footer__middle__tel span { font-weight: bold; } .p-footer__middle__qr { font-size: 14px; text-align: center; } .p-footer__middle__qr img { display: block; margin: auto; max-width: 98px; } .p-footer.is_copyright { border-top: 1px solid #CACACA; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 80px 100px; } @media (max-width: 767px) { .p-footer.is_copyright { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding: 20px 20px 100px; } } .p-footer.is_copyright .p-footer__link { color: #333; } .p-footer__list { list-style: none; } .p-footer__link.-child { padding-left: 20px; position: relative; } .p-footer__link.-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 8px; height: 8px; border-top: 1px solid #1B1055; border-right: 1px solid #1B1055; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .p-footer__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .p-footer__snsList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 28px; } .p-footer__snsList__item { list-style: none; width: 32px; } .p-top-mv { display: block; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 56vw; max-height: 740px; overflow: hidden; pointer-events: none; } .p-top-mv__inner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */ height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */ min-height: 100%; min-width: 100%; } .p-top-mv__inner video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-mv__ttl { color: #fff; font-family: "Oriya MN", serif; font-size: 5vw; font-weight: normal; text-align: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .p-top-mv__ttl span { display: block; font-family: "Noto Serif JP", sans-serif; font-size: 1.5vw; margin-top: 1em; } .p-world { max-width: 1080px; width: 100%; margin: -90px auto 0; } .p-world__imgBox { position: relative; width: 100%; } @media (max-width: 767px) { .p-world__imgBox img { width: 100% !important; height: auto; } } .p-world__imgBox__item { background: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/top/pict_world01.png) no-repeat center center/cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; position: absolute; } .p-world__imgBox__item:nth-child(1) { top: 72px; right: 188px; width: 157px; height: 157px; } .p-world__imgBox__item:nth-child(2) { top: 235px; right: 74px; width: 151px; height: 151px; } .p-world__imgBox__item:nth-child(3) { top: 74px; left: 34px; width: 113px; height: 113px; } .p-world__imgBox__item:nth-child(4) { top: 160px; left: 350px; width: 72px; height: 72px; } .p-world__imgBox__item:nth-child(5) { top: 156px; left: 430px; width: 50px; height: 50px; } .p-world__imgBox__item:nth-child(6) { top: 232px; left: 343px; width: 34px; height: 34px; } .p-world__imgBox__item:nth-child(7) { background: none; color: #FF223A; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: "Oriya MN", serif; font-size: 36px; text-align: center; inset: 0; margin: auto; width: 100%; height: 100%; } .p-world__imgBox__item.is_active { opacity: 1; } .p-world__worldList { display: -ms-grid; display: grid; -ms-grid-columns: (minmax(255px, 1fr))[4]; grid-template-columns: repeat(4, minmax(255px, 1fr)); gap: 15px 24px; margin-top: -10px; } .p-world__worldList__item { list-style: none; } .p-world__worldList__item a { border: 1px solid #333333; border-radius: 25px; color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Oriya MN", serif; font-size: 18px; height: 40px; position: relative; text-decoration: none; } .p-world__worldList__item a:visited { color: #333; text-decoration: none; } .p-world__worldList__item a span { position: absolute; top: 0; bottom: 0; right: 23px; margin: auto; width: 10px; height: 10px; border-top: 1px solid #1B1055; border-right: 1px solid #1B1055; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .p-world__worldList__item a:hover { background-color: #1B1055; color: #fff; } .p-world__worldList__item a:hover span { border-top-color: #fff; border-right-color: #fff; } @media (max-width: 767px) { .p-world__worldList { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; } .p-world__worldList__item a { font-size: 18px; height: 40px; } .p-world__worldList__item a span { right: 13px; width: 8px; height: 8px; } } .p-top_news__ttl { font-family: "Oriya MN", serif; font-size: 24px; font-weight: normal; line-height: normal; } .p-top_news__more_txt { font-family: "Oriya MN", serif; font-weight: normal; line-height: normal; } .p-top_news__more_icon { margin-right: 0; margin-left: 15px; } .p-tags__list { gap: 10px 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .p-tags__item { position: relative; } .p-tags__item::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #000; } .p-tags__item::after { content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background-color: #000; } @media (max-width: 767px) { .p-tags__item { padding: 0; } } .p-tags__btn { background-color: transparent; border: 0; border-radius: 0; color: #1B1055; font-family: "Oriya MN", serif; font-size: 16px; padding: 0 40px; text-decoration: none; } .p-tags__btn:hover { border: 0; } @media (max-width: 767px) { .p-tags__btn { padding: 0 20px; } } .p-card__body { background-color: #fff; margin-top: 0; padding: 15px; } .p-card__txt { font-size: 16px; font-weight: 500; line-height: 1.5; } .p-card__figure { position: relative; } .p-card__figure__tag { background-color: #1B1055; color: #fff; font-size: 10px; font-weight: normal; line-height: normal; padding: 2px 12px; position: absolute; top: 0; left: 0; } .p-card__time { color: #999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; font-size: 10px; font-weight: normal; line-height: normal; margin-top: 10px; } .p-card__readmore { background: url(); border-top: 1px solid #CACACA; color: #1B1055; font-size: 12px; font-weight: 500; line-height: normal; margin-top: 10px; padding-top: 10px; text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 14px; } .p-topics__more { margin-top: 50px !important; padding-bottom: 30px; text-align: right; width: 100%; } .p-topics__more a { color: #1B1055; font-family: "Oriya MN", serif; font-size: 20px; font-weight: 400; line-height: normal; text-decoration: none; padding-right: 72px; position: relative; } .p-topics__more a img { width: 15px; height: 15px; position: absolute; top: 3px; right: 21px; margin: auto; } .p-topics__more a::after { border: 1px solid #1B1055; border-radius: 50%; content: ""; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 58px; height: 58px; } .headerSec { border-bottom: solid 25px #78D1C6; } .headerSec.is_border_green { border-bottom: solid 25px #8FCF7F; } .headerSec.is_no_border { border-bottom: 0; } .headerSec__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 210px; } .headerSec__ttl { color: #05161A; font-family: Montserrat; font-size: 56px; font-style: normal; font-weight: 800; line-height: 100%; } @media (max-width: 767px) { .headerSec { border-bottom: solid 12px #78D1C6; } .headerSec__inner { height: 150px; } .headerSec__ttl { font-size: 36px; } } .p-lower__header { padding: 30px 0; } .p-lower__header__ttl { font-family: "Oriya MN", serif; font-size: 32px; font-weight: 400; } @media (max-width: 767px) { .p-lower__header { padding: 25px 0; } .p-lower__header__ttl { font-size: 24px; } } .p-whymv { display: -ms-grid; display: grid; -ms-grid-columns: 37.5% 62.5%; grid-template-columns: 37.5% 62.5%; } .p-whymv__txtBox { background-color: #1B1055; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 20px; } .p-whymv__txtBox__lead { background-color: #FF223A; display: inline-block; padding: 6px 18px; } .p-whymv__txtBox__ttl { font-size: 30px; font-weight: 500; margin-top: 20px; } .p-whymv__txtBox__btn { margin-top: 50px; } .p-whymv__txtBox__btn a { background-color: #fff; border-radius: 30px; color: #1B1055; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 490px; text-decoration: none; width: 100%; height: 60px; font-family: "Oriya MN", serif; font-size: 18px; font-weight: 400; line-height: 100%; } .p-whymv__imgBox img { width: 100%; } @media screen and (max-width: 767px) { .p-whymv { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .p-whymv__txtBox { padding: 25px 20px; } .p-whymv__txtBox__ttl { font-size: 24px; } .p-whymv__txtBox__btn { margin-top: 50px; } .p-whymv__txtBox__btn a { height: 50px; } } .youtubeBox { display: block; position: relative; } .youtubeBox::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 87px; height: 87px; background: url("https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/why/ico_play01.svg") no-repeat center center; } .youtubeBox img { width: 100% !important; height: 100% !important; -o-object-fit: cover; object-fit: cover; } .p-productList { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 34px 0; } .p-productList__item:nth-child(1), .p-productList__item:nth-child(2), .p-productList__item:nth-child(3) { width: calc(33.33% - 14px); } .p-productList__item:nth-child(n+4) { width: calc(50% - 20px); } .p-delivery__bnrList { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; } .p-delivery__imgBox { margin: 50px auto 0; max-width: 1000px; width: 100%; } .p-delivery__btmBox { background-color: #1B1055; padding: 60px 0 80px; margin-top: 68px; } .p-delivery__ttl { color: #FFF; font-family: "Oriya MN"; font-size: 40px; font-weight: 400; letter-spacing: 0.04em; text-align: center; } .p-delivery__list { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 35px; list-style: none; margin: auto; max-width: 890px; padding: 0 20px; width: 100%; } .p-delivery__list__item { color: #fff; text-align: center; } .p-delivery__list__ttl { background-color: #fff; border-radius: 10px; color: #2E3191; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; font-size: 18px; padding: 5px 8px; } .p-delivery__list__num { font-family: "Noto Serif JP", sans-serif; font-size: 100px; font-weight: 700; margin: 20px auto; line-height: 100%; } .p-delivery__list__num span { font-size: 40px; line-height: 100%; } .p-delivery__list__subttl { font-size: 20px; margin: 0 auto; } .p-delivery__list__txt { font-size: 14px; margin: 6px auto 0; } @media (max-width: 767px) { .p-delivery__ttl { font-size: 24px; } .p-delivery__list { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 50px; } } .p-customer__list { list-style: none; margin: auto; max-width: 940px; width: 100%; } .p-customer__list__item { background-color: #fff; display: -ms-grid; display: grid; -ms-grid-columns: 120px auto; grid-template-columns: 120px auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 44px; padding: 30px 60px; } .p-customer__list__item + .p-customer__list__item { border-top: 1px solid #CACACA; } .p-customer__list__txt { line-height: 1.8; letter-spacing: 0.64px; } @media (max-width: 767px) { .p-customer__list__item { -ms-grid-columns: 60px auto; grid-template-columns: 60px auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 22px; padding: 20px; } .p-customer__list__txt { font-size: 14px; } } .p-lower-mv { background-position: center center; background-size: cover; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 160px; } .p-lower-mv__ttl { color: #FFF; text-align: center; font-family: "Oriya MN", serif; font-size: 36px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: 1.44px; } @media (max-width: 767px) { .p-lower-mv { height: 120px; } .p-lower-mv__ttl { font-size: 24px; } } .p-productSlide { display: -ms-grid; display: grid; gap: 30px; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } .p-productSlide__imgList__item.swiper-slide { height: 520px; } .p-productSlide__imgList__item.swiper-slide img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .p-productSlide__imgList__item.swiper-slide.is_small { height: 400px; } .p-productSlide__txtBox { font-family: "Noto serif JP", serif; } .p-productSlide__txtBox__ttl { font-size: 20px; } .p-productSlide__txtBox__txt { margin-top: 20px; line-height: 1.6; } .p-productSlide__txtBox__caution { font-size: 13px; margin-top: 30px; } .p-productSlide .swiper { width: 520px; height: 580px; } .p-productSlide .swiper.is_small { width: 600px; height: 440px; } .p-productSlide .swiper-horizontal > .swiper-pagination-bullets, .p-productSlide .swiper-pagination-bullets.swiper-pagination-horizontal, .p-productSlide .swiper-pagination-custom, .p-productSlide .swiper-pagination-fraction { bottom: 0; } .p-productSlide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .p-productSlide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 16px; } .p-productSlide .swiper-pagination-bullet { background-color: #BCBCBC; width: 18px; height: 18px; } @media (max-width: 767px) { .p-productSlide { gap: 20px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .p-productSlide__imgList__item.swiper-slide { height: 300px; } .p-productSlide__imgList__item.swiper-slide.is_small { height: 200px; } .p-productSlide__txtBox__ttl { font-size: 16px; } .p-productSlide__txtBox__txt { margin-top: 10px; } .p-productSlide__txtBox__caution { font-size: 12px; margin-top: 20px; } .p-productSlide .swiper { width: 100%; height: 340px; } .p-productSlide .swiper.is_small { width: 100%; height: 240px; } } .p-product__linkList { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 29px; list-style: none; margin-top: 80px; } .p-product__linkList__item a { border: solid 1px #1B1B1B; border-radius: 18px; color: #1B1B1B; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; padding: 7px 24px; text-decoration: none; } @media (max-width: 767px) { .p-product__linkList { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 40px; } .p-product__linkList__item a { font-size: 12px; padding: 5px 20px; } } .p-product__specList { list-style: none; margin-top: 50px; } .p-product__specList__item + .p-product__specList__item { margin-top: 50px; } .p-product__specList__ttl { background: -webkit-gradient(linear, left top, right top, from(#E3E7FB), to(#FFF)); background: linear-gradient(90deg, #E3E7FB 0%, #FFF 100%); padding: 10px 30px; color: #1B1055; font-family: "Noto serif JP", serif; font-size: 30px; font-weight: normal; letter-spacing: 1.2px; position: relative; } .p-product__specList__ttl::before { content: ""; position: absolute; inset: 0 auto 0 -19px; margin: auto; width: 38px; height: 1px; background-color: #000; } .p-product__specList__imgBox { margin: 30px 50px; } .p-product__specList__imgBox img { -webkit-box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); } .p-product__specList__slide { padding-bottom: 20px; } .p-product__specList__slideBox { margin: 30px 0; } .p-product__specList .swiper-horizontal > .swiper-pagination-bullets, .p-product__specList .swiper-pagination-bullets.swiper-pagination-horizontal, .p-product__specList .swiper-pagination-custom, .p-product__specList .swiper-pagination-fraction { bottom: 0; } .p-product__specList .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .p-product__specList .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 16px; } .p-product__specList .swiper-pagination-bullet { background-color: #BCBCBC; width: 18px; height: 18px; } @media (max-width: 767px) { .p-product__specList { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0; } .p-product__specList__item { padding: 0 10px; } .p-product__specList__ttl { font-size: 20px; padding: 5px 15px; } .p-product__specList__ttl::before { left: -10px; width: 20px; } } .p-product__tabBox { margin-top: 50px; } .p-product__tabBox__item { display: none; } .p-product__tabBox__item.is_show { display: block; } @media (max-width: 767px) { .p-product__tabBox { margin-top: 30px; } } .p-product__mailing { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 45px; max-width: 880px; margin: auto; width: 100%; } .p-product__mailing__left { max-width: 430px; width: 100%; } .p-product__mailing__ttl { font-family: "Noto Serif JP", serif; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 0.8px; } .p-product__mailing__txt { font-family: "Noto Serif JP", serif; margin-top: 12px; } .p-product__mailing__btn { background-color: #1B1055; border-radius: 30px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #FFF; font-family: "Oriya MN"; font-size: 22px; font-style: normal; font-weight: 400; gap: 23px; line-height: normal; letter-spacing: 0.88px; width: 340px; height: 60px; text-decoration: none; } .p-product__mailing__btn:visited { text-decoration: none; } .p-product__mailing__btn span { background-image: url("https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/products/ico_arrow_right03.svg"); background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 16px; height: 16px; } @media (max-width: 767px) { .p-product__mailing { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .p-product__mailing__left { max-width: 100%; } } .p-table__th.is_small { width: 100px; } .p-table__th.is_small p { font-size: 18px; font-weight: 700; } @media (max-width: 767px) { .p-table__th.is_small { width: 100%; } .p-table__th.is_small p { font-size: 14px; } } .c-richtext a.is_no_underline { text-decoration: none; color: #000; } /* Fields */ .hs-form-field { margin-bottom: 1.4rem; } /* Labels */ form label { display: block; font-size: var(--richtext_h6_font_size_pc); margin-bottom: 0.35rem; } form label span { font-weight: bold; } form .input label span { font-size: var(--richtext_p_font_size_pc); font-weight: normal; } /* Help text */ form legend { font-size: 0.875rem; } /* Inputs */ form input[type=text], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea { border: solid 1px #CACACA; display: inline-block; font-size: var(--richtext_p_font_size_pc); padding: 0.7rem; width: 100%; } form textarea { resize: vertical; } form fieldset { max-width: 100% !important; } /* Inputs - checkbox/radio */ form .inputs-list { margin: 0; padding: 0; list-style: none; } form .inputs-list > li { display: block; margin: 0.7rem 0; } form .inputs-list input, form .inputs-list span { vertical-align: middle; } form input[type=checkbox], form input[type=radio] { cursor: pointer; margin-right: 0.35rem; } /* Inputs - date picker */ .hs-dateinput { position: relative; } .hs-dateinput:before { content: "📅"; position: absolute; right: 10%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .fn-date-picker .pika-table thead th { color: #FFF; } .fn-date-picker td.is-selected .pika-button { border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus { border-radius: 0 !important; color: #FFF; } /* Inputs - file picker */ form input[type=file] { background-color: transparent; border: initial; padding: initial; } /* Headings and text */ form .hs-richtext, form .hs-richtext p { font-size: var(--richtext_p_font_size_pc); margin: 0 0 1.4rem; } form .hs-richtext img { max-width: 100% !important; } /* GDPR */ .legal-consent-container { margin: auto; max-width: 880px; width: 100%; } .legal-consent-container .hs-richtext { border: solid 1px #CACACA; color: #808080; padding: 32px 32px 10px; } .legal-consent-container .hs-form-booleancheckbox-display { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* Validation */ .hs-form-required { color: #EF6B51; } .contactForm form fieldset.form-columns-1 .hs-input, .contactForm form fieldset.form-columns-2 { width: 100%; } .hs-input.invalid.error { border-color: #EF6B51; } .hs-error-msg { color: #EF6B51; margin-top: 0.35rem; } /* Submit button */ form input[type=submit], form .hs-button { cursor: pointer; display: inline-block; text-align: center; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; white-space: normal; border-radius: 50px !important; } /* Captcha */ #wrap .hs_recaptcha { margin: 40px auto 0; max-width: 880px; } /* 追記 */ .hs-form-fa6ed610-1e30-4372-81e4-cac10fab41d4_3bbf8b9f-247e-45bc-82df-1b5765ce3784 fieldset { margin: 10px 0; } .hs-form-c4ca0f79-cd92-439b-9365-3fb6fda1eb23_5176fc76-ce02-4d51-9989-b7b7e2e7906e.hs-form { background: #EFEFEF; } form input[type=submit] { background-color: #fff !important; border: 2px solid #000 !important; border-radius: 6px; color: #000 !important; display: block; font-family: "Noto Serif JP", sans-serif; font-size: 18px !important; font-style: normal; font-weight: bold !important; padding: 15px 30px !important; text-decoration: none; text-transform: none; margin: 40px auto 0; max-width: 320px; width: 100%; } .hs-fieldtype-textarea.hs-input, form .hs-form-field select.hs-input, form input[type=text] { font-family: "Arial", sans-serif; } .Clearfix, .Wrap, .Wrap--narrow, .Wrap--noPadding, .Wrap--noPaddingAll, .Wrap--wide, .has-cutout-hero .Body-sections > .Section:first-child, .has-cutout-hero .Body-sections > :first-child > .Section, .view-blog, .view-news, .view-partners, .view-resources { zoom: 1; } .Clearfix:after, .Wrap--narrow:after, .Wrap--noPadding:after, .Wrap--noPaddingAll:after, .Wrap--wide:after, .Wrap:after, .has-cutout-hero .Body-sections > .Section:first-child:after, .has-cutout-hero .Body-sections > :first-child > .Section:after, .view-blog:after, .view-news:after, .view-partners:after, .view-resources:after { clear: both; content: ""; display: table; } .Wrap, .Wrap--narrow, .Wrap--noPadding, .Wrap--noPaddingAll, .Wrap--wide, .has-cutout-hero .Body-sections > .Section:first-child, .has-cutout-hero .Body-sections > :first-child > .Section, .view-blog, .view-news, .view-partners, .view-resources { -webkit-box-sizing: content-box; box-sizing: content-box; margin-left: auto; margin-right: auto; max-width: 1240px; padding-left: 30px; padding-right: 30px; position: relative; width: calc(100% - 60px); } .Wrap--noPadding { max-width: 1300px; padding-left: 0; padding-right: 0; width: 100%; } .Wrap--noPaddingAll { max-width: 1300px; padding: 0 !important; width: 100%; } .preload * { -webkit-transition: none !important; transition: none !important; } .Footer-nav, .Row, .view-blog .view-content, .view-partners .view-content, .view-resources .view-content, [class*=" Row--"], [class^=Row--] { -ms-flex-line-pack: start; -ms-flex-align: start; align-content: flex-start; -webkit-box-align: start; align-items: flex-start; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 60px -15px 30px; margin-top: -30px; width: calc(100% + 30px); } .Footer-nav:first-child, .Row:first-child, .view-blog .view-content:first-child, .view-partners .view-content:first-child, .view-resources .view-content:first-child, :first-child[class*=" Row--"], :first-child[class^=Row--] { margin-top: 0; } .Footer-nav:last-child, .Row:last-child, .view-blog .view-content:last-child, .view-partners .view-content:last-child, .view-resources .view-content:last-child, :last-child[class*=" Row--"], :last-child[class^=Row--] { margin-bottom: -30px; } .Column, .Footer-nav > ul.menu, .view-blog .views-row, .view-partners .views-row, .view-resources .views-row, [class*=" Column-"], [class^=Column-] { padding: 0 15px 30px; position: relative; } @media (min-width: 960px) { .Row--wideGutters, .view-blog .view-content, .view-partners .view-content, .view-resources .view-content { margin-bottom: 0; margin-left: -30px; margin-right: -30px; width: calc(100% + 60px); } .Row--wideGutters + .Row, .Row--wideGutters + .Row--wideGutters, .view-blog .Row--wideGutters + .view-content, .view-blog .view-content + .Row, .view-blog .view-content + .Row--wideGutters, .view-blog .view-content + .view-content, .view-partners .Row--wideGutters + .view-content, .view-partners .view-content + .Row, .view-partners .view-content + .Row--wideGutters, .view-partners .view-content + .view-content, .view-resources .Row--wideGutters + .view-content, .view-resources .view-content + .Row, .view-resources .view-content + .Row--wideGutters, .view-resources .view-content + .view-content { margin-top: 0; } .Row--wideGutters:last-child, .view-blog .view-content:last-child, .view-partners .view-content:last-child, .view-resources .view-content:last-child { margin-bottom: -60px; } .Row--wideGutters > .Column, .Row--wideGutters > [class*=" Column-"], .Row--wideGutters > [class^=Column-], .view-blog .view-content > .Column, .view-blog .view-content > [class*=" Column-"], .view-blog .view-content > [class^=Column-], .view-partners .view-content > .Column, .view-partners .view-content > [class*=" Column-"], .view-partners .view-content > [class^=Column-], .view-resources .view-content > .Column, .view-resources .view-content > [class*=" Column-"], .view-resources .view-content > [class^=Column-] { padding: 0 30px 60px; } } .Column--2_5 { width: 20%; } .ColumnOffset--2_5 { margin-left: 20%; } .Column--1 { width: 8.33333%; } .ColumnOffset--0 { margin-left: 0; } .Column--2 { width: 16.66667%; } .ColumnOffset--1 { margin-left: 8.33333%; } .Column--3 { width: 25%; } .ColumnOffset--2 { margin-left: 16.66667%; } .Column--4 { width: 33.33333%; } .ColumnOffset--3 { margin-left: 25%; } .Column--5 { width: 41.66667%; } .ColumnOffset--4 { margin-left: 33.33333%; } .Column--6 { width: 50%; } .ColumnOffset--5 { margin-left: 41.66667%; } .Column--7 { width: 58.33333%; } .ColumnOffset--6 { margin-left: 50%; } .Column--8 { width: 66.66667%; } .ColumnOffset--7 { margin-left: 58.33333%; } .Column--9 { width: 75%; } .ColumnOffset--8 { margin-left: 66.66667%; } .Column--10 { width: 83.33333%; } .ColumnOffset--9 { margin-left: 75%; } .Column--11 { width: 91.66667%; } .ColumnOffset--10 { margin-left: 83.33333%; } .Column--12 { width: 100%; } .ColumnOffset--11 { margin-left: 91.66667%; } @media (max-width: 1599px) { .Column--xxLarge-1 { width: 8.33333%; } .ColumnOffset--xxLarge-0 { margin-left: 0; } .Column--xxLarge-2 { width: 16.66667%; } .ColumnOffset--xxLarge-1 { margin-left: 8.33333%; } .Column--xxLarge-3 { width: 25%; } .ColumnOffset--xxLarge-2 { margin-left: 16.66667%; } .Column--xxLarge-4 { width: 33.33333%; } .ColumnOffset--xxLarge-3 { margin-left: 25%; } .Column--xxLarge-5 { width: 41.66667%; } .ColumnOffset--xxLarge-4 { margin-left: 33.33333%; } .Column--xxLarge-6 { width: 50%; } .ColumnOffset--xxLarge-5 { margin-left: 41.66667%; } .Column--xxLarge-7 { width: 58.33333%; } .ColumnOffset--xxLarge-6 { margin-left: 50%; } .Column--xxLarge-8 { width: 66.66667%; } .ColumnOffset--xxLarge-7 { margin-left: 58.33333%; } .Column--xxLarge-9 { width: 75%; } .ColumnOffset--xxLarge-8 { margin-left: 66.66667%; } .Column--xxLarge-10 { width: 83.33333%; } .ColumnOffset--xxLarge-9 { margin-left: 75%; } .Column--xxLarge-11 { width: 91.66667%; } .ColumnOffset--xxLarge-10 { margin-left: 83.33333%; } .Column--xxLarge-12 { width: 100%; } .ColumnOffset--xxLarge-11 { margin-left: 91.66667%; } } @media (max-width: 1399px) { .Column--xLarge-1 { width: 8.33333%; } .ColumnOffset--xLarge-0 { margin-left: 0; } .Column--xLarge-2 { width: 16.66667%; } .ColumnOffset--xLarge-1 { margin-left: 8.33333%; } .Column--xLarge-3 { width: 25%; } .ColumnOffset--xLarge-2 { margin-left: 16.66667%; } .Column--xLarge-4 { width: 33.33333%; } .ColumnOffset--xLarge-3 { margin-left: 25%; } .Column--xLarge-5 { width: 41.66667%; } .ColumnOffset--xLarge-4 { margin-left: 33.33333%; } .Column--xLarge-6 { width: 50%; } .ColumnOffset--xLarge-5 { margin-left: 41.66667%; } .Column--xLarge-7 { width: 58.33333%; } .ColumnOffset--xLarge-6 { margin-left: 50%; } .Column--xLarge-8 { width: 66.66667%; } .ColumnOffset--xLarge-7 { margin-left: 58.33333%; } .Column--xLarge-9 { width: 75%; } .ColumnOffset--xLarge-8 { margin-left: 66.66667%; } .Column--xLarge-10 { width: 83.33333%; } .ColumnOffset--xLarge-9 { margin-left: 75%; } .Column--xLarge-11 { width: 91.66667%; } .ColumnOffset--xLarge-10 { margin-left: 83.33333%; } .Column--xLarge-12 { width: 100%; } .ColumnOffset--xLarge-11 { margin-left: 91.66667%; } } @media (max-width: 1199px) { .Column--large-1 { width: 8.33333%; } .ColumnOffset--large-0 { margin-left: 0; } .Column--large-2 { width: 16.66667%; } .ColumnOffset--large-1 { margin-left: 8.33333%; } .Column--large-3 { width: 25%; } .ColumnOffset--large-2 { margin-left: 16.66667%; } .Column--large-4 { width: 33.33333%; } .ColumnOffset--large-3 { margin-left: 25%; } .Column--large-5 { width: 41.66667%; } .ColumnOffset--large-4 { margin-left: 33.33333%; } .Column--large-6 { width: 50%; } .ColumnOffset--large-5 { margin-left: 41.66667%; } .Column--large-7 { width: 58.33333%; } .ColumnOffset--large-6 { margin-left: 50%; } .Column--large-8 { width: 66.66667%; } .ColumnOffset--large-7 { margin-left: 58.33333%; } .Column--large-9 { width: 75%; } .ColumnOffset--large-8 { margin-left: 66.66667%; } .Column--large-10 { width: 83.33333%; } .ColumnOffset--large-9 { margin-left: 75%; } .Column--large-11 { width: 91.66667%; } .ColumnOffset--large-10 { margin-left: 83.33333%; } .Column--large-12 { width: 100%; } .ColumnOffset--large-11 { margin-left: 91.66667%; } } @media (max-width: 1039px) { .Column--mediumLarge-1 { width: 8.33333%; } .ColumnOffset--mediumLarge-0 { margin-left: 0; } .Column--mediumLarge-2 { width: 16.66667%; } .ColumnOffset--mediumLarge-1 { margin-left: 8.33333%; } .Column--mediumLarge-3 { width: 25%; } .ColumnOffset--mediumLarge-2 { margin-left: 16.66667%; } .Column--mediumLarge-4 { width: 33.33333%; } .ColumnOffset--mediumLarge-3 { margin-left: 25%; } .Column--mediumLarge-5 { width: 41.66667%; } .ColumnOffset--mediumLarge-4 { margin-left: 33.33333%; } .Column--mediumLarge-6 { width: 50%; } .ColumnOffset--mediumLarge-5 { margin-left: 41.66667%; } .Column--mediumLarge-7 { width: 58.33333%; } .ColumnOffset--mediumLarge-6 { margin-left: 50%; } .Column--mediumLarge-8 { width: 66.66667%; } .ColumnOffset--mediumLarge-7 { margin-left: 58.33333%; } .Column--mediumLarge-9 { width: 75%; } .ColumnOffset--mediumLarge-8 { margin-left: 66.66667%; } .Column--mediumLarge-10 { width: 83.33333%; } .ColumnOffset--mediumLarge-9 { margin-left: 75%; } .Column--mediumLarge-11 { width: 91.66667%; } .ColumnOffset--mediumLarge-10 { margin-left: 83.33333%; } .Column--mediumLarge-12 { width: 100%; } .ColumnOffset--mediumLarge-11 { margin-left: 91.66667%; } } @media (max-width: 959px) { .Column--medium-1 { width: 8.33333%; } .ColumnOffset--medium-0 { margin-left: 0; } .Column--medium-2 { width: 16.66667%; } .ColumnOffset--medium-1 { margin-left: 8.33333%; } .Column--medium-3 { width: 25%; } .ColumnOffset--medium-2 { margin-left: 16.66667%; } .Column--medium-4 { width: 33.33333%; } .ColumnOffset--medium-3 { margin-left: 25%; } .Column--medium-5 { width: 41.66667%; } .ColumnOffset--medium-4 { margin-left: 33.33333%; } .Column--medium-6 { width: 50%; } .ColumnOffset--medium-5 { margin-left: 41.66667%; } .Column--medium-7 { width: 58.33333%; } .ColumnOffset--medium-6 { margin-left: 50%; } .Column--medium-8 { width: 66.66667%; } .ColumnOffset--medium-7 { margin-left: 58.33333%; } .Column--medium-9 { width: 75%; } .ColumnOffset--medium-8 { margin-left: 66.66667%; } .Column--medium-10 { width: 83.33333%; } .ColumnOffset--medium-9 { margin-left: 75%; } .Column--medium-11 { width: 91.66667%; } .ColumnOffset--medium-10 { margin-left: 83.33333%; } .Column--medium-12 { width: 100%; } .ColumnOffset--medium-11 { margin-left: 91.66667%; } } @media (max-width: 819px) { .Column--mediumSmall-1 { width: 8.33333%; } .ColumnOffset--mediumSmall-0 { margin-left: 0; } .Column--mediumSmall-2 { width: 16.66667%; } .ColumnOffset--mediumSmall-1 { margin-left: 8.33333%; } .Column--mediumSmall-3 { width: 25%; } .ColumnOffset--mediumSmall-2 { margin-left: 16.66667%; } .Column--mediumSmall-4 { width: 33.33333%; } .ColumnOffset--mediumSmall-3 { margin-left: 25%; } .Column--mediumSmall-5 { width: 41.66667%; } .ColumnOffset--mediumSmall-4 { margin-left: 33.33333%; } .Column--mediumSmall-6 { width: 50%; } .ColumnOffset--mediumSmall-5 { margin-left: 41.66667%; } .Column--mediumSmall-7 { width: 58.33333%; } .ColumnOffset--mediumSmall-6 { margin-left: 50%; } .Column--mediumSmall-8 { width: 66.66667%; } .ColumnOffset--mediumSmall-7 { margin-left: 58.33333%; } .Column--mediumSmall-9 { width: 75%; } .ColumnOffset--mediumSmall-8 { margin-left: 66.66667%; } .Column--mediumSmall-10 { width: 83.33333%; } .ColumnOffset--mediumSmall-9 { margin-left: 75%; } .Column--mediumSmall-11 { width: 91.66667%; } .ColumnOffset--mediumSmall-10 { margin-left: 83.33333%; } .Column--mediumSmall-12 { width: 100%; } .ColumnOffset--mediumSmall-11 { margin-left: 91.66667%; } } @media (max-width: 767px) { .Column--ipad-1 { width: 8.33333%; } .ColumnOffset--ipad-0 { margin-left: 0; } .Column--ipad-2 { width: 16.66667%; } .ColumnOffset--ipad-1 { margin-left: 8.33333%; } .Column--ipad-3 { width: 25%; } .ColumnOffset--ipad-2 { margin-left: 16.66667%; } .Column--ipad-4 { width: 33.33333%; } .ColumnOffset--ipad-3 { margin-left: 25%; } .Column--ipad-5 { width: 41.66667%; } .ColumnOffset--ipad-4 { margin-left: 33.33333%; } .Column--ipad-6 { width: 50%; } .ColumnOffset--ipad-5 { margin-left: 41.66667%; } .Column--ipad-7 { width: 58.33333%; } .ColumnOffset--ipad-6 { margin-left: 50%; } .Column--ipad-8 { width: 66.66667%; } .ColumnOffset--ipad-7 { margin-left: 58.33333%; } .Column--ipad-9 { width: 75%; } .ColumnOffset--ipad-8 { margin-left: 66.66667%; } .Column--ipad-10 { width: 83.33333%; } .ColumnOffset--ipad-9 { margin-left: 75%; } .Column--ipad-11 { width: 91.66667%; } .ColumnOffset--ipad-10 { margin-left: 83.33333%; } .Column--ipad-12 { width: 100%; } .ColumnOffset--ipad-11 { margin-left: 91.66667%; } } @media (max-width: 639px) { .Column--small-1 { width: 8.33333%; } .ColumnOffset--small-0 { margin-left: 0; } .Column--small-2 { width: 16.66667%; } .ColumnOffset--small-1 { margin-left: 8.33333%; } .Column--small-3 { width: 25%; } .ColumnOffset--small-2 { margin-left: 16.66667%; } .Column--small-4 { width: 33.33333%; } .ColumnOffset--small-3 { margin-left: 25%; } .Column--small-5 { width: 41.66667%; } .ColumnOffset--small-4 { margin-left: 33.33333%; } .Column--small-6 { width: 50%; } .ColumnOffset--small-5 { margin-left: 41.66667%; } .Column--small-7 { width: 58.33333%; } .ColumnOffset--small-6 { margin-left: 50%; } .Column--small-8 { width: 66.66667%; } .ColumnOffset--small-7 { margin-left: 58.33333%; } .Column--small-9 { width: 75%; } .ColumnOffset--small-8 { margin-left: 66.66667%; } .Column--small-10 { width: 83.33333%; } .ColumnOffset--small-9 { margin-left: 75%; } .Column--small-11 { width: 91.66667%; } .ColumnOffset--small-10 { margin-left: 83.33333%; } .Column--small-12 { width: 100%; } .ColumnOffset--small-11 { margin-left: 91.66667%; } } @media (max-width: 413px) { .Column--mobileLarge-1 { width: 8.33333%; } .ColumnOffset--mobileLarge-0 { margin-left: 0; } .Column--mobileLarge-2 { width: 16.66667%; } .ColumnOffset--mobileLarge-1 { margin-left: 8.33333%; } .Column--mobileLarge-3 { width: 25%; } .ColumnOffset--mobileLarge-2 { margin-left: 16.66667%; } .Column--mobileLarge-4 { width: 33.33333%; } .ColumnOffset--mobileLarge-3 { margin-left: 25%; } .Column--mobileLarge-5 { width: 41.66667%; } .ColumnOffset--mobileLarge-4 { margin-left: 33.33333%; } .Column--mobileLarge-6 { width: 50%; } .ColumnOffset--mobileLarge-5 { margin-left: 41.66667%; } .Column--mobileLarge-7 { width: 58.33333%; } .ColumnOffset--mobileLarge-6 { margin-left: 50%; } .Column--mobileLarge-8 { width: 66.66667%; } .ColumnOffset--mobileLarge-7 { margin-left: 58.33333%; } .Column--mobileLarge-9 { width: 75%; } .ColumnOffset--mobileLarge-8 { margin-left: 66.66667%; } .Column--mobileLarge-10 { width: 83.33333%; } .ColumnOffset--mobileLarge-9 { margin-left: 75%; } .Column--mobileLarge-11 { width: 91.66667%; } .ColumnOffset--mobileLarge-10 { margin-left: 83.33333%; } .Column--mobileLarge-12 { width: 100%; } .ColumnOffset--mobileLarge-11 { margin-left: 91.66667%; } } @media (max-width: 479px) { .Column--xSmall-1 { width: 8.33333%; } .ColumnOffset--xSmall-0 { margin-left: 0; } .Column--xSmall-2 { width: 16.66667%; } .ColumnOffset--xSmall-1 { margin-left: 8.33333%; } .Column--xSmall-3 { width: 25%; } .ColumnOffset--xSmall-2 { margin-left: 16.66667%; } .Column--xSmall-4 { width: 33.33333%; } .ColumnOffset--xSmall-3 { margin-left: 25%; } .Column--xSmall-5 { width: 41.66667%; } .ColumnOffset--xSmall-4 { margin-left: 33.33333%; } .Column--xSmall-6 { width: 50%; } .ColumnOffset--xSmall-5 { margin-left: 41.66667%; } .Column--xSmall-7 { width: 58.33333%; } .ColumnOffset--xSmall-6 { margin-left: 50%; } .Column--xSmall-8 { width: 66.66667%; } .ColumnOffset--xSmall-7 { margin-left: 58.33333%; } .Column--xSmall-9 { width: 75%; } .ColumnOffset--xSmall-8 { margin-left: 66.66667%; } .Column--xSmall-10 { width: 83.33333%; } .ColumnOffset--xSmall-9 { margin-left: 75%; } .Column--xSmall-11 { width: 91.66667%; } .ColumnOffset--xSmall-10 { margin-left: 83.33333%; } .Column--xSmall-12 { width: 100%; } .ColumnOffset--xSmall-11 { margin-left: 91.66667%; } } @media (max-width: 374px) { .Column--mobileMedium-1 { width: 8.33333%; } .ColumnOffset--mobileMedium-0 { margin-left: 0; } .Column--mobileMedium-2 { width: 16.66667%; } .ColumnOffset--mobileMedium-1 { margin-left: 8.33333%; } .Column--mobileMedium-3 { width: 25%; } .ColumnOffset--mobileMedium-2 { margin-left: 16.66667%; } .Column--mobileMedium-4 { width: 33.33333%; } .ColumnOffset--mobileMedium-3 { margin-left: 25%; } .Column--mobileMedium-5 { width: 41.66667%; } .ColumnOffset--mobileMedium-4 { margin-left: 33.33333%; } .Column--mobileMedium-6 { width: 50%; } .ColumnOffset--mobileMedium-5 { margin-left: 41.66667%; } .Column--mobileMedium-7 { width: 58.33333%; } .ColumnOffset--mobileMedium-6 { margin-left: 50%; } .Column--mobileMedium-8 { width: 66.66667%; } .ColumnOffset--mobileMedium-7 { margin-left: 58.33333%; } .Column--mobileMedium-9 { width: 75%; } .ColumnOffset--mobileMedium-8 { margin-left: 66.66667%; } .Column--mobileMedium-10 { width: 83.33333%; } .ColumnOffset--mobileMedium-9 { margin-left: 75%; } .Column--mobileMedium-11 { width: 91.66667%; } .ColumnOffset--mobileMedium-10 { margin-left: 83.33333%; } .Column--mobileMedium-12 { width: 100%; } .ColumnOffset--mobileMedium-11 { margin-left: 91.66667%; } } @media (max-width: 319px) { .Column--xxSmall-1 { width: 8.33333%; } .ColumnOffset--xxSmall-0 { margin-left: 0; } .Column--xxSmall-2 { width: 16.66667%; } .ColumnOffset--xxSmall-1 { margin-left: 8.33333%; } .Column--xxSmall-3 { width: 25%; } .ColumnOffset--xxSmall-2 { margin-left: 16.66667%; } .Column--xxSmall-4 { width: 33.33333%; } .ColumnOffset--xxSmall-3 { margin-left: 25%; } .Column--xxSmall-5 { width: 41.66667%; } .ColumnOffset--xxSmall-4 { margin-left: 33.33333%; } .Column--xxSmall-6 { width: 50%; } .ColumnOffset--xxSmall-5 { margin-left: 41.66667%; } .Column--xxSmall-7 { width: 58.33333%; } .ColumnOffset--xxSmall-6 { margin-left: 50%; } .Column--xxSmall-8 { width: 66.66667%; } .ColumnOffset--xxSmall-7 { margin-left: 58.33333%; } .Column--xxSmall-9 { width: 75%; } .ColumnOffset--xxSmall-8 { margin-left: 66.66667%; } .Column--xxSmall-10 { width: 83.33333%; } .ColumnOffset--xxSmall-9 { margin-left: 75%; } .Column--xxSmall-11 { width: 91.66667%; } .ColumnOffset--xxSmall-10 { margin-left: 83.33333%; } .Column--xxSmall-12 { width: 100%; } .ColumnOffset--xxSmall-11 { margin-left: 91.66667%; } .Column--mobileSmall-1 { width: 8.33333%; } .ColumnOffset--mobileSmall-0 { margin-left: 0; } .Column--mobileSmall-2 { width: 16.66667%; } .ColumnOffset--mobileSmall-1 { margin-left: 8.33333%; } .Column--mobileSmall-3 { width: 25%; } .ColumnOffset--mobileSmall-2 { margin-left: 16.66667%; } .Column--mobileSmall-4 { width: 33.33333%; } .ColumnOffset--mobileSmall-3 { margin-left: 25%; } .Column--mobileSmall-5 { width: 41.66667%; } .ColumnOffset--mobileSmall-4 { margin-left: 33.33333%; } .Column--mobileSmall-6 { width: 50%; } .ColumnOffset--mobileSmall-5 { margin-left: 41.66667%; } .Column--mobileSmall-7 { width: 58.33333%; } .ColumnOffset--mobileSmall-6 { margin-left: 50%; } .Column--mobileSmall-8 { width: 66.66667%; } .ColumnOffset--mobileSmall-7 { margin-left: 58.33333%; } .Column--mobileSmall-9 { width: 75%; } .ColumnOffset--mobileSmall-8 { margin-left: 66.66667%; } .Column--mobileSmall-10 { width: 83.33333%; } .ColumnOffset--mobileSmall-9 { margin-left: 75%; } .Column--mobileSmall-11 { width: 91.66667%; } .ColumnOffset--mobileSmall-10 { margin-left: 83.33333%; } .Column--mobileSmall-12 { width: 100%; } .ColumnOffset--mobileSmall-11 { margin-left: 91.66667%; } } .Glossary .body-container-wrapper { padding-top: 65px !important; } #Glossary-Page { padding-bottom: 45px; padding-top: 80px !important; } @media (max-width: 959px) { #Glossary-Page { padding-top: 40px !important; } } #Glossary-Page #Main_Content .blog-post-wrapper { padding: 0; } #Glossary-Page #Main_Content .blog-post-wrapper .blog-section { padding-top: 32px; } #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body div, #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body ol li, #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body ol li span, #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body p, #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body p span, #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body ul li, #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body ul li span { font-size: 18px !important; font-weight: 500; line-height: 26px; } #Glossary-Page .Blog-List .Category .Category-title { color: #0d2580; } .Blog-List .Category p { color: #1a1311; font-size: 16px; font-weight: 600; } .Page .LP-Hero .Wrap--narrow { max-width: 1020px; } @media (max-width: 639px) { #Glossary-Page .Row { -ms-flex-direction: column-reverse; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } } .Blog-List { margin-top: 0; } @media (max-width: 959px) { .Blog-List { margin-top: 0; } } .Blog-List.post-top .Category-content li { width: calc(33.33333% - 10px); } .Blog-List.post-top .Category-content li:nth-child(3n+2) { margin-left: 0; } .Category-title { border-left: none; font-size: 19px; margin: 30px 0 12px; } .Category-title span { background: #fff; border-bottom: 2px solid #333; font-size: 24px; font-family: "Oriya MN", serif; display: block; font-weight: normal; line-height: 28px; padding: 5px 13px 6px 0; } .Category-content { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; margin-top: 50px; padding-left: 0; } .Category-content li { font-size: 1.2rem; line-height: normal; list-style: none; margin-bottom: 0.7rem; margin-left: 15px; position: relative; width: calc(33.33333% - 15px); } .Category-content li a { color: #000; font-size: 16px; padding-left: 15px; } .Category-content li:before { color: #4e5168; content: "\f0da"; display: block; font-family: FontAwesome; left: 0; position: absolute; top: 5px; } @media (max-width: 959px) { .Category-content li { width: calc(50% - 15px); } } .Category-content.list { padding-left: 0; } .Category-content.list li { margin-bottom: 20px; } .Category-content.list li:before, .Category-content.list li:first-child { display: none; } .Category-content.list li a { -ms-flex-pack: justify; background-color: #fff; border: solid 1px #1B1B1B; border-radius: 50px; color: #1a1311; display: -ms-flexbox; display: -webkit-box; display: flex; font-size: 16px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 15px; position: relative; text-decoration: none; } .Category-content.list li a:hover { opacity: 0.7; text-decoration: none; } .Category-content.list li a:after { content: none; } #Blog-Sidebar { margin-bottom: 30px; margin-top: 0; } #Blog-Sidebar .Blog-Sidebar #button { display: none; } #Blog-Sidebar .Blog-Sidebar.status { height: calc(100% - 80px); overflow-y: scroll; } #Blog-Sidebar .Blog-Sidebar.status .show { display: none; } #Blog-Sidebar .Blog-Sidebar.status .hide { display: block !important; } #Blog-Sidebar .Blog-Sidebar.is-fixed { background: #fff; left: 0; position: fixed; right: 0; z-index: 99; } #Blog-Sidebar .Blog-Sidebar.is-fixed h3 { display: none; } #Blog-Sidebar .Blog-Sidebar.is-fixed #button { background: #dcdcdc; color: #1977b5; display: block; font-size: 16px; font-weight: 700; margin: 0; padding: 12px 15px; position: relative; width: 100%; z-index: 9; } #Blog-Sidebar .Blog-Sidebar.is-fixed #button .fa-file-text-o { margin-right: 3px; } #Blog-Sidebar .Blog-Sidebar.is-fixed #button .btn-toggle { float: right; margin-right: 5px; margin-top: 5px; } #Blog-Sidebar .Blog-Sidebar.is-fixed ul { display: none; margin-top: 0 !important; padding-top: 0 !important; } #Blog-Sidebar .topic-list.box:first-child { margin-top: 0; } #Blog-Sidebar .topic-list.box ul li:nth-child(2) { border-top: 1px solid #ccc; } #Blog-Sidebar .topic-list.box ul li:first-child a { color: #1a1311; font-weight: 400; } #Blog-Sidebar .topic-list.box ul li:first-child a:before { display: none; } #Blog-Sidebar .topic-list.box ul li a { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; font-size: 15px; font-weight: normal; text-decoration: none; color: #000; display: -ms-inline-flexbox; display: -webkit-inline-box; display: inline-flex; padding: 20px; width: calc(100% - 30px); position: relative; } #Blog-Sidebar .topic-list.box ul li a .filter-link-count { display: none; } #Blog-Sidebar .topic-list.box ul li a:before { content: "・"; margin-right: 0; } #Blog-Sidebar .topic-list.box ul li a.active { background: #0d2580; color: #fff; } #Blog-Sidebar .topic-list.box ul li a.active:before { color: #fff; } @media (max-width: 819px) and (min-width: 640px) { .Blog-Detail #Blog-Page .recent-posts a { width: 31%; } } @media only screen and (max-width: 539px) { .saas-hero-2.banner .banner-content p { font-size: 40px !important; } } @media only screen and (max-width: 320px) { .saas-hero-2.banner .banner-content p { font-size: 30px !important; } .Category-content.list li a { font-size: 15px; } } .recent-posts a { margin-bottom: 20px; } #pagetop.status { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .Blog-Basic.Page .Wrap--narrow { max-width: 1000px; } .Blog-Basic.Page .Hero--small.smallest .Hero-subtitle, .Blog-Basic.Page .Hero--small.smallest .LP-Detail-Case .guest, .Blog-Basic.Page .Hero--small.smallest .LP-Detail-Case .interview, .Blog-Basic.Page .Hero--small.smallest .mgtop-30, .LP-Detail-Case .Blog-Basic.Page .Hero--small.smallest .guest, .LP-Detail-Case .Blog-Basic.Page .Hero--small.smallest .interview { font-size: 18px; margin-top: 5px; } .Blog-Basic.Page .Hero--small.smallest .Hero-subtitle { line-height: 30px; } .Blog-Basic.Page .Hero--small.smallest.has-topnav { margin-top: -90px; } .Blog-Basic.Blog-Seminar .Blog-Detail .blog-section .post-body div.smanone > ul li:before { display: none; } #Blog-Page .Blog-List { display: block; } #Blog-Page .Blog-List > .Row { margin-bottom: 0; } @media (max-width: 819px) { #Blog-Page .Blog-List > .Row { margin-bottom: 20px; } } @media (max-width: 959px) { #Blog-Page .Blog-List .Post-Item { padding-bottom: 0; } #Blog-Page .Blog-List .Post-Item:first-child a:first-of-type { border-top: 1px dotted rgba(0, 0, 0, 0.2); } } #Blog-Page .Blog-List .Post-Item-blog { height: 410px; margin: 0 1% 2.5%; overflow: hidden; } #Blog-Page .Blog-List .Post-Item-blog a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); background: #fff; border: 1px solid #eee; color: #666; display: block; height: 100%; padding: 1em; text-decoration: none; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #Blog-Page .Blog-List .Post-Item-blog a:hover { -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1); opacity: 0.7; } #Blog-Page .Blog-List .Post-Item-blog a:hover .eyecatch img { -webkit-transform: scale(1.1); transform: scale(1.1); } #Blog-Page .Blog-List .eyecatch { background: #000; margin: -1em -1em 0.5em; max-height: 220px; overflow: hidden; position: relative; text-align: center; } #Blog-Page .Blog-List .eyecatch img { border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; margin: 0; max-width: 100%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; vertical-align: top; width: 100%; } #Blog-Page .Blog-List .cat-name { background: #4e5168; color: #fff; filter: alpha(opacity=90); -ms-filter: "alpha(opacity=90)"; font-size: 12px; font-weight: 700; min-width: 7.5em; opacity: 0.9; padding: 0.1em 0.5em; position: absolute; right: 0; top: 0; } #Blog-Page .Blog-List .entry-content { padding: 0; } #Blog-Page .Blog-List .entry-content .entry-title { color: #444; font-size: 18px; line-height: 1.4; margin-bottom: 10px; margin-top: 15px; text-align: left; } #Blog-Page .Blog-List .entry-content p { hyphenate-lines: 3; font-size: 12px; -ms-hyphens: auto; hyphens: auto; line-height: 1.5; margin-bottom: 0; margin-top: 13px; text-align: left; word-break: break-word; } #Blog-Page .Blog-List .entry-content .byline { filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; font-family: Oswald, sans-serif; font-weight: 400; margin: 0; opacity: 0.7; } #Blog-Page .Blog-List .entry-content .byline:before { content: "\f274"; font-family: fontawesome; font-size: 0.88em; margin-right: 0.3em; position: relative; top: -1px; } @media (max-width: 819px) { #Blog-Page .Blog-List { display: block; } #Blog-Page .Blog-List .Post-Item-blog { height: auto; margin: 0; width: 100%; } #Blog-Page .Blog-List .Post-Item-blog a { -ms-flex-pack: justify; border: none; border-bottom: 1px dotted rgba(0, 0, 0, 0.2); color: #666; display: block; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: justify; overflow: hidden; padding: 8px 5px; text-decoration: none; width: 100%; } #Blog-Page .Blog-List .Post-Item-blog .eyecatch { background: transparent; margin: 0; max-height: 170px; width: 20%; } #Blog-Page .Blog-List .Post-Item-blog .entry-content { padding: 0 0 0 2%; width: 80%; } #Blog-Page .Blog-List .Post-Item-blog .entry-content .entry-title { font-size: 16px; margin-bottom: 5px; margin-top: 0; } #Blog-Page .Blog-List .Post-Item-blog .entry-content .byline { font-size: 10px; } #Blog-Page .Blog-List .Post-Item-blog .cat-name, #Blog-Page .Blog-List .Post-Item-blog .entry-content .description { display: none; } } @media (max-width: 639px) { #Blog-Page .Blog-List .Post-Item-blog .entry-content .entry-title { font-size: 14px; } } #Blog-Page .Blog-Nav .pagination { margin-bottom: 60px; margin-top: 10px; } @media (max-width: 819px) { #Blog-Page .Blog-Nav .pagination { margin-bottom: 0; } } #Blog-Page .Blog-Nav .disabled { display: none; } #Blog-Page .Blog-Nav ul { margin-left: 0; padding-left: 0; } #Blog-Page .Blog-Nav ul li { display: inline-block; margin-right: 5px; } #Blog-Page .Blog-Nav ul li:last-child { margin-right: 0; } #Blog-Page .Blog-Nav ul li a { cursor: pointer; } #Blog-Page .Blog-Nav ul li a, #Blog-Page .Blog-Nav ul li.active span { background-color: #4e5168; border: 1px solid #4e5168; border-radius: 2px; color: #3e3e3e; color: #fff; display: block; font-size: 16px; height: 37px; line-height: 2.2; text-align: center; width: 34px; } #Blog-Page .Blog-Nav ul li.active span { background-color: #ebebeb; border-color: #ebebeb; color: #3e3e3e; } #Blog-Page .Blog-Nav ul li a:hover { opacity: 0.7; text-decoration: none; } #Blog-Page h3.title-comment { color: #3e3e3e; font-size: 12px; font-weight: 700; margin-bottom: 10px; margin-top: 20px; } #Blog-Page h3.title-comment span { color: #3e3e3e; font-family: Oswald, sans-serif; font-size: 18px; font-weight: 700; margin-right: 10px; } @media (max-width: 959px) { #Blog-Page { padding-bottom: 30px; padding-top: 0; } } #Blog-Page h3.title-comment + hr.slash-2 { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%223px%22%20height%3D%223px%22%20viewBox%3D%220%200%203%203%22%20fill%3D%22hsla%25280%2C%200%25%2C%2065%25%2C%201.0%2529%22%3E%3Cpolygon%20points%3D%220%2C0.5%200%2C1.5%201.5%2C3%202.5%2C3%22%2F%3E%3Cpolygon%20points%3D%222.5%2C0%201.5%2C0%203%2C1.5%203%2C0.5%22%2F%3E%3C%2Fsvg%3E"); background-size: 3px 3px; border: none; height: 8px; margin-bottom: 20px; margin-top: 0; width: 100%; } #Blog-Page .recent-posts { -ms-flex-pack: justify; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: justify; margin-bottom: 20px; } #Blog-Page .recent-posts a { margin-left: 1%; margin-right: 1%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; width: 23%; } @media (max-width: 639px) { #Blog-Page .recent-posts a { width: 48%; } } @media (max-width: 374px) { #Blog-Page .recent-posts a { width: 98%; } #Blog-Page .recent-posts a .recent-post { margin-bottom: 20px; max-width: none !important; min-height: auto !important; } #Blog-Page .recent-posts a .recent-post .recent-post-featured-image { height: 150px !important; } } #Blog-Page .recent-posts a:hover { text-decoration: none; } #Blog-Page .recent-posts a .recent-post { max-width: 260px; min-height: 180px; overflow: hidden; position: relative; width: 100%; } #Blog-Page .recent-posts a .recent-post .recent-post-featured-image { background-size: cover; height: 110px; width: 100%; } #Blog-Page .recent-posts a .recent-post .cat-name { background: #4e5168; color: #fff; filter: alpha(opacity=90); font-size: 10px; font-weight: 700; opacity: 0.9; padding: 0.6em 0.5em; position: absolute; right: 0; text-align: center; top: 0; } #Blog-Page .recent-posts a .recent-post .recent-post-info { color: #3e3e3e; font-family: Oswald, sans-serif; font-size: 11px; font-weight: 400; line-height: 14px; margin: 4px 0 0; } #Blog-Page .recent-posts a .recent-post .recent-post-title { color: #3e3e3e; font-size: 13px; font-weight: 700; line-height: 18px; margin: 4px 0; } @media (max-width: 819px) { #Blog-Sidebar { margin-top: 30px; } } #Blog-Sidebar .Blog-Sidebar-top { background-color: #fff; } #Blog-Sidebar .box h3 { border-bottom: 1px solid #333; color: #333; font-size: 16px; line-height: 1.5; margin-bottom: 15px; padding-bottom: 10px; position: relative; } #Blog-Sidebar .box h3 span { color: #333; font-family: "Oriya MN", serif; font-size: 24px; font-weight: 400; margin-right: 10px; } #Blog-Sidebar .box ul { font-size: 14px; } #Blog-Sidebar .top-post.box ul { margin: 0; padding: 0; } #Blog-Sidebar .top-post.box ul li:last-child { border-bottom: none; } #Blog-Sidebar .top-post.box ul li { -ms-flex-align: center; -webkit-box-align: center; align-items: center; border-bottom: 1px dotted #ccc; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 1.6; list-style-type: none; margin-top: 10px; min-height: 55px; padding-bottom: 10px; padding-left: 40px; padding-right: 25px; position: relative; } #Blog-Sidebar .top-post.box ul li a { color: #666; display: block; } #Blog-Sidebar .top-post.box ul li a:before { content: none; } #Blog-Sidebar .top-post.box ul li a:hover { text-decoration: none; } #Blog-Sidebar .top-post.box ul li a:after { color: #4e5168; content: "\f054"; font-family: fontawesome; font-size: 1em; position: absolute; right: 0.6em; top: 8px; } #Blog-Sidebar .top-post.box ul li a:hover:after { right: 0.5em; -webkit-transform: translate(1px); transform: translate(1px); } #Blog-Sidebar .top-post.box ul li:before { color: #fff; font-family: Oswald, sans-serif; font-size: 30px; font-style: italic; font-weight: 400; left: 10px; line-height: 1; position: absolute; top: 2px; } #Blog-Sidebar .top-post.box ul li:first-child:before { content: "1"; } #Blog-Sidebar .top-post.box ul li:nth-child(2):before { content: "2"; } #Blog-Sidebar .top-post.box ul li:nth-child(3):before { content: "3"; } #Blog-Sidebar .top-post.box ul li:first-child:before, #Blog-Sidebar .top-post.box ul li:nth-child(2):before, #Blog-Sidebar .top-post.box ul li:nth-child(3):before { color: #4e5168; } #Blog-Sidebar .top-post.box ul li:nth-child(4):before { color: #3e3e3e; content: "4"; } #Blog-Sidebar .top-post.box ul li:nth-child(5):before { color: #3e3e3e; content: "5"; } #Blog-Sidebar .top-post.box ul li:nth-child(6):before { color: #3e3e3e; content: "6"; } #Blog-Sidebar .top-post.box ul li:nth-child(7):before { color: #3e3e3e; content: "7"; } #Blog-Sidebar .top-post.box ul li:nth-child(8):before { color: #3e3e3e; content: "8"; } #Blog-Sidebar .top-post.box ul li:nth-child(9):before { color: #3e3e3e; content: "9"; } #Blog-Sidebar .top-post.box ul li:nth-child(10):before { color: #3e3e3e; content: "10"; } #Blog-Sidebar .recent-post.box { background: #fff; border-top: none; } #Blog-Sidebar .recent-post.box .list-recent { margin-top: 20px; } #Blog-Sidebar .recent-post.boxt .item:first-child { border-top: none; } #Blog-Sidebar .recent-post.box .item { border-top: 1px dotted #ccc; clear: both; padding: 10px; position: relative; } #Blog-Sidebar .recent-post.box .item .img { float: left; padding-right: 5px; } #Blog-Sidebar .recent-post.box .item.no-img { padding-left: 0; } #Blog-Sidebar .recent-post.box .item a { display: block; } #Blog-Sidebar .recent-post.box .item:first-child { border-top: none; } #Blog-Sidebar .recent-post.box .item a .title-col { padding-left: 0; padding-right: 0; } #Blog-Sidebar .recent-post.box .item a .img-col { padding-left: 5px; padding-right: 5px; } @media (max-width: 819px) { #Blog-Sidebar .recent-post.box .item a .img-col { float: left; width: auto; } #Blog-Sidebar .Blog-Sidebar-cta { text-align: center; } } @media (min-width: 820px) { #Blog-Sidebar .Blog-Sidebar-cta .hs-cta-img { height: auto; width: 100%; } } @media (max-width: 414px) { #Blog-Sidebar .Blog-Sidebar-cta { text-align: center; } } #Blog-Sidebar .recent-post.box .item a:hover { opacity: 0.7; text-decoration: none; } #Blog-Sidebar .recent-post.box .item a:after { color: #4e5168; content: "\f054"; font-family: fontawesome; font-size: 0.8em; position: absolute; right: 0.1em; top: 30px; } #Blog-Sidebar .recent-post.box .item a:hover:after { right: 0; -webkit-transform: translate(1px); transform: translate(1px); } #Blog-Sidebar .recent-post.box .title { color: #3e3e3e; display: inherit; font-size: 14px; line-height: 22px; padding-bottom: 5px; padding-right: 23px; } #Blog-Sidebar .topic-list.box { background: #fff; border-top: none; margin-top: 20px; margin-bottom: 24px; } #Blog-Sidebar .topic-list.box ul { margin-left: 0; padding-left: 0; } #Blog-Sidebar .topic-list.box ul li:first-child { border-top: none; } #Blog-Sidebar .topic-list.box ul li { border-top: 1px dotted #ccc; clear: both; list-style-type: none; position: relative; } #Blog-Sidebar .topic-list.box ul li a:after { color: #4e5168; content: "\f054"; font-family: fontawesome; font-size: 1em; position: absolute; display: block; right: 0.6em; top: 0; bottom: 0; margin: auto; width: 15px; height: 15px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } #Blog-Sidebar .topic-list.box ul li a.active:after { color: #fff; } #Blog-Sidebar .topic-list.box ul li a:hover { text-decoration: none; } #Blog-Sidebar .topic-list.box ul li a:hover:after { right: 0.5em; -webkit-transform: translate(1px); transform: translate(1px); } #Blog-Sidebar .topic-list.box ul li a .filter-link-count { display: inline-block; margin-left: 7px; } .Blog-Basic.Page .HeroBlog-list.Hero--small.smallest .Hero-subtitle.top { max-width: 90%; } @media (max-width: 959px) { .Blog-Basic.Page .HeroBlog-list.Hero--small.smallest .Hero-subtitle { font-size: 16px; line-height: 22px; margin-top: 15px; } } @media (max-width: 639px) { .Blog-Basic.Page .HeroBlog-list.Hero--small.smallest .Hero-subtitle { font-size: 14px; margin-top: 15px; } } .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest.post-thumb { background-position: 50%; } .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest.post-thumb:before { background: rgba(13, 23, 34, 0.7); background: linear-gradient(155deg, rgba(13, 23, 34, 0.7), rgba(20, 91, 164, 0.85)); } @media (max-width: 959px) { .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest { height: auto; } .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest .Hero-title { font-size: 30px; line-height: 36px; } .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest .Hero-subtitle { font-size: 16px; line-height: 22px; margin-top: 15px; } } @media (max-width: 639px) { .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest .Hero-title { font-size: 24px; } .Blog-Basic.Page .HeroBlog-detail.Hero--small.smallest .Hero-subtitle { font-size: 14px; margin-top: 15px; } } .Blog-Detail .blog-section { border-left: 1px solid #fafafa; position: relative; } @media (min-width: 960px) { .Blog-Detail .blog-section { margin-left: 55px; } .Blog-Detail.blog-news .blog-section, .Blog-Detail.blog-seminar .blog-section { margin-left: 0; } } .Blog-Detail .blog-section #recaptcha_area, .Blog-Detail .blog-section #recaptcha_table { margin-left: -3px; } .Blog-Detail .blog-section a:hover { opacity: 0.7; } .Blog-Detail .blog-section .post-body ul { list-style: none; padding-left: 20px; } .Blog-Detail .blog-section .post-body ul li { padding-left: 20px; position: relative; } .Blog-Detail .blog-section .post-body ul li:before { border: 2px solid #4e5168; border-radius: 100%; content: ""; display: block; height: 6px; left: 0; position: absolute; top: 14px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 6px; } .Blog-Detail .blog-section .post-body ul li + li { margin-top: 5px; } .Blog-Detail .blog-section .post-body ol { counter-reset: li; list-style: none; padding-left: 40px; } .Blog-Detail .blog-section .post-body ol li { font-size: 15px; font-weight: 500; line-height: 26px; position: relative; } .Blog-Detail .blog-section .post-body ol li:before { background-position: 50%; color: #4e5168; content: counter(li); counter-increment: li; display: block; font-weight: 700; height: 26px; left: -19px; position: absolute; top: 1px; vertical-align: middle; width: 22px; } .Blog-Detail .blog-section .post-body ol li:nth-child(n+10):before { left: -28px; } .Blog-Detail .blog-section .post-body .h1, .Blog-Detail .blog-section .post-body .h2, .Blog-Detail .blog-section .post-body h1, .Blog-Detail .blog-section .post-body h2 { text-align: left; } .Blog-Detail .blog-section .post-body .h2, .Blog-Detail .blog-section .post-body h2 { color: #565656; } @media (min-width: 960px) { .Blog-Detail .blog-section .post-body h2:not(#toc-0) { margin-top: 60px; } .Blog-Detail .blog-section .post-body .h3, .Blog-Detail .blog-section .post-body .h4, .Blog-Detail .blog-section .post-body .h5, .Blog-Detail .blog-section .post-body .h6, .Blog-Detail .blog-section .post-body h3, .Blog-Detail .blog-section .post-body h4, .Blog-Detail .blog-section .post-body h5, .Blog-Detail .blog-section .post-body h6 { margin-top: 45px; } .Blog-Detail .blog-section .post-body .hs_cos_wrapper h2:first-child:not(#toc-0) { margin-top: 0; } } .Blog-Detail .blog-section .post-body .h5, .Blog-Detail .blog-section .post-body .h6, .Blog-Detail .blog-section .post-body h5, .Blog-Detail .blog-section .post-body h6 { border-left: 3px solid #333; font-size: 18px; font-weight: 400; font-weight: 500; line-height: 28px; padding-left: 10px; } .Blog-Detail .blog-section .post-body blockquote { background-color: #f4f8f9; border-radius: 5px; margin-bottom: 35px; margin-left: 0; margin-right: 0; padding: 20px; position: relative; text-align: center; } .Blog-Detail .blog-section .post-body blockquote:before { color: #4e5168; content: "\f10d"; display: inline-block; font-family: FontAwesome; font-size: 25px; line-height: 0; padding-right: 10px; position: relative; top: 0; } .Blog-Detail .blog-section .post-body blockquote:after { bottom: -10px; color: #4e5168; content: "\f10e"; display: inline-block; font-family: FontAwesome; font-size: 25px; line-height: 0; padding-left: 10px; position: relative; } .Blog-Detail .blog-section .post-body blockquote p { display: inline; } .Blog-Detail .blog-section .post-body figure figcaption { font-size: 14px; margin-top: 6px; } .Blog-Detail .blog-section .post-body figure img { margin-bottom: 0 !important; } .Blog-Detail .blog-section .post-body dl dt { font-weight: 700; margin: 10px 0; } .Blog-Detail .blog-section .post-body dl dd { display: list-item; list-style-type: disc; } .Blog-Detail .blog-section img { height: auto; max-width: 100% !important; } @media (max-width: 767px) { .sodium-blog .blog-section img { margin-bottom: 1.5em; max-width: 100% !important; } } .Blog-Detail .blog-section h2.blog-title { color: #ffc400; font-size: 31px; font-weight: 400; margin-top: 55px; text-align: left; } .Blog-Detail .blog-section ul .social { margin: 0 0 40px; padding: 0; } .Blog-Detail .blog-section ul .social li { display: inline-block; margin-right: 10px; } .Blog-Detail .blog-section ul .social li:before { display: none; } .Blog-Detail .blog-section ul .social li a { background-color: #4e5168; border: 1px solid #4e5168; border-radius: 3px; color: #fff; display: block; height: 42px; line-height: 42px; text-align: center; width: 42px; } .Blog-Detail .blog-section ul .social li a:hover { background-color: #fff; color: #4e5168; } .Blog-Detail .blog-section ul .social li a i { font-size: 20px; } .Blog-Detail .blog-section .post-details { margin: 50px 0 22px; padding: 0; } .Blog-Detail.blog-section .post-details li { color: #a09f9f; display: inline-block; font-size: 11px; } .Blog-Detail .blog-section .post-details li a { color: #a09f9f; } .Blog-Detail .blog-section .post-details li i { color: #4e5168; font-size: 11px; } .Blog-Detail .post-cta { margin-top: 50px; text-align: center; } @media (min-width: 481px) and (max-width: 959px) { .Blog-Detail .post-cta { margin-bottom: 55px; } } .Blog-Detail .social-blog { border: 4px; height: 269px; overflow: hidden; position: absolute; -webkit-transform: translateX(-60px); transform: translateX(-60px); width: 40px; } .Blog-Detail .social-blog .social-list { height: 249px; left: 0; position: absolute; } .Blog-Detail .social-blog ul { padding-left: 0; width: 40px; } .Blog-Detail .social-blog ul li { background-color: #4e5168; border: 2px solid #4e5168; height: 40px; list-style: none; margin-bottom: 1px; padding: 5px 8px; -webkit-transition: 0.3s; transition: 0.3s; width: 40px; } .Blog-Detail .social-blog ul li.facebook { background-color: #315096; border: 2px solid #315096; } .Blog-Detail .social-blog ul li.twitter { background-color: #55acee; border: 2px solid #55acee; } .Blog-Detail .social-blog ul li.googleplus { background-color: #dd4b39; border: 2px solid #dd4b39; } .Blog-Detail .social-blog ul li.hatena { background-color: #1ba5dc; border: 2px solid #1ba5dc; } .Blog-Detail .social-blog ul li.pocket { background-color: #ef3e56; border: 2px solid #ef3e56; } .Blog-Detail .social-blog ul li.email { background-color: #5da7c6; border: 2px solid #5da7c6; } .Blog-Detail .social-blog ul li:hover { background-color: #fff; } .Blog-Detail .social-blog ul li:hover a { color: #4e5168; } .Blog-Detail .social-blog ul li a { color: #fff; display: block; font-size: 20px; text-align: center; } .Blog-Detail .social-blog ul li a .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: 700; } .Blog-Detail .social-blog .hide-arrow { background-color: #e1e1e1; border: 0; color: #fff; cursor: pointer; display: block; font-size: 16px; margin-top: 240px; padding: 1px 0; text-align: center; width: 40px; } .Blog-Detail.blog-mobile-layout .social-blog { bottom: 0; height: 45px; margin-bottom: 40px; margin-top: 40px; position: absolute !important; top: auto !important; -webkit-transform: translateX(0); transform: translateX(0); width: 100% !important; } .Blog-Detail.blog-mobile-layout .social-blog.hide-bt { bottom: -40px; } .Blog-Detail.blog-mobile-layout .social-blog .social-list { bottom: 0; height: auto; left: auto; right: auto; text-align: center; width: 100%; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul { width: 100%; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul li { display: inline-block; } @media (max-width: 480px) { .Blog-Detail.blog-mobile-layout .social-blog { background-color: #e1e1e1; bottom: 0; height: 40px; left: 0; margin-bottom: 0; margin-top: 0; position: fixed !important; -webkit-transition: bottom 0.3s ease; transition: bottom 0.3s ease; width: 100% !important; z-index: 998; } .Blog-Detail.blog-mobile-layout .social-blog .hide-bt { bottom: -40px; } .Blog-Detail.blog-mobile-layout .social-blog .social-list { bottom: 0; height: auto; left: auto; right: auto; text-align: center; width: 100%; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul { -ms-flex-pack: center; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; width: 100%; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul li { display: block; height: 40px; margin-bottom: 0; padding: 5px 8px; width: 16.6667%; } .Blog-Detail.blog-mobile-layout .social-blog .hide-arrow { display: none; float: right; height: 40px; margin-top: 0; padding: 0; } .Blog-Detail.blog-mobile-layout .social-blog .hide-arrow i { font-size: 22px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .Blog-Detail .section.post-body { border: 1px solid #ddd !important; border-top: 7px solid #0d2580 !important; min-height: auto !important; padding: 20px 50px 50px !important; } .Blog-Detail .blog-mobile-layout .section.post-body { padding-bottom: 90px !important; } .Blog-Detail .section.post-body .youtube-container-pane { margin: 0 auto; max-width: 100% !important; } .Blog-Detail .section.post-body .youtube-container { padding-top: 56.25%; position: relative; width: 100%; } .Blog-Detail .section.post-body .youtube-container iframe { height: 100%; position: absolute; right: 0; top: 0; width: 100%; } .Blog-Detail .section.post-body code, .Blog-Detail .section.post-body pre { word-wrap: break-word; background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 3px; font-family: Source Sans Pro; font-size: 13px; line-height: 19px; margin-bottom: 30px; overflow-x: auto; overflow-y: auto; padding: 6px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; } #main .Blog-Detail .section.post-body p { font-size: 18px; } @media screen and (max-width: 767px) { #main .Blog-Detail .section.post-body p { font-size: 16px; margin-bottom: 15px; } #main .Blog-Detail .section.post-body { padding-top: 34px; } .Blog-Detail .blog-section, .Blog-Detail .widget-type-blog_comments, .Blog-Detail .widget-type-blog_content > .blog-section { padding-right: 0; } .Blog-Detail .side-bar-blog .widget-type-blog_subscribe { display: none; } } .Blog-Detail .fb-likebtn { background: #3e3e3e; color: #fff; display: table; margin: 20px 0 0; max-width: 100%; text-align: center; width: 100%; } .Blog-Detail .fb-likebtn .fb_reset { display: none; } .Blog-Detail .fb-likebtn .fb-button { overflow: hidden; -webkit-transform: scale(1.2); transform: scale(1.2); } .Blog-Detail .fb-likebtn .eyecatch, .Blog-Detail .fb-likebtn .rightbox { border: none; display: table-cell; vertical-align: middle; width: 50%; } .fb-likebtn .eyecatch img { height: auto; vertical-align: bottom; width: 100%; } .fb-likebtn .like_text { font-size: 1.05em; font-weight: 700; line-height: 1.4; margin-top: 1em; } .fb-likebtn .like_text p { font-weight: 400; margin-bottom: 1em; } .fb-likebtn .like_text .small { color: #ccc; font-size: 11px; margin-bottom: 0; } @media only screen and (max-width: 767px) { .fb-likebtn .fb-button { -webkit-transform: scale(1); transform: scale(1); } .fb-likebtn .like_text { font-size: 0.9em; } .fb-likebtn .like_text p { margin-bottom: 0; padding: 0; } .Blog-Detail .fb-likebtn .eyecatch, .Blog-Detail .fb-likebtn .rightbox { width: 100%; } .Blog-Detail .fb-likebtn .eyecatch { display: none; } .Blog-Detail .fb-likebtn .rightbox { display: block; padding: 20px; } } .Blog-Detail .blog-section .post-body h1.content_title { border-bottom: 1px dotted #1a1311; color: #1a1311; font-family: roboto, Arial, Helvetica, sans-serif; font-size: 32px; font-weight: 400; margin-bottom: 20px; margin-top: 0; padding-bottom: 0; } .Blog-Detail .blog-section .post-body h2 { background-color: #7e7e7e; border-left: 6px solid #717171; color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 40px; margin-left: -50px; margin-right: -50px; padding: 10px 40px; } .Blog-Detail .blog-section .post-body h3 { border-bottom: 2px solid #3e3e3e; color: #3e3e3e; font-size: 20px; font-weight: 700; margin-bottom: 25px; padding-bottom: 10px; padding-left: 4px; } .Blog-Detail .blog-section .post-body .h4 { border-bottom: none; } .Blog-Detail .blog-section .post-body h4, .Blog-Detail.blog-section .post-body .h4 { border-left: 5px solid #333; font-size: 18px; font-weight: 700; margin-bottom: 25px; padding-bottom: 0; padding-left: 12px; } .Blog-Detail .blog-section .post-body h2 span { color: #fff; } .Blog-Detail .blog-section .post-body h3 span, .Blog-Detail .blog-section .post-body h4 span { color: #3e3e3e; } .Blog-Detail .blog-section .post-body h2, .Blog-Detail .blog-section .post-body h3, .Blog-Detail .blog-section .post-body h4, .Blog-Detail .blog-section .post-body h5, .Blog-Detail .blog-section .post-body h6 { line-height: 1.5; } .Blog-Detail .blog-section .post-body p { hyphenate-lines: 3; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; margin-bottom: 20px; margin-top: 20px; word-break: break-word; } .Blog-Detail .blog-section .post-body p:first-child { margin-top: 0; } .Blog-Detail .blog-section .post-body .hs_cos_wrapper > p:last-child { margin-bottom: 0; } .Blog-Detail .blog-section .post-body ul li { font-size: 16px; } .Blog-Detail .blog-section .post-body table { border-collapse: collapse; border-left: 1px solid #ddd; border-spacing: 0; border-top: 1px solid #ddd; font-size: 16px; line-height: 1.5; margin-bottom: 35px; table-layout: auto; width: 100%; } .Blog-Detail .blog-section .post-body table:last-child { margin-bottom: 0; } .Blog-Detail .blog-section .post-body table td { hyphenate-lines: 3; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; -ms-hyphens: auto; hyphens: auto; padding: 9px 10px 8px; word-break: break-word; } .Blog-Detail .blog-section .post-body table th { background-color: #e4eef0; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 9px 10px 8px; text-align: left; } .Blog-Detail .blog-section .post-body table p { font-size: 16px; margin-bottom: 0; } .Blog-Detail .blog-section .post-body a:not(.Button--large):not(.Button--outline), .Blog-Detail .blog-section .post-body span a:not(.Button--large):not(.Button--outline) { font-size: inherit; text-decoration: underline; } .Blog-Detail .blog-section .post-body a.link-inside, .Blog-Detail .blog-section .post-body span a.link-inside { text-decoration: none; } .Blog-Detail .blog-section .post-body a.link-inside:hover, .Blog-Detail .blog-section .post-body span a.link-inside:hover { text-decoration: underline; } .Blog-Detail .blog-section .post-body table td a { font-size: 16px; } @media only screen and (max-width: 767px) { .Blog-Detail .section.post-body { padding-left: 15px; padding-right: 15px; padding-top: 30px; } .Blog-Detail .blog-section .post-body h1.content_title { font-size: 24px; } .Blog-Detail .blog-section .post-body h2 { font-size: 20px; margin-bottom: 20px; margin-left: -15px; margin-right: -15px; padding: 10px; } .Blog-Detail .blog-section .post-body h3 { font-size: 18px; padding-bottom: 6px; } .Blog-Detail .blog-section .post-body h4 { font-size: 16px; } .Blog-Detail .blog-section .post-body p { font-size: 16px; margin-bottom: 15px; } } .Blog-Detail #toc-box { background-color: #f6f6f6; border: 1px solid #ddd; margin-bottom: 30px; padding: 15px 10px 5px; } .Blog-Detail #toc-title { font-size: 16px; font-weight: 200; margin-left: 10px; } .Blog-Detail #toc-index { margin-bottom: 10px; margin-top: 10px; } .Blog-Detail #toc-index > li:before { color: #3e3e3e; font-weight: 400; } .Blog-Detail #toc-index > li a { color: #3e3e3e; font-weight: 300; } @media only screen and (max-width: 767px) { .Blog-Detail #toc-index > li a { font-size: 16px; } } .Blog-List .post-news dl.list { border-top: 1px dotted #ccc; margin-top: 0; text-align: left; } .Blog-List .post-news dl.list dt { color: #666; font-size: 0.9rem; padding-left: 8px; padding-top: 20px; } .Blog-List .post-news dl.list dd { border-bottom: 1px dotted #ccc; font-weight: 400; line-height: 1.5; margin-left: 0; margin-top: -48px; padding-bottom: 20px; padding-left: 8em; padding-top: 20px; } .Blog-List .post-news dl.list dd p { margin: 0; } .Blog-List .post-news dl.list dd ul { list-style-position: inside; margin-top: 5px; padding-left: 0; } .Blog-List .post-news dl.list dd .tag { background: #4e5168; color: #fff; font-size: 13px; margin-right: 8px; padding: 0 8px 2px; } .Blog-List .post-news dl.list dd a { color: #666; font-weight: 500; } .Blog-List .post-news dl.list dd a:hover { opacity: 0.7; text-decoration: none; } @media only screen and (max-width: 768px) { .Blog-List .post-news dl.list { border-top: 0; } .Blog-List .post-news dl.list dt { padding-top: 20px; } .Blog-List .post-news dl.list dd { font-size: 16px; margin-top: -2rem; padding-bottom: 15px; padding-left: 6rem; padding-top: 15px; } } #Blog-Sidebar .subcription form .hs-form-field { margin-bottom: 10px; } #Blog-Sidebar .subcription form input.hs-input { border: 0; border-bottom: 1px dotted #999; color: #3e3e3e; font-size: 14px; margin-bottom: 5px; margin-left: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-top: 0; } #Blog-Sidebar .subcription form .hs-error-msgs { text-align: center; } #Blog-Sidebar .subcription form .hs_error_rollup { margin-bottom: 10px; text-align: center; } #Blog-Sidebar .subcription form input.hs-input:focus { border-color: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: initial !important; } #Blog-Sidebar .subcription form .actions, #Blog-Sidebar .subcription form .hs-form-booleancheckbox { text-align: center; } #Blog-Sidebar .subcription form .actions .hs-button.primary { font-size: 14px; height: 40px; line-height: 36px; width: 100%; } #Blog-Sidebar .subcription form .form-privacy { margin-bottom: 0; } #Blog-Sidebar .subcription form .hs-error-msgs { margin-top: 0; } #Blog-Sidebar .subcription form label { color: #3e3e3e; font-size: 13px; font-weight: 700; position: relative; } #Blog-Sidebar .subcription form label span { color: #3e3e3e; } #Blog-Sidebar .subcription form label span.hs-form-required { background-color: red; border-radius: 3px; color: #fff; font-size: 11px; margin-left: 5px; padding-left: 5px; padding-right: 5px; } #Blog-Sidebar .subcription form input[type=checkbox] { height: 3px; margin-right: 3px; position: relative; top: -6px; visibility: hidden; width: 15px; } #Blog-Sidebar .subcription form input[type=checkbox] + span { color: #3e3e3e; } #Blog-Sidebar .subcription form input[type=checkbox] + span:before { color: #e0e0e0; content: "\f096"; display: block; font-family: FontAwesome; height: 16px; left: -1px; position: absolute; top: -3px; width: 16px; } #Blog-Sidebar .subcription form input[type=checkbox]:checked + span:before { color: #4da6db; content: "\f14a"; } #Blog-Sidebar .subcription form input[type=radio] { height: 3px; margin-right: 8px; position: relative; top: -6px; visibility: hidden; width: 15px; } #Blog-Sidebar .subcription form input[type=radio] + span { color: #3e3e3e; } #Blog-Sidebar .subcription form input[type=radio] + span:before { background-image: url(https://products.nvc.co.jp/hubfs/library/classic/images/radio.png); background-position: 0 0; content: ""; display: block; height: 16px; left: -1px; position: absolute; top: 10px; width: 16px; } #Blog-Sidebar .subcription form input[type=radio]:checked + span:before { background-position: 16px 0; } #Blog-Sidebar .subcription form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-image: url(https://products.nvc.co.jp/hubfs/library/classic/images/arrow_down.png); background-position-x: 98%; background-position-y: 64%; background-repeat: no-repeat; border: 0; border-bottom: 1px solid #ffc400; border-radius: 0; color: #626262; font-size: 16px; margin-top: 0 !important; margin-top: 0; outline: 0; } #Blog-Sidebar .subcription form fieldset.form-columns-1 .input, #Blog-Sidebar .subcription form fieldset.form-columns-2 .input { margin-right: 0 !important; } #Blog-Sidebar .subcription form fieldset.form-columns-2 .hs_firstname, #Blog-Sidebar .subcription form fieldset.form-columns-2 .hs_lastname { float: none; width: 100%; } #Blog-Sidebar .subcription form fieldset.form-columns-1 input[type=email] { width: 100% !important; } #Blog-Sidebar .subcription form fieldset.form-columns-1 .hs_privacy_policy_check input { width: auto !important; } #Blog-Sidebar .subcription form fieldset.form-columns-1 .hs_privacy_policy_check .input input[type=checkbox].hs-input + span:before { display: none; } #Blog-Sidebar .subcription form fieldset.form-columns-1 .hs_privacy_policy_check .input input[type=checkbox].hs-input + span:after { top: 12px; } #Blog-Sidebar .subcription form fieldset.form-columns-2 .hs_firstname input, #Blog-Sidebar .subcription form fieldset.form-columns-2 .hs_lastname input { width: 100%; } #Blog-Sidebar .subcription form.hs-form .inputs-list li label { color: red; font-size: 12px; } #Blog-Sidebar .subcription ul.inputs-list { list-style-type: none; padding-left: 0; } #Blog-Sidebar .subcription .subscript input { width: 100%; } #Blog-Sidebar .subcription .blog-subscribe { background: #fff; border-top: none; margin-top: 20px; } #Blog-Sidebar .subcription .blog-subscribe h3.title { color: #3e3e3e; font-size: 12px; font-weight: 700; margin-bottom: 15px; position: relative; } #Blog-Sidebar .subcription .blog-subscribe h3.title:after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%223px%22%20height%3D%223px%22%20viewBox%3D%220%200%203%203%22%20fill%3D%22hsla%25280%2C%200%25%2C%2065%25%2C%201.0%2529%22%3E%3Cpolygon%20points%3D%220%2C0.5%200%2C1.5%201.5%2C3%202.5%2C3%22%2F%3E%3Cpolygon%20points%3D%222.5%2C0%201.5%2C0%203%2C1.5%203%2C0.5%22%2F%3E%3C%2Fsvg%3E"); background-size: 3px 3px; bottom: -15px; content: ""; height: 8px; left: 0; position: absolute; right: 0; } #Blog-Sidebar .subcription .blog-subscribe h3.title span { color: #3e3e3e; font-family: Oswald, sans-serif; font-size: 18px; font-weight: 700; margin-right: 10px; } #Blog-Sidebar .subcription .blog-subscribe .form-title { display: none; } #Blog-Sidebar .subcription .widget-type-form { margin-left: 0; padding-bottom: 10px; padding-top: 15px; } #Blog-Sidebar .subcription .blog-subscribe .hs-form { padding-left: 5px; padding-right: 5px; } #Blog-Sidebar .subcription form .hs_privacy_policy_check { margin-top: -10px; } #Blog-Sidebar .subcription form .hs_privacy_policy_check input { width: auto !important; } #Blog-Sidebar .subcription form .hs_privacy_policy_check .input input[type=checkbox].hs-input + span:before { display: none; } #Blog-Sidebar .subcription form.hs-form .hs-form-field .input input[type=checkbox].hs-input + span { padding-left: 0; } #Blog-Sidebar .subcription form .hs_privacy_policy_check .input input[type=checkbox].hs-input + span:after { top: 10px; } #Blog-Sidebar .subcription .submit-message { font-size: 13px; line-height: 20px; } .Blog-Sidebar-search form.searchKeyword { border: 1px solid #999; border-radius: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 0; padding: 5px 20px; position: relative; width: 100%; display: flex; align-items: center; gap: 10px; } .Blog-Sidebar-search form.searchKeyword * { padding: 0; } .Blog-Sidebar-search form.searchKeyword input[type=text] { appearance: none; border: none; outline: none; height: 40px; padding: 0; flex: 1; } .Blog-Sidebar-search form.searchKeyword input::-webkit-input-placeholder { color: #ccc; } .Blog-Sidebar-search form.searchKeyword input::-moz-placeholder { color: #ccc; } .Blog-Sidebar-search form.searchKeyword input:-ms-input-placeholder { color: #ccc; } .Blog-Sidebar-search form.searchKeyword input::-ms-input-placeholder { color: #ccc; } .Blog-Sidebar-search form.searchKeyword input::placeholder { color: #ccc; } .Blog-Sidebar-search form.searchKeyword input:focus, .Blog-Sidebar-search form.searchKeyword input:hover { border: none !important; -webkit-box-shadow: none; box-shadow: none; color: #0d1722; } .Blog-Sidebar-search form.searchKeyword button:before { display: none; } .Blog-Sidebar-search form.searchKeyword button { background-color: #fff !important; border: none !important; border-radius: 0 !important; cursor: pointer; height: 30px; margin-left: 8px !important; margin-top: 0; padding: 6px 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; width: auto; } .Blog-Sidebar-search form.searchKeyword button svg { fill: #000; max-width: 18px; width: 18px; height: 18px; } .Blog-Sidebar-search form.searchKeyword button:hover { opacity: 0.7; } @media (max-width: 959px) { .Wrap-paddingSmall { padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); } .Blog-Basic #BreadCrumb.BlogBreadCrumb ul.breadcrumb { border-bottom: none; } } .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound { background-color: #2c3e50; } .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound h3.form-title { border-bottom: none; margin-bottom: 20px; } .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound ul.hs-error-msgs { list-style-type: none; padding-left: 0; } .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound ul.hs-error-msgs li { padding-left: 0; } .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound ul.hs-error-msgs li:before { display: none; } @media (max-width: 960px) { .Blog-Basic .LP-Form.LP-Form-inpage.overlay { padding: 0; } .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound { padding: 30px; } } @media (max-width: 479px) { .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound { padding: 30px 15px; } } @media (max-width: 413px) { .Blog-Basic .LP-Form.LP-Form-inpage.overlay .form_inbound .actions .hs-button.primary { font-size: 11px; padding-left: 10px; padding-right: 10px; } } .Blog-Basic .LP-Flex .Wrap { margin: 0 !important; padding: 0; width: 100%; } .Blog-Basic .LP-Flex .Section-title { background: #75abe4; color: #fff; font-weight: 500; max-width: none; padding: 10px 20px; } .Blog-Basic .LP-Flex .Section-header { margin-bottom: 0; } .Blog-Basic .LP-Flex .Section-body { background: #f7f7f7; padding: 30px 20px; } .Blog-Basic .LP-Flex .Post--title { font-size: 14px; font-weight: 300; line-height: 20px; } .Blog-Basic .LP-Flex .Post--body { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .Blog-Basic .LP-Flex .Post--body:hover { opacity: 0.7; } .Blog-Basic .LP-Flex .Post--content { width: 55%; } .Blog-Basic .LP-Flex .Post--image { width: 45%; } .Blog-Basic .LP-Flex .Post--image figure { margin: 0 20px 0 0; max-height: 100px; max-width: 195px; overflow: hidden; } .Blog-Basic .LP-ListResources .Column-item { margin: 0 10px; } .Blog-Basic .LP-ListResources .Column-item a { display: block; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .Blog-Basic .LP-ListResources .Column-item a:hover { opacity: 0.7; } .Blog-Basic .LP-ListResources .ColumnContentSection-title { font-size: 15px; font-weight: 500; line-height: 20px; margin-top: 15px; } @media (max-width: 639px) { .Blog-Basic .LP-ListResources .ColumnContentSection-thumb { max-width: 200px; } .Blog-Basic .LP-ListResources .Column-item:nth-child(n+2) { margin-top: 30px; } .Blog-Basic .LP-ListResources .Column-item a { text-align: center; } } .Blog-Basic .LP-ListResources .Section-header { margin-bottom: 0; } .Blog-Basic .LP-ListResources .Section-content { background: #f7f7f7; margin-top: 0; padding-bottom: 40px; padding-top: 40px; } .Blog-Basic .LP-ListResources .Section-cta { background: #f7f7f7; clear: both; margin-top: 0; padding-top: 30px; text-align: right; } .Blog-Basic .LP-ListResources .Section-cta a { background: #474747; border-radius: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .Blog-Basic .LP-ListResources .Section-cta a:after { content: "\f0a9"; font-family: FontAwesome; font-size: 15px; font-style: normal !important; padding-left: 10px; } .Blog-Basic .LP-ListResources .Section-cta a:hover { opacity: 0.7; } .Blog-Basic .ts-fab-wrapper .ts-fab-list { margin: 0 !important; overflow: hidden; padding: 0 !important; } .Blog-Basic .ts-fab-wrapper .ts-fab-list li { -ms-flex-align: center; -webkit-box-align: center; align-items: center; background-color: #e9e9e9; border: 1px solid #e9e9e9; border-bottom: none !important; -webkit-box-sizing: content-box; box-sizing: content-box; color: #333; display: -ms-inline-flexbox; display: -webkit-inline-box; display: inline-flex; font-size: 13px; font-weight: 700; padding: 2px 15px; text-decoration: none; } .Blog-Basic .ts-fab-wrapper .ts-fab-list li .fa { font-size: 18px; margin-right: 7px; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab { background: #f7f7f7; border: 1px solid #dedede; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; min-height: 80px; overflow: hidden; padding: 20px; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-avatar { text-align: center; width: 100px; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-avatar > a { display: inline-block; padding: 25px 0; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-text { line-height: 1.5; margin-left: 20px; width: calc(100% - 120px); } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-text .ts-fab-header { margin-bottom: 10px; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-text .ts-fab-content { font-size: 16px; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-social-links { margin-top: 5px; text-align: center; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-social-links a { display: inline-block; margin: 0 1px; opacity: 0.7; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-social-links a:hover { opacity: 1; } @media (max-width: 479px) { .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-avatar { width: 100%; } .Blog-Basic .ts-fab-wrapper .ts-fab-tab .ts-fab-text { margin-left: 0; margin-top: 25px; width: 100%; } } .Blog-Basic .post-footer-list ul { padding-left: 0; } .Blog-Basic .post-footer-list ul li { display: inline-block; font-size: 14px; list-style: none; } .Blog-Basic .post-footer-list ul li .fa { color: #4e5168; margin-right: 5px; } .Page .Body.bg-pattern { background-image: url(https://www.leadplus.net/hubfs/library/classic/images/resource-bg.jpg); } #BreadCrumb ul.breadcrumb, #BreadCrumb ul.hs-breadcrumb-menu { border-bottom: 1px solid #ebebeb; clear: both; font-size: 12px; font-size: 14px; list-style-type: none; margin-top: 10px; padding-bottom: 15px; padding-left: 0 !important; } #BreadCrumb ul.breadcrumb { margin-top: 0; padding: 15px 0; } #BreadCrumb ul.breadcrumb li, #BreadCrumb ul.hs-breadcrumb-menu li { color: #4a4a4a; display: inline-block; float: none; font-size: 12px; font-weight: 700; } #BreadCrumb ul.breadcrumb li a, #BreadCrumb ul.hs-breadcrumb-menu li a { color: #4a4a4a; font-size: 12px; text-decoration: underline; } #BreadCrumb ul.breadcrumb li:after, #BreadCrumb ul.hs-breadcrumb-menu li:after { content: "/"; margin-left: 3px; margin-right: 3px; } #BreadCrumb ul.breadcrumb li:last-child:after, #BreadCrumb ul.hs-breadcrumb-menu li:last-child:after { content: ""; margin-left: 0; margin-right: 0; } #BreadCrumb ul.breadcrumb li.post span, #BreadCrumb ul.hs-breadcrumb-menu li.post span { color: #4a4a4a; } #BreadCrumb ul.breadcrumb li.hs-breadcrumb-menu-item, #BreadCrumb ul.hs-breadcrumb-menu li.hs-breadcrumb-menu-item { float: none; padding: 0; } #BreadCrumb ul.breadcrumb li .hs-breadcrumb-menu-divider:before, #BreadCrumb ul.hs-breadcrumb-menu li .hs-breadcrumb-menu-divider:before { display: none; } main.bg-pattern #BreadCrumb ul.breadcrumb, main.bg-pattern #BreadCrumb ul.hs-breadcrumb-menu { border-bottom: none; } main.bg-pattern #BreadCrumb ul.breadcrumb a, main.bg-pattern #BreadCrumb ul.breadcrumb li, main.bg-pattern #BreadCrumb ul.hs-breadcrumb-menu a, main.bg-pattern #BreadCrumb ul.hs-breadcrumb-menu li { color: #fff; } #pagetop { bottom: 20px; height: 60px; position: fixed; right: 20px; -webkit-transition: bottom 0.3s ease; transition: bottom 0.3s ease; width: 60px; z-index: 99; } #pagetop.push-topbtn { bottom: 50px; } #pagetop a:hover { text-decoration: none; } #pagetop i { background-color: hsla(0, 0%, 100%, 0.9); border-radius: 30px; -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: table-cell; height: 60px; padding-bottom: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: middle; width: 60px; } #pagetop i:hover { opacity: 0.8; } #pagetop .fa { color: #333; font-size: 40px; text-align: center; } @media (max-width: 959px) { #pagetop { bottom: 15px; left: 15px; } #pagetop, #pagetop i { height: 50px; width: 50px; } #pagetop i { border-radius: 25px; } #pagetop:hover { opacity: 1; } #pagetop .fa { font-size: 2rem; } .Page .Footer { padding-bottom: 30px; padding-top: 30px; } } .overlay-bg { background: #0d1722 50% no-repeat; background-size: cover; position: relative; } .overlay-bg:before { background: rgba(20, 91, 164, 0.75); background: linear-gradient(155deg, rgba(20, 91, 164, 0.75), rgba(20, 91, 164, 0.85)); bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 5; } .mfp-title { margin-top: 10px; } .color { color: #4e5168 !important; } .color .point { background-color: #4e5168 !important; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; display: inline-block; font-size: 16px; font-weight: 500; height: 60px; margin-left: -2px; margin-right: 13px; padding-top: 10px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; width: 60px; } .anchor-link .Row.anchor { margin-bottom: 0; } .anchor-link .Row.anchor a { background: #f2f2f2; border-bottom: 2px solid #fff; border-radius: 5px; color: #707070; display: block; padding: 10px 40px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .anchor-link .Row.anchor a:hover { background-color: #1977b5; color: #fff; text-decoration: none; } .ClickToZoom { cursor: -webkit-zoom-in; cursor: zoom-in; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .ClickToZoom:hover { opacity: 0.8; } .mfp-content .mfp-figure .mfp-bottom-bar { bottom: -5rem !important; height: 5rem; left: 2px !important; top: auto; } .mfp-content .mfp-figure .mfp-bottom-bar .mfp-title { margin-top: 10px; } @media (max-width: 768px) { .mfp-content .mfp-figure .mfp-bottom-bar .mfp-title { font-size: 15px; line-height: 18px; } } .mfp-content .mfp-figure .mfp-close { padding-right: 15px; right: -5px; top: -40px; } .mfp-content .mfp-figure img.mfp-img { padding: 0; } .LP-Basic.Page { padding-top: 0; } .LP-Basic.Page .Hero--small.smallest .Hero-title, .LP-Basic.Page .Hero--small.smallest.mgtop-30, .LP-Basic.Page .LP-Detail-Case .Hero--small.smallest.guest, .LP-Basic.Page .LP-Detail-Case .Hero--small.smallest.interview, .LP-Detail-Case .LP-Basic.Page .Hero--small.smallest.guest, .LP-Detail-Case .LP-Basic.Page .Hero--small.smallest.interview { margin-top: 0; } .LP-Basic .Header { position: static; } .LP-Basic .Footer { padding: 30px 0; } .LP-Basic .LP-Hero .Hero--small.smallest { height: 340px; } .LP-Basic .LP-Hero .Hero--small.smallest .Wrap--narrow { max-width: 1020px; } @media (max-width: 959px) { .Resource-form { padding: 40px; } .Resource-form .hs-form fieldset { margin: 0 auto; } } .LP-Form { background-repeat: no-repeat; background-size: cover; padding: 0 0 30px; position: relative; } .LP-Form .form-title, .LP-Form-title { color: #fff; font-size: 22px; text-align: center; } @media (max-width: 639px) { .LP-Form .form-title, .LP-Form-title { font-size: 18px; } } .LP-Form .hs-form-field { margin-bottom: 20px; } .LP-Form .hs-form-field .inputs-list.multi-container { list-style-type: none; padding-left: 0; } .LP-Form .hs-form-field .inputs-list.multi-container li label span { font-weight: 200; } .LP-Form .hs-form-field .inputs-list.multi-container li label.hs-form-checkbox-display { position: relative; } .LP-Form .hs-form-field .hs-input { background-color: transparent; border: 1px solid #ccc; border: 1px solid hsla(0, 0%, 100%, 0.6); border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; color: #3e3e3e; font-family: "Noto Serif JP", sans-serif; font-size: 15px; font-weight: 200; height: 40px; margin-top: 3px; padding-left: 5px; padding-right: 5px; } .LP-Form .hs-form-field .hs-input::-webkit-input-placeholder { color: hsla(0, 0%, 100%, 0.7); } .LP-Form .hs-form-field .hs-input:-ms-input-placeholder { color: hsla(0, 0%, 100%, 0.7); } .LP-Form .hs-form-field .hs-input:-moz-placeholder, .LP-Form .hs-form-field .hs-input::-moz-placeholder { color: hsla(0, 0%, 100%, 0.7); opacity: 1; } .LP-Form .hs-form-field input.hs-input { color: #fff; height: 40px; width: 100%; } .LP-Form .hs-form-field select.hs-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; background-image: url(//480402.fs1.hubspotusercontent-na1.net/hubfs/480402/library/classic/images/angle-down-gray.png); background-position-x: 98%; background-position-y: 15px; background-repeat: no-repeat; border: 1px solid #ccc; border-radius: 0 !important; -webkit-box-sizing: border-box; box-sizing: border-box; color: hsla(0, 0%, 100%, 0.7) !important; font-size: 15px; height: 40px; line-height: 1; margin-top: 3px !important; padding-left: 5px; padding-right: 0 !important; width: 100% !important; } @media (-ms-high-contrast: active), (-ms-high-contrast: none) { .LP-Form .hs-form-field select.hs-input:-ms-input-placeholder { color: hsla(0, 0%, 100%, 0.7); } } .LP-Form .hs-form-field select.hs-input::-ms-expand { display: none; } .LP-Form .hs-form-field select.hs-input.white-color { color: #fff !important; } .LP-Form .hs-form-field select.hs-input option { color: #4a4a4a !important; } .LP-Form .hs-form-field select::ms-expand { display: none; } .LP-Form .hs-form-field textarea.hs-input { color: #fff; height: inherit; min-height: 130px; width: 100%; } .LP-Form .hs-form-field input.hs-input:focus, .LP-Form .hs-form-field select.hs-input:focus, .LP-Form .hs-form-field textarea.hs-input:focus { border-color: #fff !important; outline: none; } .LP-Form .hs-form-field input[type=email]::-webkit-input-placeholder { color: #c8c8c8; padding-top: 2px; } .LP-Form .hs-form-field input[type=email]:-moz-placeholder { color: #c8c8c8; padding-top: 2px; } .LP-Form .hs-form-field input[type=email]:focus::-webkit-input-placeholder { color: transparent; } .LP-Form .hs-form-field input[type=email]:focus:-moz-placeholder, .LP-Form .hs-form-field input[type=email]:focus::-moz-placeholder { color: transparent; } .LP-Form .hs-form-field input[type=checkbox].hs-input, .LP-Form .hs-form-field input[type=radio].hs-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; border-radius: 0; left: 0; margin: 0; opacity: 0; outline: none; padding: 0; position: absolute; top: 0; } .LP-Form .hs-form-field input[type=checkbox].hs-input + span, .LP-Form .hs-form-field input[type=radio].hs-input + span { padding: 0 0 0 24px; position: relative; } .LP-Form .hs-form-field input[type=checkbox].hs-input + span:after, .LP-Form .hs-form-field input[type=checkbox].hs-input + span:before, .LP-Form .hs-form-field input[type=radio].hs-input + span:after, .LP-Form .hs-form-field input[type=radio].hs-input + span:before { -webkit-box-sizing: border-box; box-sizing: border-box; content: ""; display: inline-block; left: 0; position: absolute; top: 5px; } .LP-Form .hs-form-field input[type=checkbox].hs-input + span:before, .LP-Form .hs-form-field input[type=radio].hs-input + span:before { background-color: transparent; border: 2px solid #fff; border-radius: 4px; height: 15px; width: 15px; z-index: 0; } .LP-Form .hs-form-field input[type=checkbox].hs-input + span:after, .LP-Form .hs-form-field input[type=radio].hs-input + span:after { height: 9px; margin: 5px 8px; width: 6px; z-index: 1; } .LP-Form .hs-form-field input[type=checkbox].hs-input:checked + span:before, .LP-Form .hs-form-field input[type=radio].hs-input:checked + span:before { background-color: red; } .LP-Form .hs-form-field input[type=checkbox].hs-input:checked + span:after, .LP-Form .hs-form-field input[type=radio].hs-input:checked + span:after { border: 2px solid #fff; border-width: 0 2px 2px 0; content: ""; height: 7px; left: 4px; margin: 0; top: 7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 7px; } @media (-ms-high-contrast: active), (-ms-high-contrast: none) { .LP-Form .hs-form-field input[type=checkbox].hs-input + span:after, .LP-Form .hs-form-field input[type=checkbox].hs-input + span:before, .LP-Form .hs-form-field input[type=radio].hs-input + span:after, .LP-Form .hs-form-field input[type=radio].hs-input + span:before { top: 5px; } } .LP-Form .hs-form-field label span { color: #fff; font-size: 15px; font-weight: 700; } .LP-Form .hs-form-field label span.hs-form-required { background-color: red; border-radius: 3px; font-size: 11px; margin-left: 5px; padding-left: 5px; padding-right: 5px; word-break: keep-all; } .LP-Form .hs-form-field .hs-error-msgs { list-style: none; margin: 0; padding-left: 0; } .LP-Form .hs-form-field .hs-error-msgs li { line-height: 18px; } .LP-Form .hs-form-field .hs-error-msgs li label { color: #f20; font-size: 12px; font-weight: 700; margin-top: 5px; } .LP-Form .form-columns-2 .hs-form-field { float: left; width: 50%; } .LP-Form .form-columns-2 .hs-form-field .input { margin-right: 8px; } .LP-Form .form-columns-1 .hs-form-field .input, .LP-Form .form-columns-2 .hs-form-field:last-child .input { margin-right: 0; } .LP-Form .form-columns-1 .hs-form-field .input .hs-input { width: 100%; } .LP-Form .form-columns-1 .hs-form-field select.hs-input { background-position-x: 99%; } .LP-Form .actions { text-align: center; } .LP-Form .hs-privacy_policy_check .inputs-list { list-style: none; text-align: center; } .LP-Form .hs-privacy_policy_check .inputs-list .hs-error-msgs label { text-align: center; } .LP-Form .hs-privacy_policy_check .inputs-list li label { position: relative; } .LP-Form .hs_error_rollup .inputs-list { list-style: none; margin-bottom: 10px; text-align: center; } .LP-Form .hs_error_rollup .inputs-list li label { color: #f20; font-size: 12px; font-weight: 700; margin-top: 5px; } .LP-Form .form-privacy { color: #fff; display: inline-block; font-size: 13px; font-weight: 200; line-height: 20px; margin-bottom: 20px; } .LP-Form .form-privacy img { background-color: #fff; display: block; float: left; margin-right: 10px; width: 75px; } .LP-Form .form-privacy a { color: #fff; text-decoration: underline; } @media (max-width: 639px) { .LP-Form fieldset.form-columns-2 .hs-form-field { float: none !important; width: 100% !important; } .LP-Form fieldset.form-columns-2 .hs-form-field .input { margin-right: 0 !important; } .LP-Form fieldset.form-columns-2 .hs-form-field .input input.hs-input { width: 100% !important; } } .LP-Form.overlay { background-repeat: no-repeat; background-size: cover; padding: 0; position: relative; } .LP-Form.overlay .opacity-bg { background: rgba(25, 116, 210, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .LP-Form.overlay .form_head { position: relative; } .LP-Form.overlay .form_head .form-title { margin-top: 0; } .LP-Form.overlay .form_head .form-subtitle { text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); } .LP-Form.overlay .form_inbound { background-color: rgba(44, 62, 80, 0.9); border-radius: 10px; border-top: none; -webkit-box-shadow: none; box-shadow: none; margin: 0 auto; opacity: 0.9; padding: 40px; width: 100%; } .LP-Form.overlay .form_inbound .form-subtitle, .LP-Form.overlay .form_inbound .form-title { color: #fff !important; margin-top: 0; text-align: center; } .LP-Form.overlay .form_inbound .text { color: #fff !important; } .LP-Form.overlay .form_inbound .hs-form .hs-form-field { margin-bottom: 20px; } .LP-Form.overlay .form_inbound .hs-form fieldset { max-width: none !important; } .LP-Form.overlay .form_inbound .hs-form label span { color: #fff !important; font-weight: 400; } .LP-Form.overlay .form_inbound .hs-form label span.hs-form-required { background-color: red; border-radius: 3px; font-size: 11px; margin-left: 5px; padding-left: 5px; padding-right: 5px; word-break: keep-all; } .LP-Form.overlay .form_inbound .hs-form .hs-error-msgs label { color: red !important; font-weight: 700; } .LP-Form.overlay .form_inbound .hs-form .hs-input { background-color: transparent; border: 1px solid hsla(0, 0%, 100%, 0.6); font-family: "Noto Serif JP", sans-serif; } .LP-Form.overlay .form_inbound .hs-form input.hs-input { height: 40px; } .LP-Form.overlay .form_inbound .hs-form textarea.hs-input { height: inherit; min-height: 130px; } .LP-Form.overlay .form_inbound .hs-form select.hs-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .LP-Form.overlay .form_inbound .hs-form select.hs-input.white-color { color: #fff !important; } .LP-Form.overlay .form_inbound .hs-form select.hs-input option { color: #000 !important; } .LP-Form.overlay .form_inbound .hs-form select.hs-input::-ms-expand { display: none; } .LP-Form.overlay .form_inbound .hs-form input.hs-input, .LP-Form.overlay .form_inbound .hs-form textarea.hs-input { color: #fff; width: 100%; } .LP-Form.overlay .form_inbound .hs-form input.hs-input:focus, .LP-Form.overlay .form_inbound .hs-form input.hs-input:hover, .LP-Form.overlay .form_inbound .hs-form textarea.hs-input:focus, .LP-Form.overlay .form_inbound .hs-form textarea.hs-input:hover { border-color: #fff; } .LP-Form.overlay .form_inbound .hs-form input.hs-input:focus, .LP-Form.overlay .form_inbound .hs-form textarea.hs-input:focus select.hs-input:focus { border-color: #fff !important; outline: none; } .LP-Form.overlay .form_inbound .hs-form .hs-input:-moz-placeholder, .LP-Form.overlay .form_inbound .hs-form .hs-input:-ms-input-placeholder, .LP-Form.overlay .form_inbound .hs-form .hs-input::-moz-placeholder, .LP-Form.overlay .form_inbound .hs-form .hs-input::-webkit-input-placeholder { color: hsla(0, 0%, 100%, 0.7); opacity: 1; } .LP-Form.overlay .form_inbound .hs-form .att, .LP-Form.overlay .form_inbound .hs-form .form-privacy { color: #fff; font-size: 12px !important; } .LP-Form.overlay .form_inbound .hs-form .att a, .LP-Form.overlay .form_inbound .hs-form .form-privacy a { color: #fff; font-size: 12px !important; text-decoration: underline; } .LP-Form.overlay .form_inbound .hs-form .att img, .LP-Form.overlay .form_inbound .hs-form .form-privacy img { background: #fff; } .LP-Form.overlay .form_inbound .hs-form fieldset.form-columns-1 .hs-form-field .input, .LP-Form.overlay .form_inbound .hs-form fieldset.form-columns-2 .hs-form-field:last-child .input { margin-right: 0; } .LP-Form.overlay .form_inbound .hs-form .hs_error_rollup label { margin: 10px 0 20px; text-align: center; } .LP-Form.overlay .form_inbound .hs-form .hs_privacy_policy_check .hs-error-msgs label, .LP-Form.overlay .form_inbound .hs-form .hs_privacy_policy_check .inputs-list .hs-form-booleancheckbox-display { text-align: center; } .LP-Form.overlay .form_inbound .hs-form .hs_privacy_policy_check .inputs-list { padding-left: 0; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input, .LP-Form.overlay .form_inbound .hs-form input[type=radio].hs-input { background: none; border: none; border-radius: 0; margin: 0; outline: none; padding: 0; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input + span, .LP-Form.overlay .form_inbound .hs-form input[type=radio].hs-input + span { padding: 0 0 0 24px; position: relative; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input { left: 0; opacity: 0; position: absolute; top: 0; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input + span:before { background-color: transparent; border: 2px solid #fff; border-radius: 4px; height: 15px; width: 15px; z-index: 0; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input + span:after { height: 9px; margin: 5px 8px; width: 6px; z-index: 1; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input:checked + span:before { background-color: #ec407a; } .LP-Form.overlay .form_inbound .hs-form input[type=checkbox].hs-input:checked + span:after { border: 2px solid #fff; border-width: 0 2px 2px 0; content: ""; height: 7px; left: 4px; margin: 0; top: 7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 7px; } .LP-Form.overlay .form_inbound .hs-form .hs_recaptcha .grecaptcha-badge { margin: auto; } @media (max-width: 960px) { .LP-Form.overlay { padding: 30px; } .LP-Form.overlay .form_inbound { padding: 30px 15px; } } @media (max-width: 640px) { .LP-Form.overlay .form_inbound .form-title { margin-bottom: 10px; } .LP-Form.overlay .form_inbound fieldset.form-columns-1 .hs-form-field .input, .LP-Form.overlay .form_inbound fieldset.form-columns-2 .hs-form-field .input { margin-right: 0; } } @media (max-width: 414px) { .LP-Form.overlay { padding: 15px; } .LP-Form.overlay .form_inbound { padding: 30px 20px; } .LP-Form.overlay .form_inbound .container { padding-left: 0; padding-right: 0; } } @media (min-width: 960px) { .LP-Download .Resource-content { padding-left: 0; } } .LP-FooterForm .LP-Form { z-index: 10; } .LP-Subcription .Header { height: 80px; } .LP-Subcription .Header .Logo { margin: 0 auto; } .LP-Subcription-form { z-index: 10; } @media (max-width: 639px) { .LP-Subcription-form { padding-left: 10px; padding-right: 10px; } } @media (max-width: 479px) { .LP-Subcription-form { padding-left: 5px; padding-right: 5px; } } .LP-Subcription-form .LP-Form .title { color: #fff; } .LP-Subcription-form .LP-Form .hs-richtext .title_main { display: none; } .LP-Subcription-form .LP-Form .hs-richtext .text { font-size: 16px; margin-bottom: 20px; margin-top: 0; } @media (max-width: 479px) { .LP-Subcription-form .LP-Form.overlay { padding: 0; } } .LP-Subcription-image { height: 600px; margin-bottom: -120px; margin-left: auto; margin-right: auto; position: relative; } @media (min-width: 1201px) { .LP-Subcription-image { width: 520px; } } @media (max-width: 959px) { .LP-Subcription-image { display: none; } } .LP-Subcription-image #letters-img img { -webkit-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .LP-Subcription-image #letters-img:hover .left-img > img { -webkit-transform: translate(-20px, 10px); transform: translate(-20px, 10px); } .LP-Subcription-image #letters-img:hover .right-img > img { -webkit-transform: translate(20px, 10px); transform: translate(20px, 10px); } .LP-Subcription-image #letters-img:hover .middle-img > img { -webkit-transform: translateY(-350px); transform: translateY(-350px); } .LP-Subcription-image #letters-img .left-img { bottom: 0; left: 5%; position: absolute; top: 90px; width: 40%; z-index: 9998; } .LP-Subcription-image #letters-img .left-img > img { border: 1px solid #f2f2f2; } .LP-Subcription-image #letters-img .middle-img { bottom: 0; -webkit-box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); display: block; height: 540px; left: 23%; overflow: hidden; position: absolute; top: 40px; width: 300px; z-index: 9999; } .LP-Subcription-image #letters-img .right-img { bottom: 0; left: 56%; position: absolute; top: 90px; width: 40%; z-index: 9998; } .LP-Subcription-image #letters-img .right-img > img { border: 1px solid #f2f2f2; } @media (max-width: 1200px) { .LP-Subcription-image #letters-img { width: 100%; } .LP-Subcription-image #letters-img .left-img { width: 35%; } .LP-Subcription-image #letters-img .middle-img { height: 500px; left: 21%; width: 280px; } .LP-Subcription-image #letters-img .right-img { width: 35%; } } @media (max-width: 1040px) { .LP-Subcription-image #letters-img:hover .middle-img > img { -webkit-transform: translateY(-300px); transform: translateY(-300px); } .LP-Subcription-image #letters-img .left-img { width: 28%; } .LP-Subcription-image #letters-img .middle-img { height: 410px; left: 21%; width: 225px; } .LP-Subcription-image #letters-img .right-img { width: 28%; } } @media (max-width: 960px) { .LP-Subcription-image #letters-img { width: auto; } .LP-Subcription-image #letters-img :hover .middle-img > img { -webkit-transform: translateY(-460px); transform: translateY(-460px); } .LP-Subcription-image #letters-img .left-img { display: none; } .LP-Subcription-image #letters-img .middle-img { height: 550px; left: 10%; width: 325px; } .LP-Subcription-image #letters-img .right-img { display: none; } } @media (max-width: 820px) { .LP-Subcription-image #letters-img :hover .middle-img > img { -webkit-transform: translateY(-400px); transform: translateY(-400px); } .LP-Subcription-image #letters-img .middle-img { height: 500px; left: 15%; width: 275px; } } @media (max-width: 767px) { .LP-Subcription-image #letters-img, .LP-Subcription-image #letters-img .middle-img { display: none; } } #Sidebar_Content .Longform-body > .hs_cos_wrapper .LP-Custom-Module:first-child { padding-top: 0; } #Sidebar_Content .Longform-body .LP-Basic-Content .Wrap, #Sidebar_Content .Longform-body .LP-Flex .Wrap, #Sidebar_Content .Longform-body .LP-TwoColumn .Wrap { max-width: none; padding-left: 0; padding-right: 0; width: 100%; } #Sidebar_Content .Longform-body .LP-Custom-Module .ColumnContentSection-content, #Sidebar_Content .Longform-body .LP-Custom-Module .ColumnContentSection-content .ColumnContentSection-body, #Sidebar_Content .Longform-body .LP-Flex .ColumnContentSection-content, #Sidebar_Content .Longform-body .LP-Flex .ColumnContentSection-content .ColumnContentSection-body { text-align: left; } #Sidebar_Content .Longform .LP-Basic-Content .Section-title, #Sidebar_Content .Longform .LP-FAQ .Section-title { font-weight: 400; text-align: left; } #Sidebar_Content .Longform .LP-Basic-Content .Longform-content, #Sidebar_Content .Longform .LP-FAQ .Longform-content { position: relative; z-index: 11; } #Sidebar_Content #continuous-user-segmentation-personas { padding-top: 0; } .Web-Sidebar .LP-ListResources.ColumnContentSection .Column-item { padding-bottom: 60px; } .Web-Sidebar .LP-ListResources.ColumnContentSection .Column-item .ColumnContentSection-icon.thumb { max-height: 320px; max-width: 220px; } .Web-Sidebar .LP-ListResources.ColumnContentSection .Column-item .ColumnContentSection-title { font-size: 18px; font-weight: 600; font-weight: 500; line-height: 28px; line-height: 26px; } .Web-Sidebar .LP-TwoColumn .Wrap-content { -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .Web-Sidebar .LP-TwoColumn .Wrap-content > div { padding: 0; width: 100% !important; } .Web-Sidebar .LP-TwoColumn .Wrap-content .Section-image { margin-top: 30px; } .Web-Sidebar .LP-TwoColumn .Wrap-content .Sestion-content-text p:first-child { padding-top: 0; } .Web-Sidebar .LP-Quote .Longform-content { width: auto; } .Web-Sidebar .LP-Quote .block-medium { width: 100%; } .Web-Sidebar .LP-Quote blockquote p { color: inherit; } .System-Basic-pasword #hs-pwd-widget-password { height: 48px !important; line-height: 48px; margin-right: 15px; margin-top: 0 !important; width: 300px; } .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h1 { display: none; } .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h2 { font-size: 20px; font-weight: 500; font-weight: 700; line-height: 30px; margin-bottom: 0; } @media (max-width: 639px) { .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h2 { font-size: 18px; line-height: 28px; } } .System-Basic-emailbackup .hs_cos_wrapper_type_email_simple_subscription #submitbutton { margin-top: 20px; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h1 { display: none; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { font-size: 20px; font-weight: 500; font-weight: 700; line-height: 30px; margin-bottom: 0; margin-top: 0; } @media (max-width: 639px) { .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { font-size: 18px; line-height: 28px; } } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header p:last-child { margin-top: 0; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions p { font-size: 16px; font-weight: 400; line-height: 24px; } .System-Basic-emailsubpre .widget-type-email_simple_subscription .cell-wrapper, .System-Basic-emailsubpre .widget-type-email_subscriptions .cell-wrapper, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation .cell-wrapper { margin-bottom: 0; } .System-Basic-emailsubpre .widget-type-email_simple_subscription h1, .System-Basic-emailsubpre .widget-type-email_simple_subscription h2, .System-Basic-emailsubpre .widget-type-email_simple_subscription p, .System-Basic-emailsubpre .widget-type-email_subscriptions h1, .System-Basic-emailsubpre .widget-type-email_subscriptions h2, .System-Basic-emailsubpre .widget-type-email_subscriptions p, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h1, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h2, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation p { font-size: 20px; font-weight: 400; line-height: 25px; margin: 1px 0 4px; } .System-Basic-emailsubpre html body .page-header { margin: 0; padding-bottom: 1em; } .System-Basic-emailsubpre .widget-type-email_simple_subscription h2, .System-Basic-emailsubpre .widget-type-email_simple_subscription p, .System-Basic-emailsubpre .widget-type-email_subscriptions h2, .System-Basic-emailsubpre .widget-type-email_subscriptions p, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h2, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation p { font-size: 14px; } .System-Basic-emailsubpre .email-prefs .item { cursor: pointer !important; margin: 20px 0; padding-bottom: 1px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .System-Basic-emailsubpre label { cursor: pointer; cursor: hand; } .System-Basic-emailsubpre .email-prefs .item.disabled { cursor: not-allowed; opacity: 0.6; } .System-Basic-emailsubpre .email-prefs .item .item-inner * { color: #444; } .System-Basic-emailsubpre .email-prefs .item .item-inner { background: #f7f7f7; border: 1px solid #e4e4e4; border-radius: 8px; margin-top: 0; overflow: hidden; padding: 15px; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: background; transition-property: background; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .System-Basic-emailsubpre .email-prefs .item .item-inner p { font-size: 15px; font-weight: 700; font-weight: 200; line-height: 18px; } .System-Basic-emailsubpre .email-prefs .item .item-inner.hovered { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); } .System-Basic-emailsubpre .email-prefs .item .item-inner.highlighted-subscription, .System-Basic-emailsubpre .email-prefs .item .item-inner.highlighted-subscription.selected { background: #fff1ee; } .System-Basic-emailsubpre .email-prefs .item .item-inner.selected { background: #f0f7fc; border: 1px solid #e0e7ec; } .System-Basic-emailsubpre .email-prefs .item.disabled .item-inner.hovered { -webkit-box-shadow: none; box-shadow: none; } .System-Basic-emailsubpre .checkbox-row { margin-top: 0; overflow: hidden; } .System-Basic-emailsubpre .checkbox-row span.fakelabel { text-transform: normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; } .System-Basic-emailsubpre .checkbox-row input { float: left; margin: 0; padding: 0; vertical-align: middle; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .System-Basic-emailsubpre .checkbox-row input { position: relative; top: 6px; } } .System-Basic-emailsubpre p.header { margin-left: 0; } .System-Basic-emailsubpre .checkbox-row span.fakelabel span { float: left; font-weight: 700; margin-left: 7px; vertical-align: top; } .System-Basic-emailsubpre .email-prefs .item p { clear: both; margin: 5px 20px 0; } .System-Basic-emailsubpre .email-prefs .thumbnail { bottom: 1px; position: absolute; right: 6px; } .System-Basic-emailsubpre .email-prefs .thumbnail.float-top { top: 7px; } .System-Basic-emailsubpre .subscribe-options { margin-bottom: 12px; overflow: hidden; } .System-Basic-emailsubpre .subscribe-options label { font-size: 13px; margin-left: 0; margin-right: 16px; } .System-Basic-emailsubpre .subscribe-options label span { font-size: 14px; font-weight: 400; font-weight: 700; margin-left: 3px; } .System-Basic-emailsubpre #email-prefs-form, .System-Basic-emailsubpre #submitbutton { margin-bottom: 0; } .System-Basic-emailsubpre input.hs-input.email-edit { font-size: 20px; line-height: 25px; margin: 0 0 10px; width: 450px; } .System-Basic-emailsubpre a.email-edit { background-color: #f90; border: 2px solid #f90; border-radius: 3px; color: #fff; cursor: pointer; display: inline-block; font-size: 18px; font-weight: 700; margin-left: 10px; padding: 5px 15px; text-align: center; text-decoration: none; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .System-Basic-emailsubpre a.email-edit:hover { opacity: 0.7; } .LP-Basic-Content ol li + li { margin-top: 0.8rem; } .LP-Custom-Module ul.list { margin-bottom: 30px; padding: 0; } .LP-Custom-Module ul.list li { font-size: 0.9rem; list-style: none; margin-bottom: 0.7rem; padding-left: 1em; position: relative; } .LP-Custom-Module ul.list li:before { color: #4e5168; content: "\f0da"; display: block; font-family: FontAwesome; left: 0; position: absolute; } .LP-Custom-Module ul.list li:last-child { margin-bottom: 0; } .LP-Custom-Module .Section-bg.has-img { background: no-repeat top; background-size: cover; } .LP-Detail-Case .Case-header-lead .lead { border-left: 3px solid #ccc; margin-bottom: 0; margin-top: 0; padding-left: 35px; } @media (max-width: 959px) { .LP-Detail-Case .Case-header-logo { text-align: center; } .LP-Detail-Case .Case-content-company { border-top: 1px solid #ddd; padding-top: 40px; } .LP-Detail-Case .Case-content-company .logo { text-align: center; } } .LP-Detail-Case .Case-content-company p { font-size: 15px; } .LP-Detail-Case .Case-content-company p strong { font-weight: 500; } .LP-Detail-Case .Case-content-text figure figcaption { font-size: 15px; line-height: 20px; } @media (max-width: 767px) { .LP-Detail-Case .Case-content-text figure figcaption { margin-top: 5px; text-align: left; } .LP-Detail-Case .Case-content-text figure { margin-left: 0; margin-right: 0; } } .LP-Detail-Case .Case-content-text .tag { border-left: 4px solid #4e5168; margin-bottom: 10px; padding-left: 10px; -webkit-transition: all 0.3s; transition: all 0.3s; } .LP-Detail-Case #add_summary { background-color: #eee; margin-bottom: 30px; padding: 15px; } .LP-Detail-Case #add_summary .add_block .add_box { background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(30%, transparent), to(rgba(0, 0, 0, 0.04))); background: #fff linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.04)); border-radius: 3px; -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); margin: 0; padding: 3px; } .LP-Detail-Case #add_summary .add_block .add_box + .add_box { margin-top: 28px; } .LP-Detail-Case #add_summary .add_block .add_box.problem { position: relative; } .LP-Detail-Case #add_summary .add_block .add_box.problem:after { border-color: #fbbc09 transparent transparent; border-style: solid; border-width: 16px 20px 0; bottom: -22px; content: ""; height: 0; margin-right: -16px; position: absolute; right: 50%; width: 0; } .LP-Detail-Case #add_summary .add_block .add_box.problem dt { background-color: #004896; background: #004896 -webkit-gradient(linear, left top, left bottom, color-stop(30%, transparent), to(rgba(0, 0, 0, 0.06))); background: #004896 linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.06)); } .LP-Detail-Case #add_summary .add_block .add_box.problem dd strong { color: #004896; } .LP-Detail-Case #add_summary .add_block .add_box.result dt { background-color: #0085ce; background: #0085ce -webkit-gradient(linear, left top, left bottom, color-stop(30%, transparent), to(rgba(0, 0, 0, 0.06))); background: #0085ce linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.06)); } .LP-Detail-Case #add_summary .add_block .add_box.result dd strong { color: #0085ce; } .LP-Detail-Case #add_summary .add_block .add_box dt { border-radius: 2px; color: #fff; display: block; font-weight: 700; padding: 4px 6px 5px; text-align: center; } .LP-Detail-Case #add_summary .add_block .add_box dt .fa { font-size: 90%; margin-right: 8px; opacity: 0.8; } .LP-Detail-Case #add_summary .add_block .add_box dd { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; } .LP-Detail-Case #add_summary .add_block .add_box dd ol, .LP-Detail-Case #add_summary .add_block .add_box dd ul { margin: 0; padding: 10px 10px 10px 0; } .LP-Detail-Case #add_summary .add_block .add_box dd ol li, .LP-Detail-Case #add_summary .add_block .add_box dd ul li { margin-bottom: 10px; text-indent: 0; } .LP-Detail-Case #add_summary .add_block .add_box dd ol li:last-child, .LP-Detail-Case #add_summary .add_block .add_box dd ul li:last-child { margin-bottom: 0; } .LP-Detail-Case #add_summary .add_block .add_box dd ol li strong, .LP-Detail-Case #add_summary .add_block .add_box dd ul li strong { margin-left: 2px; margin-right: 2px; } .LP-Detail-Case #add_summary a.add_service_link { color: #666; text-decoration: none; } .LP-Detail-Case #add_summary a .add_service:hover { opacity: 0.7; } .LP-Detail-Case #add_summary .add_service { border-top: 1px dotted #ccc; margin: 15px 0 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .LP-Detail-Case #add_summary .add_service > .box, .LP-Detail-Case #add_summary .add_service > dl { background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(30%, transparent), to(rgba(0, 0, 0, 0.04))); background: #fff linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.04)); border-radius: 3px; -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); margin: 15px 0 0; padding: 3px; } .LP-Detail-Case #add_summary .add_service > .box dt, .LP-Detail-Case #add_summary .add_service > dl dt { background-color: #35b7ff; background: #35b7ff -webkit-gradient(linear, left top, left bottom, color-stop(30%, transparent), to(rgba(0, 0, 0, 0.06))); background: #35b7ff linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.06)); border-radius: 2px; color: #fff; display: block; font-weight: 700; padding: 4px 6px 5px; text-align: center; } .LP-Detail-Case #add_summary .add_service > .box dt .fa, .LP-Detail-Case #add_summary .add_service > dl dt .fa { font-size: 90%; margin-right: 8px; opacity: 0.8; } .LP-Detail-Case #add_summary .add_service > .box { padding: 20px; } .LP-Detail-Case #add_summary .add_service > dl dd ol, .LP-Detail-Case #add_summary .add_service > dl dd ul { margin: 0; padding: 10px 10px 10px 0; } .LP-Detail-Case #add_summary .add_service > dl dd ol li, .LP-Detail-Case #add_summary .add_service > dl dd ul li { text-indent: 0; } @media (min-width: 820px) { .LP-Detail-Case #add_summary .add_service { border: none; margin: 0; } .LP-Detail-Case #add_summary .add_block, .LP-Detail-Case #add_summary .add_block .add_box { -ms-flex-pack: justify; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; } .LP-Detail-Case #add_summary .add_block .add_box { width: 48.5%; } .LP-Detail-Case #add_summary .add_block .add_box + .add_box { margin-top: 0; } .LP-Detail-Case #add_summary .add_block .add_box.problem:after { border-color: transparent transparent transparent #fbbc09; border-width: 20px 0 20px 16px; bottom: 50%; margin-bottom: -20px; margin-right: 0; right: -5.2%; } .LP-Detail-Case #add_summary .add_block .add_box dt { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; line-height: 1.1; padding: 5px 5px 10px; text-align: center; width: 36px; } .LP-Detail-Case #add_summary .add_block .add_box dt .fa { line-height: 1; margin-bottom: 6px; margin-right: 0; } .LP-Detail-Case #add_summary .add_block .add_box dd { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; } } .LP-FAQ .Section-content { background: #fff; background: transparent; overflow: auto; position: fixed; -webkit-transform: translateZ(0) translateX(100%); transform: translateZ(0) translateX(100%); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; z-index: 1; } .LP-FAQ .Section-content .Section-FAQ { display: block; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item { background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); margin-bottom: 30px; padding-left: 0; -webkit-transition: -webkit-box-shadow 0.2s; transition: -webkit-box-shadow 0.2s; transition: box-shadow 0.2s; transition: box-shadow 0.2s, -webkit-box-shadow 0.2s; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item:last-child { margin-bottom: 0; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item .FAQ-title { display: block; font-size: 20px; line-height: 1.2; margin: 0; padding: 30px 65px 30px 30px; position: relative; } @media (max-width: 639px) { .LP-FAQ .Section-content .Section-FAQ .FAQ-item .FAQ-title { font-size: 18px; } } .LP-FAQ .Section-content .Section-FAQ .FAQ-item .FAQ-title i { float: right; font-size: 1.5em; position: absolute; right: 30px; top: 25px; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item .FAQ-title:hover { text-decoration: none; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item:before { display: none; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item .FAQ-content { display: none; padding: 0 30px 30px; } .LP-FAQ .Section-content .Section-FAQ .FAQ-item.content-visible .FAQ-title i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (min-width: 820px) { .LP-FAQ .Section-content { height: auto; overflow: visible; padding: 0; position: static; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } } @media (max-width: 819px) { .LP-FAQ .Section-content { position: relative; -webkit-transform: none; transform: none; } .LP-FAQ:not(:last-child) { padding-bottom: 10px; } .LP-FAQ .Longform-content { padding-left: 0; padding-right: 0; } } .LP-Flex.default .Row > div > a { display: block; height: 100%; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .LP-Flex.default .Row > div > a:hover { opacity: 0.8; text-decoration: none; } .LP-Flex.default .Row > div > a:hover .ColumnContentSection-title { color: #5dbfd0; } .LP-Flex.default.flex-border .Row { -ms-flex-align: normal; -webkit-box-align: normal; align-items: normal; } .LP-Flex.default.flex-border .Row > div > a { -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25); height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .LP-Flex.default.flex-border .Row > div > a .ColumnContentSection-image { height: auto; margin: 0 0 10px; width: 100%; } .LP-Flex.default.flex-border .Row > div > a .ColumnContentSection-title { font-size: 18px; font-weight: 400; line-height: 28px; margin-bottom: 10px; } @media (max-width: 959px) { .LP-Flex.default.flex-border .Row .Column--medium-6 { padding-bottom: 45px; } } .LP-Flex .Section-content .ColumnContentSection-image { margin-bottom: 10px; } .LP-Flex.title-bold .Section-content .TileCard-title { font-weight: 700; } .LP-Flex.LPV2-Flex .Section-content .TileCard-title { max-width: 200px; } .LP-Flex.LPV2-Flex .Section-content .TileCard-subtitle { font-size: 16px; line-height: 24px; z-index: 10; } .LP-Flex .Section-body.BorderLine .ColumnContentSection, .LP-Flex .Section-body.default .ColumnContentSection { text-align: center; } .LP-Flex .Section-body.BorderLine .ColumnContentSection-awesome, .LP-Flex .Section-body.default .ColumnContentSection-awesome { -ms-flex-pack: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; border: 3px solid #4e5168; border-radius: 50%; display: -ms-flexbox; display: -webkit-box; display: flex; height: 120px; -webkit-box-pack: center; justify-content: center; margin: auto auto 20px; text-align: center; width: 120px; } @media (max-width: 767px) { .LP-Flex .Section-body.BorderLine .ColumnContentSection-awesome, .LP-Flex .Section-body.default .ColumnContentSection-awesome { height: 80px; width: 80px; } .LP-Flex .Section-body.BorderLine .ColumnContentSection-awesome i, .LP-Flex .Section-body.default .ColumnContentSection-awesome i { font-size: 40px; } } .LP-Flex .Section-body.BorderLine .ColumnContentSection-title, .LP-Flex .Section-body.default .ColumnContentSection-title { text-align: center; } .LP-Flex.BorderLine .Section-body .Row { -ms-flex-align: normal; -webkit-box-align: normal; align-items: normal; } .LP-Flex.BorderLine .Section-body .Row .ColumnContentSection { background-color: #fff; -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25); height: 100%; padding: 20px; width: 100%; } .LP-Flex.BorderLine .Section-body .Row .ColumnContentSection ul { padding-left: 0; } .LP-Flex .SideView .Row .Column .ColumnContentSection-header { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; margin-bottom: 20px; } .LP-Flex .SideView .Row .Column .ColumnContentSection-title { margin-left: 10%; margin-top: 0; } .LP-Flex .SideView .Row .Column .ColumnContentSection-title:after { display: none; } .LP-Footer-Popup .customizer-popup { bottom: 0; -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); display: none; position: fixed; right: 0; z-index: 999; } .LP-Footer-Popup .customizer-popup:before { background: #4e5168; background: -webkit-gradient(linear, left top, right top, from(#4e5168), to(#468fdb)); background: linear-gradient(90deg, #4e5168, #468fdb); content: ""; display: block; height: 5px; } .LP-Footer-Popup .customizer-popup .customizer-popup-content { background: #fff; position: relative; } .LP-Footer-Popup .customizer-popup .customizer-popup-content .hs-cta-img { display: block; } .LP-Footer-Popup .customizer-popup .customizer-popup-content .exit-btn { background-image: url(//480402.fs1.hubspotusercontent-na1.net/hubfs/480402/library/classic/images/popup-exit.png); height: 40px; left: -20px; position: absolute; top: -20px; width: 40px; z-index: 99; } .LP-Footer-Popup .customizer-popup .customizer-popup-content .exit-btn:hover { cursor: pointer; } @media (max-width: 639px) { .LP-Footer-Popup .customizer-popup .customizer-popup-content .exit-btn { background: none; left: auto; right: 0; top: -45px; } .LP-Footer-Popup .customizer-popup .customizer-popup-content .exit-btn:after { background-color: #fff; border: 1px solid #ebebeb; color: #555; content: "\f00d"; display: block; font-family: FontAwesome; font-size: 22px; font-style: normal; font-weight: 400; padding: 5px; text-align: center; text-decoration: inherit; } } .LP-Footer-Popup .customizer-popup .customizer-btn { background-color: #464646; border-bottom-right-radius: 5px; border-top-right-radius: 5px; bottom: 200px; color: #fff; height: 60px; left: -120px; position: fixed; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; z-index: 999; } .LP-Footer-Popup .customizer-popup .customizer-btn img { padding: 11px; } .LP-Footer-Popup .customizer-popup .customizer-btn span { padding-right: 15px; } .LP-Footer-Popup .customizer-popup .customizer-btn a { color: #fff; line-height: 60px; padding-left: 15px; text-decoration: none; } .LP-Footer-Popup .customizer-popup .customizer-btn:hover { left: 0; } @media (max-width: 767px) { #download_popup_widget { display: none !important; } } #download_popup_widget.download_popup_open { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: download_popup_show; animation-name: download_popup_show; display: table; } #download_popup_widget.download_popup_hide { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: download_popup_hide; animation-name: download_popup_hide; display: none; } #download_popup_widget.LP-Footer-Popup .customizer-popup { display: block; } .LP-FormPopup { display: none; opacity: 0; } .LP-FormPopup .mfp-container { display: table; padding: 0; } .LP-FormPopup .form-box { background: #ebebeb; border-radius: 5px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); -webkit-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; max-width: 100%; max-width: 540px; padding: 3em 3.5em; position: relative; vertical-align: middle; width: 30em; } @media (max-width: 767px) { .LP-FormPopup .form-box { padding: 2em; } } @media (max-width: 639px) { .LP-FormPopup .form-box { max-height: 300px; overflow: scroll; width: 90%; } } @media (max-width: 479px) { .LP-FormPopup .form-box { padding: 1em; width: 100%; } } .LP-FormPopup .form-box a.close-modal { border-radius: 0.33em; cursor: pointer; position: absolute; right: 0; text-decoration: none; top: 0; z-index: 1000; } .LP-FormPopup .form-box a.close-modal:hover { opacity: 0.7; text-decoration: none; } .LP-FormPopup .form-box a.close-modal:before { -ms-flex-pack: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; background: transparent; color: #bbb; content: "×"; display: -ms-inline-flexbox; display: -webkit-inline-box; display: inline-flex; font-size: 25px; font-weight: 400; height: 40px; -webkit-box-pack: center; justify-content: center; line-height: 25px; width: 40px; } .LP-FormPopup .form-box input::-webkit-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input::-moz-placeholder { color: #ddd; } .LP-FormPopup .form-box input:-ms-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input::-ms-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input::placeholder { color: #ddd; } .LP-FormPopup .form-box input:-ms-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input::-ms-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input:hover:-ms-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input:hover::-webkit-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input:hover::-moz-placeholder { color: #ddd; } .LP-FormPopup .form-box input:hover::-ms-input-placeholder { color: #ddd; } .LP-FormPopup .form-box input:hover::placeholder { color: #ddd; } .LP-FormPopup .popup-info-form .form-title { display: block; font-size: 20px; font-weight: 700; margin-bottom: 0; } .LP-FormPopup .popup-info-form .submitted-message { margin-top: 10px; } .LP-FormPopup .popup-info-form .submitted-message p { margin: 0; } .LP-FormPopup #hs_form_target_form_popup .text br { display: none; } .LP-FormPopup #hs_form_target_form_popup ul { list-style: none; margin: 0; padding: 0; } .LP-FormPopup #hs_form_target_form_popup .hs_error_rollup li, .LP-FormPopup #hs_form_target_form_popup .hs_privacy_policy_check .hs-error-msgs li { text-align: center; } .LP-FormPopup #hs_form_target_form_popup .hs-form-booleancheckbox { font-size: 14px; font-weight: 500; } .LP-FormPopup #hs_form_target_form_popup .hs-form-booleancheckbox input[type=checkbox] { background-color: transparent; border-radius: 4px; display: inline-block; height: 15px; margin-right: 5px; width: 15px; } .LP-FormPopup #hs_form_target_form_popup .hs-form-booleancheckbox label { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-inline-flexbox; display: -webkit-inline-box; display: inline-flex; } .LP-FormPopup #hs_form_target_form_popup .att { font-size: 12px; } .LP-FormPopup #hs_form_target_form_popup .att a:first-child { float: left; margin-right: 5px; } .LP-FormPopup #hs_form_target_form_popup .hs_recaptcha { margin-bottom: 20px; margin-top: 20px; } .LP-FormPopup #hs_form_target_form_popup .grecaptcha-badge { margin-left: auto; margin-right: auto; text-align: center; } .LP-FormPopup #hs_form_target_form_popup .hs-button { -webkit-box-shadow: none; box-shadow: none; font-weight: 400; height: auto; line-height: 1; padding: 0.6em 1.7em; width: 100%; } .LP-FormPopup #hs_form_target_form_popup .hs_privacy_policy_check { margin-bottom: 0; } .LP-FormPopup #hs_form_target_form_popup .hs_email { margin-bottom: 15px; } .LP-FormPopup #hs_form_target_form_popup .hs_email label, .LP-FormPopup #hs_form_target_form_popup label { color: #666; display: block; font-size: 15px; font-weight: 600; padding-top: 0.8em; } .LP-FormPopup #hs_form_target_form_popup input { border: 1px solid #ddd; font-size: 16px; line-height: 1; margin-right: 0; padding-bottom: 7px; padding-top: 7px; width: 100%; } .LP-FormPopup #hs_form_target_form_popup .input { margin-right: 0; } .LP-FormPopup #hs_form_target_form_popup .hs-error-msgs label { color: #f20; font-size: 12px; font-weight: 700; line-height: 1.4; margin-bottom: 5px; margin-top: 5px; padding-top: 0; } .LP-FormPopup #hs_form_target_form_popup .hs-form-required { color: red; } .LP-FormPopup #hs_form_target_form_popup .hs-richtext { font-size: 14px; font-weight: 200; line-height: 1.8; } main.Body.fillter-blur { -webkit-filter: blur(2px); filter: blur(2px); } .LP-Google-Search-Result .Wrap { min-height: 200px; } .LP-Google-Search-Result .gsc-above-wrapper-area, .LP-Google-Search-Result .gsc-adBlock, .LP-Google-Search-Result .gsc-resultsHeader { display: none !important; } .LP-Google-Search-Result .gsc-webResult.gsc-result { border-bottom: 1px solid #ddd !important; margin-top: 10px; padding-bottom: 0; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-image, .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title a.gs-title { -webkit-transition: all 0.3s; transition: all 0.3s; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-image:hover, .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title a.gs-title:hover { opacity: 0.7 !important; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title, .LP-Google-Search-Result .gsc-webResult.gsc-result a.gs-title { font-family: "Noto Serif JP", sans-serif; height: 25px !important; text-decoration: none; } .LP-Google-Search-Result .gsc-webResult.gsc-result a.gs-title { font-size: 18px; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gsc-url-top div.gs-visibleUrl { font-size: 16px; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result { border: none; font-family: "Noto Serif JP", sans-serif; margin-bottom: 20px; margin-top: 0; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result td { border: none; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result .gsc-table-cell-snippet-close { border: none; padding-left: 8px; padding-top: 0; } .LP-Google-Search-Result .gsc-cursor-box.gs-bidi-start-align { margin-top: 20px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box { margin-left: 0; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page { background-color: #4e5168; border: none; color: #fff; margin-right: 12px; padding: 6px 8px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { background-color: #d9d9d9; color: #3e3e3e; font-weight: 400; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page:hover { text-decoration: none; } .LP-Hero.LP-Hero-staff .Hero--staff06 { background-position: center 10%; } .LP-Hero .Wrap--narrow { max-width: 920px; } .LP-Hero .Hero--small.smallest { background-position: 50%; } .LP-Hero .Hero-html .cta-list { -ms-flex-pack: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; } .LP-Hero .Hero-html .cta-list li { list-style-type: none; margin-bottom: 5px; margin-top: 5px; } .LP-Hero .Hero-html .cta-list .pager-load-more a, .LP-Hero .Hero-html .cta-list a, .LP-Hero .Hero-html .cta-list a.Button--large, .pager-load-more .LP-Hero .Hero-html .cta-list a { background-color: hsla(0, 0%, 100%, 0.15); border-color: #fff; color: #fff; margin: 0 10px; min-width: 210px; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } .LP-Hero .Hero-html .cta-list .pager-load-more a:hover, .LP-Hero .Hero-html .cta-list a.Button--large:hover, .LP-Hero .Hero-html .cta-list a:hover, .pager-load-more .LP-Hero .Hero-html .cta-list a:hover { opacity: 0.7; } .Page:not(.LP-Basic) .LP-Hero.has-topmenu .Hero--small.smallest { margin-top: -87px; padding-top: 87px; } .LP-List-Case .Row { -ms-flex-align: normal; -webkit-box-align: normal; align-items: normal; } .LP-List-Case .Row:last-child { margin-bottom: 0; } .LP-List-Case .Card { border-radius: 0; } .LP-List-Case .ListCaseItem { background-color: #fff; border: 4px solid #eee; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; text-align: center; } .LP-List-Case .ListCaseItem a { display: block; height: 100%; padding: 30px 20px; } .LP-List-Case .ListCaseItem a:hover { opacity: 0.7; text-decoration: none; } .LP-List-Case .ListCaseItem a:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .LP-List-Case .ListCaseItem-logo { -webkit-box-sizing: border-box; box-sizing: border-box; display: table; height: 90px; margin: 0; width: 100%; } .LP-List-Case .ListCaseItem-logo div { display: table-cell; max-width: 280px; vertical-align: middle; } .LP-List-Case .ListCaseItem-logo div img { -webkit-box-sizing: border-box; box-sizing: border-box; height: auto !important; max-width: 65%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; width: auto !important; } @media (max-width: 1199px) { .LP-List-Case .ListCaseItem-content br.responsive { display: none; } } .LP-List-Case .ListCaseItem-title { color: #4e5168; margin-bottom: 20px; margin-top: 20px; } .LP-List-Case .ListCaseItem-body { color: #4a4a4a; } @media (min-width: 960px) { .LP-ListResources.ColumnContentSection .Column-item { padding-bottom: 100px; } } .LP-ListResources .ColumnContentSection-icon.thumb { background-color: #fff; -webkit-box-shadow: 0 0 6px 3px hsla(0, 0%, 100%, 0.3); box-shadow: 0 0 6px 3px hsla(0, 0%, 100%, 0.3); max-height: 409px; max-width: 280px; -webkit-transition: all 0.3s; transition: all 0.3s; } .LP-ListResources .ColumnContentSection-icon.thumb.over { opacity: 0.4; } @media (max-width: 374px) { .LP-ListResources .ColumnContentSection-icon.thumb { height: auto; } } .LP-ListResources .ColumnContentSection-title:after { display: none; } .LP-LoadingSkills section.loading-circle .circle { height: 200px; margin: 0 auto; width: 200px; } .LP-LoadingSkills section.loading-circle .circle svg { margin: -20%; } @media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) { .LP-LoadingSkills .skills .loading-circle .circle svg { -webkit-transform: scale(1.4); transform: scale(1.4); } } @supports (-ms-ime-align: auto) { .LP-LoadingSkills .skills .loading-circle .circle svg { -webkit-transform: scale(1.4); transform: scale(1.4); } } .LP-LoadingSkills .skills { text-align: center; } .LP-LoadingSkills .skills .circle { display: none; } .LP-LoadingSkills .skills .loader { height: auto; max-width: 200px; } .LP-LoadingSkills .skills .loading-circle { margin: 0 20px; } .LP-LoadingSkills .skills .loading-circle .circle { display: block; height: 200px; margin: 0 auto; width: 200px; } .LP-LoadingSkills .skills .loading-circle .circle svg { margin: -20%; } .LP-LoadingSkills .skills .loader1, .LP-LoadingSkills .skills .loader2, .LP-LoadingSkills .skills .loader3, .LP-LoadingSkills .skills .loader4 { height: auto; max-width: 200px; } .LP-Portfolio { width: 100%; } .LP-Portfolio .boxes a { background-position: top; background-size: cover; display: block; height: 356px; overflow: hidden; position: relative; width: 100%; } .LP-Portfolio .boxes a:before { background-image: radial-gradient(circle, transparent 35%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); content: ""; height: 100%; position: absolute; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; width: 101%; } .LP-Portfolio .boxes a:hover:before { background-color: #4e5168; opacity: 0.5; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; z-index: 2; } .LP-Portfolio .boxes a:hover .content { top: 40%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .LP-Portfolio .boxes a .content { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; text-align: center; top: 70%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; z-index: 3; } .LP-Portfolio .boxes a .content h4 { border-bottom: 2px solid #4e5168; color: #f7f7f7; display: inline-block; font-size: 20px; font-weight: 600; margin-bottom: 0; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .LP-Portfolio .boxes a .content h3 { color: #fff; font-weight: 400; margin: 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } @media (min-width: 1040px) { .LP-Portfolio .boxes a .content h3 { letter-spacing: -1px; } } .LP-Quote.CustomerQuoteSection img + p { line-height: 22px; } .LP-Quote.CustomerQuoteSection blockquote { padding: 0 25px; position: relative; } .LP-Quote.CustomerQuoteSection blockquote i { position: absolute; } .LP-Quote.CustomerQuoteSection blockquote i.fa-quote-left { left: 0; top: 0; } .LP-Quote.CustomerQuoteSection blockquote i.fa-quote-right { bottom: 0; right: 0; } .LP-Quote.CustomerQuoteSection blockquote p { margin: 0; } .LP-Quote.CustomerQuoteSection blockquote p + p { margin-top: 20px; } .LP-Recent-News dl.list { border-top: 1px solid #d8d8d8; margin-top: 0; text-align: left; } .LP-Recent-News dl.list dt { font-size: 0.9rem; padding-left: 8px; padding-top: 20px; } @media (max-width: 639px) { .LP-Recent-News dl.list dt { padding-top: 20px; } .LP-Recent-News dl.list dt:first-child { padding-top: 0; } } .LP-Recent-News dl.list dd { border-bottom: 1px solid #d8d8d8; line-height: 1.5; margin-left: 0; margin-top: -48px; padding-bottom: 20px; padding-left: 7em; padding-top: 20px; } .LP-Recent-News dl.list dd p { margin-bottom: 0; } .LP-Recent-News dl.list dd ul { list-style-position: inside; margin-top: 10px; padding-left: 0; } .LP-Recent-News dl.list dd:last-child { border-bottom: none; } .LP-Recent-News dl.list dd a { color: #4a4a4a; } .LP-Recent-News dl.list dd a:hover { color: #5dbfd0; } @media (max-width: 639px) { .LP-Recent-News dl.list dd { font-size: 16px; margin-top: -2rem; padding-bottom: 10px; padding-left: 6rem; padding-top: 10px; } } .LP-Recent-News dl.list dd.nodate { padding-left: 3em; } @media (max-width: 639px) { .LP-Recent-News dl.list { border-top: 0; } } @media (max-width: 959px) { .LP-Recent-News .Row .left, .LP-Recent-News .Row .right { padding-left: 0; padding-right: 0; } .LP-Recent-News .Row .left { margin-bottom: 40px; } } @media (max-width: 639px) { .LP-Recent-News .Row .left { margin-bottom: 30px; } } .LP-Recent-Post-EXT .List-post .Item { display: block; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .LP-Recent-Post-EXT .List-post .Item-image { height: 100px; overflow: hidden; width: 100%; } .LP-Recent-Post-EXT .List-post .Item-image .img { background-size: cover; height: 100%; margin: 0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } @media (max-width: 1199px) { .LP-Recent-Post-EXT .List-post .Item-image { height: 130px; } } @media (max-width: 959px) { .LP-Recent-Post-EXT .List-post .Item-image { height: 140px; } } @media (max-width: 639px) { .LP-Recent-Post-EXT .List-post .Item-image { height: 150px; } } @media (max-width: 479px) { .LP-Recent-Post-EXT .List-post .Item-image { height: 130px; } } @media (max-width: 413px) { .LP-Recent-Post-EXT .List-post .Item-image { height: 150px; } } @media (max-width: 374px) { .LP-Recent-Post-EXT .List-post .Item-image { height: 140px; } } .LP-Recent-Post-EXT .List-post .Item-info .date { color: #3e3e3e; font-family: Oswald, sans-serif; font-size: 11px; font-weight: 400; line-height: 14px; margin: 4px 0 0; } .LP-Recent-Post-EXT .List-post .Item-info .title { color: #3e3e3e; font-size: 13px; font-weight: 700; line-height: 18px; margin: 6px 0 0; } .LP-Recent-Post-EXT .List-post .Item:hover { opacity: 0.7; text-decoration: none; } .LP-Recent-Post-EXT .List-post .Item:hover .Item-image .img { -webkit-transform: scale(1.1); transform: scale(1.1); } .LP-Sitemap .hs-menu-wrapper .hs-menu-depth-2 > a { font-size: 20px; font-weight: 700; } .LP-Sitemap .hs-menu-wrapper .hs-menu-depth-3 ul { margin-left: 20px; } .LP-Sitemap .hs-menu-wrapper .hs-menu-depth-3:before, .LP-Sitemap .hs-menu-wrapper .hs-menu-depth-4:before { display: none; } .LP-StepDiagram .Side .StepDiagram { display: -ms-flexbox; display: -webkit-box; display: flex; } .LP-StepDiagram .Side .StepDiagram-step { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; padding-right: 20px; padding-top: 120px; position: relative; z-index: 10; } .LP-StepDiagram .Side .StepDiagram-step:before { background: #fff; border: 5px solid #4e5168; border-radius: 100%; content: ""; display: block; height: 17px; left: 0; position: absolute; top: 73px; width: 17px; z-index: 5; } .LP-StepDiagram .Side .StepDiagram-step:after { background: #468fdb; background: -webkit-gradient(linear, left top, right top, from(#468fdb), to(#4e5168)); background: linear-gradient(90deg, #468fdb, #4e5168); content: ""; display: block; height: 5px; left: 0; position: absolute; right: 0; top: 85px; z-index: 2; } .LP-StepDiagram .Side .StepDiagram-step:last-child { padding-right: 0; } .LP-StepDiagram .Side .StepDiagram-step:last-child:after { display: none; } .LP-StepDiagram .Side .StepDiagram-icon { left: 14px; position: absolute; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .LP-StepDiagram .Side .StepDiagram-label { border-bottom: 6px solid #d8d8d8; margin-bottom: 20px; padding-bottom: 20px; } @media (max-width: 819px) { .LP-StepDiagram .Side .StepDiagram { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 40px 40px 0; } .LP-StepDiagram .Side .StepDiagram:before { display: none; } .LP-StepDiagram .Side .StepDiagram-step { -ms-flex-preferred-size: 50%; flex-basis: 50%; margin-bottom: 40px; padding-top: 0; } .LP-StepDiagram .Side .StepDiagram-step:nth-child(2n) { padding-right: 0; } .LP-StepDiagram .Side .StepDiagram-step:after, .LP-StepDiagram .Side .StepDiagram-step:before { display: none; } .LP-StepDiagram .Side .StepDiagram-icon { margin-bottom: 10px; position: static; -webkit-transform: none; transform: none; } } @media (max-width: 639px) { .LP-StepDiagram .Side .StepDiagram-step { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .LP-StepDiagram .Side .StepDiagram-icon { margin-left: auto; margin-right: auto; } .LP-StepDiagram .Side .StepDiagram-label { text-align: center; } } .LP-StepDiagram .Vertical .StepDiagram-image { position: relative; width: 250px; } .LP-StepDiagram .Vertical .StepDiagram-image:before { background: #fff; border: 5px solid #75abe4; border-radius: 100%; content: ""; display: block; height: 17px; position: absolute; right: 80px; top: 5px; width: 17px; z-index: 5; } .LP-StepDiagram .Vertical .StepDiagram-image:after { background: #75abe4; background: -webkit-gradient(linear, left top, left bottom, from(#75abe4), to(#4e5168)); background: linear-gradient(180deg, #75abe4, #4e5168); content: ""; display: block; height: 100%; position: absolute; right: 90px; top: 20px; width: 5px; z-index: 2; } .LP-StepDiagram .Vertical .StepDiagram-content { width: calc(100% - 250px); } .LP-StepDiagram .Vertical .StepDiagram-label { background-color: #468fdb; border-radius: 5px; color: #fff; display: inline-block; padding: 5px 20px; } .LP-StepDiagram .Vertical .StepDiagram-step { display: -ms-flexbox; display: -webkit-box; display: flex; } .LP-StepDiagram .Vertical .StepDiagram-step:last-child .StepDiagram-image:after { display: none; } .LP-StepDiagram .Vertical .StepDiagram-step.large .StepDiagram-image { width: 450px; } .LP-StepDiagram .Vertical .StepDiagram-step.large .StepDiagram-image .StepDiagram-icon { display: block; height: auto; max-width: 270px; width: 100%; } .LP-StepDiagram .Vertical .StepDiagram-step.large .StepDiagram-content { width: calc(100% - 450px); } .LP-StepDiagram .Vertical .StepDiagram .is-stage { background: #4e5168; content: ""; display: block; height: 0; left: 415px; position: absolute; top: 80px; -webkit-transition: -webkit-transform 0.6s ease 0s; transition: -webkit-transform 0.6s ease 0s; transition: transform 0.6s ease 0s; transition: transform 0.6s ease 0s, -webkit-transform 0.6s ease 0s; width: 5px; z-index: 4; } @media (max-width: 959px) { .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-image { width: 350px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-image .StepDiagram-icon { max-width: 200px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-content { width: calc(100% - 350px); } .LP-StepDiagram .Vertical .StepDiagram .is-stage { left: 315px; top: 70px; } } @media (max-width: 767px) { .LP-StepDiagram .Vertical .StepDiagram { padding: 30px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-image:before { right: 35px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-image:after { right: 45px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-image { width: 180px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-image .StepDiagram-icon { max-width: 80px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-content { width: calc(100% - 180px); } .LP-StepDiagram .Vertical .StepDiagram .is-stage { left: 160px; top: 50px; } } @media (max-width: 639px) { .LP-StepDiagram .Vertical .StepDiagram { padding: 20px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-image:before { left: 0; right: auto; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-image:after { left: 12px; right: auto; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-label { padding: 5px 10px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-image { width: 50px; } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-content { width: calc(100% - 50px); } .LP-StepDiagram .Vertical .StepDiagram .StepDiagram-step.large .StepDiagram-icon { display: none; } .LP-StepDiagram .Vertical .StepDiagram .is-stage { left: 32px; top: 30px; } } .LP-TwoColumn.noborder .Wrap { border-top: none !important; } .LP-TwoColumn .Section-image img { margin-left: auto; margin-right: auto; } .LP-ListResources { background-repeat: repeat; background-size: auto; } #main .Blog-List.post-top .Category > p { font-size: 18px; } #main #title_area.detail { padding-top: 75px !important; } #main #title_area { background-color: #333; background-image: url(); background-position: 50%; background-repeat: no-repeat; background-size: cover; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; padding-bottom: 30px; padding-top: 40px; position: relative; } #main#title_area:after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; width: 100%; } #main #title_area .title_main { font-size: 3.5rem; font-weight: 700; margin-bottom: 0; z-index: 1; } #main #title_area { margin-top: 0; } #main #title_area .title_main { font-family: Proxima Nova, Frutiger, Arial, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, ï¼­ï¼³ Ｐゴシック, MS PGothic, sans-serif; } @media only screen and (max-width: 768px) { #main #title_area { height: auto; padding-bottom: 12px; padding-top: 12px; } #main #title_area .title_main { font-size: 2.6rem; } } #main #intro + .block, #main #title_area + .block { border-top: none; } #main #title_area.blog { height: 170px; } @media only screen and (max-width: 960px) { #main #title_area.blog { height: 130px; } } @media only screen and (max-width: 768px) { #main #title_area.blog { height: auto; line-height: normal; min-height: 190px; padding-top: 53px; } } #main #title_area.search_title_area { background-image: url(); } #main #title_area.blog .title_main { text-align: center; width: 100%; } #main #title_area.blog .Hero-subtitle { margin-top: 20px; } #main #title_area.blog .Hero-subtitle, #main #title_area.blog p { font-size: 18px; padding: 0 10px; text-align: center; z-index: 1; } #main #title_area.blog .Hero-subtitle span { margin-left: 10px; } @media only screen and (max-width: 768px) { #main #title_area.blog .Hero-subtitle, #main #title_area.blog p { font-size: 14px; } } @media only screen and (max-width: 960px) { #header #nav_sp { margin-top: 0; } } @media only screen and (max-width: 768px) { #header #logo_area .logo { font-size: 44px; } } #header { z-index: 11; } .footer { padding: 40px 0; } .Glossary .glossary-hero.banner { background: #1a1311; } #footer .nav-area > ul li a { word-break: break-word; } .hs-blog-id-67299607093.Glossary .glossary-hero.banner { background-position: 0 0; background-repeat: no-repeat; background: #0d2580; color: #fff; font-size: 21px; overflow: hidden; padding: 84px 0; position: relative; width: 100%; } .hs-blog-id-67299607093 .container-fluid .row-fluid .page-center, .page-center { float: none; margin: 0 auto; max-width: 1180px; padding: 0 20px; text-align: center; } .hs-blog-id-67299607093 .glossary-hero .banner-content { margin: 0 auto; max-width: 700px; } /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /* Remove letter-spacing EN site */ html.en-web { font-family: "Roboto", YakuHanJP, noto, notoB, "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif; font-size: 16px; } .en-site { word-break: break-word; } .english-site .ttl-area .c-ttl01 .en { letter-spacing: 0; } .english-site .english-site .c-ttl01 > span { letter-spacing: 0; } .english-site .english-site .kv-block .kv-title { letter-spacing: 0; } .english-site .english-site .initiatives-col .wrap > li { letter-spacing: 0; } .english-site .english-site .initiatives-list .ttl { letter-spacing: 0; } .english-site .english-site .initiatives-list .txt { letter-spacing: 0; } .english-site .initiatives-list .txt { letter-spacing: 0; } .english-site .sefety-sec02 .list-head .sub { letter-spacing: 0; } .english-site .sefety-sec02 .list-head .ttl { letter-spacing: 0; } .english-site .safety-sec03 .num { letter-spacing: 0; } .english-site .safety-sec03 .head { letter-spacing: 0; } .english-site .safety-sec05 .list-wrap .list-item .name { letter-spacing: 0; } .english-site .pro-ttl-container .item { letter-spacing: 0; } .english-site .pro-ttl-container .ttl .name { letter-spacing: 0; } .english-site .sec-table .ttl { letter-spacing: 0; } .mgtop-0 { margin-top: 0px !important; } .mgtop-10 { margin-top: 10px !important; } .mgtop-15 { margin-top: 15px !important; } .mgtop-20 { margin-top: 20px !important; } .mgtop-30 { margin-top: 30px !important; } .mgtop-60 { margin-top: 60px !important; } .mgbottom-0 { margin-bottom: 0px !important; } .mgbottom-10 { margin-bottom: 10px !important; } .mgbottom-20 { margin-bottom: 20px !important; } .mgbottom-30 { margin-bottom: 30px !important; } .mgbottom-60 { margin-bottom: 60px !important; } .pd-bottom-0 { padding-bottom: 0 !important; } .pt-100 { padding-top: 100px !important; } .pb-100 { padding-bottom: 100px !important; } .pb-80 { padding-bottom: 80px !important; } .pb-50 { padding-bottom: 50px !important; } .pt-80 { padding-top: 80px !important; } .pb-180 { padding-bottom: 180px !important; } @media only screen and (max-width: 897px) { .pt-100 { padding-top: 50px !important; } .pb-80 { padding-bottom: 40px !important; } .pb-180 { padding-bottom: 100px !important; } .pb-50 { padding-bottom: 20px !important; } .mgtop-60 { margin-top: 30px !important; } } .tal { text-align: left !important; } .tac { text-align: center !important; } .tar { text-align: right !important; } .en-font { font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif; } .ol-list { list-style-type: decimal; } .color-white { color: #FFF; } .initiatives-col .wrap > ul li { position: relative; padding-left: 25px; font-size: 18px; letter-spacing: 0.1em; text-align: justify; } .initiatives-col .wrap > ul li::before { position: absolute; top: 0.6em; left: 0; width: 16px; height: 13px; background: url("/hubfs/8005843/library/icon/check.svg") no-repeat; background-size: contain; content: ""; } .initiatives-col .wrap > ul li + li { margin-top: 20px; } .no-border.no-border_margin { margin-bottom: 40px; margin-top: 10px; } @media only screen and (max-width: 576px) { .no-border.no-border_margin { margin-bottom: 20px; margin-top: 20px; } } .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media only screen and (min-width: 768px) { .responsive { display: none; } } /*****************************************/ /* Resource page ***********************/ /*****************************************/ .resource-list ul { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .resource-list ul li { text-align: center; padding-left: 15px; padding-right: 15px; } .resource-list ul li .ttl { max-width: 280px; margin: 0 auto; line-height: 30px; font-size: 18px; padding-top: 15px; text-align: center; } .resource-list ul li a:hover { opacity: 0.7; } .non-pd-bottom-block .inner-block { padding-bottom: 0 !important; } .byuse-block .img-area > img { margin: auto; display: block; } .mt-80 { margin-top: 80px; } .align-item-start .initiatives-col { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } /*****************************************/ /* LP Footer ***************************/ /*****************************************/ #footer.lp { padding: 20px; } /*****************************************/ /* LP Basic ***************************/ /*****************************************/ .LP-Basic .kv-block .kv-title { width: 100%; } .LP-Basic:not(.LP-Contact) .kv-block > .inner-block::before, .LP-Basic:not(.LP-Contact) .kv-block > .inner-block::after { display: none; } .LP-Basic #download_pane, #contact_pane { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; min-height: 675px; } .LP-Basic #download_pane .heading, #contact_pane .heading { font-size: 22px; margin-bottom: 30px; } .LP-Basic #download_pane .thumb, #contact_pane .thumb { margin-bottom: 30px; text-align: center; } .LP-Basic #download_pane .text p, #contact_pane .text p { margin-bottom: 15px; } @media only screen and (max-width: 768px) { .LP-Basic.LP-Contact .page-inquiry #download_pane, #contact_pane { margin: auto; width: 100%; } } @media only screen and (min-width: 601px) { .LP-Basic #download_pane .left-text { width: 55%; margin-right: 5%; } .LP-Basic #download_pane .right-form { width: 40%; } } @media only screen and (max-width: 959px) { .LP-Basic #download_pane .right-form { width: 100%; } .LP-Basic #download_pane #hs_form_target_lp_form fieldset { margin: auto; } } .LP-Basic #download_pane .form-title { position: relative; margin-bottom: 30px; padding-bottom: 20px; text-align: center; border-bottom: 1px solid #c0c0c0; } .LP-Basic #download_pane .form-title span { font-size: 18px; } /* .LP-Basic #download_pane .form-title:before { position: absolute; bottom: 0px; width: 100px; height: 1px; margin: auto; background: #1a1311; content: ""; right: 0px; top: 0px; } .LP-Basic #download_pane .form-title:after { position: absolute; bottom: 0px; width: 100px; height: 1px; margin: auto; background: #1a1311; content: ""; left: 0px; top: 0px; } */ .LP-Basic #download_pane #hs_form_target_lp_form fieldset, #contact_pane #hs_form_target_lp_form fieldset { margin-bottom: 15px; } .LP-Basic #download_pane #hs_form_target_lp_form input[type=text].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form input[type=email].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form input[type=tel].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form input[type=number].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form textarea.hs-input, .LP-Basic #download_pane #hs_form_target_lp_form select.hs-input, #contact_pane #hs_form_target_lp_form input[type=text].hs-input, #contact_pane #hs_form_target_lp_form input[type=email].hs-input, #contact_pane #hs_form_target_lp_form input[type=tel].hs-input, #contact_pane #hs_form_target_lp_form textarea.hs-input, #contact_pane #hs_form_target_lp_form select.hs-input { width: 100%; padding: 0.5em 0.5em; border: 1px solid #ccc; background: #fff; -webkit-box-shadow: 0px 0px 0px #fff inset; box-shadow: 0px 0px 0px #fff inset; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width: 576px) { .LP-Basic #download_pane #hs_form_target_lp_form input[type=text].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form input[type=email].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form input[type=tel].hs-input, .LP-Basic #download_pane #hs_form_target_lp_form textarea.hs-input, .LP-Basic #download_pane #hs_form_target_lp_form select.hs-input, #contact_pane #hs_form_target_lp_form input[type=text].hs-input, #contact_pane #hs_form_target_lp_form input[type=email].hs-input, #contact_pane #hs_form_target_lp_form input[type=tel].hs-input, #contact_pane #hs_form_target_lp_form textarea.hs-input, #contact_pane #hs_form_target_lp_form select.hs-input { font-size: 12px !important; } } .LP-Basic #download_pane #hs_form_target_lp_form ul.inputs-list, #contact_pane #hs_form_target_lp_form ul.inputs-list { text-align: center; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-error-msgs.inputs-list, #contact_pane #hs_form_target_lp_form .hs-error-msgs.inputs-list { text-align: left; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-error-msgs.inputs-list li, #contact_pane #hs_form_target_lp_form .hs-error-msgs.inputs-list li { line-height: 17px; } .LP-Basic #download_pane #hs_form_target_lp_form .hs_error_rollup .hs-error-msgs.inputs-list { text-align: center; margin-bottom: 20px; color: #f20; } .LP-Basic #download_pane #hs_form_target_lp_form .hs_privacy_check .hs-error-msgs.inputs-list { text-align: center; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field input[type=checkbox].hs-input + span { position: relative; padding: 0 0px 0 24px; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field input[type=checkbox].hs-input + span::before { position: absolute; top: 5px; left: 0; display: inline-block; content: ""; -webkit-box-sizing: border-box; box-sizing: border-box; border-color: #ec407a; z-index: 0; background-color: transparent; width: 15px; height: 15px; border: 2px #c0c0c0 solid; border-radius: 4px; } .LP-Basic #download_pane #hs_form_target_lp_form .hs_privacy_check .inputs-list li label { position: relative; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field input[type=checkbox].hs-input { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 0; left: 0; opacity: 0; height: 40px; width: 100%; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field input[type=checkbox].hs-input + span::after { position: absolute; top: 5px; left: 0; display: inline-block; content: ""; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; margin: 5px 8px; width: 6px; height: 9px; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field input[type=checkbox].hs-input:checked + span::after { border: 2px solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 7px; left: 4px; margin: 0px; content: ""; width: 7px; height: 7px; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field input[type=checkbox].hs-input:checked + span::before { background-color: #f00; border-color: #ec407a; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field label span.hs-form-required { background-color: #f00; font-size: 10px; padding-left: 5px; padding-right: 5px; border-radius: 3px; margin-left: 5px; word-break: keep-all; color: #fff; /* display: inline-block; */ margin-bottom: 6px; padding-bottom: 2px; } .LP-Basic #download_pane #hs_form_target_lp_form .form-privacy a { text-decoration: underline; } .LP-Basic #download_pane #hs_form_target_lp_form .hs-error-msg { font-size: 12px; color: #f20; } .LP-Basic .thanks-box { padding-bottom: 60px; border-bottom: 1px solid #1a1311; } .LP-Basic #tx_pane .thanks-box { border-bottom: none; } .LP-Basic .thanks-box h2 { font-size: 20px; text-align: center; margin-bottom: 30px; } .LP-Basic .thanks-box p { text-align: center; font-size: 15px; margin-bottom: 15px; } .LP-Basic.LP-Contact #download_pane #hs_cos_wrapper_lp_form { margin: 0 auto; } .LP-Basic.LP-Contact #download_pane #hs_cos_wrapper_lp_form .form-title { display: none; } .LP-Basic #download_pane .left-text .text ul, #contact_pane .left-text .text ul { list-style-type: disc; list-style-position: inside; margin-bottom: 15px; } /*****************************************/ /* Blog ********************************/ /*****************************************/ main.news { padding-top: 80px; } #blog_content { -webkit-box-sizing: content-box; box-sizing: content-box; margin-left: auto; margin-right: auto; margin-bottom: 30px; max-width: 1240px; padding-left: 30px; padding-right: 30px; position: relative; width: calc(100% - 60px); display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 819px) { #blog_content { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; padding-right: 0; width: 100%; } } /*****************************************/ /* Blog List ****************************/ /*****************************************/ #blog_content #main_content { width: 75%; padding: 0 15px 30px; } #blog_content #main_content .cat-name { position: absolute; top: 0; left: 0; right: auto; background: #0d2580; color: #fff; font-family: "Oriya MN", sans-serif; font-size: 10px; font-weight: 400; padding: 0.3em 1em; min-width: 7.5em; filter: alpha(opacity=90); -ms-filter: "alpha(opacity=90)"; opacity: 0.9; text-align: center; } @media (max-width: 819px) { #blog_content #main_content .cat-name { display: none; } } @media (max-width: 819px) { #blog_content #main_content { width: 100%; } } #blog_content #main_content .c-list01 { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 30px; list-style: none; } #blog_content #main_content .c-list01 li a { display: block; padding: 0px; position: relative; text-decoration: none; color: #666; background: #fff; height: 100%; border: 1px solid #eee; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } #blog_content #main_content .c-list01 li a .img-area { aspect-ratio: 16/9; overflow: hidden; } #blog_content #main_content .c-list01 li a .img-area img { -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #blog_content #main_content .c-list01 li a:hover .img-area img { -webkit-transform: scale(1.05); transform: scale(1.05); } @media only screen and (max-width: 819px) { #blog_content #main_content .c-list01 li a { width: 100%; display: block; padding: 8px 5px; text-decoration: none; color: #666; border: none; border-bottom: 1px dotted #ccc; border-bottom: 1px dotted rgba(0, 0, 0, 0.2); overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: justify; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } #blog_content #main_content .c-list01 li:first-of-type a { border-top: 1px dotted rgba(0, 0, 0, 0.2); } #blog_content #main_content .c-list01 li a .img-area { width: 20% !important; } #blog_content #main_content .c-list01 li a .info { width: 80% !important; padding: 0 0 0 2% !important; } #blog_content #main_content .c-list01 li + li { margin-top: 5px; } #blog_content #main_content .c-list01 li a .info .txt { display: none; } } #blog_content #main_content .c-list01 li a .img-area { width: 100%; } #blog_content #main_content .c-list01 li a .img-area img { width: 100%; } #blog_content #main_content .c-list01 li a .info { padding: 10px; } #blog_content #main_content .c-list01 li a .info .entry-title { font-size: 15px; line-height: 1.4; margin-top: 5px; margin-bottom: 10px; color: #444; text-align: left; } @media only screen and (max-width: 639px) { #blog_content #main_content .c-list01 li a .info .entry-title { font-size: 14px; } #blog_content #main_content .c-list01 li a .info .date { font-size: 10px !important; } } #blog_content #main_content .c-list01 li a .info .date { font-family: "Oswald", sans-serif; font-weight: normal; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; opacity: 0.7; margin: 0; font-size: 10px; } #blog_content #main_content .c-list01 li a .info .date:before { font-family: "fontawesome"; content: "\f274"; font-size: 0.88em; margin-right: 0.3em; position: relative; top: -1px; } #blog_content #main_content .c-list01 li a .info .txt { border-top: 1px solid #CACACA; font-size: 13px; line-height: 22px; margin-top: 10px; padding-top: 10px; } /*****************************************/ /* Blog nav *************************/ /*****************************************/ #blog_content #main_content .Blog-Nav .pagination { margin-top: 60px; margin-bottom: 60px; } @media (max-width: 819px) { #blog_content #main_content .Blog-Nav .pagination { margin-bottom: 0px; } } #blog_content #main_content .Blog-Nav .disabled { display: none; } #blog_content #main_content .Blog-Nav ul { margin-left: 0px; padding-left: 0px; } #blog_content #main_content .Blog-Nav ul li { display: inline-block; margin-right: 5px; } #blog_content #main_content .Blog-Nav ul li:last-child { margin-right: 0px; } #blog_content #main_content .Blog-Nav ul li a { cursor: pointer; } #blog_content #main_content .Blog-Nav ul li a, #blog_content #main_content .Blog-Nav ul li.active span { color: #3E3E3E; border-radius: 2px; display: block; line-height: 2.2; height: 37px; width: 34px; text-align: center; font-size: 16px; background-color: #1a1311; border: solid 1px #1a1311; color: #FFF; } #blog_content #main_content .Blog-Nav ul li.active span { background-color: #ebebeb; border-color: #ebebeb; color: #3E3E3E; } #blog_content #main_content .Blog-Nav ul li a:hover { opacity: 0.7; text-decoration: none; } /*****************************************/ /* Blog sidebar *************************/ /*****************************************/ #blog_content #sidebar { width: 25%; padding: 0 15px 30px; } @media (max-width: 819px) { #blog_content #sidebar { width: 100%; } } #blog_content #sidebar .box h3 { font-size: 12px; line-height: 22px; margin-bottom: 25px; font-weight: bold; color: #3e3e3e; position: relative; font-family: "Noto Serif JP", sans-serif; } #blog_content #sidebar .box h3 span { font-size: 24px; font-family: "Oriya MN", sans-serif; font-weight: 400; margin-right: 10px; color: #3e3e3e; } #blog_content #sidebar .box h3::after { background-color: #333; content: ""; height: 2px; position: absolute; left: 0; right: 0; bottom: -8px; } #blog_content #sidebar .top-post.box ul { padding: 0; margin: 0; } #blog_content #sidebar .top-post.box ul li:last-child { border-bottom: none; } #blog_content #sidebar .top-post.box ul li { min-height: 55px; padding-left: 40px; padding-right: 25px; margin-top: 10px; padding-bottom: 10px; position: relative; line-height: 1.6; border-bottom: #ccc dotted 1px; list-style-type: none; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } #blog_content #sidebar .top-post.box ul li a { display: block; color: #3e3e3e; font-size: 13px; text-decoration: none; padding-top: 10px; } #blog_content #sidebar .top-post.box ul li a:before { content: none; } #blog_content #sidebar .top-post.box ul li a:hover { text-decoration: none; } #blog_content #sidebar .top-post.box ul li a:after { font-family: "fontawesome"; content: "\f054"; position: absolute; top: 8px; right: 0.6em; font-size: 1em; color: #0d2580; } #blog_content #sidebar .top-post.box ul li a:hover:after { right: 0.5em; -webkit-transform: translate(1px, 0); transform: translate(1px, 0); } #blog_content #sidebar .top-post.box ul li:before { color: #fff; position: absolute; left: 10px; top: 2px; line-height: 1; font-family: "Oriya MN", sans-serif; font-weight: 400; font-style: normal; font-size: 30px; } #blog_content #sidebar .top-post.box ul li:nth-child(1):before { content: "1"; } #blog_content #sidebar .top-post.box ul li:nth-child(2):before { content: "2"; } #blog_content #sidebar .top-post.box ul li:nth-child(3):before { content: "3"; } #blog_content #sidebar .top-post.box ul li:nth-child(1):before, #blog_content #sidebar .top-post.box ul li:nth-child(2):before, #blog_content #sidebar .top-post.box ul li:nth-child(3):before { color: #0d2580; } #blog_content #sidebar .top-post.box ul li:nth-child(4):before { content: "4"; color: #3e3e3e; } #blog_content #sidebar .top-post.box ul li:nth-child(5):before { content: "5"; color: #3e3e3e; } #blog_content #sidebar .top-post.box ul li:nth-child(6):before { content: "6"; color: #3e3e3e; } #blog_content #sidebar .top-post.box ul li:nth-child(7):before { content: "7"; color: #3e3e3e; } #blog_content #sidebar .top-post.box ul li:nth-child(8):before { content: "8"; color: #3e3e3e; } #blog_content #sidebar .top-post.box ul li:nth-child(9):before { content: "9"; color: #3e3e3e; } #blog_content #sidebar .top-post.box ul li:nth-child(10):before { content: "10"; color: #3e3e3e; } #blog_content #sidebar .recent-post.box { border-top: none; background: #fff; } #blog_content #sidebar .recent-post.box .list-recent { margin-top: 20px; } #blog_content #sidebar .recent-post.boxt .item:first-child { border-top: none; } #blog_content #sidebar .recent-post.box .item { clear: both; border-top: #ccc dotted 1px; padding: 10px; position: relative; } #blog_content #sidebar .recent-post.box .item .img { float: left; padding-right: 5px; width: 100%; } #blog_content #sidebar .recent-post.box .item.no-img { padding-left: 0px; } #blog_content #sidebar .recent-post.box .item a { display: block; } #blog_content #sidebar .recent-post.box .item:first-child { border-top: none; } #blog_content #sidebar .recent-post.box .item a .title-col { padding-right: 0px; padding-left: 0px; } @media (max-width: 819px) { #blog_content #sidebar .recent-post.box .item a .title-col { width: 66.66667%; padding-left: 2%; } } #blog_content #sidebar .recent-post.box .item a .img-col { padding-right: 5px; padding-left: 5px; } @media (max-width: 819px) { #blog_content #sidebar .recent-post.box .item a .img-col { width: auto !important; float: left; } } @media (max-width: 819px) { #blog_content #sidebar .Blog-Sidebar-cta { text-align: center; } } @media (min-width: 820px) { #blog_content #sidebar .Blog-Sidebar-cta .hs-cta-img { width: 100%; height: auto; } } @media (max-width: 414px) { #blog_content #sidebar .Blog-Sidebar-cta { text-align: center; } } #blog_content #sidebar .recent-post.box .item { padding: 0px; margin-bottom: 0px; padding-bottom: 10px; padding-top: 15px; } #blog_content #sidebar .recent-post.box .item:nth-child(1) { padding-top: 10px; } #blog_content #sidebar .recent-post.box .item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; } #blog_content #sidebar .recent-post.box .item a .img-col { width: 115px; padding-left: 0px; padding-right: 0px; } #blog_content #sidebar .recent-post.box .item a .img-col img { margin-right: 0px; } #blog_content #sidebar .recent-post.box .item a .title-col { width: calc(100% - 115px); } #blog_content #sidebar .recent-post.box .item a .title-col .title { font-size: 13px; line-height: 20px; } html.en-web #blog_content #sidebar .recent-post.box .item a .title-col .title, html.en-web #blog_content #sidebar .top-post.box .item a .title-col .title { font-size: 15px; } #blog_content #sidebar .recent-post.box .item a:hover { text-decoration: none; opacity: 0.7; } #blog_content #sidebar .recent-post.box .item a:after { font-family: "fontawesome"; content: "\f054"; position: absolute; top: 30px; right: 0.1em; font-size: 0.8em; color: #0d2580; } @media only screen and (max-width: 819px) { #blog_content #sidebar .recent-post.box .item a:after { font-size: 1em; right: 0.6em; } } #blog_content #sidebar .recent-post.box .item a:hover:after { right: 0em; -webkit-transform: translate(1px, 0); transform: translate(1px, 0); } #blog_content #sidebar .recent-post.box .item .img { width: 110px; } #blog_content #sidebar .recent-post.box .title { font-size: 14px; line-height: 22px; padding-bottom: 5px; padding-right: 23px; display: inherit; color: #3e3e3e; } #blog_content #sidebar .topic-list.box { margin-top: 20px; border-top: none; background: #fff; } #blog_content #sidebar .topic-list.box ul { margin-left: 0px; padding-left: 0px; } #blog_content #sidebar .topic-list.box ul li:first-child { border-top: none; } #blog_content #sidebar .topic-list.box ul li { clear: both; border-top: #ccc solid 1px; list-style-type: none; } #blog_content #sidebar .topic-list.box ul li a { display: block; padding: 15px 5px; color: #3e3e3e; position: relative; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; text-decoration: none; width: 100%; } #blog_content #sidebar .topic-list.box ul li:nth-child(1) a { padding-top: 10px; } #blog_content #sidebar .topic-list.box ul li a:after { font-family: "fontawesome"; content: "\f054"; margin-left: 15px; right: 0.6em; font-size: 1em; color: #0d2580; position: absolute; } #blog_content #sidebar .topic-list.box ul li a:hover { text-decoration: none; color: #27a1ca; } #blog_content #sidebar .topic-list.box ul li a:hover:after { right: 0.5em; -webkit-transform: translate(1px, 0); transform: translate(1px, 0); } /********************************************************/ /********************************************************/ /******************** Search Form ***********************/ /********************************************************/ /********************************************************/ .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools { position: relative; margin-bottom: 0; width: 100%; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools * { padding: 0px; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table, .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools th, .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools td { padding: 0; border-style: none; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box { margin-bottom: 0; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input { height: 40px; padding: 0; border-bottom: #999 dotted 1px; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box { border: none; height: auto; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box-focus, .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box-hover { -webkit-box-shadow: none !important; box-shadow: none !important; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input { font-size: 14px; line-height: 1; padding-left: 5px !important; margin: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-bottom: #999 dotted 1px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background-color 0.24s ease-in-out; transition: background-color 0.24s ease-in-out; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input::-webkit-input-placeholder, .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:-ms-input-placeholder, .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input::-moz-placeholder { color: #ccc; border: none !important; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:focus, .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:hover { -webkit-box-shadow: none; box-shadow: none; color: #0d1722; border: none !important; } .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-search-button:before { display: none; } /* .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-search-button .gsc-search-button-v2 { padding: 8px 27px; width: auto; background-color: #1a1311 !important; border: none !important; cursor: pointer; height: 30px; margin-top: 10px; margin-left: 8px !important; transition: all 0.3s linear; } */ .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-search-button .gsc-search-button-v2:hover { opacity: 0.7; } /*****************************************/ /* Blog detail **************************/ /*****************************************/ #blog_content.Blog-Detail-Wrap { margin-bottom: 60px; } #blog_content.Blog-Detail-Wrap h1.title { font-size: 26px; } #blog_content.Blog-Detail-Wrap .post-body { margin-top: 30px; } @media only screen and (max-width: 959px) { #blog_content.Blog-Detail-Wrap .post-body { padding-bottom: 120px; } #blog_content.Blog-Detail-Wrap { margin-bottom: 0; } } @media only screen and (max-width: 576px) { #blog_content.Blog-Detail-Wrap .post-body { padding-bottom: 50px; } } /*****************************************/ /* Blog detail **************************/ /*****************************************/ .Blog-Detail .blog-section .post-body ul, .Blog-Detail .blog-section .post-body ol { list-style-type: none !important; } .Blog-Detail .blog-section .post-body ul { padding-left: 20px; } .Blog-Detail .blog-section .post-body ul li { padding-left: 20px; position: relative; } .Blog-Detail .blog-section .post-body ul li:before { content: ""; border: 2px solid #27a1ca; border-radius: 100%; display: block; height: 6px; left: 0; position: absolute; top: 14px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 6px; } .Blog-Detail .blog-section .post-body ul li + li { margin-top: 5px; } .Blog-Detail .blog-section .post-body ol { counter-reset: li; list-style: none; padding-left: 40px; } .Blog-Detail .blog-section .post-body ol li { position: relative; } .Blog-Detail .blog-section .post-body ol li:not(.link-h3):before { color: #27a1ca; counter-increment: li; content: counter(li); position: absolute; width: 22px; background-position: center; /* left: -25px; */ left: -19px; top: 1px; display: block; font-weight: bold; vertical-align: middle; height: 26px; } .Blog-Detail .blog-section .post-body ol li:nth-child(n+10):before { left: -28px; } .Blog-Detail .blog-section .post-body h1, .Blog-Detail .blog-section .post-body h2, .Blog-Detail .blog-section .post-body .h1, .Blog-Detail .blog-section .post-body .h2 { text-align: left; } .Blog-Detail .blog-section .post-body h2, .Blog-Detail .blog-section .post-body .h2 { color: #565656; } @media (min-width: 960px) { .Blog-Detail .blog-section .post-body h2:not(#toc-0) { margin-top: 60px; } .Blog-Detail .blog-section .post-body h3, .Blog-Detail .blog-section .post-body .h3, .Blog-Detail .blog-section .post-body h4, .Blog-Detail .blog-section .post-body .h4, .Blog-Detail .blog-section .post-body h5, .Blog-Detail .blog-section .post-body .h5, .Blog-Detail .blog-section .post-body h6, .Blog-Detail .blog-section .post-body .h6 { margin-top: 45px; } } .Blog-Detail .blog-section .post-body h5, .Blog-Detail .blog-section .post-body h6, .Blog-Detail .blog-section .post-body .h5, .Blog-Detail .blog-section .post-body .h6 { font-size: 18px; font-weight: 400; line-height: 28px; font-weight: 500; border-left: #333 solid 3px; padding-left: 10px; } .Blog-Detail .blog-section .post-body blockquote { margin-left: 0px; margin-right: 0px; position: relative; text-align: center; border-radius: 5px; margin-bottom: 35px; padding: 20px; background-color: #f4f8f9; } .Blog-Detail .blog-section .post-body blockquote:before { content: "\f10d"; font-family: "FontAwesome"; color: #27a1ca; display: inline-block; padding-right: 10px; font-size: 25px; position: relative; top: 0px; line-height: 0; } .Blog-Detail .blog-section .post-body blockquote:after { content: "\f10e"; font-family: "FontAwesome"; color: #27a1ca; display: inline-block; padding-left: 10px; font-size: 25px; position: relative; bottom: -10px; line-height: 0; } .Blog-Detail .blog-section .post-body blockquote p { display: inline; } .Blog-Detail .blog-section .post-body figure figcaption { font-size: 14px; margin-top: 6px; } .Blog-Detail .blog-section .post-body figure img { margin-bottom: 0px !important; } .Blog-Detail .blog-section .post-body dl dt { margin: 10px 0px; font-weight: bold; } .Blog-Detail .blog-section .post-body dl dd { display: list-item; list-style-type: disc; } /*----- END BLOG STYLE -----*/ .Blog-Detail .blog-section img { /* width: auto; */ height: auto; max-width: 100% !important; } @media (max-width: 767px) { .sodium-blog .blog-section img { max-width: 100% !important; margin-bottom: 1.5em; } } .Blog-Detail .blog-section h2.blog-title { margin-top: 55px; font-size: 31px; color: #ffc400; text-align: left; font-weight: 400; } .Blog-Detail .blog-section ul .social { padding: 0px; margin: 0px; margin-bottom: 40px; } .Blog-Detail .blog-section ul .social li { margin-right: 10px; display: inline-block; } .Blog-Detail .blog-section ul .social li:before { display: none; } .Blog-Detail .blog-section ul .social li a { height: 42px; width: 42px; display: block; text-align: center; line-height: 42px; background-color: #27a1ca; border-radius: 3px; border: solid 1px #27a1ca; color: #ffffff; } .Blog-Detail .blog-section ul .social li a:hover { background-color: #ffffff; color: #27a1ca; } .Blog-Detail .blog-section ul .social li a i { font-size: 20px; } .Blog-Detail .blog-section .post-details { padding: 0px; margin: 3px 0px 22px 0px; margin-top: 50px; } .Blog-Detail.blog-section .post-details li { font-size: 11px; color: #a09f9f; display: inline-block; } .Blog-Detail .blog-section .post-details li a { color: #a09f9f; } .Blog-Detail .blog-section .post-details li i { color: #27a1ca; font-size: 11px; } .Blog-Detail .post-cta { text-align: center; margin-top: 50px; } @media (min-width: 481px) and (max-width: 959px) { .Blog-Detail .post-cta { margin-bottom: 55px; } } .Blog-Detail .social-blog { overflow: hidden; height: 269px; position: absolute; border: 4px; overflow: hidden; width: 40px; -webkit-transform: translateX(-60px); transform: translateX(-60px); } .Blog-Detail .social-blog .social-list { height: 249px; position: absolute; left: 0; } .Blog-Detail .social-blog ul { width: 40px; padding-left: 0px; } .Blog-Detail .social-blog ul li { background-color: #27a1ca; list-style: none; width: 40px; height: 40px; padding: 5px 8px; margin-bottom: 1px; -webkit-transition: 0.3s; transition: 0.3s; border: 2px solid #27a1ca; } /* social(本番にマージする) */ .Blog-Detail .social-blog ul li.facebook { background-color: #0866FF !important; border: 2px solid #0866FF !important; } .Blog-Detail .social-blog ul li.facebook:hover a { color: #0866FF !important; } .Blog-Detail .social-blog ul li.facebook:hover { background-color: #fff !important; } .Blog-Detail .social-blog ul li.twitter { background-color: #000; border: 2px solid #000; } .Blog-Detail .social-blog ul li.googleplus { background-color: #dd4b39; border: 2px solid #dd4b39; } .Blog-Detail .social-blog ul li.hatena { background-color: #1ba5dc; border: 2px solid #1ba5dc; } .Blog-Detail .social-blog ul li.hatena:hover a { color: #1ba5dc !important; } .Blog-Detail .social-blog ul li.pocket { background-color: #ef3e56; border: 2px solid #ef3e56; } .Blog-Detail .social-blog ul li.pocket:hover a { color: #ef3e56 !important; } .Blog-Detail .social-blog ul li.email { background-color: #5da7c6; border: 2px solid #5da7c6; } .Blog-Detail .social-blog ul li.email:hover a { color: #5da7c6 !important; } .Blog-Detail .social-blog ul li:hover { background-color: #fff; } .Blog-Detail .social-blog ul li:hover a { color: #27a1ca; } .Blog-Detail .social-blog ul li a { display: block; text-align: center; font-size: 20px; color: #ffffff; line-height: 27px; } .Blog-Detail .social-blog ul li a .fa-hatena::before { content: "B!"; font-family: Verdana; font-weight: bold; } .Blog-Detail .social-blog .hide-arrow { background-color: #e1e1e1; color: #fff; text-align: center; border: 0; display: block; font-size: 16px; width: 40px; padding: 1px 0; cursor: pointer; margin-top: 240px; } .Blog-Detail.blog-mobile-layout .social-blog { position: absolute !important; bottom: 0px; top: inherit !important; width: 100% !important; height: 45px; -webkit-transform: translateX(0px); transform: translateX(0px); margin-top: 40px; margin-bottom: 40px; } .Blog-Detail.blog-mobile-layout .social-blog.hide-bt { bottom: -40px; } .Blog-Detail.blog-mobile-layout .social-blog .social-list { height: auto; width: 100%; left: auto; right: auto; text-align: center; bottom: 0px; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul { width: 100%; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul li { display: inline-block; } @media (max-width: 480px) { .Blog-Detail.blog-mobile-layout .social-blog { position: fixed !important; bottom: 0px; left: 0px; width: 100% !important; height: 40px; z-index: 998; margin-top: 0px; margin-bottom: 0px; background-color: #e1e1e1; -webkit-transition: bottom 0.3s ease; transition: bottom 0.3s ease; } .Blog-Detail.blog-mobile-layout .social-blog .hide-bt { bottom: -40px; } .Blog-Detail.blog-mobile-layout .social-blog .social-list { height: auto; width: 100%; left: auto; right: auto; text-align: center; bottom: 0px; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul { width: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } .Blog-Detail.blog-mobile-layout .social-blog .social-list ul li { display: block; margin-bottom: 0px; height: 40px; width: 16.6667%; padding: 5px 8px; } .Blog-Detail.blog-mobile-layout .social-blog .hide-arrow { margin-top: 0px; height: 40px; padding: 0px; float: right; display: none; } .Blog-Detail.blog-mobile-layout .social-blog .hide-arrow i { -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 22px; } } .Blog-Detail .section.post-body { border: 1px solid #ddd; padding: 50px; min-height: 800px; } .Blog-Detail .blog-mobile-layout .section.post-body { padding-bottom: 90px !important; } .Blog-Detail .section.post-body .youtube-container-pane { margin: 0 auto; max-width: 100% !important; } .Blog-Detail .section.post-body .youtube-container { position: relative; width: 100%; padding-top: 56.25%; } .Blog-Detail .section.post-body .youtube-container iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } /*----- BLOG STYLE ----- */ .Blog-Detail .section.post-body pre, .Blog-Detail .section.post-body code { font-family: "Source Sans Pro"; background-color: #f7f7f7; border: 1px solid #ddd; font-size: 13px; line-height: 19px; overflow-x: auto; overflow-y: auto; padding: 6px; border-radius: 3px; word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; margin-bottom: 30px; } @media screen and (max-width: 767px) { .Blog-Detail .section.post-body { padding-top: 15px; } .Blog-Detail .blog-section, .Blog-Detail .widget-type-blog_comments { padding-right: 0px; } .Blog-Detail .widget-type-blog_content > .blog-section { padding-right: 0px; } .Blog-Detail .side-bar-blog .widget-type-blog_subscribe { display: none; } } /* 記事下のfacebookいいねボタン */ .Blog-Detail .fb-likebtn { display: table; background: #3e3e3e; color: #fff; text-align: center; margin: 30px 0 50px; margin-top: 20px; margin-bottom: 0px; width: 100%; max-width: 100%; } .Blog-Detail .fb-likebtn .fb_reset { display: none; } .Blog-Detail .fb-likebtn .fb-button { -webkit-transform: scale(1.2); transform: scale(1.2); overflow: hidden; } .Blog-Detail .fb-likebtn .eyecatch, .Blog-Detail .fb-likebtn .rightbox { display: table-cell; width: 50%; vertical-align: middle; border: none; } .fb-likebtn .eyecatch img { width: 100%; height: auto; vertical-align: bottom; } .fb-likebtn .like_text { font-size: 1.05em; margin-top: 1em; font-weight: bold; line-height: 1.4; } .fb-likebtn .like_text p { margin-bottom: 1em; font-weight: normal; } .fb-likebtn .like_text .small { font-size: 11px; color: #ccc; margin-bottom: 0; } @media only screen and (max-width: 767px) { .fb-likebtn .fb-button { -webkit-transform: scale(1); transform: scale(1); } .fb-likebtn .like_text { font-size: 0.9em; } .fb-likebtn .like_text p { margin-bottom: 0; padding: 0; } .Blog-Detail .fb-likebtn .eyecatch, .Blog-Detail .fb-likebtn .rightbox { width: 100%; } .Blog-Detail .fb-likebtn .eyecatch { display: none; } .Blog-Detail .fb-likebtn .rightbox { display: block; padding: 20px; } } /********************************************************/ /********************************************************/ /******* BLOG TEMPLATE CSS *******/ /********************************************************/ /********************************************************/ .Blog-Detail .blog-section .post-body h2 { margin-left: -50px; margin-right: -50px; margin-bottom: 40px; padding: 15px 40px; color: #fff; background-color: #444; border-left: #333 solid 6px; font-size: 26px; font-weight: bold; } .Blog-Detail .blog-section .post-body h3 { margin-bottom: 25px; padding-left: 4px; padding-bottom: 10px; color: #3e3e3e; border-bottom: #3e3e3e solid 2px; font-weight: bold; /* font-size: 22px; */ font-size: 20px; } .Blog-Detail .blog-section .post-body .h4 { border-bottom: none; } .Blog-Detail .blog-section .post-body h4, .Blog-Detail.blog-section .post-body .h4 { margin-bottom: 25px; padding-left: 12px; padding-bottom: 0; border-left: #333 solid 5px; /* font-size: 16px; */ font-size: 18px; font-weight: bold; } .Blog-Detail .blog-section .post-body h2 span { color: #ffffff; } .Blog-Detail .blog-section .post-body h3 span, .Blog-Detail .blog-section .post-body h4 span { color: #3e3e3e; } .Blog-Detail .blog-section .post-body h2, .Blog-Detail .blog-section .post-body h3, .Blog-Detail .blog-section .post-body h4, .Blog-Detail .blog-section .post-body h5, .Blog-Detail .blog-section .post-body h6 { line-height: 1.5; } .Blog-Detail .blog-section .post-body p { line-height: 1.75; margin-bottom: 20px; margin-top: 20px; word-break: break-word; word-break: break-word; /* -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; hyphenate-lines: 3; */ } .Blog-Detail .blog-section .post-body p:first-child { margin-top: 0px; } .Blog-Detail .blog-section .post-body .hs_cos_wrapper > p:last-child { margin-bottom: 0px; } .Blog-Detail .blog-section .post-body ul li { font-size: 16px; } /* .table_style */ .Blog-Detail .blog-section .post-body table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: auto; margin-bottom: 35px; font-size: 16px; line-height: 1.5; border-left: #ddd solid 1px; border-top: #ddd solid 1px; } .Blog-Detail .blog-section .post-body table:last-child { margin-bottom: 0; } .Blog-Detail .blog-section .post-body table td { padding: 9px 10px 8px; border-right: #ddd solid 1px; border-bottom: #ddd solid 1px; word-break: break-word; word-break: break-word; -ms-hyphens: auto; hyphens: auto; hyphenate-lines: 3; } .Blog-Detail .blog-section .post-body table th { padding: 9px 10px 8px; border-right: #ddd solid 1px; border-bottom: #ddd solid 1px; background-color: #f4f8f9; text-align: left; } .Blog-Detail .blog-section .post-body table p { font-size: 16px; margin-bottom: 0; } /*===== BLOG STYLE EDITED 17/08/25 =====*/ .Blog-Detail .blog-section .post-body a:not(.c-btn01), .Blog-Detail .blog-section .post-body span a:not(.c-btn01) { font-size: inherit; text-decoration: underline; } .Blog-Detail .blog-section .post-body a.link-inside, .Blog-Detail .blog-section .post-body span a.link-inside { text-decoration: none; } .Blog-Detail .blog-section .post-body a.link-inside:hover, .Blog-Detail .blog-section .post-body span a.link-inside:hover { text-decoration: underline; } .Blog-Detail .blog-section .post-body table td a { font-size: 16px; } /*===== END BLOG STYLE EDITED 17/08/25 =====*/ @media only screen and (max-width: 767px) { .Blog-Detail .section.post-body { padding-left: 15px; padding-right: 15px; } .Blog-Detail .blog-section .post-body h2 { margin-left: -15px; margin-right: -15px; margin-bottom: 20px; padding: 10px 10px; /* font-size: 18px; */ font-size: 20px; } .Blog-Detail .blog-section .post-body h3 { padding-bottom: 6px; /* font-size: 16px; */ font-size: 18px; } .Blog-Detail .blog-section .post-body h4 { font-size: 16px; } .Blog-Detail .blog-section .post-body p { font-size: 16px; margin-bottom: 15px; } } /* ----------------------- #toc-box(ブログ目次) ----------------------- */ .Blog-Detail #toc-box { /* margin-bottom: 20px; */ margin-bottom: 30px; /* 2018/03/07 目次の表示を対応 */ padding: 15px 10px 5px 10px; border: 1px solid #ddd; background-color: #f6f6f6; } .Blog-Detail #toc-title { margin-left: 10px; font-size: 16px; /* font-weight: bold; */ font-weight: 200; } .Blog-Detail #toc-index { margin-top: 10px; margin-bottom: 10px; } .Blog-Detail #toc-index > li:before { color: #3e3e3e; font-weight: normal; } .Blog-Detail #toc-index > li a { font-weight: 300; color: #3e3e3e; } @media only screen and (max-width: 767px) { .Blog-Detail #toc-index > li a { font-size: 16px; } } .Blog-List .post-news dl.list { text-align: left; border-top: #ccc dotted 1px; margin-top: 0px; } .Blog-List .post-news dl.list dt { padding-top: 20px; padding-left: 8px; color: #666; font-size: 0.9rem; } .Blog-List .post-news dl.list dd { margin-top: -48px; padding-top: 20px; padding-bottom: 20px; padding-left: 8em; font-weight: normal; line-height: 1.5; border-bottom: #ccc dotted 1px; margin-left: 0px; } .Blog-List .post-news dl.list dd p { margin: 0px; } .Blog-List .post-news dl.list dd ul { margin-top: 5px; padding-left: 0px; list-style-position: inside; } .Blog-List .post-news dl.list dd .tag { background: #27a1ca; color: #fff; font-size: 13px; padding: 0px 8px 2px 8px; margin-right: 8px; } .Blog-List .post-news dl.list dd a { font-weight: 500; color: #666666; } .Blog-List .post-news dl.list dd a:hover { opacity: 0.7; text-decoration: none; } @media only screen and (max-width: 768px) { .Blog-List .post-news dl.list { border-top: 0px; } .Blog-List .post-news dl.list dt { padding-top: 20px; } .Blog-List .post-news dl.list dd { margin-top: -2rem; padding-top: 15px; padding-bottom: 15px; font-size: 16px; padding-left: 6rem; } } #blog_content .Blog-Detail .blog-section .post-footer-list ul { padding-left: 0px; margin-top: 20px; padding-left: 0px; } #blog_content .Blog-Detail .blog-section .post-footer-list ul li { display: inline-block; list-style: none; font-size: 14px; padding-left: 10px; padding-left: 0px; } #blog_content .Blog-Detail .blog-section .post-footer-list ul li a { color: #0d2580; } #blog_content .Blog-Detail .blog-section .post-footer-list ul li:nth-child(n+2) { padding-left: 10px; } #blog_content .Blog-Detail .blog-section .post-footer-list ul li:before { display: none; } #blog_content h3.title-comment { margin-top: 20px; font-size: 12px; margin-bottom: 0; font-weight: bold; color: #3e3e3e; font-family: "Noto Serif JP", sans-serif; } #blog_content h3.title-comment span { font-size: 18px; font-family: "Oswald", sans-serif; font-weight: bold; margin-right: 10px; color: #3e3e3e; } #blog_content h3.title-comment + hr.slash-2 { height: 8px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%223px%22%20height%3D%223px%22%20viewBox%3D%220%200%203%203%22%20fill%3D%22hsla%25280%2C%200%25%2C%2065%25%2C%201.0%2529%22%3E%3Cpolygon%20points%3D%220%2C0.5%200%2C1.5%201.5%2C3%202.5%2C3%22%2F%3E%3Cpolygon%20points%3D%222.5%2C0%201.5%2C0%203%2C1.5%203%2C0.5%22%2F%3E%3C%2Fsvg%3E"); background-size: 3px 3px; width: 100%; margin-bottom: 20px; margin-top: 0px; border: none; } @media (max-width: 959px) { #blog_content { padding-top: 0px; padding-bottom: 30px; } } #blog_content h3.title-comment + hr.slash-2 { height: 8px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%223px%22%20height%3D%223px%22%20viewBox%3D%220%200%203%203%22%20fill%3D%22hsla%25280%2C%200%25%2C%2065%25%2C%201.0%2529%22%3E%3Cpolygon%20points%3D%220%2C0.5%200%2C1.5%201.5%2C3%202.5%2C3%22%2F%3E%3Cpolygon%20points%3D%222.5%2C0%201.5%2C0%203%2C1.5%203%2C0.5%22%2F%3E%3C%2Fsvg%3E"); background-size: 3px 3px; width: 100%; margin-bottom: 20px; margin-top: 0px; border: none; } #blog_content #recent_post { margin-top: 30px; } #blog_content .recent-posts { margin-bottom: 20px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: justify; } #blog_content .recent-posts a { width: 23%; margin-left: 1%; margin-right: 1%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media (max-width: 639px) { #blog_content .recent-posts a { width: 48%; } } @media (max-width: 374px) { #blog_content .recent-posts a { width: 98%; } #blog_content .recent-posts a .recent-post { max-width: inherit !important; min-height: inherit !important; margin-bottom: 20px; } #blog_content .recent-posts a .recent-post .recent-post-featured-image { height: 150px !important; } } #blog_content .recent-posts a:hover { text-decoration: none; } #blog_content .recent-posts a .recent-post { overflow: hidden; width: 100%; max-width: 260px; position: relative; min-height: 180px; } #blog_content .recent-posts a .recent-post .recent-post-featured-image { width: 100%; height: 110px; background-size: cover; } #blog_content .recent-posts a .recent-post .cat-name { position: absolute; top: 0; right: 0; padding: 0.1em 0.5em; font-size: 10px; font-weight: bold; background: #27a1ca; color: #fff; text-align: center; filter: alpha(opacity=90); opacity: 0.9; } #blog_content .recent-posts a .recent-post .recent-post-info { margin: 0; margin-top: 4px; font-family: "Oswald", sans-serif; font-weight: normal; color: #3e3e3e; font-size: 11px; line-height: 14px; } #blog_content .recent-posts a .recent-post .recent-post-title { color: #3e3e3e; font-size: 13px; line-height: 18px; font-weight: bold; margin: 4px 0; } /* ----------------------- .LP-Subscription ----------------------- */ @media only screen and (min-width: 960px) { .LP-Basic.LP-Subscription #download_pane .left-text { width: 55%; margin-left: 5%; margin-right: 0px; } } @media only screen and (max-width: 959px) { .LP-Basic.LP-Subscription #download_pane .left-text { display: none; } } .LP-Basic.LP-Subscription #letters-img { position: relative; } .LP-Basic.LP-Subscription #letters-img img { -webkit-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .LP-Basic.LP-Subscription #letters-img:hover .left-img > img { -webkit-transform: translate(-20px, 10px); transform: translate(-20px, 10px); } .LP-Basic.LP-Subscription #letters-img:hover .right-img > img { -webkit-transform: translate(20px, 10px); transform: translate(20px, 10px); } .LP-Basic.LP-Subscription #letters-img:hover .middle-img > img { -webkit-transform: translateY(-350px); transform: translateY(-350px); } .LP-Basic.LP-Subscription #letters-img .left-img { bottom: 0; left: 5%; position: absolute; top: 90px; width: 40%; z-index: 9998; } .LP-Basic.LP-Subscription #letters-img .left-img > img { border: 1px solid #f2f2f2; } .LP-Basic.LP-Subscription #letters-img .middle-img { bottom: 0; display: block; height: 540px; left: 23%; overflow: hidden; position: absolute; top: 40px; width: 300px; z-index: 9999; -webkit-box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); } .LP-Basic.LP-Subscription #letters-img .right-img { bottom: 0; left: 56%; position: absolute; top: 90px; width: 40%; z-index: 9998; } .LP-Basic.LP-Subscription #letters-img .right-img > img { border: 1px solid #f2f2f2; } /* ----------------------- .LP-Subscription ----------------------- */ .LP-Basic.LP-Contact #download_pane, #contact_pane { max-width: 500px; display: block; -ms-flex-wrap: inherit; flex-wrap: inherit; width: 100%; } @media only screen and (max-width: 896px) { .LP-Basic.LP-Contact #download_pane, #contact_pane { margin: 0 auto; } } .LP-Basic.LP-Contact #download_pane .lead-text, #contact_pane .lead-text { text-align: center; } .LP-Basic.LP-Contact #download_pane .lead-text, #contact_pane .lead-text { margin-bottom: 20px; } .LP-Basic.LP-Contact #download_pane .lead-text p, #contact_pane .lead-text p { margin-bottom: 10px; line-height: 20px; } .LP-Basic.LP-Contact #download_pane .lead-text p:last-child, #contact_pane .lead-text p:last-child { margin-bottom: 0px; } /* ----------------------- .LP-Subscription ----------------------- */ .LP-Contact.LP-Recruit #header .logo img { width: auto; height: 16px; } /* ---------------------------------------------- Style VN Template ---------------------------------------------- */ /* ----------------------- .VN Logo Header ----------------------- */ #header .logo-vn img { width: 100%; height: auto; max-width: 120px; } @media only screen and (max-width: 576px) { #header .logo-vn img { max-width: 80px; } html.vn #header .logo img { max-width: 100px; } } .vn-home { padding: 60px 0 0; } .vn-home #fadeshow1 { margin: auto; z-index: 50; } .vn-home #fadeshow1 .gallerylayer { z-index: 100 !important; } @media only screen and (max-width: 768px) { .vn-home #fadeshow1 { width: 100% !important; height: 140px !important; } .vn-home #fadeshow1 .gallerylayer img { width: 100%; margin-left: 0 !important; height: 140px; margin-top: 0 !important; } } .vn-home .kv-area .img-area { text-align: center; margin: 20px 0; } .vn-company .img-area img { max-width: 560px; height: auto; width: 100%; } @media only screen and (max-width: 768px) { .vn-company .ttl-area, .vn-company .txt-area { text-align: center !important; } } /* ----------------------- Body sidebar ----------------------- */ .body-sidebar .main-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 100%; max-width: 1200px; margin: auto; padding: 80px 0 30px; } .body-sidebar .main-wrap__sidebar { width: 20%; margin-right: 20px; } @media only screen and (max-width: 768px) { .body-sidebar .main-wrap__sidebar { display: none; } } .body-sidebar .main-wrap__sidebar > h2 { padding: 10px; padding-left: 13px; font-weight: bold; color: #fff; background: #6e6e6e; margin-bottom: 20px; } .body-sidebar .main-wrap__sidebar > h2 a { color: #fff; text-decoration: none; } .body-sidebar .main-wrap__sidebar > h3 { padding: 10px; padding-left: 13px; font-weight: bold; background: #efebef; margin-top: 10px; } .body-sidebar .main-wrap__sidebar > ul { margin: 0; padding: 0; border: 1px solid #efebef; } .body-sidebar .main-wrap__sidebar > ul li { padding: 3px; padding-left: 10px; line-height: 1.8; list-style: none; border-bottom: 1px solid #e7e7ef; } .body-sidebar .main-wrap__sidebar > ul li:hover { background-color: #efebef; color: #333; cursor: pointer; } .body-sidebar .main-wrap__sidebar > ul li a { display: block; } .body-sidebar .main-wrap__content { width: 80%; } @media only screen and (max-width: 768px) { .body-sidebar .main-wrap__content { width: 100%; } } .body-sidebar .main-wrap__content .inner-block { padding-bottom: 30px; } .body-sidebar .main-wrap__content .c-table01 { margin-bottom: 40px; } .body-sidebar .main-wrap__content h3.h3-sub { font-size: 20px; margin-bottom: 10px; border-bottom: 1px solid #c3c3c3; margin-top: 20px; } .body-sidebar .main-wrap__content .ttl-area { text-align: left; margin-bottom: 0; } .body-sidebar .main-wrap__content .ttl-area h2.c-ttl01 { background: #6e6e6e; display: block; padding: 5px 10px 5px; margin-bottom: 20px; color: #fff; } .body-sidebar .main-wrap__content .ttl-area h2.c-ttl01 span { margin-bottom: unset; } .body-sidebar .main-wrap__content .ttl-area h2.c-ttl01::before { content: unset; } .body-sidebar .main-wrap__content .ttl-area > h3 { margin-bottom: 5px; border-bottom: 1px solid #c3c3c3; margin-top: 20px; } .body-sidebar .main-wrap__content .kv-area .img-area { margin-bottom: 30px; } .body-sidebar .main-wrap__content .vn-company img { margin: 20px 0; } .body-sidebar .main-wrap__content .vn-company .align-items-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: 25px; } @media only screen and (max-width: 576px) { .body-sidebar .main-wrap__content .vn-company .align-items-center { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .body-sidebar .main-wrap__content .vn-company .align-items-center .img-area { width: 20%; } @media only screen and (max-width: 576px) { .body-sidebar .main-wrap__content .vn-company .align-items-center .img-area { width: 100%; } } .body-sidebar .main-wrap__content .vn-company .align-items-center .info-area { width: 80%; } @media only screen and (max-width: 576px) { .body-sidebar .main-wrap__content .vn-company .align-items-center .info-area { width: 100%; } } .body-sidebar .main-wrap__content .vn-product .flex-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: 25px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 576px) { .body-sidebar .main-wrap__content .vn-product .flex-two { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .body-sidebar .main-wrap__content .vn-product .flex-two .img-area { margin-right: 30px; } @media only screen and (max-width: 576px) { .body-sidebar .main-wrap__content .vn-product .flex-two .img-area { width: 100%; margin-right: 0; } } .body-sidebar .main-wrap__content .vn-product .flex-two .info-area { width: 70%; } @media only screen and (max-width: 576px) { .body-sidebar .main-wrap__content .vn-product .flex-two .info-area { width: 100%; } } .body-sidebar .main-wrap__content .vn-product .flex-two .info-area .ttl-area .ttl { font-size: 22px; } /* CSS SYS */ .Page.LP-Basic .LP-Hero .Hero--small.smallest { margin-top: -80px; padding-bottom: 40px; padding-top: 80px; height: auto !important; min-height: 230px; line-height: normal; } .Page.LP-Basic .LP-Hero .Hero--small.smallest .Hero-title { margin-top: 0px; } @media (max-width: 767px) { .Page.LP-Basic .LP-Hero .Hero--small.smallest .Hero-title { text-align: left; } } .Page.LP-Basic .LP-Hero .Hero--small.smallest .Hero-title:first-child { padding-top: 0px; } .Page.LP-Basic .LP-Hero .Hero--small.smallest .Hero-title:not(.has-kicker) { text-align: center; color: #fff; font-size: 38px; padding: 30px 0 20px; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h1 { display: none; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { font-size: 20px; font-weight: 500; line-height: 30px; margin-bottom: 0px; margin-top: 0px; font-weight: bold; } @media (max-width: 639px) { .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { font-size: 18px; } } @media (max-width: 639px) { .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { line-height: 28px; } } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header p:last-child { margin-top: 0px; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions p { font-size: 16px; font-weight: 400; line-height: 24px; } .System-Basic-emailsubpre .widget-type-email_subscriptions .cell-wrapper, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation .cell-wrapper, .System-Basic-emailsubpre .widget-type-email_simple_subscription .cell-wrapper { margin-bottom: 0px; } .System-Basic-emailsubpre .widget-type-email_subscriptions p, .System-Basic-emailsubpre .widget-type-email_subscriptions h1, .System-Basic-emailsubpre .widget-type-email_subscriptions h2, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation p, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h1, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h2, .System-Basic-emailsubpre .widget-type-email_simple_subscription p, .System-Basic-emailsubpre .widget-type-email_simple_subscription h1, .System-Basic-emailsubpre .widget-type-email_simple_subscription h2 { font-weight: normal; font-size: 20px; line-height: 25px; margin: 1px 0px 4px; } .System-Basic-emailsubpre html body .page-header { margin: 0px; padding-bottom: 1em; } .System-Basic-emailsubpre .widget-type-email_subscriptions p, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation p, .System-Basic-emailsubpre .widget-type-email_simple_subscription p { font-size: 14px; } .System-Basic-emailsubpre .widget-type-email_subscriptions h2, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h2, .System-Basic-emailsubpre .widget-type-email_simple_subscription h2 { font-size: 14px; } .System-Basic-emailsubpre .email-prefs .item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-bottom: 1px; position: relative; margin: 20px 0px; cursor: pointer !important; } .System-Basic-emailsubpre label { cursor: pointer; cursor: hand; } .System-Basic-emailsubpre .email-prefs .item.disabled { opacity: 0.6; cursor: not-allowed; } .System-Basic-emailsubpre .email-prefs .item .item-inner * { color: #444; } .System-Basic-emailsubpre .email-prefs .item .item-inner { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 8px; -webkit-transition-property: background; transition-property: background; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; border: 1px solid #E4E4E4; overflow: hidden; margin-top: 0; padding: 15px; background: #f7f7f7; } .System-Basic-emailsubpre .email-prefs .item .item-inner p { font-size: 15px; font-weight: 700; line-height: 18px; font-weight: 200; } .System-Basic-emailsubpre .email-prefs .item .item-inner.hovered { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); } .System-Basic-emailsubpre .email-prefs .item .item-inner.highlighted-subscription { background: #fff1ee; } .System-Basic-emailsubpre .email-prefs .item .item-inner.highlighted-subscription.selected { background: #fff1ee; } .System-Basic-emailsubpre .email-prefs .item .item-inner.selected { background: #f0f7fc; border: 1px solid #e0e7ec; } .System-Basic-emailsubpre .email-prefs .item.disabled .item-inner.hovered { -webkit-box-shadow: none; box-shadow: none; } .System-Basic-emailsubpre .checkbox-row { margin-top: 0; overflow: hidden; } .System-Basic-emailsubpre .checkbox-row span.fakelabel { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-transform: normal; vertical-align: middle; } .System-Basic-emailsubpre .checkbox-row input { vertical-align: middle; margin: 0; padding: 0; float: left; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .System-Basic-emailsubpre .checkbox-row input { position: relative; top: 7px; } } .System-Basic-emailsubpre p.header { margin-left: 0px; } .System-Basic-emailsubpre .checkbox-row span.fakelabel span { float: left; font-weight: bold; margin-left: 7px; vertical-align: top; } .System-Basic-emailsubpre .email-prefs .item p { clear: both; margin: 5px 20px 0px; } .System-Basic-emailsubpre .email-prefs .thumbnail { bottom: 1px; position: absolute; right: 6px; } .System-Basic-emailsubpre .email-prefs .thumbnail.float-top { top: 7px; } .System-Basic-emailsubpre .subscribe-options { margin-bottom: 12px; overflow: hidden; } .System-Basic-emailsubpre .subscribe-options label { font-size: 13px; margin-left: 0px; margin-right: 16px; } .System-Basic-emailsubpre .subscribe-options label span { font-weight: normal; margin-left: 3px; font-size: 14px; font-weight: bold; } .System-Basic-emailsubpre #submitbutton { margin-bottom: 0px; padding: 0 40px; border-width: 2px; height: 48px; line-height: 44px; background: #1A1311; border: none; color: #fff; font-weight: bold; -webkit-transition: 0.3s all; transition: 0.3s all; } .System-Basic-emailsubpre #submitbutton:hover { -webkit-transition: 0.3s all; transition: 0.3s all; background: #fff; color: #1A1311; border: 1px solid #1A1311; cursor: pointer; } .System-Basic-emailsubpre #email-prefs-form { margin-bottom: 0px; } .System-Basic-emailsubpre input.hs-input.email-edit { font-size: 20px; line-height: 25px; margin: 0px 0px 10px 0px; width: 450px; border: 1px solid #1A1311; } .System-Basic-emailsubpre a.email-edit { display: inline-block; background-color: #FF9900; border: 2px solid #FF9900; color: #FFFFFF; font-size: 18px; font-weight: bold; text-align: center; text-decoration: none; padding: 10px 20px; border-radius: 3px; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; margin-left: 10px; padding: 5px 15px; } .System-Basic-emailsubpre a.email-edit:hover { opacity: 0.7; } .BasicContentSection.is-default:not(.equal-border) .Wrap { max-width: 960px; padding-left: 0px; padding-right: 0px; } .Wrap, .Wrap--noPadding, .Wrap--noPaddingAll, .Wrap--wide, .Wrap--narrow, .view-blog, .view-news, .view-partners, .view-resources, .has-cutout-hero .Body-sections > .Section:first-child, .has-cutout-hero .Body-sections > :first-child > .Section { -webkit-box-sizing: content-box; box-sizing: content-box; margin-left: auto; margin-right: auto; max-width: 1240px; padding-left: 30px; padding-right: 30px; position: relative; width: calc(100% - 60px); } .u-bgColor--F4F4F4 + .u-bgColor--F4F4F4:after { display: none !important; } .u-bgColor--E3F1F8 { background-color: #75abe4; } .u-bgColor--389ECC { background-color: #1974d2; } .u-bgColor--389ECC:before { background: #1974d2; background: linear-gradient(135deg, #1974d2 0%, #468fdb 100%); opacity: 0.9; } .u-bgColor--1C4F66 { background-color: #145ba4; } .u-bgColor--1C4F66:before { background: rgba(13, 23, 34, 0.5); background: linear-gradient(135deg, rgba(13, 23, 34, 0.5) 0%, #145ba4 100%); opacity: 0.9; } .u-bgColor--273A42 { background-color: #273a42; } .u-padding--xxSmall { padding-bottom: 30px; padding-top: 30px; } .u-padding--xSmall { padding-bottom: 60px; padding-top: 60px; } .u-padding--small { padding-bottom: 90px; padding-top: 90px; } .u-padding--medium { padding-bottom: 120px; padding-top: 120px; } .u-padding--large { padding-bottom: 180px; padding-top: 180px; } .u-padding--xLarge { padding-bottom: 240px; padding-top: 240px; } .u-padding--xxLarge { padding-bottom: 300px; padding-top: 300px; } @media (max-width: 959px) { .u-padding--xxSmall { padding-bottom: 25px; padding-top: 25px; } .u-padding--xSmall { padding-bottom: 50px; padding-top: 50px; } .u-padding--small { padding-bottom: 75px; padding-top: 75px; } .u-padding--medium { padding-bottom: 100px; padding-top: 100px; } .u-padding--large { padding-bottom: 150px; padding-top: 150px; } .u-padding--xLarge { padding-bottom: 200px; padding-top: 200px; } .u-padding--xxLarge { padding-bottom: 250px; padding-top: 250px; } } @media (max-height: 959px) { .u-padding--xxSmall { padding-bottom: 22.5px; padding-top: 22.5px; } .u-padding--xSmall { padding-bottom: 45px; padding-top: 45px; } .u-padding--small { padding-bottom: 67.5px; padding-top: 67.5px; } .u-padding--medium { padding-bottom: 90px; padding-top: 90px; } .u-padding--large { padding-bottom: 135px; padding-top: 135px; } .u-padding--xLarge { padding-bottom: 180px; padding-top: 180px; } .u-padding--xxLarge { padding-bottom: 225px; padding-top: 225px; } } @media (max-width: 639px) { .u-padding--xxSmall { padding-bottom: 20px; padding-top: 20px; } .u-padding--xSmall { padding-bottom: 40px; padding-top: 40px; } .u-padding--small { padding-bottom: 60px; padding-top: 60px; } .u-padding--medium { padding-bottom: 80px; padding-top: 80px; } .u-padding--large { padding-bottom: 120px; padding-top: 120px; } .u-padding--xLarge { padding-bottom: 160px; padding-top: 160px; } .u-padding--xxLarge { padding-bottom: 200px; padding-top: 200px; } } @media (max-height: 639px) { .u-padding--xxSmall { padding-bottom: 15px; padding-top: 15px; } .u-padding--xSmall { padding-bottom: 30px; padding-top: 30px; } .u-padding--small { padding-bottom: 45px; padding-top: 45px; } .u-padding--medium { padding-bottom: 60px; padding-top: 60px; } .u-padding--large { padding-bottom: 90px; padding-top: 90px; } .u-padding--xLarge { padding-bottom: 120px; padding-top: 120px; } .u-padding--xxLarge { padding-bottom: 150px; padding-top: 150px; } } #MainContent .Email_backup input[type=email] { border: 1px solid #b7b7b7; margin: 30px 0 20px; } #MainContent .Email_backup h3 { font-size: 28px; } .sys_password .title_sub { font-size: 20px; line-height: 1.8; margin: 30px 0; } .sys_password #hs-pwd-widget-password { margin-top: 0px !important; height: 48px !important; line-height: 48px; width: 300px; margin-right: 15px; border: 1px solid #666; border-radius: 3px; padding: 5px 10px; } .sys_password .hs-button.primary { margin-bottom: 0px; padding: 0 40px; border-width: 2px; height: 48px; line-height: 44px; background: #1A1311; border: none; color: #fff; font-weight: bold; -webkit-transition: 0.3s all; transition: 0.3s all; } .sys_password .hs-button.primary:hover { background: #fff; color: #1A1311; border: 1px solid #1A1311; cursor: pointer; } .sys_result input[type=text] { border: 1px solid #b7b7b7; margin: 30px 0 20px; font-size: 18px; line-height: 28px; -webkit-transition: border 0.4s, color 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, color 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s, color 0.4s; transition: border 0.4s, box-shadow 0.4s, color 0.4s, -webkit-box-shadow 0.4s; padding: 5px 10px; } @media only screen and (max-width: 768px) { .LP-Custom-Module.LP-Hero { padding: 70px 0 0; } .LP-Custom-Module.LP-Hero .Hero-title { font-size: 26px !important; } .System-Basic-emailsubpre input.hs-input.email-edit { width: 100% !important; } } .sys_password .hs-button.primary { margin-top: 28px; } /*****************************************/ body.en-site ol.list, body.vn-site ol.list { list-style-type: decimal; list-style-position: inside; } body.en-site .ttl-area h3.c-ttl01 .ja, body.vn-site .ttl-area h3.c-ttl01 .ja { font-size: 22px; letter-spacing: 0.05em; } body.en-site #download_pane .form-title, body.vn-site #download_pane .form-title { display: none; } /* ----------------------- .two-columns ----------------------- */ body.en-site .row, body.vn-site .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } body.en-site .row .col-50, body.vn-site .row .col-50 { width: 48%; } body.en-site .row .col-50:last-child { margin-left: 4%; } body.en-site .row .col-50 .img, body.vn-site .row .col-50 .img { display: block; width: 100%; } body.en-site .row .col-50 .img img, body.vn-site .row .col-50 .img img { width: 100%; height: auto; } body.en-site main > section > .inner-block, body.vn-site main > section > .inner-block { text-align: center; padding-bottom: 60px; padding-top: 0px; } body.en-site main > section:last-child > .inner-block, body.vn-site main > section:last-child > .inner-block { padding-bottom: 180px; } body.en-site .inner-small .inner-block, body.vn-site .inner-small .inner-block { max-width: 800px; } @media (max-width: 896px) { body.en-site main > section:last-child > .inner-block, body.vn-site main > section:last-child > .inner-block { padding: 0 20px 100px; } } @media (max-width: 639px) { body.en-site main > section > .inner-block, body.vn-site main > section > .inner-block { padding-bottom: 30px; } body.en-site .row, body.vn-site .row { display: block; -ms-flex-wrap: inherit; flex-wrap: inherit; } body.en-site .row .col-50, body.vn-site .row .col-50 { width: 100%; margin-bottom: 15px; } body.en-site .row .col-50:last-child { margin-left: 0px; margin-bottom: 0px; } body.en-site .row .col-50 .img, body.vn-site .row .col-50 .img { display: block; width: 100%; } body.en-site .row .col-50 .img img, body.vn-site .row .col-50 .img img { width: 100%; height: auto; } } body.en-site .byuse-block.clear-padding-top .inner-block, body.vn-site .byuse-block.clear-padding-top .inner-block { padding-top: 0px; } body.en-site .w-product2 .initiatives-col, body.vn-site .w-product2 .initiatives-col { max-width: 700px; margin-left: auto; margin-right: auto; } body.en-site .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field label span.hs-form-required, body.vn-site .LP-Basic #download_pane #hs_form_target_lp_form .hs-form-field label span.hs-form-required { font-size: 9px; } body.en-site .c-table01 td a, body.vn-site .c-table01 td a { text-decoration: underline; } body.en-site .c-table01 td a:hover, body.vn-site .c-table01 td a:hover { color: #0d2580; } body.en-site .sub-title, body.vn-site .sub-title { font-size: 20px; } .jp_spacer { width: 100%; } .jp_spacer.spacer-30 { height: 30px; } @media only screen and (max-width: 768px) { .jp_spacer.spacer-30 { height: 15px; } } @media only screen and (max-width: 576px) { .jp_spacer.spacer-30 { height: 8px; } } .jp_spacer.spacer-40 { height: 40px; } @media only screen and (max-width: 768px) { .jp_spacer.spacer-40 { height: 20px; } } @media only screen and (max-width: 576px) { .jp_spacer.spacer-40 { height: 12px; } } .jp_spacer.spacer-50 { height: 50px; } @media only screen and (max-width: 768px) { .jp_spacer.spacer-50 { height: 25px; } } @media only screen and (max-width: 576px) { .jp_spacer.spacer-50 { height: 16px; } } .jp_spacer.spacer-60 { height: 60px; } @media only screen and (max-width: 768px) { .jp_spacer.spacer-60 { height: 30px; } } @media only screen and (max-width: 576px) { .jp_spacer.spacer-60 { height: 22px; } } .jp_spacer.spacer-90 { height: 90px; } @media only screen and (max-width: 768px) { .jp_spacer.spacer-90 { height: 45px; } } @media only screen and (max-width: 576px) { .jp_spacer.spacer-90 { height: 36px; } } .jp_spacer.spacer-120 { height: 120px; } @media only screen and (max-width: 768px) { .jp_spacer.spacer-120 { height: 60px; } } @media only screen and (max-width: 576px) { .jp_spacer.spacer-120 { height: 58px; } } .LP-Google-Search-Result .Wrap { min-height: 200px; } .LP-Google-Search-Result .gsc-adBlock { display: none !important; } .LP-Google-Search-Result .gsc-above-wrapper-area, .LP-Google-Search-Result .gsc-resultsHeader { display: none !important; } .LP-Google-Search-Result .gsc-webResult.gsc-result { border-bottom: 1px solid #ddd !important; padding-bottom: 0px; margin-top: 10px; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title a.gs-title, .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-image { -webkit-transition: all 0.3s; transition: all 0.3s; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title a.gs-title:hover, .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-image:hover { opacity: 0.7 !important; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gs-title, .LP-Google-Search-Result .gsc-webResult.gsc-result a.gs-title { height: 25px !important; font-family: "Noto Serif JP", sans-serif; text-decoration: none; } .LP-Google-Search-Result .gsc-webResult.gsc-result a.gs-title { font-size: 18px; } .LP-Google-Search-Result .gsc-webResult.gsc-result .gsc-url-top div.gs-visibleUrl { font-size: 16px; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result { margin-top: 0px; margin-bottom: 20px; font-family: "Noto Serif JP", sans-serif; border: none; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result td { border: none; } .LP-Google-Search-Result .gsc-control-cse .gsc-table-result .gsc-table-cell-snippet-close { border: none; padding-left: 8px; padding-top: 0px; } .LP-Google-Search-Result .gsc-cursor-box.gs-bidi-start-align { margin-top: 20px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box { margin-left: 0px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page { border: none; background-color: #022c83; color: #fff; padding: 6px 8px; margin-right: 12px; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { background-color: #d9d9d9; color: #3e3e3e; font-weight: normal; } .LP-Google-Search-Result .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page:hover { text-decoration: none; } @media only screen and (min-width: 897px) { .en-service .pro-ttl-container .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .en-service .pro-ttl-container .item { margin-bottom: 10px; margin-left: 0 !important; margin-right: 10px; } } .en-simulation .sefety-sec02 li { height: auto; margin-bottom: 30px; } .en-simulation .sefety-sec02 .list-head .sub { width: 30%; } .en-simulation .sefety-sec02 .list-head { -ms-flex-wrap: wrap; flex-wrap: wrap; } /* ----------------------- US Site ----------------------- */ html.us { word-break: initial; line-height: 1.6; } html.us .english-site .btn-area { text-align: center; } html.us .english-site .btn-area .c-btn01 { display: inline-block; width: auto; min-width: 155px; } html.us .en-service .pro-ttl-container .wrap { word-break: initial; text-align: center; } html.us .initiatives-col .wrap > ul li, html.us .initiatives-list .ttl { letter-spacing: 0px; } html.us .initiatives-list .ttl { font-size: 20px; line-height: 30px; text-align: left; } @media only screen and (min-width: 897px) { html.us .site-list .link-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } html.us .site-list .link-list li { margin-right: 40px; } html.us .site-list .link-list li + li { margin-left: 0px; } } .english-site #header .logo img, .jp-site.lang-en #header .logo img { width: 240px; height: auto; } @media only screen and (max-width: 576px) { .english-site #header .logo img, .jp-site.lang-en #header .logo img { max-width: 170px; } } @media only screen and (max-width: 576px) { .english-site #footer .inner-block .cont .nav-area { text-align: center; margin-bottom: 30px; } } /* ----------------------- .VN Logo Header ----------------------- */ #email-prefs-form #content h3 small { display: block; font-size: 18px; } /* ----------------------- .Footer address ----------------------- */ #footer.footer-type2 .address-area .clear { clear: both; } #footer.footer-type2 .address-area .left { float: left; } #footer.footer-type2 .address-area .right { float: left; margin-left: 35px; } #footer.footer-type2 .address-area .right .info { margin-top: 0px; font-size: 15px; } @media only screen and (max-width: 896px) { #footer.footer-type2 .address-area .left, #footer.footer-type2 .address-area .right { float: none; } #footer.footer-type2 .address-area .right { margin-left: 0px; } #footer.footer-type2 .address-area .right .info { margin-top: 15px; font-size: 13px; } } @media only screen and (max-width: 576px) { form .hs-form-field { margin-bottom: 12px; } } form .hs-form-field select.hs-input { background-image: url(/hubfs/8005843/library/icon/angle-down-gray.png) !important; background-repeat: no-repeat !important; background-position-x: 98% !important; background-position-y: 12px !important; } /* ----------------------- .Fix /en/recruit/inquiry? ----------------------- */ main.page-inquiry-recruit-en .kv-block > .inner-block:before { right: -765px; } main.page-inquiry-recruit-en .kv-block > .inner-block:after { left: -765px; } p { word-break: break-word; } .Button--large { color: #fff; font-size: 16px; font-weight: 600; padding: 4px 30px; -webkit-transition: 0.4s background, 0.4s border, 0.4s color; transition: 0.4s background, 0.4s border, 0.4s color; border: 2px solid #1a1311; cursor: pointer; display: inline-block; line-height: 30px; text-align: center; text-decoration: none; white-space: nowrap; background: #1a1311; white-space: nowrap; } .Button--large:hover { color: #1a1311; background: #fff; -webkit-transition: 0.4s background, 0.4s border, 0.4s color; transition: 0.4s background, 0.4s border, 0.4s color; } .u-alignCenter, .tac { text-align: center; } .group-email .item .label { width: 100px; display: inline-block; } #related_wrapper { margin-top: 0; margin-bottom: 0; } #related_post { margin-top: 30px; } #related_post ul { list-style-type: none; } #related_post ul li a { color: #0d2580; } #related_post ul li { position: relative; padding-left: 20px; font-size: 15px; margin-bottom: 5px; } #related_post ul li a:after { font-family: "fontawesome"; content: "\f054"; left: 3px; font-size: 12px; color: #0d2580; position: absolute; top: 5px; } @media (min-width: 960px) { .Blog-Detail .blog-section .post-body #hs_cos_wrapper_post_body + h2 { margin-top: 0 !important; } } /* ページ編集画面でヘッダー、フッターメニューを非表示 */ .hs-inline-edit #header .nav-area, .hs-inline-edit #footer .cont .nav-area { display: none; } /* Required LP Basic */ .LP-Basic.resource-en #download_pane #hs_form_target_lp_form .hs-form-field label span.hs-form-required { background-color: #fff; color: red; font-size: 16px; padding-left: 0; } /*---------------------------------------------*/ /*-------------- Add Style - Tam --------------*/ /*---------------------------------------------*/ @media only screen and (max-width: 414px) { .en-site .vn-home #fadeshow1, .en-site .vn-home #fadeshow1 .gallerylayer img { height: 95px !important; } .en-site .vn-home .kv-area .img-area img.sp { width: 250px; } .en-site #footer .nav-area .qr_code img { max-width: 210px !important; } } @media only screen and (max-width: 375px) { .en-site .vn-home #fadeshow1, .en-site .vn-home #fadeshow1 .gallerylayer img { height: 85px !important; } } @media only screen and (max-width: 320px) { .en-site .vn-home #fadeshow1, .en-site .vn-home #fadeshow1 .gallerylayer img { height: 80px !important; } .en-site .vn-home .kv-area .img-area img.sp { width: 200px; } .en-site #footer .nav-area .qr_code img { max-width: 200px !important; } } /*---------------------------------------------*/ /*-------------- Add Style - Phu --------------*/ /*---------------------------------------------*/ .cta-consulting { display: -ms-grid; display: grid; grid-template-columns: minmax(-webkit-min-content, -webkit-max-content) 1fr; -ms-grid-columns: minmax(-webkit-min-content, -webkit-max-content) 1fr; -ms-grid-columns: minmax(min-content, max-content) 1fr; grid-template-columns: minmax(min-content, max-content) 1fr; background: #fbfcfd; position: relative; } @media (min-width: 768px) { .cta-consulting { width: calc(100% + 8px); left: -8px; } } .cta-consulting .img-w { display: none; } @media (min-width: 768px) { .cta-consulting .img-w { display: -ms-grid; display: grid; background: #f5f6f7; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cta-consulting .img-w .img { position: relative; z-index: 2; } .cta-consulting .img-w:after { content: ""; display: block; width: 8px; height: 100%; position: absolute; top: 0; left: 0; background: #fff; } } .cta-consulting .text { font-size: 14px; line-height: 24px; padding: 25px; border: 1px solid #f2f2f2; } @media (min-width: 768px) { .cta-consulting .text { padding: 32px 25px 40px; } } .cta-consulting .text .title { margin: 0 0 25px; font-weight: 600; font-size: 20px; line-height: 30px; } @media (min-width: 768px) { .cta-consulting .text .title { margin-bottom: 16px; } } .cta-consulting .text .text-list { margin: 0 0 25px; } @media (min-width: 768px) { .cta-consulting .text .text-list { margin-bottom: 28px; } } .cta-consulting .text .text-list .item { padding: 0; margin: 0 0 8px; } .cta-consulting .text .text-list .item:last-child { margin-bottom: 0; } .cta-consulting .text .text-list .item:before { display: none; } .cta-consulting .text .btn { border-radius: 3px; font-size: 13px; padding-top: 15px; padding-bottom: 15px; } @media (min-width: 768px) { .cta-consulting .text .btn { min-width: 175px; } } .readmore-button { font-size: 15px; color: #23496d; word-break: break-word; border-radius: 8px; cursor: auto; background-color: #0d2580; display: table; width: 180px; min-width: 180px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .readmore-button a { color: #fff; font-size: 16px !important; font-family: Arial, sans-serif; margin: 0; text-transform: none; text-decoration: none; padding: 12px 18px; display: block; text-align: center; text-decoration: none !important; font-weight: bold; } .readmore-button:hover { opacity: 0.7; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .readmore-button.tac { margin-left: auto; margin-right: auto; } html.vn body.en-site #wrapper #breadcrumb .inner-block { padding: 10px 0; } @media (max-width: 768px) { html.vn body.en-site #wrapper #breadcrumb .inner-block { padding: 10px; padding-top: 25px; } html.vn body.en-site #wrapper #breadcrumb .inner-block ul li a span { font-size: 13px; } } /*****************************************/ /******** LPFlexPrice - 在庫一覧 *********/ /*****************************************/ .LPFlexPrice .block-inner .filter_button { margin: 0; } .LPFlexPrice .list-checkbox { margin-bottom: 100px; } .LPFlexPrice .flex { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .LPFlexPrice .flex .filter_row_title { color: #007ACC; font-size: 18px; font-weight: 500; margin-bottom: 10px; border-bottom: 1px solid #e8e8e8; padding-bottom: 10px; width: 100%; } .LPFlexPrice .flex .span { width: 20%; display: block; float: left; min-height: 18px; } .LPFlexPrice .flex .span input { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .LPFlexPrice .flex .span label { font-size: 16px; margin-left: 5px; } .LPFlexPrice .table { width: 100%; } .LPFlexPrice .table thead tr { height: 40px; background: #007acc; color: #fff; } .LPFlexPrice .table th, .LPFlexPrice .table td { border: 1px solid #1a1311; height: 35px; line-height: 24px; } .LPFlexPrice .table tbody tr td.location-text, .LPFlexPrice .table tbody tr td.address-text, .LPFlexPrice .table tbody tr td.variety-text, .LPFlexPrice .table tbody tr td.detail-text { padding-left: 8px; } .LPFlexPrice .table tbody tr td.location-text { width: 16%; text-align: left; } .LPFlexPrice .table tbody tr td.location-text a { color: #007acc; text-decoration: underline; } .LPFlexPrice .table tbody tr td.external-text, .LPFlexPrice .table tbody tr td.thick-text, .LPFlexPrice .table tbody tr td.length-text, .LPFlexPrice .table tbody tr td.date-text, .LPFlexPrice .table tbody tr td.number-text { text-align: right; padding-right: 8px; } .LPFlexPrice .table tbody tr td.address-text { width: 22%; } .LPFlexPrice .table tbody tr td.variety-text { width: 20%; } .LPFlexPrice .table tbody tr td.detail-text { width: 15%; } @media screen and (max-width: 1023px) { .LPFlexPrice .block-inner .filter_button { padding: 10px; font-size: 13px; width: 200px; } .LPFlexPrice .flex .span { width: 25%; } } @media screen and (max-width: 768px) { .LPFlexPrice .flex .span { width: 33.3333333333%; } .LPFlexPrice .table_data { overflow-x: scroll; } .LPFlexPrice .table th, .LPFlexPrice .table td { white-space: nowrap; } } .LPFlexPrice .non-value { text-align: center; margin-top: 20px; font-size: 18px; display: none; } /* ===================================== */ /* ---------- Search-Blog-List ---------- */ /* ===================================== */ .Blog-Search.Header-Global { display: block; margin-bottom: 50px; } .Blog-Search .SearchTop { width: 100%; position: relative; vertical-align: middle; white-space: nowrap; margin: 0 auto; } .Blog-Search .SearchTop .searchKeyword input { width: 100%; border-radius: 50px; opacity: 1; padding: 10px 20px; font-size: 16px; color: #666; -webkit-transition: border 0.4s, color 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, color 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s, color 0.4s; transition: border 0.4s, box-shadow 0.4s, color 0.4s, -webkit-box-shadow 0.4s; border: 1px solid #ccc; line-height: 28px; } .Blog-Search .SearchTop .searchKeyword input::-webkit-input-placeholder { color: #ccc; } .Blog-Search .SearchTop .searchKeyword input::-moz-placeholder { color: #ccc; } .Blog-Search .SearchTop .searchKeyword input:-ms-input-placeholder { color: #ccc; } .Blog-Search .SearchTop .searchKeyword input::-ms-input-placeholder { color: #ccc; } .Blog-Search .SearchTop .searchKeyword input::placeholder { color: #ccc; } .Blog-Search .SearchTop .searchKeyword input:focus { -webkit-box-shadow: rgba(13, 23, 34, 0.25) 0 3px 15px, rgba(13, 23, 34, 0.13) 0 0 0 1px; box-shadow: rgba(13, 23, 34, 0.25) 0 3px 15px, rgba(13, 23, 34, 0.13) 0 0 0 1px; border-color: #1a1311; } .Blog-Search .SearchTop .searchKeyword button { background-color: #fff; border: none; font-size: 18px; position: absolute; top: 14px; right: 20px; color: #1a1311; width: 18px; height: 18px; } @media screen and (max-width: 960px) { .Blog-Search .SearchTop { margin-top: 50px; } } @media screen and (max-width: 640px) { #Blog-Page .Wrap .Row.blog-top { margin-top: 40px; } .Blog-Search .SearchTop .searchKeyword input { padding: 6px 16px; font-size: 15px; } .Blog-Search .SearchTop { width: 95%; } .Blog-Search .SearchTop .searchKeyword button { top: 10px; } } .vn-blog .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:not(:focus) { background: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/search-text-v3.png) left center no-repeat rgb(255, 255, 255) !important; } .vn-blog .Blog-Sidebar-search form.gsc-search-box.gsc-search-box-tools table.gsc-search-box td.gsc-input .gsc-input-box input.gsc-input:focus { background: rgb(255, 255, 255) !important; } /* ---------- VN Blog List ---------- */ .vn-blog #blog_content #main_content .cat-name.renewal { position: absolute; } .vn-blog #blog_content #main_content .button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 15px; margin-bottom: 4px; } .vn-blog #blog_content #main_content .button span { border: none; color: #1B1055; font-family: "Oriya MN", sans-serif; font-size: 14px; text-transform: none; font-weight: normal; padding: 1px 7px 2px; display: inline-block; position: relative; z-index: 99; } .vn-blog #blog_content #main_content .c-list01 li a .info .entry-title { min-height: 50px; } @media screen and (max-width: 897px) { .vn-blog #blog_content #main_content .c-list01 li a .info .entry-title { min-height: auto; } .vn-blog #blog_content #main_content .button { display: none; } } .vn-blog #blog_content #main_content .c-list01 li a:hover { opacity: 0.7; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) inset; } .vn-blog .c-list01 .img-area img { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .vn-blog #sidebar .Blog-Sidebar-cta a:hover, .vn-blog .post-body .hs-cta-wrapper a:hover { opacity: 0.7; } /* ---------- Add Style-Tam ---------- */ .vn-blog #blog_content .blog-section .post-body #toc-box #toc-index .index-h3 { margin: 0; margin-bottom: 10px; padding-left: 20px; } .vn-blog #blog_content .blog-section .post-body #toc-box #toc-index .index-h3 li:before { content: "" !important; border: 2px solid #0061d5 !important; border-radius: 100% !important; display: block !important; height: 6px !important; left: -13px !important; position: absolute !important; top: 14px !important; -webkit-transform: translate(0, -50%) !important; transform: translate(0, -50%) !important; width: 6px !important; } @media (max-width: 480px) { .vn-blog .Blog-Detail .blog-section .social-blog { display: none; } } /************************************/ /***************** Wrap *************/ /************************************/ .Wrap { -webkit-box-sizing: content-box; box-sizing: content-box; margin-left: auto; margin-right: auto; max-width: 1240px; position: relative; margin-top: 30px; margin-bottom: 30px; text-align: left; } .Wrap .u-alignCenter { text-align: center; } .Wrap .Row { -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 30px); -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } .Wrap .Column--6:first-child { padding-right: 30px; } .Wrap .Column--4 { margin-bottom: 30px; } .Wrap .Column--4:first-child, .Wrap .Column--4:nth-child(2), .Wrap .Column--4:nth-child(4) { padding-right: 35px; } .Wrap h2 { font-size: 36px; line-height: 1.6; margin-bottom: 30px; } .Wrap h3 { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #1a1311; } .Wrap p, .Wrap ul li { font-size: 18px; } .Wrap .Row .flex-contain { color: #4a4a4a; -webkit-box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); padding: 30px; -webkit-transition: -webkit-box-shadow 0.4s; transition: -webkit-box-shadow 0.4s; transition: box-shadow 0.4s; transition: box-shadow 0.4s, -webkit-box-shadow 0.4s; background: #fff; border-radius: 7px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; overflow: hidden; width: 100%; } .Wrap .Row .flex-contain .img img { width: 120px; } .Wrap p { margin-bottom: 1em; } .Wrap .Column--2_5 { width: 20%; } .Wrap .ColumnOffset--2_5 { margin-left: 20%; } .Wrap .Column--1 { width: 8.33333%; } .Wrap .ColumnOffset--0 { margin-left: 0%; } .Wrap .Column--2 { width: 16.66667%; } .Wrap .ColumnOffset--1 { margin-left: 8.33333%; } .Wrap .Column--3 { width: 25%; } .Wrap .ColumnOffset--2 { margin-left: 16.66667%; } .Wrap .Column--4 { width: 33.33333%; } .Wrap .ColumnOffset--3 { margin-left: 25%; } .Wrap .Column--5 { width: 41.66667%; } .Wrap .ColumnOffset--4 { margin-left: 33.33333%; } .Wrap .Column--6 { width: 50%; text-align: left; } .Wrap .ColumnOffset--5 { margin-left: 41.66667%; } .Wrap .Column--7 { width: 58.33333%; } .Wrap .ColumnOffset--6 { margin-left: 50%; } .Wrap .Column--8 { width: 66.66667%; } .Wrap .ColumnOffset--7 { margin-left: 58.33333%; } .Wrap .Column--9 { width: 75%; } .Wrap .ColumnOffset--8 { margin-left: 66.66667%; } .Wrap .Column--10 { width: 83.33333%; } .Wrap .ColumnOffset--9 { margin-left: 75%; } .Wrap .Column--11 { width: 91.66667%; } .Wrap .ColumnOffset--10 { margin-left: 83.33333%; } .Wrap .Column--12 { width: 100%; } .Wrap .ColumnOffset--11 { margin-left: 91.66667%; } @media (max-width: 1599px) { .Wrap .Column--xxLarge-1 { width: 8.33333%; } .Wrap .ColumnOffset--xxLarge-0 { margin-left: 0%; } .Wrap .Column--xxLarge-2 { width: 16.66667%; } .Wrap .ColumnOffset--xxLarge-1 { margin-left: 8.33333%; } .Wrap .Column--xxLarge-3 { width: 25%; } .Wrap .ColumnOffset--xxLarge-2 { margin-left: 16.66667%; } .Wrap .Column--xxLarge-4 { width: 33.33333%; } .Wrap .ColumnOffset--xxLarge-3 { margin-left: 25%; } .Wrap .Column--xxLarge-5 { width: 41.66667%; } .Wrap .ColumnOffset--xxLarge-4 { margin-left: 33.33333%; } .Wrap .Column--xxLarge-6 { width: 50%; } .Wrap .ColumnOffset--xxLarge-5 { margin-left: 41.66667%; } .Wrap .Column--xxLarge-7 { width: 58.33333%; } .Wrap .ColumnOffset--xxLarge-6 { margin-left: 50%; } .Wrap .Column--xxLarge-8 { width: 66.66667%; } .Wrap .ColumnOffset--xxLarge-7 { margin-left: 58.33333%; } .Wrap .Column--xxLarge-9 { width: 75%; } .Wrap .ColumnOffset--xxLarge-8 { margin-left: 66.66667%; } .Wrap .Column--xxLarge-10 { width: 83.33333%; } .Wrap .ColumnOffset--xxLarge-9 { margin-left: 75%; } .Wrap .Column--xxLarge-11 { width: 91.66667%; } .Wrap .ColumnOffset--xxLarge-10 { margin-left: 83.33333%; } .Wrap .Column--xxLarge-12 { width: 100%; } .Wrap .ColumnOffset--xxLarge-11 { margin-left: 91.66667%; } } @media (max-width: 1399px) { .Wrap .Column--xLarge-1 { width: 8.33333%; } .Wrap .ColumnOffset--xLarge-0 { margin-left: 0%; } .Wrap .Column--xLarge-2 { width: 16.66667%; } .Wrap .ColumnOffset--xLarge-1 { margin-left: 8.33333%; } .Wrap .Column--xLarge-3 { width: 25%; } .Wrap .ColumnOffset--xLarge-2 { margin-left: 16.66667%; } .Wrap .Column--xLarge-4 { width: 33.33333%; } .Wrap .ColumnOffset--xLarge-3 { margin-left: 25%; } .Wrap .Column--xLarge-5 { width: 41.66667%; } .Wrap .ColumnOffset--xLarge-4 { margin-left: 33.33333%; } .Wrap .Column--xLarge-6 { width: 50%; } .Wrap .ColumnOffset--xLarge-5 { margin-left: 41.66667%; } .Wrap .Column--xLarge-7 { width: 58.33333%; } .Wrap .ColumnOffset--xLarge-6 { margin-left: 50%; } .Wrap .Column--xLarge-8 { width: 66.66667%; } .Wrap .ColumnOffset--xLarge-7 { margin-left: 58.33333%; } .Wrap .Column--xLarge-9 { width: 75%; } .Wrap .ColumnOffset--xLarge-8 { margin-left: 66.66667%; } .Wrap .Column--xLarge-10 { width: 83.33333%; } .Wrap .ColumnOffset--xLarge-9 { margin-left: 75%; } .Wrap .Column--xLarge-11 { width: 91.66667%; } .Wrap .ColumnOffset--xLarge-10 { margin-left: 83.33333%; } .Wrap .Column--xLarge-12 { width: 100%; } .Wrap .ColumnOffset--xLarge-11 { margin-left: 91.66667%; } } @media (max-width: 1199px) { .Wrap .Column--large-1 { width: 8.33333%; } .Wrap .ColumnOffset--large-0 { margin-left: 0%; } .Wrap .Column--large-2 { width: 16.66667%; } .Wrap .ColumnOffset--large-1 { margin-left: 8.33333%; } .Wrap .Column--large-3 { width: 25%; } .Wrap .ColumnOffset--large-2 { margin-left: 16.66667%; } .Wrap .Column--large-4 { width: 33.33333%; } .Wrap .ColumnOffset--large-3 { margin-left: 25%; } .Wrap .Column--large-5 { width: 41.66667%; } .Wrap .ColumnOffset--large-4 { margin-left: 33.33333%; } .Wrap .Column--large-6 { width: 50%; } .Wrap .ColumnOffset--large-5 { margin-left: 41.66667%; } .Wrap .Column--large-7 { width: 58.33333%; } .Wrap .ColumnOffset--large-6 { margin-left: 50%; } .Wrap .Column--large-8 { width: 66.66667%; } .Wrap .ColumnOffset--large-7 { margin-left: 58.33333%; } .Wrap .Column--large-9 { width: 75%; } .Wrap .ColumnOffset--large-8 { margin-left: 66.66667%; } .Wrap .Column--large-10 { width: 83.33333%; } .Wrap .ColumnOffset--large-9 { margin-left: 75%; } .Wrap .Column--large-11 { width: 91.66667%; } .Wrap .ColumnOffset--large-10 { margin-left: 83.33333%; } .Wrap .Column--large-12 { width: 100%; } .Wrap .ColumnOffset--large-11 { margin-left: 91.66667%; } } @media (max-width: 1039px) { .Wrap .Column--mediumLarge-1 { width: 8.33333%; } .Wrap .ColumnOffset--mediumLarge-0 { margin-left: 0%; } .Wrap .Column--mediumLarge-2 { width: 16.66667%; } .Wrap .ColumnOffset--mediumLarge-1 { margin-left: 8.33333%; } .Wrap .Column--mediumLarge-3 { width: 25%; } .Wrap .ColumnOffset--mediumLarge-2 { margin-left: 16.66667%; } .Wrap .Column--mediumLarge-4 { width: 33.33333%; } .Wrap .ColumnOffset--mediumLarge-3 { margin-left: 25%; } .Wrap .Column--mediumLarge-5 { width: 41.66667%; } .Wrap .ColumnOffset--mediumLarge-4 { margin-left: 33.33333%; } .Wrap .Column--mediumLarge-6 { width: 50%; } .Wrap .ColumnOffset--mediumLarge-5 { margin-left: 41.66667%; } .Wrap .Column--mediumLarge-7 { width: 58.33333%; } .Wrap .ColumnOffset--mediumLarge-6 { margin-left: 50%; } .Wrap .Column--mediumLarge-8 { width: 66.66667%; } .Wrap .ColumnOffset--mediumLarge-7 { margin-left: 58.33333%; } .Wrap .Column--mediumLarge-9 { width: 75%; } .Wrap .ColumnOffset--mediumLarge-8 { margin-left: 66.66667%; } .Wrap .Column--mediumLarge-10 { width: 83.33333%; } .Wrap .ColumnOffset--mediumLarge-9 { margin-left: 75%; } .Wrap .Column--mediumLarge-11 { width: 91.66667%; } .Wrap .ColumnOffset--mediumLarge-10 { margin-left: 83.33333%; } .Wrap .Column--mediumLarge-12 { width: 100%; } .Wrap .ColumnOffset--mediumLarge-11 { margin-left: 91.66667%; } } @media (max-width: 959px) { .Wrap .Column--medium-1 { width: 8.33333%; } .Wrap .ColumnOffset--medium-0 { margin-left: 0%; } .Wrap .Column--medium-2 { width: 16.66667%; } .Wrap .ColumnOffset--medium-1 { margin-left: 8.33333%; } .Wrap .Column--medium-3 { width: 25%; } .Wrap .ColumnOffset--medium-2 { margin-left: 16.66667%; } .Wrap .Column--medium-4 { width: 33.33333%; } .Wrap .ColumnOffset--medium-3 { margin-left: 25%; } .Wrap .Column--medium-5 { width: 41.66667%; } .Wrap .ColumnOffset--medium-4 { margin-left: 33.33333%; } .Wrap .Column--medium-6 { width: 50%; } .Wrap .ColumnOffset--medium-5 { margin-left: 41.66667%; } .Wrap .Column--medium-7 { width: 58.33333%; } .Wrap .ColumnOffset--medium-6 { margin-left: 50%; } .Wrap .Column--medium-8 { width: 66.66667%; } .Wrap .ColumnOffset--medium-7 { margin-left: 58.33333%; } .Wrap .Column--medium-9 { width: 75%; } .Wrap .ColumnOffset--medium-8 { margin-left: 66.66667%; } .Wrap .Column--medium-10 { width: 83.33333%; } .Wrap .ColumnOffset--medium-9 { margin-left: 75%; } .Wrap .Column--medium-11 { width: 91.66667%; } .Wrap .ColumnOffset--medium-10 { margin-left: 83.33333%; } .Wrap .Column--medium-12 { width: 100%; } .Wrap .ColumnOffset--medium-11 { margin-left: 91.66667%; } } @media (max-width: 819px) { .Wrap .Column--mediumSmall-1 { width: 8.33333%; } .Wrap .ColumnOffset--mediumSmall-0 { margin-left: 0%; } .Wrap .Column--mediumSmall-2 { width: 16.66667%; } .Wrap .ColumnOffset--mediumSmall-1 { margin-left: 8.33333%; } .Wrap .Column--mediumSmall-3 { width: 25%; } .Wrap .ColumnOffset--mediumSmall-2 { margin-left: 16.66667%; } .Wrap .Column--mediumSmall-4 { width: 33.33333%; } .Wrap .ColumnOffset--mediumSmall-3 { margin-left: 25%; } .Wrap .Column--mediumSmall-5 { width: 41.66667%; } .Wrap .ColumnOffset--mediumSmall-4 { margin-left: 33.33333%; } .Wrap .Column--mediumSmall-6 { width: 50%; } .Wrap .ColumnOffset--mediumSmall-5 { margin-left: 41.66667%; } .Wrap .Column--mediumSmall-7 { width: 58.33333%; } .Wrap .ColumnOffset--mediumSmall-6 { margin-left: 50%; } .Wrap .Column--mediumSmall-8 { width: 66.66667%; } .Wrap .ColumnOffset--mediumSmall-7 { margin-left: 58.33333%; } .Wrap .Column--mediumSmall-9 { width: 75%; } .Wrap .ColumnOffset--mediumSmall-8 { margin-left: 66.66667%; } .Wrap .Column--mediumSmall-10 { width: 83.33333%; } .Wrap .ColumnOffset--mediumSmall-9 { margin-left: 75%; } .Wrap .Column--mediumSmall-11 { width: 91.66667%; } .Wrap .ColumnOffset--mediumSmall-10 { margin-left: 83.33333%; } .Wrap .Column--mediumSmall-12 { width: 100%; } .Wrap .ColumnOffset--mediumSmall-11 { margin-left: 91.66667%; } } @media (max-width: 767px) { .Wrap .Column--ipad-1 { width: 8.33333%; } .Wrap .ColumnOffset--ipad-0 { margin-left: 0%; } .Wrap .Column--ipad-2 { width: 16.66667%; } .Wrap .ColumnOffset--ipad-1 { margin-left: 8.33333%; } .Wrap .Column--ipad-3 { width: 25%; } .Wrap .ColumnOffset--ipad-2 { margin-left: 16.66667%; } .Wrap .Column--ipad-4 { width: 33.33333%; } .Wrap .ColumnOffset--ipad-3 { margin-left: 25%; } .Wrap .Column--ipad-5 { width: 41.66667%; } .Wrap .ColumnOffset--ipad-4 { margin-left: 33.33333%; } .Wrap .Column--ipad-6 { width: 50%; } .Wrap .ColumnOffset--ipad-5 { margin-left: 41.66667%; } .Wrap .Column--ipad-7 { width: 58.33333%; } .Wrap .ColumnOffset--ipad-6 { margin-left: 50%; } .Wrap .Column--ipad-8 { width: 66.66667%; } .Wrap .ColumnOffset--ipad-7 { margin-left: 58.33333%; } .Wrap .Column--ipad-9 { width: 75%; } .Wrap .ColumnOffset--ipad-8 { margin-left: 66.66667%; } .Wrap .Column--ipad-10 { width: 83.33333%; } .Wrap .ColumnOffset--ipad-9 { margin-left: 75%; } .Wrap .Column--ipad-11 { width: 91.66667%; } .Wrap .ColumnOffset--ipad-10 { margin-left: 83.33333%; } .Wrap .Column--ipad-12 { width: 100%; } .Wrap .ColumnOffset--ipad-11 { margin-left: 91.66667%; } } @media (max-width: 639px) { .Wrap .Column--small-1 { width: 8.33333%; } .Wrap .ColumnOffset--small-0 { margin-left: 0%; } .Wrap .Column--small-2 { width: 16.66667%; } .Wrap .ColumnOffset--small-1 { margin-left: 8.33333%; } .Wrap .Column--small-3 { width: 25%; } .Wrap .ColumnOffset--small-2 { margin-left: 16.66667%; } .Wrap .Column--small-4 { width: 33.33333%; } .Wrap .ColumnOffset--small-3 { margin-left: 25%; } .Wrap .Column--small-5 { width: 41.66667%; } .Wrap .ColumnOffset--small-4 { margin-left: 33.33333%; } .Wrap .Column--small-6 { width: 50%; } .Wrap .ColumnOffset--small-5 { margin-left: 41.66667%; } .Wrap .Column--small-7 { width: 58.33333%; } .Wrap .ColumnOffset--small-6 { margin-left: 50%; } .Wrap .Column--small-8 { width: 66.66667%; } .Wrap .ColumnOffset--small-7 { margin-left: 58.33333%; } .Wrap .Column--small-9 { width: 75%; } .Wrap .ColumnOffset--small-8 { margin-left: 66.66667%; } .Wrap .Column--small-10 { width: 83.33333%; } .Wrap .ColumnOffset--small-9 { margin-left: 75%; } .Wrap .Column--small-11 { width: 91.66667%; } .Wrap .ColumnOffset--small-10 { margin-left: 83.33333%; } .Wrap .Column--small-12 { width: 100%; } .Wrap .ColumnOffset--small-11 { margin-left: 91.66667%; } } @media (max-width: 413px) { .Wrap .Column--mobileLarge-1 { width: 8.33333%; } .Wrap .ColumnOffset--mobileLarge-0 { margin-left: 0%; } .Wrap .Column--mobileLarge-2 { width: 16.66667%; } .Wrap .ColumnOffset--mobileLarge-1 { margin-left: 8.33333%; } .Wrap .Column--mobileLarge-3 { width: 25%; } .Wrap .ColumnOffset--mobileLarge-2 { margin-left: 16.66667%; } .Wrap .Column--mobileLarge-4 { width: 33.33333%; } .Wrap .ColumnOffset--mobileLarge-3 { margin-left: 25%; } .Wrap .Column--mobileLarge-5 { width: 41.66667%; } .Wrap .ColumnOffset--mobileLarge-4 { margin-left: 33.33333%; } .Wrap .Column--mobileLarge-6 { width: 50%; } .Wrap .ColumnOffset--mobileLarge-5 { margin-left: 41.66667%; } .Wrap .Column--mobileLarge-7 { width: 58.33333%; } .Wrap .ColumnOffset--mobileLarge-6 { margin-left: 50%; } .Wrap .Column--mobileLarge-8 { width: 66.66667%; } .Wrap .ColumnOffset--mobileLarge-7 { margin-left: 58.33333%; } .Wrap .Column--mobileLarge-9 { width: 75%; } .Wrap .ColumnOffset--mobileLarge-8 { margin-left: 66.66667%; } .Wrap .Column--mobileLarge-10 { width: 83.33333%; } .Wrap .ColumnOffset--mobileLarge-9 { margin-left: 75%; } .Wrap .Column--mobileLarge-11 { width: 91.66667%; } .Wrap .ColumnOffset--mobileLarge-10 { margin-left: 83.33333%; } .Wrap .Column--mobileLarge-12 { width: 100%; } .Wrap .ColumnOffset--mobileLarge-11 { margin-left: 91.66667%; } } @media (max-width: 479px) { .Wrap .Column--xSmall-1 { width: 8.33333%; } .Wrap .ColumnOffset--xSmall-0 { margin-left: 0%; } .Wrap .Column--xSmall-2 { width: 16.66667%; } .Wrap .ColumnOffset--xSmall-1 { margin-left: 8.33333%; } .Wrap .Column--xSmall-3 { width: 25%; } .Wrap .ColumnOffset--xSmall-2 { margin-left: 16.66667%; } .Wrap .Column--xSmall-4 { width: 33.33333%; } .Wrap .ColumnOffset--xSmall-3 { margin-left: 25%; } .Wrap .Column--xSmall-5 { width: 41.66667%; } .Wrap .ColumnOffset--xSmall-4 { margin-left: 33.33333%; } .Wrap .Column--xSmall-6 { width: 50%; } .Wrap .ColumnOffset--xSmall-5 { margin-left: 41.66667%; } .Wrap .Column--xSmall-7 { width: 58.33333%; } .Wrap .ColumnOffset--xSmall-6 { margin-left: 50%; } .Wrap .Column--xSmall-8 { width: 66.66667%; } .Wrap .ColumnOffset--xSmall-7 { margin-left: 58.33333%; } .Wrap .Column--xSmall-9 { width: 75%; } .Wrap .ColumnOffset--xSmall-8 { margin-left: 66.66667%; } .Wrap .Column--xSmall-10 { width: 83.33333%; } .Wrap .ColumnOffset--xSmall-9 { margin-left: 75%; } .Wrap .Column--xSmall-11 { width: 91.66667%; } .Wrap .ColumnOffset--xSmall-10 { margin-left: 83.33333%; } .Wrap .Column--xSmall-12 { width: 100%; } .Wrap .ColumnOffset--xSmall-11 { margin-left: 91.66667%; } } @media (max-width: 374px) { .Wrap .Column--mobileMedium-1 { width: 8.33333%; } .Wrap .ColumnOffset--mobileMedium-0 { margin-left: 0%; } .Wrap .Column--mobileMedium-2 { width: 16.66667%; } .Wrap .ColumnOffset--mobileMedium-1 { margin-left: 8.33333%; } .Wrap .Column--mobileMedium-3 { width: 25%; } .Wrap .ColumnOffset--mobileMedium-2 { margin-left: 16.66667%; } .Wrap .Column--mobileMedium-4 { width: 33.33333%; } .Wrap .ColumnOffset--mobileMedium-3 { margin-left: 25%; } .Wrap .Column--mobileMedium-5 { width: 41.66667%; } .Wrap .ColumnOffset--mobileMedium-4 { margin-left: 33.33333%; } .Wrap .Column--mobileMedium-6 { width: 50%; } .Wrap .ColumnOffset--mobileMedium-5 { margin-left: 41.66667%; } .Wrap .Column--mobileMedium-7 { width: 58.33333%; } .Wrap .ColumnOffset--mobileMedium-6 { margin-left: 50%; } .Wrap .Column--mobileMedium-8 { width: 66.66667%; } .Wrap .ColumnOffset--mobileMedium-7 { margin-left: 58.33333%; } .Wrap .Column--mobileMedium-9 { width: 75%; } .Wrap .ColumnOffset--mobileMedium-8 { margin-left: 66.66667%; } .Wrap .Column--mobileMedium-10 { width: 83.33333%; } .Wrap .ColumnOffset--mobileMedium-9 { margin-left: 75%; } .Wrap .Column--mobileMedium-11 { width: 91.66667%; } .Wrap .ColumnOffset--mobileMedium-10 { margin-left: 83.33333%; } .Wrap .Column--mobileMedium-12 { width: 100%; } .Wrap .ColumnOffset--mobileMedium-11 { margin-left: 91.66667%; } } @media (max-width: 319px) { .Wrap .Column--xxSmall-1 { width: 8.33333%; } .Wrap .ColumnOffset--xxSmall-0 { margin-left: 0%; } .Wrap .Column--xxSmall-2 { width: 16.66667%; } .Wrap .ColumnOffset--xxSmall-1 { margin-left: 8.33333%; } .Wrap .Column--xxSmall-3 { width: 25%; } .Wrap .ColumnOffset--xxSmall-2 { margin-left: 16.66667%; } .Wrap .Column--xxSmall-4 { width: 33.33333%; } .Wrap .ColumnOffset--xxSmall-3 { margin-left: 25%; } .Wrap .Column--xxSmall-5 { width: 41.66667%; } .Wrap .ColumnOffset--xxSmall-4 { margin-left: 33.33333%; } .Wrap .Column--xxSmall-6 { width: 50%; } .Wrap .ColumnOffset--xxSmall-5 { margin-left: 41.66667%; } .Wrap .Column--xxSmall-7 { width: 58.33333%; } .Wrap .ColumnOffset--xxSmall-6 { margin-left: 50%; } .Wrap .Column--xxSmall-8 { width: 66.66667%; } .Wrap .ColumnOffset--xxSmall-7 { margin-left: 58.33333%; } .Wrap .Column--xxSmall-9 { width: 75%; } .Wrap .ColumnOffset--xxSmall-8 { margin-left: 66.66667%; } .Wrap .Column--xxSmall-10 { width: 83.33333%; } .Wrap .ColumnOffset--xxSmall-9 { margin-left: 75%; } .Wrap .Column--xxSmall-11 { width: 91.66667%; } .Wrap .ColumnOffset--xxSmall-10 { margin-left: 83.33333%; } .Wrap .Column--xxSmall-12 { width: 100%; } .Wrap .ColumnOffset--xxSmall-11 { margin-left: 91.66667%; } } @media (max-width: 319px) { .Wrap .Column--mobileSmall-1 { width: 8.33333%; } .Wrap .ColumnOffset--mobileSmall-0 { margin-left: 0%; } .Wrap .Column--mobileSmall-2 { width: 16.66667%; } .Wrap .ColumnOffset--mobileSmall-1 { margin-left: 8.33333%; } .Wrap .Column--mobileSmall-3 { width: 25%; } .Wrap .ColumnOffset--mobileSmall-2 { margin-left: 16.66667%; } .Wrap .Column--mobileSmall-4 { width: 33.33333%; } .Wrap .ColumnOffset--mobileSmall-3 { margin-left: 25%; } .Wrap .Column--mobileSmall-5 { width: 41.66667%; } .Wrap .ColumnOffset--mobileSmall-4 { margin-left: 33.33333%; } .Wrap .Column--mobileSmall-6 { width: 50%; } .Wrap .ColumnOffset--mobileSmall-5 { margin-left: 41.66667%; } .Wrap .Column--mobileSmall-7 { width: 58.33333%; } .Wrap .ColumnOffset--mobileSmall-6 { margin-left: 50%; } .Wrap .Column--mobileSmall-8 { width: 66.66667%; } .Wrap .ColumnOffset--mobileSmall-7 { margin-left: 58.33333%; } .Wrap .Column--mobileSmall-9 { width: 75%; } .Wrap .ColumnOffset--mobileSmall-8 { margin-left: 66.66667%; } .Wrap .Column--mobileSmall-10 { width: 83.33333%; } .Wrap .ColumnOffset--mobileSmall-9 { margin-left: 75%; } .Wrap .Column--mobileSmall-11 { width: 91.66667%; } .Wrap .ColumnOffset--mobileSmall-10 { margin-left: 83.33333%; } .Wrap .Column--mobileSmall-12 { width: 100%; } .Wrap .ColumnOffset--mobileSmall-11 { margin-left: 91.66667%; } } /************************************/ /*********** Common CSS *************/ /************************************/ .block_900 { width: 900px; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .block_900 { width: 100%; } } .mgtop-10 { margin-top: 10px; } .mgtop-30 { margin-top: 30px; } .mgtop-60 { margin-top: 60px; } .mgbottom-10 { margin-bottom: 10px; } .mgbottom-30 { margin-bottom: 30px; } .mgbottom-60 { margin-bottom: 60px; } .pdtop-10 { padding-top: 10px; } .pdtop-30 { padding-top: 30px; } .pdtop-60 { padding-top: 60px; } .pdbottom-10 { padding-bottom: 10px; } .pdbottom-30 { padding-bottom: 30px; } .pdbottom-60 { padding-bottom: 60px; } .tac { text-align: center; } .mgleft-20 { margin-left: 20px; } .mgright-20 { margin-right: 20px; } .block_600 { width: 600px; margin-left: auto; margin-right: auto; } @media (max-width: 600px) { .block_600 { width: 100%; } } /************************************/ /************** Add CSS *************/ /************************************/ .bx-wrapper img { height: 100%; } .bx-wrapper .bx-controls-direction a { z-index: 99; } .top-banner { width: 100%; padding: 35px 20px 50px; margin: 0 auto; background-image: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/topbg.png); background-repeat: repeat; background-position: 0 0; background-color: #f4f4f4; text-align: center; padding-bottom: 0; } .top-banner .inner-block { padding-bottom: 10px !important; } .bg-color { background-color: #f4f4f4; } .bg-color-contact { background-color: #f4f6fc; } .bg-color-contact .hs-cta-img { height: auto; } .img-shadow { -webkit-box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); } .Button--large-red { background: #eb1b24; color: #fff; padding: 15px 40px; font-weight: bold; font-size: 20px; -webkit-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3); white-space: nowrap; } .Button--large-red:hover { opacity: 0.8; -webkit-transition: all 0.2s; transition: all 0.2s; } .Button--large-red.w100 { display: block; padding: 10px 40px; } ul.list-btn li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 20px; } ul.list-btn li img { margin-right: 10px; } .contact .info-box { color: #313030; -webkit-box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); padding: 20px; min-height: 207px; } .contact .info-box p { font-size: 16px; margin-bottom: 0; margin-left: 5px; } .contact .info-box i { font-size: 34px; color: #ff5821; border-radius: 50%; padding: 7px 14px; border: 2px dotted #ffded4; float: left; margin-right: 10px; margin-top: -8px; } .contact .info-box i.fa-envelope-o { padding: 8px 10px; } .inquiry-form #form-wrap { -webkit-box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); padding: 30px; } .bx-wrapper .bx-next { background: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/controls.png) no-repeat -43px -32px !important; } .bx-wrapper .bx-prev { left: 10px; background: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/controls.png) no-repeat 0 -32px !important; } .bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus { opacity: 0.6; } @media (max-width: 768px) { .Wrap .Column--small-12 { width: 100%; } .Wrap { margin-top: 30px; margin-bottom: 30px; padding-left: 0; padding-right: 0; } .Wrap .Row { margin-top: 30px; margin-bottom: 30px; width: 100%; } .Wrap .Column--4:first-child, .Wrap .Column--4:nth-child(2), .Wrap .Column--4:nth-child(4) { padding-right: 0; } .Wrap h2 { font-size: 24px; } .Wrap .Column--6:first-child { padding-right: 0; } .pdtop-60 { padding-top: 30px !important; } .pdbottom-60 { padding-bottom: 30px !important; } .Button--large-red { font-size: 16px; padding: 15px 25px; } ul.list-btn li img { width: 25px; margin-top: 4px; } .contact .info-box { min-height: auto; } .top-banner { padding-top: 50px; } } #blog_content #main_content .Blog-Nav.tag { width: 100%; } #blog_content #main_content .Blog-Nav.tag ul li { width: auto; } #blog_content #main_content .Blog-Nav.tag .pagination { margin-top: 0; } #blog_content #main_content .Blog-Nav.tag li:nth-child(2n+2) { margin-left: 0; } .btn-area.sidebar a { width: 100%; } .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body p, .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body h2, .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body h3, .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body div, .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content .blog-post-wrapper .blog-section .post-body span { text-align: justify; } @media only screen and (max-width: 767px) { .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content .Blog-Detail .section.post-body { padding-left: 15px !important; padding-right: 15px !important; } .vn.en-web .Blog-Glossary #Glossary-Page .Wrap .Column--small-12 { padding-left: 0; padding-right: 0; } .vn.en-web .Blog-Glossary #Glossary-Page .Row { margin-left: auto; margin-right: auto; } .vn.en-web .Blog-Glossary #Glossary-Page #Main_Content { padding-right: 0; padding-left: 0; } .vn.en-web .Blog-Glossary #Glossary-Page .Section.ContentWithSidebarSection .Wrap .Row { margin: 0; } } .vn.en-web .Blog-Glossary #Glossary-Page .Section.ContentWithSidebarSection { padding: 0; } body.vn-blog .Sidebar-menu ul { list-style-type: none; padding: 0; } body.vn-blog .Sidebar-menu > ul > li { -webkit-transition: all 1s; transition: all 1s; border-bottom: 1px solid #ddd; z-index: 1; padding: 12px 20px 12px 22px; position: relative; } body.vn-blog .Sidebar-menu .Menu--sub { margin: 0; margin-top: 5px; } body.vn-blog .Sidebar-menu > ul > li > a { display: inline-block !important; color: #4a4a4a; padding: 0 !important; text-decoration: none; position: initial !important; } body.vn-blog .Sidebar-menu > ul > li > a:hover { opacity: 0.7; } body.vn-blog .Sidebar-menu > ul > li > a:before { content: ""; position: absolute; left: 5px; top: 27px; display: block; width: 6px; height: 6px; margin: -4px 0 0 -4px; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } body.vn-blog .Sidebar-menu .Menu--sub a { display: block; font-size: 0.95em; padding: 5px 0 5px 25px !important; position: relative; } body.vn-blog .Sidebar-menu .Menu--sub a:before { content: ""; position: absolute; top: 18px; left: 10px; display: block; width: 6px; height: 6px; margin-top: -6px; border-style: solid; border-width: 0 0 1px 1px; border-color: #999; } body.vn-blog .Sidebar-menu > ul > li.has-sub:not(.show) .Menu--sub, body.vn-blog .Sidebar-menu > ul > li:not(.has-sub) span.icon { display: none; } body.vn-blog .Sidebar-menu > ul > li.has-sub span.icon { position: absolute; right: 0; top: 12px; border: 0; height: 30px; width: 30px; display: inline-block; color: #666; font-size: 18px; line-height: 28px; text-align: center; z-index: 99; cursor: pointer; } body.vn-blog .Sidebar-menu > ul > li.has-sub.show span.icon { font-size: 26px; top: 10px; } body.vn-blog .Sidebar-menu .filter-link-count { display: inline-block; margin-left: 7px; } body.vn-blog #blog_content #sidebar .topic-list.box ul li a:after { font-size: 0.7em; bottom: 9px; } body.vn-blog #blog_content #sidebar .topic-list.box ul li:nth-child(1) a { padding-bottom: 5px; } .pdbottom-0 { padding-bottom: 0 !important; } body.vn-blog #blog_content #sidebar .topic-list.box ul li a.pdbottom-0:after { bottom: 2px !important; } html.vn #blog_content #main_content .Blog-Detail .hs-cta-wrapper .hs-cta-img { -webkit-box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); } .Blog-Nav.tag { margin-top: 30px; } .Blog-Nav.tag .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; } .Blog-Nav.tag .pagination li:not(.disabled) { display: contents !important; } .Blog-Nav.tag .pagination li span, .Blog-Nav.tag .pagination li a { margin-right: 10px !important; } .fa-twitter:before { background-image: url(https://8005843.fs1.hubspotusercontent-na1.net/hubfs/8005843/images/logo-twitter-white.svg); background-size: 18px 18px; content: "" !important; display: inline-block; height: 18px; width: 18px; vertical-align: top; } .social-blog ul li.twitter:hover i:before { -webkit-filter: brightness(0) invert(0); filter: brightness(0) invert(0); } /*-- hero bg text 2023/12/12 --*/ .single-embedded { color: #fff; position: relative; } .single-embedded .heading { position: absolute; top: 30%; left: 13%; font-size: 2.5vw; font-weight: 600; } .single-embedded .ttl { position: absolute; top: 40.5%; left: 4%; font-size: 3.8vw; font-weight: 600; } .single-embedded .sub-ttl { position: absolute; top: 58%; left: 11%; font-size: 1.3vw; text-align: center; } .float-cta { position: fixed; bottom: 0; right: 0; z-index: 100; } .float-cta a { background-color: #FF223A; border-radius: 14px 0px 0px 0px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-family: "Oriya MN", sans-serif; font-size: 18px; font-weight: normal; width: 234px; height: 80px; letter-spacing: 0.72px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; } .float-cta a:hover { opacity: 1; } .float-cta a:hover span::before { background-color: #fff; } .float-cta a:hover span::after { border-top-color: #FF223A; border-right-color: #FF223A; } .float-cta a span { position: relative; padding-right: 50px; } .float-cta a span::before, .float-cta a span::after { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .float-cta a span::before { border: 1px solid #fff; border-radius: 50%; content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 30px; height: 30px; } .float-cta a span::after { content: ""; position: absolute; top: 0; bottom: 0; right: 14px; margin: auto; width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .p-privacy__contents h2 { border-bottom: 2px solid #333; font-family: "Oriya MN", sans-serif; font-size: 24px; font-weight: normal; padding-bottom: 10px; margin-top: 80px; margin-bottom: 40px; } @media (max-width: 767px) { .p-privacy__contents h2 { margin-top: 40px; margin-bottom: 20px; } } .p-privacy__contents p { font-size: 16px; line-height: normal; letter-spacing: 0.02em; margin-bottom: 1em; } .p-privacy__contents ol { margin-left: 1em; } .p-privacy__contents ol li { list-style: decimal; } .p-privacy__contents ul { margin-bottom: 2em; } .p-privacy__contents ul li { list-style: disc; margin-left: 1em; } .page404 { padding: 80px 0; max-width: 880px; margin: 0 auto; width: 100%; } @media (max-width: 767px) { .page404 { padding: 40px 0; } } .page404__txt { text-align: center; } .page404__box { background-color: #1B1055; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 60px; padding: 50px; } @media (max-width: 767px) { .page404__box { padding: 25px; margin-top: 30px; } } .page404__list__item { color: #fff; } .p-download { padding: 100px 0; } @media (max-width: 767px) { .p-download { padding: 50px 20px; } } .p-download .kv-block .kv-title { text-align: center; } .download-form { max-width: 1200px; margin: 50px auto 0; width: 100%; } .download-form .inner-block { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 50px; } @media (max-width: 767px) { .download-form .inner-block { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .download-form .left-text { text-align: center; } .download-form .left-text .text { margin-top: 30px; text-align: left; } .download-form .right-form .form-title { text-align: center; margin-bottom: 30px; } .download-form .right-form .hs-error-msg { font-size: 12px; } .download-form .right-form .hs-error-msgs { color: #f20; font-size: 12px; text-align: center; } .download-form .right-form .hs-form-booleancheckbox-display { text-align: center; } /************************************/ /************** New CSS table of content *************/ /************************************/ .Blog-Detail #toc-box{ margin-top: 30px; } #toc-box{ position: relative; overflow: hidden; margin-bottom: 0 !important; font-size: 15px; } #toc-box li.visible { display: list-item; } #toc-box ol{ counter-reset: cnt !important; list-style: none; } #toc-box ol li:before{ content: counters(cnt, "-") " " !important; counter-increment: cnt !important; } #toc-box ol li ol li:before{ font-size: 12px; top: 0; left: -30px; width: 30px; color: #3e3e3e; font-weight: unset; } .viewless::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; opacity: .75; background: -webkit-linear-gradient(top,hsla(0,0%,100%,0),hsla(0,0%,100%,.9) 50%,hsla(0,0%,100%,.9) 0,#fff); background: linear-gradient(top,hsla(0,0%,100%,0),hsla(0,0%,100%,.9) 50%,hsla(0,0%,100%,.9) 0,#fff); } #view-more-btn { cursor: pointer; background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 5em; color: #4a4a4a; display: block; font-size: 14px; line-height: 1.5; margin: .75em auto 30px; min-width: 6em; padding: .5em 1em; position: relative; transition: box-shadow .25s; z-index: 2; } #view-more-btn[data-type="view-more"]:before, #view-more-btn[data-type="view-more"]:after{ border-top-color: inherit; border-top-style: dotted; border-top-width: 3px; content: ""; display: block; height: 1px; position: absolute; top: calc(50% - 1px); transition: border-color .25s; width: 22px; } #view-more-btn:before{ right: calc(100% + 1em); } #view-more-btn:after{ left: calc(100% + 1em); } #view-more-btn:hover{ border-color: transparent; box-shadow: 0 0 0 2px currentcolor; } [data-type="view-less":after]{ content: unset; } #toc-box [data-omit="1"] { display: none; } .Blog-Detail #toc-box ol li ol{ margin: 4px 0; padding-left: 30px; } @media only screen and (max-width: 767px) { .Blog-Detail #toc-index>li a { font-size: 15px; } } /************************************/ /************** New CSS sidebar table of content *************/ /************************************/ .widget.sidebar-sticky{ font-family: fa; } #wrap { overflow: initial; } #sidebar { padding-bottom: 0; } #blog_content{ align-items: stretch; } #Side-Items.side_col_fixed { top: 0; position: sticky; position: -webkit-sticky; padding-top: 110px; z-index: 99; transition: all .5s ease; } #Side-Items .sticky { line-height: 1.0; } #Side-Items .sticky .Blog-Sidebar-cta + .Blog-Sidebar-cta { margin-top: 10px; } #Side-Items .dry { display: block; } #Side-Items.side_col_fixed .dry { display:none; } .widget .side-tocBox ol li.hight:before{ background: #000 !important; } .widget.sidebar-sticky{ padding-top: 30px; } .side-tocBox [data-omit="1"]{ display: block; } .widget .side-tocBox{ max-height: calc(100vh - 420px - var(--swl-adminbarH, 0px) - var(--swl-fix_headerH, 0px)); overflow-y: auto; border: 1px solid #eee; padding: 20px; } .widget .side-tocBox .tocTitle{ display: block; color: #000; font-size: 1.4em; font-weight: 500; margin: 0 0 .5em; padding-bottom: .5em; position: relative; } .widget .side-tocBox ol{ padding-left: 0; position: relative; list-style: none; margin-top: 5px; } .widget .side-tocBox ol li, .widget .side-tocBox ol li ol li{ display: flex; position: relative; flex-direction: column; margin: 5px 0; } .widget .side-tocBox ol:before{ content: ""; position: absolute; left: 5px; top: .8rem; bottom: .8rem; width: 2.2px; background: #ddd; } .widget .side-tocBox ol li::before{ flex-shrink: 0; content: ""; top: -5px; left: -1px; width: 10px; height: 10px; background: #ddd; border: 2px solid #fff; border-radius: 50%; margin-right: 1rem; transform: translateY(.5rem); position: absolute; } .widget .side-tocBox ol li ol li a, .widget .side-tocBox ol li a { color: #434648 !important; } .widget .side-tocBox ol li ol li{ display: flex; } .widget .side-tocBox ol li ol li:before{ flex-shrink: 0; content: ""; top: -5px; left: 1px; width: 6px; height: 6px; background: #ddd; border: 2px solid #fff; border-radius: 50%; margin-right: 1rem; transform: translateY(.5rem); position: absolute; } .widget .side-tocBox ol li ol{ padding: 0; margin-top: 5px; } .widget .side-tocBox ol li a{ font-size: 14px; text-align: left; margin-left: 20px; color: #000; } .widget .side-tocBox ol li ol li a{ color: #434648; } .widget .side-tocBox ol li a:hover , .widget .side-tocBox ol li ol li a:hover{ font-weight: bold; } .side-tocBox #toc-title{ font-size: 16px; font-weight: 700; } .blog-top .sidebar-sticky, .blog-top .modal-open, .blog-top .modal-close{ display: none; } .Page-0{ overflow: hidden !important; } .Page-0 .widget.sidebar-sticky{ display: none; } @media screen and (min-width: 821px){ .modal-open, .widget.sidebar-sticky .modal-close{ display: none; } } @media screen and (max-width: 820px){ .Page-0 .modal-open, .Page-0 .modal-close{ display: none; } #wrapper { overflow: hidden; } .sidebar-sticky .modal-container{ position: fixed; } .widget.sidebar-sticky .modal-close{ position: absolute; display: flex; align-items: center; justify-content: center; top: -30px; right: -5px; width: 30px; height: 30px; font-size: 30px; color: #fff; cursor: pointer; } .Hero--small{ z-index: 0; } .sidebar-sticky .modal-container.active{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0, 0, 0, 50%); padding: 100px 0 40px; overflow: auto; transition: .3s; box-sizing: border-box; z-index: 1000; } .sidebar-sticky .modal-container:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; } .widget .side-tocBox{ max-height: calc(80vh - 120px - var(--swl-adminbarH, 0px) - var(--swl-fix_headerH, 0px)); overflow-y: auto; } .sidebar-sticky .modal-body{ position: relative; display: inline-block; vertical-align: middle; max-width: 500px; width: 90%; background-color: #f6f6f6; padding: 15px; z-index: 1000; } .modal-open{ width: 50px; height: 45px; padding: 5px 0; background-color: #6a6a6a; text-align: center; position: fixed; right: 16px; bottom: 90px; z-index: 100; opacity: .9; display: block; } .modal-open .fa::before{ font-size: 20px; color: #fff; } .modal-open span{ display: block; font-size: 9px; color: white; line-height: 1; margin-top: -2px; } }