最新カスタムCSS

コピー元サイトに記述しているCSSの最新版です。
マスターテンプレートをもとにしたサイトのアップセルや、元の記述を参照したい時などに活用してください。

//C2-24.1023

/*
variables（変数）
webフォント
Mixins
spフォント設定
common（ウェブサイト共通） >> セクション、リッチテキスト、CTA(共通パーツ)、リンク埋め込みパーツ、ブログ、サーチエリア、リンクリスト、検索結果、ページネーション
entry-list（ 記事リストパーツ）
header・logo・navigations（ヘッダー・ロゴ・ナビゲーション）
main-visual（メインビジュアル）
breadcrumbs（パンくず）
button（ボタン）
heading（見出し）
article-post（ブログ用見出し）
main（コンテンツ） >> CTAを用いたパーツ、CTA内の基本設定、２カラム（CTA）、フォームフッター、デザインLPパーツ、カスタムパーツ、ユニバーサルクラス、フォームパーツ、
blog(ブログテンプレート)
カテゴリ・タグ自動生成ページ
side bar（サイドバー） >> カテゴリー、ランキング、カテゴリーアイコン
foot（フッター）
LP（フルカスタム用）
col空処理
編集画面用CSS（編集画面のみに効くCSS）
*/

/* --------------------------------
    variables（変数）
----------------------------------- */
//フォント
$font_feature_settings:"palt" 1;
$font_family_awsm: "FontAwesome";
$font_family_awsm6: "Font Awesome 6 Free";
//既存フォント以外のフォントファミリー設定（使用しない場合は削除してください）
// #__next {
//   --fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
//   --fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// }

//hover用
$hover_opacity: .4;

//文字の太さ
$font_weight: bold;

//カラー
$border_color: #eee; //ボーダーカラー
$form_hissu_color: #c70909; //赤 フォームの「必須マーク」カラー

//ヘッダーロゴ
$header_logo: 300px; //PCでの幅サイズ（固定）
$header_sp_logo: 35px; //SPでの高さサイズ（maxサイズ）

//ボックスシャドウ
$box_shadow_common: 0 3px 8px var(--fo-shadow-color); //ボックスシャドウ
$navigation_box_shadow_common: 0 3px 8px rgba(#000,.1); //ナビゲーション専用

//角丸
$border_radius_common: 20px;

//メインビジュアル
$mv_padding: 40px 0; //PC時の上下余白
$sp_mv_padding: 30px 0 40px; //SP時の上下余白
$top_mv_height: 490px; //PC時の最低の高さ（SPはauto）
$sub_mv_height: 273px; //PC時の最低の高さ（SPはauto）

//見出し
$hd_font_strong: 400; //見出し用（編集画面の「.strong」に対応）
//ページ内リンクのずれ用
$inPage_link: 74px; //上部にあるコンテンツの高さ(PC)
$sp_inPage_link: 64px; //上部にあるコンテンツの高さ(SP)

//グロナビ PC
$header_bg_color: var(--fo-background-color1); //ヘッダー全体の背景色
$navigation_bg_color: $header_bg_color; //グロナビの背景色
$navigation_font_size: 14px; //グロナビのフォントサイズ（1〜3階層）
$navigation_font_weight: normal; //グロナビのフォントの太さ（1〜3階層） normal or bold
$navigation_hover_opacity: 1; //グロナビをホバーした時の透視度
$navigation_bg2_color: $navigation_bg_color; //グロナビの背景色（2階層以下）
$navigation_text_color: var(--fo-text-main-color); //グロナビのテキストカラー
$navigation_text2_color: $navigation_text_color; //グロナビのテキストカラー（2階層以下）
$navigation_hover_bg_color: #fff; //グロナビをホバーした時の背景色
$navigation_hover_bg2_color: var(--fo-main-color); //グロナビをホバーした時の背景色（2階層以下）
$navigation_hover_text_color: var(--fo-main-color); //グロナビをホバーした時のテキストカラー
$navigation_hover_text2_color: #fff; //グロナビをホバーした時のテキストカラー（2階層以下）
$navigation_arrow1_color: $navigation_text_color; //矢印カラー（1階層）
$navigation_arrow2_color: $navigation_arrow1_color; //矢印カラー（2階層）

//グロナビ ハンバーガーメニュー
$navigation_sp_font_size: 14px; //ハンバーガーメニュー（SP）時のテキストサイズ（1〜3階層）
$navigation_sp_font_weight: normal; //ハンバーガーメニュー（SP）時のテキストの太さ（1〜3階層） normal or bold
$navigation_sp_text_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー １階層
$navigation_sp_text2_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー（2階層）
$navigation_sp_text3_color: var(--fo-text-main-color); //ハンバーガーメニュー（SP）時のテキストカラー（3階層）
$navigation_sp_hover_text_color: #fff; //ハンバーガーメニュー（SP）時のホバーした時の2階層のテキスト＆矢印のカラー
$navigation_sp_arrow1_color: $navigation_sp_text_color; //ハンバーガーメニュー（SP） 矢印カラー（1階層）
$navigation_sp_arrow2_color: $navigation_sp_text2_color; //ハンバーガーメニュー（SP） 矢印カラー（2階層）
$navigation_sp_bg_color: var(--fo-main-color); //ハンバーガーメニュー（SP）時の背景色（1階層）
$navigation_sp_bg2_color: #fff; //ハンバーガーメニュー（SP）時の背景色（２階層）
$navigation_sp_bg3_color: #eee; //ハンバーガーメニュー（SP）時の背景色（3階層）
$navigation_sp_border-bottom: 1px dashed var(--fo-main-color); //ハンバーガーメニュー（SP）時のボーダー（hamburger_custom 使用時）

//見出しサイズ統一
$list_heading_pc_fontsize: 20px;
$list_heading_sp_fontsize: 20px;

//記事リストパーツ
$case_border_radius: 0; //画像の角丸
$case_title_letter_spacing: var(--fo-text-letter-spacing); //記事リストパーツのタイトル(h3) letter-spacing（文字間）
$case_title_font_family: inherit; //記事リスト内見出しのフォントファミリー(caseContent_style・news_list)
$case_date_font_family: inherit; //記事リスト内日付のフォントファミリー(caseContent_style・news_list)
$case_pagination_color: var(--fo-main-color); //記事リストパーツのページネーションカラー
$case_box_shadow_common: $box_shadow_common; //記事リストパーツ用( 0 0 3px #ddd;)
$case_img_fit_height: 200px; //caseContent_style画像のオプション（option_img_fit）の高さ（sp時も高さ維持）
$case_list_space: 12px; //caseContent_style記事間の余白
//news_list
$news_list_text_decoration: none; //見出しアンカーの下線の無有（news_list） underline or none
$news_list_hover_opacity: $hover_opacity; //見出しアンカーのhover時の不透明度（news_list）

//ブログ
$blog_title_fontsize: 20px; //ブログトップタグ・カテゴリ一覧とのタイトル(h2)フォントサイズ
$blog_border_radius: 0; //ブログ記事一覧画像の角丸
$blog_border_color: $border_color; //一覧のボーダーと人気記事ランキングのボーダーカラー
$blog_title_h1_fontsize_pc: 36px; //ブログ詳細h1見出しフォントサイズ（PC)
$blog_title_h1_fontsize_sp: 28px; //ブログ詳細h1見出しフォントサイズ（SP)
$blog_title_h2_fontsize_pc: 32px; //ブログ詳細h2見出しフォントサイズ（PC)
$blog_title_h2_fontsize_sp: 24px; //ブログ詳細h2見出しフォントサイズ（SP)
$blog_title_h3_fontsize_pc: var(--fo-h3-font-size-pc); //ブログ詳細h3見出しフォントサイズ（PC)
$blog_title_h3_fontsize_sp: var(--fo-h3-font-size-sp); //ブログ詳細h3見出しフォントサイズ（SP)
$blog_title_h4_fontsize_pc: var(--fo-h4-font-size-pc); //ブログ詳細h4見出しフォントサイズ（PC)
$blog_title_h4_fontsize_sp: var(--fo-h4-font-size-sp); //ブログ詳細h4見出しフォントサイズ（SP)
$blog_title_h5_fontsize_pc: var(--fo-h5-font-size-pc); //ブログ詳細h5見出しフォントサイズ（PC)
$blog_title_h5_fontsize_sp: var(--fo-h5-font-size-sp); //ブログ詳細h5見出しフォントサイズ（SP)

//フッター
$footer_bg_color: var(--fo-background-color2); //フッター全体の背景色
$copyright_bg_color: inherit;  //コピーライトの背景色
$copyright_text_color: var(--fo-text-main-color); //コピーライトのテキストカラー
$copyright_text_fontsize: 12px; //コピーライトのフォントサイズ

//その他
$max_width: 1240px; //コンテンツ幅調整用

/*------------- variables（変数）END -------------*/

/* --------------------------------
   webフォント
----------------------------------- */
/*---  Web fonts ---*/
//Awesome Font 6
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
//Awesome Font
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/*------------- webフォント END -------------*/

/*----------------------------------
    Mixins
----------------------------------*/
@mixin breakpoint-ssp {
  @media screen and (max-width: 576px) {
    @content;
  }
}

@mixin breakpoint-sp {
  @media screen and (max-width: 769px) {
    @content;
  }
}

@mixin breakpoint-msp {
  @media screen and (max-width: 834px) {
    @content;
  }
}

@mixin breakpoint-tb {
  @media screen and (min-width: 577px) and (max-width: 769px) {
    @content;
  }
}

@mixin breakpoint-pro_s {
  @media screen and (min-width: 770px) and (max-width: 834px) {
    @content;
  }
}

@mixin breakpoint-pro {
  @media screen and (min-width: 770px) and (max-width: 1024px) {
    @content;
  }
}

@mixin breakpoint-pc {
  @media screen and (min-width: 770px) {
    @content;
  }
}

////タグ・カテゴリー 設定
//タグスタイルコントロール
@mixin tag_custom {
  background-color: var(--fo-tag-background-color);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--fo-tag-text-color);
  border: 1px solid var(--fo-tag-border-color,var(--fo-tag-background-color));
  border-radius: var(--fo-tag-border-radius);
  margin: 5px 10px 5px 0;
  padding: 5px 15px;
  &:hover {
    opacity: $hover_opacity;
  }
}
//タグアイコンコントロール
@mixin tag_icon_custom {
  content: var(--fo-tag-fa-unicode,none);
  font-family: $font_family_awsm;
  margin-right: 5px;
}
//カテゴリーアイコンコントロール
@mixin category_icon_custom {
  content: "\f115"; //f0c9
  font-family: $font_family_awsm;
  color: var(--fo-main-color);
  margin-right: 5px;
}
////タグ・カテゴリー 設定 end

//ブログ見出し
@mixin hd_blog {
  :is(h1,h2,h3,h4,h5) {
    font-family: var(--fo-heading-font-family);
    font-weight: 700;
    line-height: var(--fo-heading-line-height);
    letter-spacing: var(--fo-heading-letter-spacing);
    color: var(--fo-heading-main-color);
    @include breakpoint-sp {
      overflow-wrap: break-word;
    }
  }
  h1 {
    @include breakpoint-pc {
      font-size: $blog_title_h1_fontsize_pc;
    }
    @include breakpoint-sp {
      font-size: $blog_title_h1_fontsize_sp;
    }
  }
  h2 {
    @include breakpoint-pc {
      font-size: $blog_title_h2_fontsize_pc;
    }
    @include breakpoint-sp {
      font-size: $blog_title_h2_fontsize_sp;
    }
  }
  h3 {
    border-color: $border_color;
    @include breakpoint-pc {
      font-size: $blog_title_h3_fontsize_pc;
    }
    @include breakpoint-sp {
      font-size: $blog_title_h3_fontsize_sp;
    }
  }
  h4 {
    @include breakpoint-pc {
      font-size: $blog_title_h4_fontsize_pc;
    }
    @include breakpoint-sp {
      font-size: $blog_title_h4_fontsize_sp;
    }
  }
  h5 {
    @include breakpoint-pc {
      font-size: $blog_title_h5_fontsize_pc;
    }
    @include breakpoint-sp {
      font-size: $blog_title_h5_fontsize_sp;
    }
  }
  .strong {
    font-weight: 400;
  }
}
//ブログ見出し end

//.page_top_rowスタイルコントロール
@mixin page_top {
  min-height: unset;
  :is(.col,.cta-column) {
    padding: 0;
    .component {
      &.image {
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 1000;
        margin: 0;
        img {
          width: 60px !important;
        }
      }
    }
  }
}
//編集画面用
@mixin edit-page_top {
  :is(.col,.cta-column) {
    .component {
      &.image {
        position: static;
        width: 100%;
        margin: 10px 0;
        outline: 1px dotted #0987d4;
        &::before {
          content: "↑ 公開ページでは右下に固定されます ↑";
          display: inline-block;
          text-align: center;
          background: #0987d4;
          font-size: 12px;
          color: #fff;
          position: absolute;
          right: 0;
          top: calc(100% - 9px);
          left: 0;
          z-index: 1;
          padding: 5px;
        }
      }
    }
  }
}
//.page_top_row 設定 end

//.foot-copyrightスタイルコントロール
@mixin copyright_custom {
  display: flex;
  justify-content: center;
  align-items: center;
  background: $copyright_bg_color;
  height: 60px;
  margin: 0;
  padding: 0;
  @include breakpoint-sp {
    padding: 0 70px 0 10px;
  }
  @include breakpoint-tb {
    padding: 0;
  }
  p {
    font-size: $copyright_text_fontsize;
    letter-spacing: var(--fo-text-letter-spacing);
    line-height: 1.3;
    color: $copyright_text_color;
    margin: 0;
  }
}
//.foot-copyright一括修正 end

//検索結果画面コンテンツ幅統一用
@mixin search_container {
  max-width: $max_width;
  margin: auto;
  padding: 0 20px;
}

//編集画面用CSS
@mixin edit-page {
  .frame-root .frame-content {
    @content;
  }
}

//セクション余白
@mixin sectionSpace($padding:none) {
  @if($padding == none) {}
  @else if($padding > 0) {
    @include breakpoint-pc {
      padding: calc(#{$padding} * var(--fo-spacing-coef) - 30px) 0 calc(#{$padding} * var(--fo-spacing-coef) - 40px);
    }
    @include breakpoint-sp {
      padding: calc(#{$padding} * var(--fo-spacing-coef) * .75 - 30px) 0;
    }
  }
}

//ボタン（1~3）
@mixin btn_custom($btn) {
  &:is(.size-s,.size-m,.size-l) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fo-button#{$btn}-background) -1px/calc(100% + 2px);
    box-sizing: border-box;
    font-family: var(--fo-text-font-family);
    color: var(--fo-button#{$btn}-text-color);
    text-decoration: none;
    text-align-last: left;
    letter-spacing: var(--fo-text-letter-spacing);
    line-height: var(--fo-text-line-height);
    border: 1px solid var(--fo-button#{$btn}-border-color,transparent);
    border-radius: var(--fo-button#{$btn}-border-radius);
    box-shadow: $box_shadow_common;
  }
  &.size-s {
    min-width: var(--fo-button-small-min-width-pc);
    font-size: var(--fo-button-small-font-size);
    padding: 6.75px 20px;
    @include breakpoint-sp {
      min-width: var(--fo-button-small-min-width-sp);
      width: auto;
    }
    @include breakpoint-tb {
      min-width: var(--fo-button-small-min-width-pc);
    }
  }
  &.size-m {
    min-width: var(--fo-button-medium-min-width-pc);
    font-size: var(--fo-button-medium-font-size);
    padding: 13.5px 20px;
    @include breakpoint-sp {
      width: auto;
      min-width: var(--fo-button-medium-min-width-sp);
    }
    @include breakpoint-tb {
      min-width: var(--fo-button-medium-min-width-pc);
    }
  }
  &.size-l {
    min-width: var(--fo-button-large-min-width-pc);
    font-size: var(--fo-button-large-font-size);
    padding: 17.5px 20px;
    @include breakpoint-sp {
      width: var(--fo-button-large-min-width-sp);
      min-width: auto;
    }
    @include breakpoint-tb {
      width: auto;
      min-width: var(--fo-button-large-min-width-pc);
    }
  }
  &:hover {
    opacity: var(--fo-button#{$btn}-hover-opacity,1);
    scale: var(--fo-button#{$btn}-hover-scale,1);
    //反転
    background: var(--fo-button#{$btn}-hover-background-color,var(--fo-button#{$btn}-background)) -1px/calc(100% + 2px);
    color: var(--fo-button#{$btn}-hover-text-color,var(--fo-button#{$btn}-text-color));
    border: 1px solid var(--fo-button#{$btn}-hover-border-color, var(--fo-button#{$btn}-border-color, transparent));
  }
}

//flex
@mixin flex-setting($gap:null,$direction:null,$wrap:null,$justify-content:null,$align-items:null,$device:all) {
  @if($device == all) {
    display : flex;
    gap: $gap;
    flex-direction : $direction;
    flex-wrap : $wrap;
    justify-content : $justify-content;
    align-items : $align-items;
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      display : flex;
      gap: $gap;
      flex-direction : $direction;
      flex-wrap : $wrap;
      justify-content : $justify-content;
      align-items : $align-items;
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      display : flex;
      gap: $gap;
      flex-direction : $direction;
      flex-wrap : $wrap;
      justify-content : $justify-content;
      align-items : $align-items;
    }
  }
}
//gap
@mixin flex-gap ($gap:20px,$device:all) {
  @if($device == all) {
    gap: calc(#{$gap} * var(--fo-spacing-coef));
    @include breakpoint-sp {
      gap: calc((#{$gap} * var(--fo-spacing-coef)) * .75);
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      gap: calc(#{$gap} * var(--fo-spacing-coef));
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      gap: calc(#{$gap} * var(--fo-spacing-coef));
    }
  }
}

//padding
@mixin padding-All($paddingTop:20px,$paddingRight:20px,$paddingBottom:20px,$paddingLeft:20px,$device:all) {
  @if($device == all) {
    @include breakpoint-pc {
      padding: calc(#{$paddingTop} * var(--fo-spacing-coef)) calc(#{$paddingRight} * var(--fo-spacing-coef)) calc(#{$paddingBottom} * var(--fo-spacing-coef)) calc(#{$paddingLeft} * var(--fo-spacing-coef));
    }
    @include breakpoint-sp {
      padding: calc((#{$paddingTop}  * var(--fo-spacing-coef)) * .75) calc((#{$paddingRight} * var(--fo-spacing-coef)) * .75) calc((#{$paddingBottom} * var(--fo-spacing-coef)) * .75) calc((#{$paddingLeft} * var(--fo-spacing-coef)) * .75);
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      padding: calc(#{$paddingTop} * var(--fo-spacing-coef)) calc(#{$paddingRight} * var(--fo-spacing-coef)) calc(#{$paddingBottom} * var(--fo-spacing-coef)) calc(#{$paddingLeft} * var(--fo-spacing-coef));
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      padding: calc(#{$paddingTop} * var(--fo-spacing-coef)) calc(#{$paddingRight} * var(--fo-spacing-coef)) calc(#{$paddingBottom} * var(--fo-spacing-coef)) calc(#{$paddingLeft} * var(--fo-spacing-coef));
    }
  }
}

//padding 一方向
@mixin padding-property($property:top,$value:20px,$device:all) {
  @if($device == all) {
    @include breakpoint-pc {
      padding-#{$property}: calc(#{$value} * var(--fo-spacing-coef));
    }
    @include breakpoint-sp {
      padding-#{$property}: calc((#{$value} * var(--fo-spacing-coef)) * .75);
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      padding-#{$property}: calc(#{$value} * var(--fo-spacing-coef));
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      padding-#{$property}: calc(#{$value} * var(--fo-spacing-coef));
    }
  }
}

//padding上下左右
@mixin padding-yx($paddingY:20px,$paddingX:20px,$device:all) {
  @if($device == all) {
    @include breakpoint-pc {
      padding: calc(#{$paddingY} * var(--fo-spacing-coef)) calc(#{$paddingX} * var(--fo-spacing-coef));
    }
    @include breakpoint-sp {
      padding: calc((#{$paddingY} * var(--fo-spacing-coef)) * .75) calc((#{$paddingX} * var(--fo-spacing-coef)) * .75);
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      padding: calc(#{$paddingY} * var(--fo-spacing-coef)) calc(#{$paddingX} * var(--fo-spacing-coef));
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      padding: calc(#{$paddingY} * var(--fo-spacing-coef)) calc(#{$paddingX} * var(--fo-spacing-coef));
    }
  }
}

//margin上下
@mixin margin-y($marginTop:20px,$marginBottom:20px,$device:all) {
  @if($device == all) {
    @include breakpoint-pc {
      margin: unquote('max(calc(#{$marginTop} * var(--fo-spacing-coef)),0px)') auto unquote('max(calc(#{$marginBottom} * var(--fo-spacing-coef)),0px)');
    }
    @include breakpoint-sp {
      margin: unquote('max(calc((#{$marginTop} * var(--fo-spacing-coef)) * .75),0px)') auto unquote('max(calc((#{$marginBottom} * var(--fo-spacing-coef)) * .75),0px)');
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      margin: unquote('max(calc(#{$marginTop} * var(--fo-spacing-coef)),0px)') auto unquote('max(calc(#{$marginBottom} * var(--fo-spacing-coef)),0px)');
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      margin: unquote('max(calc(#{$marginTop} * var(--fo-spacing-coef)),0px)') auto unquote('max(calc(#{$marginBottom} * var(--fo-spacing-coef)),0px)');
    }
  }
}

//margin一方向
@mixin margin-property($property:top,$value:20px,$device:all) {
  @if($device == all) {
    @include breakpoint-pc {
      margin-#{$property}: unquote('max(calc(#{$value} * var(--fo-spacing-coef)),0px)');
    }
    @include breakpoint-sp {
      margin-#{$property}: unquote('max(calc((#{$value} * var(--fo-spacing-coef)) * .75),0px)');
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      margin-#{$property}: unquote('max(calc(#{$value} * var(--fo-spacing-coef)),0px)');
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      margin-#{$property}: unquote('max(calc(#{$value} * var(--fo-spacing-coef)),0px)');
    }
  }
}

//見出し用margin-bottom
@mixin heading-marginBottom($marginBottom:60px,$device:all) {
  @if($device == all) {
    @include breakpoint-pc {
      margin-bottom: unquote('max(calc((#{$marginBottom} * var(--fo-spacing-coef)) - 20px),0px)');
    }
    @include breakpoint-sp {
      margin-bottom: unquote('max(calc((#{$marginBottom} * var(--fo-spacing-coef)) * .75),0px)');
    }
  }
  @else if($device == pc) {
    @include breakpoint-pc {
      margin-bottom: unquote('max(calc(#{$marginBottom} * var(--fo-spacing-coef)),0px)');
    }
  }
  @else if($device == sp) {
    @include breakpoint-sp {
      margin-bottom: unquote('max(calc(#{$marginBottom} * var(--fo-spacing-coef)),0px)');
    }
  }
}

//隣接要素のmargin
@mixin adjacentMargin($className:row,$marginTop:46px,$device:all) {
  & + .#{$className} {
    @if($device == all) {
      @include breakpoint-pc {
        margin-top: unquote('max(calc(#{$marginTop} * var(--fo-spacing-coef)),0px)');
      }
      @include breakpoint-sp {
        margin-top: unquote('max(calc((#{$marginTop} * var(--fo-spacing-coef)) * .75),0px)');
      }
    }
    @else if($device == pc) {
      @include breakpoint-pc {
        margin-top: unquote('max(calc(#{$marginTop} * var(--fo-spacing-coef)),0px)');
      }
    }
    @else if($device == sp) {
      @include breakpoint-sp {
        margin-top: unquote('max(calc(#{$marginTop} * var(--fo-spacing-coef)),0px)');
      }
    }
  }
}

//テーマ出力
@mixin theme-fo-base {
  .theme-fo-base {
    .wrapper {
      .contents {
        :is(section,section[data-designpart-id]) {
          @content;
        }
      }
    }
  }
}

/*------------- Mixins END -------------*/

/* --------------------------------
   spフォント設定
----------------------------------- */
.component {
  :is(
    .font-size-20px,
    [style*="font-size:20px;"]
  )
   {
    @include breakpoint-sp {
      font-size: 18px !important;
    }
  }
  :is(
    .font-size-22px,
    [style*="font-size:22px;"]
  ) {
    @include breakpoint-sp {
      font-size: 20px !important;
    }
  }
  :is(
    .font-size-24px,
    .font-size-26px,
    [style*="font-size:24px;"],
    [style*="font-size:26px;"]
    ) {
    @include breakpoint-sp {
      font-size: 22px !important;
    }
  }
  :is(
    .font-size-28px,
    .font-size-30px,
    [style*="font-size:28px;"],
    [style*="font-size:30px;"]
    ) {
    @include breakpoint-sp {
      font-size: 24px !important;
    }
  }
  :is(
    .font-size-32px,
    .font-size-34px,
    .font-size-36px,
    [style*="font-size:32px;"],
    [style*="font-size:34px;"],
    [style*="font-size:36px;"]
    ) {
    @include breakpoint-sp {
      font-size: 26px !important;
    }
  }
  :is(
    .font-size-38px,
    .font-size-42px,
    .font-size-46px,
    [style*="font-size:38px;"],
    [style*="font-size:42px;"],
    [style*="font-size:46px;"]
    ) {
    @include breakpoint-sp {
      font-size: 28px !important;
    }
  }
  :is(
    .font-size-50px,
    .font-size-54px,
    [style*="font-size:50px;"],
    [style*="font-size:54px;"],
    ) {
    @include breakpoint-sp {
      font-size: 32px !important;
    }
  }
  :is(
    .font-size-60px,
    .font-size-66px,
    .font-size-72px,
    [style*="font-size:60px;"],
    [style*="font-size:66px;"],
    [style*="font-size:72px;"]
    ) {
    @include breakpoint-sp {
      font-size: 36px !important;
    }
  }
  :is(
    .font-size-78px,
    .font-size-86px,
    .font-size-94px,
    [style*="font-size:78px;"],
    [style*="font-size:86px;"],
    [style*="font-size:94px;"]
    ) {
    @include breakpoint-sp {
      font-size: 40px !important;
    }
  }
}
/*------------- spフォント設定 END -------------*/

/* --------------------------------
   common（ウェブサイト共通）
----------------------------------- */
//ドラックカラー
::selection {
  background: color-mix(in srgb, var(--fo-accent-color) 50%, transparent);
}

//sticky解放用
.theme-fo-base {
  &:has(.lp_sticky_sec) {
    overflow: initial;
    .wrapper {
      .contents {
        section {
          overflow: hidden;
        }
      }
    }
  }
}

//SP時のリンクタップの色を削除&下線削除
:is(.navi-001-01,.navi-002-01,.theme-fo-base) {
  font-family: var(--fo-text-font-family);
  font-feature-settings: $font_feature_settings;
  a {
    transition: unset;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  :visited {
    text-decoration: none;
  }
  :link {
    text-decoration: none;
  }
}

//画像のhover一括設定
:is(.navi-001-01,.navi-002-01) {
  header {
    .inner {
      a[href] {
        img {
          &:hover {
            opacity: $hover_opacity;
          }
        }
      }
    }
  }
}
.theme-fo-base {
  .main-visual {
    .component {
      a {
        img {
          &:hover {
            opacity: 1;
          }
        }
      }
      a[href] {
        img {
          &:hover {
            opacity: $hover_opacity;
          }
        }
      }
    }
  }
  .wrapper {
    .contents {
      section {
        a {
          img {
            &:hover {
              opacity: 1;
            }
          }
        }
        a[href] {
          img {
            &:hover {
              opacity: $hover_opacity;
            }
          }
        }
      }
    }
    .side {
      .inner {
        .component {
          a {
            img {
              &:hover {
                opacity: 1;
              }
            }
          }
          a[href] {
            img {
              &:hover {
                opacity: $hover_opacity;
              }
            }
          }
        }
      }
    }
  }
  .foot {
    .foot-cont {
      .component {
        a {
          img {
            &:hover {
              opacity: 1;
            }
          }
        }
        a[href] {
          img {
            &:hover {
              opacity: $hover_opacity;
            }
          }
        }
      }
    }
  }
}

/*- セクションパーツ -*/
//セクション余白
// ()内に指定したいサイズを入れると適用されます。例：(100px)
// ()内に数値が入ってない場合は適用されません。（デフォルト設定）
section[data-designpart-id]:not(:root:root:root:root) {
  @include sectionSpace();
}
//コンテンツ幅
@include theme-fo-base {
  .inner {
    max-width: $max_width;
  }
}

/*--- リッチテキストパーツ ---*/
.component {
  &.richtext {
    :link {
      text-decoration: none;
    }
    :visited {
      text-decoration: none;
    }
    //リスト
    li {
      font-size: inherit;
      a {
        font-size: inherit;
      }
    }
    //表
    table {
      border: none;
      &[align="center"] {
        margin: auto;
      }
      :is(thead,tbody,tr,th,td) {
        border-color: $border_color;
        tr {
          :is(th,td) {
            background-clip: padding-box; //FF,edgeでボーダー消える現象回避;
            position: static; //FF,edgeでボーダー消える現象回避;
            p {
              font-size: inherit;
              & + p {
                margin-top: 10px !important;
              }
            }
            :is(ul,ol) {
              margin-left: 25px;
            }
          }
        }
      }
    }
    .normal-table {
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }
    .table-with-row-header {
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }
    .table-with-two-headers {
      overflow: auto;
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }
    .component {
      &.button:not(:root) {
        .button-cont {
          a {
            &.blue {
              background: #254a73;
              color: #fff !important;
              text-decoration: none;
              &:hover {
                opacity: $hover_opacity;
              }
            }
          }
        }
      }
    }
    //sp時右寄せ
    &.sp_r {
      @include breakpoint-sp {
        text-align: right !important;
      }
      :is(p,.rich-text-normal,.align-center,.align-right) {
        @include breakpoint-sp {
          text-align: right !important;
        }
      }
    }
    //sp中央寄せ
    &.sp_c {
      @include breakpoint-sp {
        text-align: center !important;
      }
      :is(p,.rich-text-normal,.align-center,.align-right) {
        @include breakpoint-sp {
          text-align: center !important;
        }
      }
    }
    //sp時左寄せ
    &.sp_l {
      @include breakpoint-sp {
        text-align: left !important;
      }
      :is(p,.rich-text-normal,.align-center,.align-right) {
        @include breakpoint-sp {
          text-align: left !important;
        }
      }
    }
  }
}

/*--- 区切り線パーツ ---*/
.theme-fo-base {
  :is(.main-visual,.wrapper .contents,.foot ) {
    .component {
      &.border {
        hr {
          &.type01 {
            background-image: -webkit-linear-gradient(left, transparent, $border_color, transparent);
          }
          &:is(.type02,.type03,.type04) {
            border-color: $border_color;
          }
        }
      }
    }
  }
}

/*--- CTA(共通パーツ)---*/
.component {
  &.cta {
    .cta-row {
      display: table;
      table-layout: fixed;
      width: 100%;
      margin: 0;
      @include breakpoint-sp {
        display: block;
      }
      & + .cta-row {
        @include breakpoint-pc {
          padding-top: 10px;
        }
      }
      .cta-column {
        display: table-cell;
        vertical-align: top;
        margin: 0;
        @include breakpoint-sp {
          display: block;
          width: 100% !important;
        }
      }
    }
  }
}

/*---  リンク埋め込みパーツ---*/
.component {
  // ページ
  &.link-embed {
    .article-embed {
      .quote-link {
        &:hover {
          opacity: $hover_opacity;
        }
        .quote-link_entry {
          .quote-link-img {
            .quote-link-img-item {
              img {
                height: 150px;
                position: static;
                object-fit: cover;
                &:hover {
                  opacity: 1;
                }
              }
            }
          }
          .cont {
            :is(.quote-link_title,.quote-link_desp,.quote-link_site) {
              p {
                color: var(--fo-text-main-color);
              }
            }
          }
        }
      }
    }
  }
  //ブログ
  &.richtext {
    .article-embed[data-embed-type="url"] {
      .quote-link {
        .quote-link_entry {
          .quote-link-img {
            .quote-link-img-item {
              background-position: center;
            }
          }
          .cont {
            .quote-link_desp {
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
}

/*------- サーチエリア --------*/
.component {
  &.search {
    .search-cont {
      input[type=search] {
        -webkit-appearance: none;
        border-radius: 0;
        font-family: inherit !important;
        font-size: 16px;
        height: 40px;
        outline: unset;
        &::placeholder {
          font-family: inherit !important;
          color: rgba(0,0,0,.3);
        }
        &:focus {
          background-color: #fff;
          color: #555;
          border-color: #5a5a5a;
        }
      }
      input[type=submit] {
        padding: 13px 10px;
      }
    }
  }
}

/*------- リンクリスト --------*/
.component {
  &.list {
    &.vertical {
      ul {
        li {
          a {
            &:hover {
              background: rgba(#ccc,.15);
            }
          }
        }
      }
    }
  }
}

//検索結果カラム余白調整
.theme-fo-base {
  .wrapper {
    //１カラム用
    &.none {
      .contents {
        & > .component {
          &.search {
            margin: 50px auto;
          }
        }
      }
    }
    //2カラム
    &:is(.side-right,.side-left) {
      .contents {
        & > .component {
          &.search {
            margin: 20px auto 50px;
          }
        }
      }
    }
    //3カラム
    &.side-both {
      .contents {
        & > .component {
          &.search {
            margin: 10px auto 50px;
          }
        }
      }
    }
  }
}
//検索結果画面
.theme-fo-base {
  .wrapper {
    .contents {
      & > .component {
        &.search {
          @include search_container;
          & + .entry-list {
            padding-bottom: 25px;
            .entry-list-unit {
              border-bottom: 1px solid $border_color;
              margin: 10px 0;
              padding: 10px 0;
              @include breakpoint-pc {
                display: flex;
              }
              .img {
                @include breakpoint-pc {
                  width: 30%;
                  padding: 0 0 10px 0;
                }
                @include breakpoint-sp {
                  padding-bottom: 10px;
                }
                img {
                  border-radius: $case_border_radius;
                  &:hover {
                    opacity: $hover_opacity;
                  }
                }
              }
              .cont {
                border-left: 0;
                @include breakpoint-pc {
                  width: 70%;
                  padding: 0 10px 10px;
                }
                h3 {
                  @include breakpoint-sp {
                    padding: 0;
                  }
                  a {
                    font-family: var(--fo-heading-font-family);
                    font-size: $list_heading_pc_fontsize;
                    color: var(--fo-heading-main-color);
                    line-height: var(--fo-heading-line-height);
                    letter-spacing: var(--fo-heading-letter-spacing);
                    padding: 0 10px;
                    @include breakpoint-sp {
                      font-size: $list_heading_sp_fontsize;
                      padding: 0;
                    }
                    &:hover {
                      text-decoration: none;
                      opacity: $hover_opacity;
                    }
                  }
                }
                h4 {
                  color: var(--fo-text-main-color);
                  padding: 0 10px;
                  @include breakpoint-sp {
                    padding: 0;
                  }
                }
                p {
                  font-size: var(--fo-text-font-size-pc);
                  letter-spacing: var(--fo-text-letter-spacing);
                  line-height: var(--fo-text-line-height);
                  color: var(--fo-text-main-color);
                  @include breakpoint-sp {
                    font-size: var(--fo-text-font-size-sp);
                    padding: 0;
                  }
                }
              }
            }
            .row {
              .text-center {
                padding-top: 30px;
              }
            }
          }
        }
      }
      .component {
        &.search {
          & + h1 {
            font-family: var(--fo-heading-font-family);
            font-size: $list_heading_pc_fontsize;
            color: var(--fo-heading-main-color);
            line-height: var(--fo-heading-line-height);
            letter-spacing: var(--fo-heading-letter-spacing);
            @include search_container;
            @include breakpoint-sp {
              font-size: $list_heading_sp_fontsize;
            }
          }
          & + h1 + p {
            font-size: var(--fo-text-font-size-pc);
            letter-spacing: var(--fo-text-letter-spacing);
            line-height: var(--fo-text-line-height);
            color: var(--fo-text-main-color);
            @include search_container;
            @include breakpoint-sp {
              font-size: var(--fo-text-font-size-sp);
            }
          }
          & + h1 + p + .entry-list {
            margin-bottom: 50px;
          }
        }
      }
      .entry-list {
        .row-none {
          @include search_container
        }
      }
    }
  }
}

/*------- ページネーション部分 通常ページ ブログ共通仕様 --------*/
.entry-list {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 10px;
    line-height: 0;
    padding-bottom: 0;
    li {
      color: var(--fo-main-color);
      margin: 0;
      a {
        color: var(--fo-main-color);
        border: 1px solid var(--fo-main-color);
        background: #fff;
      }
      &.active > a {
        background: var(--fo-main-color);
        color: #fff;
      }
      &:hover > a {
        opacity: $hover_opacity;
      }
    }
  }
}

/*--- アイコンパーツ ---*/
//デフォルトのCSSが5なので表示されないアイコンがあるため
i:is(.fa,.far,.fas) {
  font-family: $font_family_awsm6;
  font-family: $font_family_awsm;
}

/*--- カルーセルパーツ ---*/
.component {
  &.carousel {
    .flexslider {
      .flex-control-paging {
        li {
          a {
            background: #eee;
            box-shadow: none;
            &.flex-active {
              background: var(--fo-main-color);
            }
          }
        }
      }
      .flex-direction-nav {
        :is(.flex-next,.flex-prev) {
          color: var(--fo-main-color);
        }
      }
    }
  }
}

/*------------- common（ウェブサイト共通）END -------------*/

/*----------------------------------
    entry-list（ 記事リストパーツ）
----------------------------------*/

/*--- 記事リストパーツ ---*/
//デフォルト
//テーマの崩れを修正・基本ここは触らない。
.component {
  &.entry-list {
    .entry-list-unit {
      & + .entry-list-unit {
        @include breakpoint-sp {
          margin: 10px auto 0;
        }
      }
      .cont {
        @include breakpoint-sp {
          border: none;
        }
        h3 {
          max-height: none;
          line-height: normal;
          @include breakpoint-sp {
            padding: 0;
          }
          a {
            font-family: var(--fo-heading-font-family);
            font-size: $list_heading_pc_fontsize;
            color: var(--fo-heading-main-color);
            line-height: var(--fo-heading-line-height);
            letter-spacing: var(--fo-heading-letter-spacing);
            @include breakpoint-sp {
              font-size: $list_heading_sp_fontsize;
            }
            &:hover {
              opacity: $hover_opacity;
            }
          }
        }
        h4 {
          font-size: var(--fo-text-font-size-pc);
          letter-spacing: var(--fo-text-letter-spacing);
          color: var(--fo-text-main-color);
        }
        p {
          &.category {
            a {
              &:hover {
                opacity: $hover_opacity;
              }
            }
          }
          &.description {
            max-height: none;
            font-size: var(--fo-text-font-size-pc);
            letter-spacing: var(--fo-text-letter-spacing);
            line-height: var(--fo-text-line-height);
            color: var(--fo-text-main-color);
            @include breakpoint-sp {
              font-size: var(--fo-text-font-size-sp);
              margin: 10px 0;
              padding: 0;
            }
          }
        }
      }
    }
    //カード型
    &:is(
      .entry-image-card-1-col,
      .entry-image-card-2-col,
      .entry-image-card-3-col
    ) {
      .article-list {
        .entry-list-unit {
          .img {
            @include breakpoint-sp {
              padding-right: 0;
            }
          }
          .cont {
            h3 {
              a {
                @include breakpoint-pc {
                  padding: 0 !important;
                }
              }
            }
            h4 {
              margin: 10px 0;
              @include breakpoint-pc {
                padding: 0 !important;
              }
            }
            p {
              &.category {
                margin: 10px 0 10px 3px;
              }
            }
            div {
              &.tags {
                margin: 0 0 5px;
                padding: 0;
              }
            }
          }
        }
      }
    }
    //リスト型・スタイル選択
    .entry-list-unit {
      border-bottom: 1px solid $blog_border_color !important;
      .img {
        @include breakpoint-pc {
          padding-right: 25px;
        }
      }
      .cont {
        a {
          &:hover {
            text-decoration: none;
          }
        }
        //タイトル
        h3 {
          a {
            @include breakpoint-pc {
              padding: 0 10px;
            }
          }
        }
        h4 {
          padding: 0 10px;
          @include breakpoint-sp {
            padding: 0;
          }
        }
        p {
          &.category {
            margin: 10px;
            @include breakpoint-sp {
              padding-left: 0;
            }
          }
          &.description {}
        }
        //記事リスト共通 タグ
        div {
          &.tags {
            display: flex;
            gap: 5px 10px;
            flex-wrap: wrap;
            margin: 16px 10px 10px;
            padding: 0 10px;
            @include breakpoint-sp {
              margin: 16px 0 10px;
              padding: 0;
            }
            a {
              &.tag {
                margin: 0;
                &:hover {
                  opacity: $hover_opacity;
                }
              }
            }
          }
        }
      }
    }
  }
}
//サイドバー時
.side {
  .component {
    &.entry-list {
      .entry-list-unit {
        .img {
          padding-right: 0;
        }
      }
    }
  }
}
.article-per-page {
  &:empty {
    margin-top: 0;
  }
}

//デザインパーツ
// .component {
//   &:not(:root:root:root:root) {
//     &.entry-list[data-designpart-id] {
//     }
//   }
// }

//デフォルトパーツ
.component {
  &.entry-list {
    //事例
    &.caseContent_style {
      .article-list {
        .entry-list-unit {
          background: var(--fo-background-color1);
          padding: 20px 20px 10px;
          border-bottom: 1px solid $blog_border_color;
          @include breakpoint-sp {
            width: 100%;
          }
          a {
            &.img {
              img {
                border-radius: $case_border_radius;
              }
            }
          }
          .cont {
            h3 {
              a {
                &:hover {
                  opacity: $hover_opacity;
                }
              }
            }
            h4 {
              font-family: $case_date_font_family;
            }
            p {
              &.category {
                i {
                  display: none;
                }
                a {
                  color: var(--fo-tag-text-color);
                  &::before {
                    @include category_icon_custom;
                  }
                  &:hover {
                    opacity: $hover_opacity;
                  }
                }
              }
              &.description {
                margin: 10px;
                @include breakpoint-pc {
                  padding: 0 10px;
                }
                @include breakpoint-sp {
                  margin: 10px 0;
                  padding-left: 0;
                }
              }
            }
            div {
              &.tags {
                a.tag {
                  @include tag_custom;
                  &::before {
                    @include tag_icon_custom;
                  }
                  i {
                    display: none;
                  }
                  &:last-child {
                    margin-right: 0;
                  }
                }
              }
            }
          }
        }
      }
      &:is(
        .entry-image-card-1-col,
        .entry-image-card-2-col,
        .entry-image-card-3-col
      ) {
        .article-list {
          display: flex !important;
          flex-wrap: wrap;
          gap: $case_list_space;
          @include breakpoint-sp {
            gap: 20px;
          }
          .entry-list-unit {
            box-shadow: $case_box_shadow_common;
            border: 0;
            margin: 0 !important;
            a {
              &.img {
                max-height: none;
              }
            }
            .cont {
              border-left: none;
              padding-top: 10px;
              h3 {}
              h4 {}
              p {
                &.category {}
                &.description {
                  margin: 10px 0;
                  @include breakpoint-pc {
                    padding: 0;
                  }
                }
              }
              div {
                &.tags {
                  @include breakpoint-sp {
                    margin: 10px 0;
                  }
                }
              }
            }
          }
          .article-per-page {
            width: 100%;
            margin-top: 8px;
            &:empty {
              display: none;
              margin-top: 0;
            }
          }
        }
      }
      //カード型1列
      &.entry-image-card-1-col {
        .article-list {
          .entry-list-unit {
            width: 100%;
            a {}
            .cont {}
          }
        }
      }
      //カード型2列
      &.entry-image-card-2-col {
        .article-list {
          .entry-list-unit {
            @include breakpoint-pc {
              width: calc((100% - #{$case_list_space}) / 2);
            }
            a {}
            .cont {}
          }
        }
      }
      //カード型3列
      &.entry-image-card-3-col {
        .article-list {
          .entry-list-unit {
            @include breakpoint-pc {
              width: calc((100% - (#{$case_list_space} * 2)) / 3);
            }
            a {}
            .cont {}
          }
        }
      }
      //リスト型
      &.entry-image-list {
        .article-list {
          padding-bottom: 0;
          .entry-list-unit {
            box-shadow: $case_box_shadow_common !important;
            border: 0 !important;
            margin: 20px auto 0;
            padding-bottom: 10px;
            @include breakpoint-sp {
              display: block !important;
              width: 100%;
              padding: 20px 20px 10px;
            }
            &:first-child {
              margin-top: 0;
            }
            &:nth-last-child(2) {
              border-bottom: 0 !important;
            }
            a {
              &.img {
                width: 35% !important;
                padding: 0 !important;
                @include breakpoint-sp {
                  display: block !important;
                  width: 100% !important;
                }
                img {
                  padding-bottom: 10px;
                  @include breakpoint-sp {
                    padding-bottom: 0;
                  }
                }
              }
            }
            .cont {
              width: 65% !important;
              border-left: none;
              margin: 20px auto 0;
              @include breakpoint-sp {
                width: 100% !important;
                display: block !important;
              }
              h3 {
                text-align: left;
                margin: 0 20px 10px;
                @include breakpoint-sp {
                  margin: 10px 0;
                  padding-left: 0;
                }
                a {
                  &:hover {}
                }
              }
              h4 {
                padding: 0 20px;
                @include breakpoint-sp {
                  padding-left: 0;
                }
              }
              p {
                @include breakpoint-sp {
                  margin: 10px 0;
                  padding: 0;
                }
                &.category {}
                &.description {
                  @include breakpoint-pc {
                    padding: 0 20px;
                  }
                }
              }
              div {
                &.tags {
                  padding: 0 20px;
                  @include breakpoint-sp {
                    margin: 10px 0;
                    padding: 0;
                  }
                }
              }
            }
          }
        }
      }
      //ここからオプション
      //col余白なし オプション1
      &.option_padding_none {
        .article-list {
          .entry-list-unit {
            padding: 0;
            a {
              &.img {
                img {
                  padding: 0;
                }
              }
            }
            .cont {
              padding: 10px 20px;
              h3 {}
              h4 {}
              p {
                &.category {}
                &.description {}
              }
            }
          }
        }
        &.entry-image-list {
          .article-list {
            .entry-list-unit {
              .cont {
                vertical-align: middle;
                padding: 20px 20px 20px 0;
                @include breakpoint-sp {
                  margin-top: 0;
                  padding: 10px 20px;
                }
                h3 {}
                p {
                  &.description {}
                }
              }
            }
          }
        }
      }
      //シャドウなし オプション2
      &.option_shadow_none {
        .article-list {
          .entry-list-unit {
            box-shadow: none !important;
          }
        }
      }
      // 画像フィット オプション3
      &.option_img_fit {
        .article-list {
          .entry-list-unit {
            a {
              &.img {
                img {
                  @include breakpoint-pc {
                    height: $case_img_fit_height;
                    object-fit: cover;
                  }
                }
              }
            }
          }
        }
        &.entry-image-list {
          .article-list {
            .entry-list-unit {
              a {
                &.img {
                  img {
                    @include breakpoint-pc {
                      width: calc(35% - 14px);
                      height: calc(100% - 30px);
                      object-fit: cover;
                      position: absolute;
                    }
                  }
                }
              }
            }
          }
        }
        &.option_padding_none {
          &.entry-image-list {
            .article-list {
              .entry-list-unit {
                a {
                  &.img {
                    img {
                      @include breakpoint-pc {
                        width: 35%;
                        height: 100%;
                        position: absolute;
                        object-fit: cover;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      //テキスト制限 オプション4
      &.option_text_limit {
        .article-list {
          .entry-list-unit {
            .cont {
              h3 {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              p {
                &.description {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 5;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
        &.entry-image-list {
          .article-list {
            .entry-list-unit {
              .cont {
                h3 {
                  -webkit-line-clamp: 1;
                }
                p {
                  &.description {
                    -webkit-line-clamp: 3;
                  }
                }
              }
            }
          }
        }
      }
    }
    //ニュース
    &.news_list {
      padding: 40px 50px;
      @include breakpoint-sp {
        padding: 20px;
      }
      .article-list {
        .entry-list-unit {
          border-bottom: 1px solid $border_color;
          padding: 15px 10px 10px;
          @include breakpoint-sp {
            padding: 0 0 10px;
          }
          .cont {
            display: flex;
            justify-content: flex-end;
            flex-direction: row-reverse;
            width: 100%;
            border: 0;
            @include breakpoint-sp {
              flex-direction: column-reverse;
            }
            h3 {
              flex-grow: 1;
              margin: 0;
              @include breakpoint-sp {
                width: 100%;
                padding-left: 0;
              }
              a {
                font-family: $case_title_font_family;
                font-size: var(--fo-text-font-size-pc);
                line-height: var(--fo-text-line-height);
                color: inherit;
                text-decoration: $news_list_text_decoration;
                margin-bottom: 5px;
                padding-top: 1px;
                &:hover {
                  opacity: $news_list_hover_opacity;
                }
              }
            }
            h4 {
              font-family: $case_date_font_family;
              text-align: center;
              white-space: nowrap;
              margin: 4px 10px 0 0;
              padding: 0;
              @include breakpoint-sp {
                text-align: left;
                margin: 0 0 5px;
              }
            }
            div {
              &.tags {
                max-width: 140px;
                margin: 0 10px 0 0;
                padding: 0;
                @include breakpoint-sp {
                  width: 100%;
                  max-width: initial;
                  margin: 0;
                }
                a {
                  &.tag {
                    @include tag_custom;
                    margin-top: 0;
                    margin-bottom: 5px;
                    @include breakpoint-sp {
                      margin: 0 5px 10px 0;
                    }
                    &::before {
                      @include tag_icon_custom;
                    }
                    &:first-child {
                      @include breakpoint-sp {
                        margin-left: 0;
                      }
                    }
                    &:not(:first-child) {
                      display: none;
                    }
                    i {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
      //タグ2個以上 オプション
      &.option_column {
        .article-list {
          .entry-list-unit {
            .cont {
              flex-wrap: wrap;
              flex-direction: inherit;
              h3 {
                order: 2;
                width: 100%;
                a {
                  margin-bottom: 15px;
                  padding-left: 0;
                }
              }
              h4 {
                order: 1;
                width: 100%;
                text-align: left;
                margin: 0 0 5px 0;
              }
              div {
                &.tags {
                  order: 3;
                  max-width: 100%;
                  width: 100%;
                  a {
                    &.tag {
                      &:not(:first-child) {
                        display: inline-block;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
//サイドバー用
.side {
  .component {
    &.entry-list {
      //事例
      &.caseContent_style {
        .article-list {
          .entry-list-unit {
            @include breakpoint-pc {
              padding: 10px 10px 5px;
            }
            .cont {
              @include breakpoint-pc {
                padding-right: 0;
              }
              h3 {
                @include breakpoint-pc {
                  margin: 0;
                }
                a {
                  @include breakpoint-pc {
                    font-size: 16px;
                    padding: 0;
                  }
                }
              }
              h4 {
                @include breakpoint-pc {
                  font-size: 12px;
                  margin: 5px 0;
                  padding: 0;
                }
              }
              p {
                &.category {
                  @include breakpoint-pc {
                    margin: 5px 0;
                    padding: 0;
                  }
                  a {
                    @include breakpoint-pc {
                      font-size: 12px;
                      padding: 0;
                    }
                  }
                }
                &.description {
                  @include breakpoint-pc {
                    font-size: 12px;
                    margin: 5px 0 0;
                    padding: 0;
                  }
                }
              }
              div {
                &.tags {
                  @include breakpoint-pc {
                    margin: 0;
                    padding: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/*------------- entry-list（ 記事リストパーツ））END -------------*/

/* --------------------------------
    header・logo・navigations（ヘッダー・ロゴ・ナビゲーション）
----------------------------------- */
.navi_base_custom {
  //1段のとき
  &.navi-001-01 {
    header#navigations {
      min-height: 51px;
      font-family: var(--fo-text-font-family);
      border-bottom: 0;
      box-shadow: $navigation_box_shadow_common;
      .inner {
        @include breakpoint-pc {
          box-sizing: border-box;
          display: flex;
          padding: 0;
        }
      }
      .logo {
        float: none;
        @include breakpoint-pc {
          width: $header_logo;
          padding: 10px;
        }
        @include breakpoint-sp {
          box-sizing: border-box;
          width: 100%;
          padding-left: 10px;
        }
        a {
          height: auto;
          img {
            @include breakpoint-sp {
              max-height: $header_sp_logo;
            }
          }
        }
      }
      //ハンバーガーメニュー
      a.menu-trigger {
        background: var(--fo-main-color);
        span {
          background-color: #fff;
        }
      }
      .main-menu {
        float: none;
        @include breakpoint-pc {
          width: calc(100% - #{$header_logo});
          max-width: none;
        }
        &.navigation-font-family {}
        ul.clearfix {
          background: $navigation_bg_color;
        }
        //PC用
        @include breakpoint-pc {
          .level-01,
          .level-01-trigger {
            a {
              font-size: $navigation_font_size;
              font-weight: $navigation_font_weight;
              color: $navigation_text_color;
              border-left: none;
              border-right: none;
              padding: 25px 10px;
            }
          }
          .level-01:hover {
            background-color: $navigation_hover_bg_color;
            a {
              color: $navigation_hover_text_color;
              opacity: $navigation_hover_opacity;
            }
          }
          .level-01-trigger {
            //三角部分
            &::after {
              content: "\f107";
              font-size: 20px;
              font-weight: 400;
              line-height: 1;
              color: $navigation_arrow1_color;
              translate: 0 -50%;
              margin-top: 0;
            }
            &:hover::after {
              color: $navigation_hover_text_color;
              rotate: 180deg;
            }
            &:hover {
              background: $navigation_hover_bg_color;
              & > a {
                color: $navigation_hover_text_color;
                opacity: $navigation_hover_opacity;
              }
            }
            ul.level-01-cont {
              background: $navigation_bg2_color;
              border: 0;
              a {
                color: $navigation_text2_color;
                padding: 20px;
                &:hover {
                  background: $navigation_hover_bg2_color;
                  color: $navigation_hover_text2_color;
                }
              }
              .level-02-trigger {
                &::after {
                  content: "\f105";
                  font-size: 20px;
                  font-weight: 400;
                  color: $navigation_arrow2_color;
                  right: 10px;
                  translate: 0 -50%;
                  margin-top: 0;
                }
                &:has(> a:hover) {
                  &::after {
                    color: $navigation_hover_text2_color;
                  }
                }
                .level-02-cont {
                  background: $navigation_bg2_color;
                  li {}
                  .level-03 {
                    a {
                      padding: 20px 10px;
                    }
                  }
                }
              }
            }
          }
        }
        //SP用は共通ハンバーガー
      }
    }
  }
  //2段のとき
  &.navi-002-01 {
    font-family: var(--fo-text-font-family);
    header#navigations {
      background: $header_bg_color;
      box-shadow: $navigation_box_shadow_common;
      .inner {
        //ロゴ ヘッダーボタンエリア
        .navigation-cont {
          box-sizing: border-box;
          max-width: $max_width;
          padding: 10px 20px;
          @include breakpoint-pc {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          @include breakpoint-sp {
            padding: 0 0 10px;
          }
          //ロゴ
          .logo {
            float: none;
            @include breakpoint-pc {
              width: $header_logo;
              padding: 0;
            }
            @include breakpoint-sp {
              display: flex;
              align-items: center;
              min-height: 51px;
            }
            div {
              line-height: normal;
              padding: 0;
              a {
                @include breakpoint-sp {
                  display: block;
                  height: auto;
                  line-height: 0;
                }
                img {
                  vertical-align: middle;
                  padding: 0;
                  max-height: 60px;
                  @include breakpoint-sp {
                    max-height: $header_sp_logo;
                  }
                }
              }
            }
          }
          .cont {
            box-sizing: border-box;
            min-width: auto;
            max-width: none;
            float: none;
            @include breakpoint-pc {
              width: calc(100% - #{$header_logo});
            }
            .row {
              display: flex;
              justify-content: flex-end;
              width: 100%;
              min-width: inherit;
              @include breakpoint-sp {
                display: block;
              }
              @include breakpoint-tb {
                display: flex;
                justify-content: center;
              }
              .col {
                @include breakpoint-sp {
                  padding: 0;
                }
                //ボタンのカスタマイズ用
                // .component {
                //   &.button[data-designpart-id] {
                //     .button-cont {
                //       a {
                //         &.size-s {
                //           &::before {}
                //         }
                //       }
                //     }
                //   }
                // }
              }
            }
          }
        }
        //ハンバーガーメニュー
        a.menu-trigger {
          background: var(--fo-main-color);
          span {
            background-color: #fff;
          }
        }
        //グロナビ
        .main-menu {
          background: $navigation_bg_color;
          border-top: solid 1px #ccc;
          border-bottom: solid 1px #ccc;
          &.navigation-font-family {}
          //PC用
          @include breakpoint-pc {
            .level-01,
            .level-01-trigger {
              a {
                font-weight: $navigation_font_weight;
                font-size: $navigation_font_size;
                color: $navigation_text_color;
                border-left: none;
                border-right: none;
              }
            }
            .level-01:hover {
              background-color: $navigation_hover_bg_color;
              a {
                color: $navigation_hover_text_color;
                opacity: $navigation_hover_opacity;
              }
            }
            .level-01-trigger {
              //三角部分
              &::after {
                content: "\f107";
                font-size: 20px;
                font-weight: 400;
                line-height: 1;
                color: $navigation_arrow1_color;
                translate: 0 -50%;
                margin-top: 0;
              }
              &:hover::after {
                color: $navigation_hover_text_color;
                rotate: 180deg;
              }
              &:hover {
                background: $navigation_hover_bg_color;
                & > a {
                  color: $navigation_hover_text_color;
                  opacity: $navigation_hover_opacity;
                }
              }
              ul.level-01-cont {
                width: 100%;
                background: $navigation_bg2_color;
                border: 0;
                a {
                  color: $navigation_text2_color;
                  padding: 20px;
                  &:hover {
                    background: $navigation_hover_bg2_color;
                    color: $navigation_hover_text2_color;
                  }
                }
                .level-02-trigger {
                  &::after {
                    content: "\f105";
                    font-size: 20px;
                    font-weight: 400;
                    color: $navigation_arrow2_color;
                    translate: 0 -50%;
                    right: 10px;
                    margin-top: 0;
                  }
                  &:has(> a:hover) {
                    &::after {
                      color: $navigation_hover_text2_color;
                    }
                  }
                  .level-02-cont {
                    background: $navigation_bg2_color;
                    li {
                      width: 100%;
                    }
                    .level-03 {
                      a {
                        padding: 20px 10px;
                      }
                    }
                  }
                }
              }
            }
          }
          //SP用は共通ハンバーガー
        }
      }
    }
    //2段から1段への変更（変更不可）
    &.stage1 {
      header#navigations {
        .inner {
          //ロゴ ヘッダーボタンエリア
          .navigation-cont {
            @include breakpoint-sp {
              display: flex;
              align-items: center;
              justify-content: space-between;
              min-height: 51px;
              margin: 0;
              padding: 0;
            }
            .logo {
              @include breakpoint-sp {
                width: 45%;
                padding: 0 0 0 10px;
              }
            }
            .cont {
              @include breakpoint-sp {
                width: 55%;
                padding: 0 65px 0 0;
              }
              .row {
                @include breakpoint-sp {
                  display: flex;
                  justify-content: flex-end;
                  min-width: 112px;
                }
              }
            }
          }
        }
      }
    }
  }
  // hover挙動記述エリア
  &:is(.navi-001-01,.navi-002-01) {
    header#navigations {
      .inner {
        .main-menu {
          @include breakpoint-pc {
            ul {
              li {
                &:is(.level-01,.level-01-trigger) {
                  & > a {
                    position: relative;
                    &:before {
                      content: "";
                      position: absolute;
                      height: 2.5px;
                      width: 0;
                      margin: 0 auto;
                      right: 0;
                      bottom: 0;
                      left: 0;
                      background-color: var(--fo-main-color);
                      transition: width 0.3s ease-in-out;
                    }
                  }
                  &:hover {
                    a {
                      &::before {
                        width: 60px;
                      }
                    }
                  }
                }
                a {
                  transition: 0.3s ease-in-out;
                }
              }
            }
          }
        }
      }
    }
  }
  //共通ハンバーガー（1段・2段）
  &:is(.navi-001-01,.navi-002-01) {
    header#navigations {
      .inner {
        .main-menu {
          //SP共通
          @include breakpoint-sp {
            .toggle.fa.fa-angle-down,
            .toggle.fa.fa-angle-up {
              &::before {
                font-size: 20px;
                color: $navigation_sp_arrow1_color;
                position: absolute;
                top: 50%;
                right: 4px;
                margin-top: -11px;
              }
            }
            .level-01,
            .level-01-trigger {
              border-right: 0;
              border-left: 0;
              a {
                font-size: $navigation_sp_font_size;
                font-weight: $navigation_sp_font_weight;
                color: $navigation_sp_text_color;
                border-left: none;
                border-right: none;
                position: relative;
                padding: 10px 20px;
              }
            }
            .level-01 {
              &:hover {
                background: none;
              }
            }
            .level-01-trigger {
              &:hover {
                background: $navigation_sp_bg_color;
                a {
                  color: $navigation_sp_hover_text_color;
                  .toggle.fa.fa-angle-down,
                  .toggle.fa.fa-angle-up {
                    &::before {
                      color: $navigation_sp_hover_text_color;
                    }
                  }
                }
              }
              .level-01-cont {
                background: $navigation_sp_bg2_color;
                a {
                  color: $navigation_sp_text_color;
                  &:hover {
                    background: $navigation_sp_bg3_color;
                  }
                }
                .level-02-trigger {
                  padding-right: 0 !important;
                  &::after {
                    content: none !important;
                  }
                  a {
                    color: $navigation_sp_text3_color;
                    .toggle.fa.fa-angle-down,
                    .toggle.fa.fa-angle-up {
                      &::before {
                        color: $navigation_sp_arrow2_color;
                      }
                    }
                  }
                  .level-02-cont li a {
                    background: $navigation_sp_bg3_color;
                    color: $navigation_sp_text3_color;
                    //border-top: 1px solid $navigation_sp_bg3_color;
                  }
                }
                .level-02 {
                  border-top: 1px solid var(--fo-main-color);
                  a {
                    color: $navigation_sp_text2_color;
                  }
                }
              }
            }
          }
          //デザイン用
          @include breakpoint-sp {
            .toggle.fa.fa-angle-down,
            .toggle.fa.fa-angle-up {
              &::before {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 100%;
                font-size: 30px;
                top: 10px;
                right: 0;
              }
            }
            .level-01,
            .level-01-trigger {
              a {
                text-align: left;
                border-top: $navigation_sp_border-bottom;
                padding: 20px 10px;
              }
            }
            .level-01-trigger {
              & > a {
                padding-right: 30px;
              }
              .level-01-cont {
                .level-02-trigger {
                  & > a {
                    padding: 20px 30px 20px calc(10px + 1em);
                  }
                  .level-03 {
                    a {
                      padding: 20px 30px 20px calc(10px + 2em);
                    }
                  }
                }
                .level-02 {
                  a {
                    padding: 20px 30px 20px calc(10px + 1em);
                  }
                }
                .level-02-cont {
                  // border-top: $navigation_sp_border-bottom !important;
                }
              }
            }
            ul {
              li {
                &[class*="level-01"] {
                  &:first-child {
                    & > a {
                      border: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

//2段のナビ非表示
.navi-002-01 {
  &.nav_none {
    header#navigations {
      .inner {
        .main-menu {
          display: none !important;
        }
        a.menu-trigger {
          display: none;
        }
      }
    }
  }
}

//ヘッダー固定時のみ（ハンバーガーメニュー内をスクロール表示）
:is(.navi-001-01,.navi-002-01) {
  &:is(
    .one_row_sticky-navi__GU_fr,
    .two_row_sticky-navi__8HtZT
  ) {
    header#navigations {
      .inner {
        .main-menu {
          @include breakpoint-sp {
            max-height: calc(100vh - 51px);
            overflow-y: auto;
            /*----
            //スクロールバー非表示
            -ms-overflow-style: none; //Edge
            scrollbar-width: none; //Firefox
            &::-webkit-scrollbar {
              display: none;
            }
            ----*/
          }
        }
      }
    }
  }
}

/*------------- header・logo・navigations（ヘッダー・ロゴ・ナビゲーション）END -------------*/

/*----------------------------------
    main-visual（メインビジュアル）
----------------------------------*/
//オーバーレイが公開画面で二重にかかるバグ
.theme-fo-base {
  .main-visual {
    .overlay {
      display: none !important;
    }
  }
}

//colのズレ対策
.theme-fo-base {
  .main-visual {
    .clearfix {
      .row {
        .col {
          vertical-align: top;
        }
      }
    }
  }
}

//メインビジュアル
.theme-fo-base {
  .main-visual {
    background-repeat: no-repeat;
    min-height: auto;
    padding: $mv_padding;
    @include breakpoint-sp {
      padding: $sp_mv_padding;
    } 
    @include breakpoint-tb {
      min-height: auto;
    }
    & > :is(.clearfix,.main-visual-content) {
        width: 100%;
        max-width: $max_width;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: auto;
        margin: auto;
        padding: 0 20px;
        @include breakpoint-sp {
          min-height: auto;
        }
      .row {
        .col {
          .component {
            &.heading {
              &.hd_custom {
                :is(h1,h2,h3,h4,h5) {
                  margin-bottom: 0;
                }
                h1 {
                  @include breakpoint-pc {
                    font-size: calc(var(--fo-h1-font-size-pc) + 4px);
                  }
                }
              }
            }
          }
        }
      }
    }
    //TOP
    &.mv_custom {
      & > :is(.clearfix,.main-visual-content) {
        min-height: $top_mv_height;
        @include breakpoint-sp {
          min-height: auto;
        }
        .row {
          --fo-heading-main-color: #fff;
          --fo-text-main-color: #fff;
          .col {
            .component {
              &.hd_custom {
                h1{}
              }
            }
          }
        }
      }
    }
    //下層
    &.mv_sub_custom {
      & > :is(.clearfix,.main-visual-content) {
        min-height: $sub_mv_height;
        .row {
          --fo-heading-main-color: #fff;
          --fo-text-main-color: #fff;
          --fo-text-link-color: #fff;
          .col {
            .component {
              &.cta {
                .cta-row {
                  &.mv_design01_row {
                    margin-top: 22px;
                    .cta-column {
                      display: flex;
                      flex-direction: column;
                      gap: 8px;
                      width: 100%;
                      .component {
                        &.button[data-designpart-id] {
                          margin: 0;
                        }
                      }
                    }
                  }
                }
              }
              &.hd_custom {
                h1{}
              }
            }
          }
        }
      }
    }
    //幅100％
    &.maxWidth_custom {
      & > :is(.clearfix,.main-visual-content) {
        max-width: none;
      }
    }
  }
}


/*------------- main-visual（メインビジュアル）END -------------*/

/*----------------------------------
  breadcrumbs（パンくず）
----------------------------------*/
.theme-fo-base {
  .breadcrumbs {
    background: #fff;
    max-width: 100%;
    margin: 0;
    ul {
      width: 100%;
      max-width: $max_width - 20px;
      margin: auto;
      padding: 15px 0;
      li {
        a {
          &:hover {
            color: var(--fo-text-main-color);
            text-decoration: unset;
            opacity: $hover_opacity;
          }
          &::after {
            content: "\f105";
            font-family: $font_family_awsm;
            color: var(--fo-text-main-color);
            border-top: none;
            border-bottom: none;
            border-left: none;
            position: absolute;
            padding: 0;
            top: 0;
            right: -1px;
            margin-top: 0;
          }
        }
        a,
        span {
          font-size: 14px;
          color: var(--fo-text-main-color);
          text-decoration: unset;
          padding: 0 20px;
        }
      }
    }
  }
}

/*------------- breadcrumbs（パンくず）END -------------*/

/*----------------------------------
    button（ボタン）
----------------------------------*/
/*--- ボタン全体スタイル ---*/
:is(
  .component.button,
  .button.cta-button
) {
  .button-cont {
    a {
      transition: none;
      &:hover {
        @include breakpoint-pc {
          transition: all .2s cubic-bezier(.02,.42,.24,.74);
        }
      }
    }
  }
}

//デザインパーツ
.component {
  &:not(:root:root:root:root:root) {
    //ボタン全体（例：自由にカスタマイズしてください）
    // &.button[data-designpart-id] {
    //   margin-top: 0;
    //   .button-cont {
    //     a {
    //       &.size-s {}
    //       &.size-m {}
    //       &.size-l {}
    //       &:is(.size-s,.size-m,.size-l) {
    //         box-shadow: none;
    //       }
    //     }
    //   }
    // }

    &.button {
      &.btn1_custom01 {
        .button-cont {
          a {
            &:is(.size-s,.size-m,.size-l) {
              &::before {}
            }
            &:is(.blue,.red,.orange,.black,.white) {}
            &:hover {}
          }
        }
      }
    }

    //TELボタン
    &.button[data-designpart-id="642f669ce4dc09621d945abc"] {
      .button-cont {
        a {
          //サイズ小
          &.size-s {
            font-size: calc(4px + var(--fo-button-small-font-size));
          }
          //サイズ中
          &.size-m {
            font-size: calc(4px + var(--fo-button-medium-font-size));
          }
          //サイズ大
          &.size-l {
            font-size: calc(12px + var(--fo-button-large-font-size));
          }
        }
      }
    }
  }
}
//ボタン共通
.component {
  &.button {
    //sp時センター寄せ
    &.sp_center {
      .button-cont:is(.left,.right) {
        @include breakpoint-sp {
          text-align: center;
        }
      }
    }
    //sp時アイコン化
    &.sp_icon {
      .button-cont {
        a {
          &:is(.size-s,.size-m,.size-l) {
            @include breakpoint-msp {
              background: none !important;
              width: auto !important;
              min-width: auto !important;
              font-size: 0 !important;
              letter-spacing: 0 !important;
              border: 0 !important;
              border-radius: 0 !important;
              box-shadow: none !important;
              margin: 0;
              padding: 5px 10px 5px 5px;
            }
            @include breakpoint-ssp {
              padding: 5px;
            }
          }
          &::before,
          &::after {
            @include breakpoint-msp {
              font-size: 22px;
              line-height: 1;
              color: var(--fo-main-color);
              margin: 0;
              top: 0;
            }
            @include breakpoint-ssp {
              font-size: 20px;
            }
          }
        }
      }
    }

    //デフォルトパーツ
    &.btn_custom01 {
      .button-cont {
        a {
          &:is(.size-s,.size-m,.size-l) {
            &::before {}
          }
          &:is(.blue,.red,.orange,.black,.white) {}
          &:hover {}
        }
      }
    }

  }
}

/*------------- button（ボタン）END -------------*/

/*----------------------------------
    heading（見出し）
----------------------------------*/
//ページ内リンクずれ対策class
.theme-fo-base {
  .wrapper {
    .contents {
      section {
        .component {
          &.heading:not(:root) {
            &.inPage_link {
              @include breakpoint-pc {
                margin-top: calc(-#{$inPage_link} - 10px);
                padding-top: calc(#{$inPage_link} + 10px);
              }
              @include breakpoint-sp {
                margin-top: calc(-#{$sp_inPage_link} - 10px);
                padding-top: calc(#{$sp_inPage_link} + 10px);
              }
            }
          }
        }
      }
    }
  }
}

//デザインパーツ
.component {
  //見出し下余白条件分岐用
  &:not(:root:root:root:root) {
    &.heading[data-designpart-id] {
      &:has(+ .component) {
        :is(h1,h2,h3) {
          @include margin-property(bottom,32px);
        }
        :is(h4,h5) {
          @include margin-property(bottom,24px);
        }
      }
    }
  }
  &:not(:root:root:root:root:root) {
    // 見出し全体（例：自由にカスタマイズしてください）
    &.heading[data-designpart-id] {
      :is(h1,h2,h3,h4,h5) {}
    }
    //デザインパーツ
    &.heading {
      &.hd_custom01 {
        :is(h1,h2,h3,h4,h5) {}
      }
      &.mt0_hd {
        margin-top: 0;
      }
      &.mainClr_hd {
        --fo-heading-main-color: var(--fo-main-color);
      }
      &.subClr_hd {
        --fo-heading-main-color: var(--fo-sub-color);
      }
      &.accentClr_hd {
        --fo-heading-main-color: var(--fo-accent-color);
      }
    }
  }
}

//デフォルトパーツ
.theme-fo-base {
  :is(.main-visual,.contents,.side,.foot) {
    .component {
      &.heading {
        //&.rich-heading-align-right {}
        //&.rich-heading-align-center {}
        //&.rich-heading-align-left {}

        //見出し01
        &.hd_custom01 {
          :is(h1,h2,h3,h4,h5) {}
        }

        //sp時センター
        &.sp_center {
          &:is(.rich-heading-align-right,.rich-heading-align-left) {
            @include breakpoint-sp {
              text-align: center !important;
            }
          }
        }

        //細字設定
        :is(h1,h2,h3,h4,h5) {
          .strong {
            font-weight: $hd_font_strong;
          }
        }
      }
    }
  }
}

/*------------- heading（見出し）END -------------*/


/*----------------------------------
    article-post（ブログ用見出し）
----------------------------------*/
/*--- ブログ見出しフォント指定 ---*/
.component {
  &.blog_article {
    .article-post {
      @include hd_blog;
    }
  }
}
/*------------- article-post（ブログ用見出し）END -------------*/

/*----------------------------------
    main（コンテンツ）
----------------------------------*/
@include theme-fo-base {
  .inner {
    .row {
      &.loop_row {
        @include adjacentMargin(loop_row,40px);
      }
      //料金
      &.price_table_row {
        .col {
          .component {
            &.richtext {
              :is(.normal-table,.table-with-two-headers) {
                table {
                  thead {
                    tr {
                      th {
                        background-color: #fff;
                        font-weight: normal;
                        &:nth-child(2) {
                          background-color: color-mix(in srgb, var(--fo-main-color) 80%, #fff);
                        }
                        &:nth-child(3) {
                          background-color: color-mix(in srgb, var(--fo-main-color) 60%, #fff);
                        }
                        &:nth-child(n+4) {
                          background-color: color-mix(in srgb, var(--fo-main-color) 40%, #fff);
                        }
                      }
                    }
                  }
                  tbody {
                    tr {
                      :is(th,td) {
                        font-weight: normal;
                        background-color: #fff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .col {
        .component {
          //リッチテキストパーツ
          &.richtext {}
          //画像パーツ
          &.image {}
          //リストパーツ
          &.list {}
        }
      }
    }
  }
}

/*--- CTAパーツ ---*/
@include theme-fo-base {
  //通常用
  &.cta_sec {
    .inner {
      .row {
        .col {
          .component {
            &.cta {
              margin: 0;
              .cta-row {
                --fo-heading-main-color: #fff;
                --fo-text-main-color: #fff;
                --tel-botton-color: #fff;
                &.btn_row {
                  @include breakpoint-pc {
                    display: flex;
                    max-width: 892px;
                    margin: auto;
                  }
                  @include breakpoint-pro_s {
                    display: block;
                  }
                  .cta-column {
                    @include breakpoint-pc {
                      display: flex;
                      justify-content: space-between;
                    }
                    @include breakpoint-pro_s {
                      display: block;
                      width: 100% !important;
                    }
                    &:not(:first-child) {
                      @include breakpoint-pro_s {
                        margin-top: 20px;
                      }
                    }
                    .component {
                      &.button[data-designpart-id] {
                        margin: 10px 0;
                      }
                    }
                  }
                  & + .cta-row {
                    max-width: 892px;
                    margin: auto;
                    .cta-column {
                      .component {
                        &.button[data-designpart-id] {
                          margin: 10px 0;
                        }
                      }
                    }
                  }
                }
                &.tel_row {
                  .cta-column {
                    .component {
                      &.button {
                        .button-cont {
                          a {
                            &:is(.size-s,.size-m,.size-l) {
                              color: var(--tel-botton-color,#000);
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
//２カラム（CTA）
.theme-fo-base {
  .wrapper {
    &[class*="side-"] {
      .contents {
        section {
          &.cta_sec {
            .inner {
              .row {
                .col {
                  .component {
                    &.cta {
                      .cta-row {
                        &.btn_row {
                          display: block;
                          .cta-column {
                            display: block;
                            width: 100% !important;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .side {
        .inner {
          .component {
            &.heading {
              & + .button {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
  }
}

/*--- デザインLPパーツ ---*/
@include theme-fo-base {
  //ヘッダー
  &.foPrp_header_sec {
    padding: 0;
    .inner {
      padding: 10px 20px;
      @include breakpoint-sp {
        padding: 10px;
      }
      .row {
        &.foPrp_header_row {
          display: flex;
          align-items: center;
          @include breakpoint-pc {
            min-height: 60px;
          }
          .col {
            padding: 0;
            &.foPrp_logo_col {
              @include breakpoint-pc {
                max-width: 300px;
                min-width: 150px;
                width: auto !important;
              }
              .component {
                &.image {
                  margin: 0;
                  &.foPrp_logo_img {
                    img {
                      @include breakpoint-pc {
                        max-width: $header_logo !important;
                        width: 100% !important;
                      }
                      @include breakpoint-sp {
                        max-height: $header_sp_logo !important;
                      }
                    }
                  }
                }
              }
            }
            &.foPrp_btn_col {
              display: flex !important;
              justify-content: flex-end;
              align-items: center;
              flex: 1;
              @include breakpoint-pc {
                width: auto !important;
              }
              .component {
                margin: 0;
                &:not(:first-child) {
                  @include breakpoint-pc {
                    margin-left: 15px;
                  }
                }
                &.button {
                  margin-top: 0;
                  .button-cont {
                    a {
                      @include breakpoint-sp {
                        background: none;
                        width: auto;
                        min-width: auto;
                        font-size: 0 !important;
                        letter-spacing: 0;
                        border-radius: 0;
                        border: 0;
                        margin: 0;
                        box-shadow: none;
                        padding: 5px 10px 5px 5px;
                      }
                      &::before {
                        @include breakpoint-sp {
                          font-size: 22px;
                          line-height: 1;
                          color: var(--fo-main-color);
                          margin: 0;
                        }
                      }
                    }
                  }
                  &[data-designpart-id="642f669ce4dc09621d945abc"] {
                    .button-cont {
                      a {
                        @include breakpoint-pro {
                          background: none;
                          width: auto;
                          min-width: auto;
                          font-size: 0 !important;
                          letter-spacing: 0;
                          border-radius: 0;
                          border: 0;
                          margin: 0;
                          box-shadow: none;
                          padding: 5px 10px 5px 5px;
                        }
                        &::before {
                          @include breakpoint-pro {
                            font-size: 22px;
                            line-height: 1;
                            color: inherit;
                            margin: 0;
                          }
                          @include breakpoint-sp {
                            color: inherit;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //フッター
  &.foPrp_footer_sec {
    padding: 0;
    background: $footer_bg_color;
    .inner {
      max-width: unset;
      padding: 0;
      .row {
        .col {
          padding: 0;
          .component {
            &.cta {
              margin: 0;
              .cta-row {
                padding-top: 0;
                &.page_top_row {
                  @include page_top;
                }
                .cta-column {
                  padding: 0;
                  .component {
                    &.richtext {
                      &.foot-copyright {
                        @include copyright_custom;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/*---------------------------------------------------
ここのパーツは自由に使用してください。
カスタマイズする場合はコピーして所定の場所で使用してください。
-----------------------------------------------------*/
@include theme-fo-base {
  .inner {
    .row {
      .col {
        .component {
          &.richtext {
            //テーブル(ボーダー無し）
            &.custom_table {
              table {
                border: none;
                :is(thead,tbody) {
                  border: 0;
                  tr {
                    border: 0;
                    th {
                      vertical-align: top;
                      border: 0;
                    }
                    td {
                      vertical-align: top;
                      border: 0;
                    }
                    p {
                      @include breakpoint-tb {}
                    }
                  }
                }
              }
            }
            //スマホ時テーブル固定スクロール
            &.sp_table_scroll {
              :is(
                .normal-table,
                .table-with-row-header,
                .table-with-two-headers
              ) {
                @include breakpoint-sp {
                  overflow-x: auto;
                  -webkit-overflow-scrolling: touch;
                  margin-bottom: 40px;
                }
                &::after {
                  @include breakpoint-sp {
                    content: "\f07e";
                    display: inline-block;
                    font-family: $font_family_awsm;
                    font-size: 30px;
                    line-height: 1;
                    color: var(--fo-main-color);
                    position: absolute;
                    left: 50%;
                    margin-left: -15px;
                  }
                }
              }
              table {
                @include breakpoint-tb {
                  min-width: 130vw;
                }
                @include breakpoint-ssp {
                  min-width: 200vw;
                }
                thead {
                  tr {
                    th {
                      @include breakpoint-sp {
                        white-space: initial;
                      }
                    }
                  }
                }
                tbody {
                  tr {
                    th {
                      @include breakpoint-sp {
                        display: table-cell !important;
                        white-space: nowrap;
                      }
                    }
                    td {
                      vertical-align: top;
                      @include breakpoint-sp {
                        display: table-cell !important;
                        white-space: initial;
                      }
                      p {
                        @include breakpoint-tb {}
                      }
                    }
                  }
                }
              }
            }
            //英語テキスト
            &.en_text {
              color: var(--fo-main-color);
              table {
                border: none;
                :is(thead,tbody) {
                  border: 0;
                  tr {
                    border: 0;
                    th {
                      border: 0;
                      padding: 0;
                    }
                    td {
                      border: 0;
                      padding: 0;
                    }
                    p {
                      margin: 0 !important;
                      @include breakpoint-tb {}
                    }
                  }
                }
              }
            }
            //ナンバー
            &.number_text {
              table {
                width: auto !important;
                border: none;
                :is(thead,tbody) {
                  border: 0;
                  tr {
                    border: 0;
                    th {
                      border: 0;
                      line-height: 1;
                      padding: 0;
                    }
                    td {
                      border: 0;
                      line-height: 1;
                      padding: 0;
                    }
                    p {
                      margin: 0 !important;
                      line-height: 1;
                      @include breakpoint-tb {}
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/*------------------------------
カスタムパーツ 格納場所
基本的にパーツ単体の記述でお願いします。
パーツ名を忘れず記載してください。
-------------------------------*/
@include theme-fo-base {
  .inner {
    .row {
      .col {
        .component {}
      }
    }
  }
}
/*--- カスタムパーツ 格納場所 end ---*/


/*----------------------------------
    ユニバーサルクラス
----------------------------------*/

//スマホだけ表示させる
.spOnly {
  @include breakpoint-pc {
    display: none !important;
  }
}

//PCだけ表示させる
.pcOnly {
  @include breakpoint-sp {
    display: none !important;
  }
}

//displayNoneクラス
.displayNone {
  display: none !important;
}

//ギャラリーパーツ
.poptrox-overlay {
  z-index: 9999 !important;
  .poptrox-popup {
    .pic {
      z-index: 10000;
    }
  }
}

//iframe
.component {
  &.iframe {
    display: flex;
    //左寄せ
    &.right {
      justify-content: flex-end;
    }
    //中央寄せ
    &.center {
      justify-content: center;
    }
    //ワイド
    &.if_16-9 {
      aspect-ratio: 16/9;
    }
    //スタンダート
    &.if_4-3 {
      aspect-ratio: 4/3;
    }
    //スクエア
    &.if_1-1 {
      aspect-ratio: 1/1;
    }
    //縦撮り
    &.if_9-16 {
      aspect-ratio: 9/16;
    }
    //シネマスコープ
    &.if_235-1 {
      aspect-ratio: 2.35/1;
    }
    //カスタムclass
    &.if_custom {
      width: 100%;
      height: 0;
      position: relative;
      $var: 300;
      @while $var <= 3000 {
        &.pc-h#{$var} {
          @include breakpoint-pc {
            height: #{$var}px;
          }
        }
        &.sp-h#{$var} {
          @include breakpoint-sp {
            height: #{$var}px;
          }
        }
        $var: $var + 10;
      }
      iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}

//スムーススクロール
html {
  scroll-behavior: smooth !important;
}

//フォームパーツ
.component {
  &.form {
    .form-title {
      color: var(--fo-text-main-color);
    }
    //フォームの必須
    .form-label {
      &.require {
        &::after {
          padding: 2px 7px 4px !important;
          margin-left: 20px;
        }
      }
    }
    input[type=checkbox],
    input[type=radio] {
      min-height: auto;
    }
    .form-submit {
      .popup-link {
        font-weight: $font_weight;
      }
    }
    &.vertical {
      .form-label {
        &::after {
          position: relative;
          top: -2px;
        }
      }
    }
    &.horizontal {
      .form-label {
        padding-right: 10px;
        &::after {
          @include breakpoint-pc {
            top: 8px !important;
          }
          @include breakpoint-sp {
            top: -2px !important;
          }
        }
      }
    }
  }
}

//ズレ対策
.component {
  &.form {
    label.agreement {
      display: flex;
      align-items: center;
      .form-label {
        padding-top: 6px;
        &::after {
          top: -1.5px;
        }
      }
    }
  }
}

//角丸専用
.radius_all {
  border-radius: $border_radius_common;
}

//2カラム時、PCとSPでカラムの位置を入れ替える
.reverse {
  @include breakpoint-sp {
    display: flex !important;
    flex-wrap: wrap-reverse;
  }
}

//全てbr非表示
.allbrClear {
  br {
    display: none;
  }
}

//PCの時はbr非表示
.pcbrClear {
  br {
    display: none;
    @include breakpoint-sp {
      display: block;
    }
  }
}

//TABの時はbr非表示
.tbbrClear {
  br {
    @include breakpoint-tb {
      display: none;
    }
  }
}

//width1024の時はbr非表示
.probrClear {
  br {
    @include breakpoint-pro {
      display: none;
    }
  }
}

//スマホの時はbr非表示
.spbrClear {
  br {
    @include breakpoint-sp {
      display: none;
    }
  }
}


/*------------- main（コンテンツ） END -------------*/

/* ----------------------------------
  blog(ブログテンプレート)
----------------------------------*/
/*--- ブログページ一覧 ---*/
.component {
  &.blog_articles {
    hr {
      border: 0;
      border-bottom: 1px solid $blog_border_color;
      margin-bottom: 30px;
      @include breakpoint-sp {
        margin-bottom: 10px;
      }
    }
    article {
      .infomation {
        padding: 0 0 0 30px;
        //タイトル
        & > h2 {
          line-height: 1.5;
          padding: 0;
          a {
            display: inline-block;
            font-family: var(--fo-heading-font-family);
            font-size: $list_heading_pc_fontsize;
            font-weight: bold;
            letter-spacing: var(--fo-heading-letter-spacing);
            line-height: var(--fo-heading-line-height);
            color: var(--fo-heading-main-color);
            @include breakpoint-sp {
              font-size: $list_heading_sp_fontsize;
            }
            &:hover {
              opacity: $hover_opacity;
            }
          }
        }
        p {
          font-size: var(--fo-text-font-size-pc);
          color: var(--fo-text-main-color);
          line-height: var(--fo-text-line-height);
          letter-spacing: var(--fo-text-letter-spacing);
          padding: 0;
          @include breakpoint-sp {
            font-size: var(--fo-text-font-size-sp);
          }
        }
        //記事を見るの位置
        a {
          &.view-article {
            display: inline-block;
            width: 100%;
            font-size: var(--fo-text-font-size-pc);
            color: var(--fo-text-link-color,var(--fo-text-main-color));
            line-height: var(--fo-text-line-height);
            letter-spacing: var(--fo-text-letter-spacing);
            text-align: right;
            text-decoration: underline;
            @include breakpoint-sp {
              font-size: var(--fo-text-font-size-sp);
            }
            &:hover {
              opacity: $hover_opacity;
              text-decoration: none;
            }
          }
        }
        //日付の背景色
        span {
          &.published_at {
            background: none;
            font-size: 14px;
            color: var(--fo-text-main-color);
            text-align: left;
            padding: .5rem 0;
          }
        }
        //タグスタイル
        .tags {
          padding-left: 0;
          a {
            &.tag {
              @include tag_custom;
              i {
                margin-right: 0;
                &::before {
                  @include tag_icon_custom;
                }
              }
            }
          }
        }
      }
      .catch,
      .infomation {
        @include breakpoint-sp {
          width: 100%;
          float: none;
          padding: 1em 0 0;
        }
      }
      .catch {
        a {
          img {
            border-radius: $blog_border_radius;
          }
        }
      }
    }
  }
}

/*--- ブログ記事詳細 ---*/
.theme-fo-base {
  .clearfix {
    .contents {
      &.blog-contents {
        padding: 0;
        section {
          .inner {
            @include breakpoint-sp {
              padding: 0 20px 10px;
            }
            .row {
              .col {
                .component {
                  &.blog_article {
                    margin-top: 0;
                    .article-component {
                      //目次内
                      &.contents-table {
                        border-color: $border_color;
                        @include breakpoint-sp {
                          padding: 10px 20px;
                        }
                        ol {
                          @include breakpoint-sp {
                            margin-left: 0;
                          }
                          ol {
                            @include breakpoint-sp {
                              margin-left: 1em;
                            }
                          }
                        }
                      }
                    }
                    //日付・タグ
                    .article-meta-info {
                      opacity: unset;
                      span {
                        &.post-date {
                          time {
                            font-family: var(--fo-text-font-family);
                          }
                        }
                        &.article-category {
                          i {
                            display: none;
                          }
                          a {
                            color: var(--fo-main-color);
                            &::before {
                              @include category_icon_custom;
                            }
                            &:hover {
                              opacity: $hover_opacity;
                            }
                          }
                        }
                        &.article-tags {
                          i {
                            display: none;
                          }
                          a {
                            @include tag_custom;
                            display: inline-block;
                            margin-top: 10px;
                            &::before {
                              @include tag_icon_custom;
                            }
                            &::after {
                              content: none;
                            }
                          }
                        }
                      }
                    }
                    //詳細ページ設定
                    .article-eyecatch {
                      @include breakpoint-pc {
                        margin-bottom: 30px;
                      }
                      @include breakpoint-sp {
                        margin: 30px 0;
                      }
                    }
                    .article-post {
                      color: var(--fo-text-main-color);
                      padding: 0;
                      a {
                        color: var(--fo-text-main-color);
                        &:hover {
                          opacity: $hover_opacity;
                        }
                      }
                      //ブログ詳細の本文
                      .component {
                        &.richtext {
                          font-size: var(--fo-text-font-size-pc);
                          letter-spacing: var(--fo-text-letter-spacing);
                          line-height: var(--fo-text-line-height);
                          color: var(--fo-text-main-color);
                          @include breakpoint-sp {
                            font-size: var(--fo-text-font-size-sp);
                          }
                          p {
                            font-size: inherit;
                            letter-spacing: inherit;
                            line-height: inherit;
                            color: inherit;
                            a {
                              color: var(--fo-text-link-color);
                              &:hover {
                                opacity: var(--fo-text-link-hover-opacity,1);
                                text-decoration: var(--fo-text-link-hover-text-decoration,none);
                                font-weight: var(--fo-text-link-hover-font-weight,inherit);
                                color: var(--fo-text-link-color);
                                filter: unquote('invert(var(--fo-text-link-hover-invert,0))');
                              }
                              &.show-area {
                                &:hover {
                                  opacity: $hover_opacity;
                                  text-decoration: none;
                                  font-weight: inherit;
                                  color: var(--fo-text-link-color);
                                  filter: none;
                                }
                              }
                            }
                          }
                          //ブログ詳細の表
                          table {
                            .table-content {
                              a {
                                color: var(--fo-text-link-color);
                                &:hover {
                                  opacity: var(--fo-text-link-hover-opacity,1);
                                  text-decoration: var(--fo-text-link-hover-text-decoration,none);
                                  font-weight: var(--fo-text-link-hover-font-weight,inherit);
                                  color: var(--fo-text-link-color);
                                  filter: unquote('invert(var(--fo-text-link-hover-invert,0))');
                                }
                              }
                            }
                          }
                          .border {
                            margin-top: 0;
                            hr {
                              &.type01 {
                                background-image: -webkit-linear-gradient(left, transparent, $border_color, transparent);
                              }
                              &:is(.type02,.type03,.type04) {
                                border-color: $border_color;
                              }
                            }
                          }
                          //ブログ詳細の引用
                          blockquote {
                            font-size: inherit;
                            color: inherit;
                            padding: 40px 30px;
                            @include breakpoint-sp {
                              padding: 20px;
                            }
                            &::before {
                              font-size: 500%;
                            }
                          }
                        }
                      }
                    }
                    section {
                      //著者
                      &.author {
                        padding: 0;
                        border-color: $border_color;
                        @include breakpoint-sp {
                          display: flex;
                          padding: 15px;
                        }
                        .author-image {
                          margin-right: 15px;
                          @include breakpoint-sp {
                            width: 50%;
                          }
                          img {
                            border-radius: $blog_border_radius;
                          }
                        }
                        .author-info {
                          .author-name {
                            font-family: var(--fo-heading-font-family);
                            font-size: 18px;
                            color: var(--fo-heading-main-color);
                            line-height: var(--fo-heading-line-height);
                            letter-spacing: var(--fo-heading-letter-spacing);
                            @include breakpoint-sp {
                              font-size: 16px;
                            }
                          }
                          .author-description {
                            white-space: pre-wrap;
                            font-size: var(--fo-text-font-size-pc);
                            letter-spacing: var(--fo-text-letter-spacing);
                            line-height: var(--fo-text-line-height);
                            color: var(--fo-text-main-color);
                            @include breakpoint-sp {
                              font-size: var(--fo-text-font-size-sp);
                            }
                          }
                        }
                      }
                    }
                  }
                }
                section {
                  //ページネーション
                  &.prev-next-link {
                    display: flex;
                    gap: calc(40px * var(--fo-spacing-coef));
                    margin-top: calc(40px * var(--fo-spacing-coef));
                    @include breakpoint-sp {
                      flex-direction: column;
                      gap: 0;
                      margin: calc((40px * var(--fo-spacing-coef)) * .75) 0 20px;
                      padding: 0;
                    }
                    a {
                      color: var(--fo-text-main-color);
                      border-color: $border_color;
                      &:hover {
                        background: transparent;
                        opacity: $hover_opacity;
                      }
                      &::before,
                      &::after {
                        color: var(--fo-main-color);
                      }
                      //前の記事 次の記事
                      h3 {
                        &.prev-next-label {
                          font-family: var(--fo-heading-font-family);
                          font-size: 18px;
                          color: var(--fo-heading-main-color);
                          line-height: var(--fo-heading-line-height);
                          letter-spacing: var(--fo-heading-letter-spacing);
                          @include breakpoint-sp {
                            font-size: 16px;
                          }
                        }
                      }
                      div.thumb-wrap {
                        display: flex;
                        img {
                          float: none;
                          margin-right: 15px;
                        }
                        p {
                          font-size: 14px;
                          letter-spacing: var(--fo-text-letter-spacing);
                          line-height: var(--fo-text-line-height);
                          color: var(--fo-text-main-color);
                          display: -webkit-box;
                          -webkit-line-clamp: 2;
                          -webkit-box-orient: vertical;
                          text-overflow: ellipsis;
                          max-height: calc((14px * var(--fo-text-line-height)) * 2);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/*------------- blog(ブログテンプレート) END -------------*/

/* ----------------------------------
  カテゴリ・タグ自動生成ページ
----------------------------------*/
.theme-fo-base {
  &.clearfix {
    .wrapper {
      &.clearfix {
        .contents {
          :is(
            .category-preview,
            .tag-preview
          ) {
            box-sizing: border-box;
            margin: auto;
            article {
              display: table;
              border-bottom: 1px solid $blog_border_color;
              @include breakpoint-sp {
                display: block;
                width: 100%;
                margin: 20px 0;
                padding: 0;
              }
              .article-thumbnail {
                display: table-cell;
                width: 30%;
                padding-bottom: 10px;
                @include breakpoint-sp {
                  display: block;
                  width: 100%;
                }
                a {
                  display: block;
                  @include breakpoint-sp {
                    margin-bottom: 10px;
                  }
                  img {
                    width: 100%;
                    border-radius: 0;
                  }
                }
              }
              .article-cont {
                display: table-cell;
                width: 70%;
                height: auto;
                vertical-align: top;
                padding: 10px 30px;
                @include breakpoint-sp {
                  display: block;
                  width: 100%;
                  margin-bottom: 20px;
                  padding: 0;
                }
                .article-title {
                  overflow: auto;
                  max-height: none;
                  a {
                    font-family: var(--fo-heading-font-family);
                    font-size: $list_heading_pc_fontsize;
                    font-weight: inherit;
                    color: var(--fo-heading-main-color);
                    line-height: var(--fo-heading-line-height);
                    letter-spacing: var(--fo-heading-letter-spacing);
                    @include breakpoint-sp {
                      font-size: $list_heading_sp_fontsize;
                    }
                    &:hover {
                      opacity: $hover_opacity;
                    }
                  }
                }
                .article-meta-info {
                  position: relative;
                  .article-category {
                    &::before {
                      content: none;
                    }
                    a {
                      color: var(--fo-text-link-color,var(--fo-text-main-color));
                      &::before {
                        @include category_icon_custom;
                      }
                      &:hover {
                        opacity: $hover_opacity;
                      }
                    }
                  }
                  //タグ自動生成のタグスタイル
                  .tag-lists {
                    @include breakpoint-sp {
                      display: block;
                    }
                    .article-tags {
                      @include tag_custom;
                      &::before {
                        @include tag_icon_custom;
                      }
                    }
                  }
                  //カレンダーアイコン削除
                  span {
                    &.post-date {
                      color: var(--fo-text-main-color);
                      &::before {
                        content: none;
                      }
                      time {
                        font-family: var(--fo-text-font-family);
                      }
                    }
                    &.article-author {
                      color: var(--fo-text-main-color);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
:is(
  .tag-preview article .article-cont .article-meta-info .tag-lists,
  .category-preview article .article-cont .article-meta-info .tag-lists
) {
  max-height: 100% !important;
}
/*------------- カテゴリ・タグ自動生成ページ END -------------*/

/*----------------------------------
    side bar（サイドバー）
----------------------------------*/
//834幅から１カラム設定
.theme-fo-base {
  .wrapper {
    &:is(.side-left,.side-right) {
      max-width: $max_width;
      @include breakpoint-pro_s {
        display: block; //崩れ対策
      }
      .contents {
        background: transparent;
        max-width: unset;
        border-left: 0;
        border-right: 0;
        padding: 0;
        @include breakpoint-pro_s {
          display: block; //崩れ対策
        }
        section {
          .inner {
            padding: 20px;
          }
        }
      }
      .side {
        @include breakpoint-pro_s {
          display: block;
        }
        &:is(.left,.right) {
          padding: 0;
          @include breakpoint-pro_s {
            width: 100%;
          }
          @include breakpoint-tb {
            width: 100%;
            margin: auto;
          }
          .inner {
            padding: 20px;
            .component:not(:root:root) {
              margin: 20px 0;
              &:first-child {
                margin-top: 0;
              }
              &.heading {
                h1 {
                  @include breakpoint-pc {
                    font-size: $blog_title_h1_fontsize_pc;
                  }
                  @include breakpoint-sp {
                    font-size: $blog_title_h1_fontsize_sp;
                  }
                }
                h2 {
                  @include breakpoint-pc {
                    font-size: $blog_title_h2_fontsize_pc - 2px;
                  }
                  @include breakpoint-sp {
                    font-size: $blog_title_h2_fontsize_sp;
                  }
                }
              }
              &.blog-ranking {
                &[data-designpart-id="642f669ce4dc09621d945ab4"] {
                  div {
                    &:nth-child(1 of .entry-list-unit) {
                      @include breakpoint-sp {
                        padding-top: 0;
                      }
                    }
                  }
                }
              }
              &.button {
                .button-cont {
                  a {
                    &:is(.size-s,.size-m,.size-l) {
                      @include breakpoint-pc {
                        width: 100%;
                        min-width: 100%;
                      }
                    }
                    &.size-s {
                      @include breakpoint-pro_s {
                        width: initial;
                        min-width: 200px;
                      }
                    }
                    &.size-m {
                      @include breakpoint-pro_s {
                        width: initial;
                        min-width: 280px;
                      }
                    }
                    &.size-l {
                      @include breakpoint-pc {
                        font-size: 16px;
                      }
                      @include breakpoint-pro_s {
                        font-size: 22px;
                        width: initial;
                        min-width: 350px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    &.side-left {
      @include breakpoint-pro_s {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
      }
    }
    &.side-both {
      @include breakpoint-pro_s {
        display: flex;
        flex-wrap: wrap;
      }
      .contents {
        @include breakpoint-pc {
          width: 100%;
          max-width: 560px;
        }
        @include breakpoint-pro_s {
          display: block;
          max-width: none;
          order: 1;
          padding: 10px 0;
        }
        @include breakpoint-sp {
          padding: 10px 0;
        }
        section {
          .inner {
            padding: 20px;
            .row {
              .col {
                @include breakpoint-pro_s {
                  padding: 0;
                }
              }
            }
          }
        }
      }
      .side {
        &:is(.left,.right) {
          @include breakpoint-pro_s {
            display: block;
            width: 100%;
          }
          @include breakpoint-msp {
            padding: 0;
          }
          @include breakpoint-tb {
            width: 100%;
            margin: auto;
          }
          .inner {
            @include breakpoint-msp {
              padding: 20px;
            }
          }
        }
        &.left {
          @include breakpoint-pro_s {
            order: 2;
          }
        }
        &.right {
          @include breakpoint-pro_s {
            order: 3;
          }
        }
      }
    }
  }
}

/*--- カテゴリ --- */
.component {
  &.category {
    &.category_custom {
      margin-bottom: 20px !important;
      a {
        color: var(--fo-text-main-color);
        &:hover {
          opacity: $hover_opacity;
        }
      }
    }
  }
}

/*--- ランキング ---*/
.component {
  &.blog-ranking {
    &.ranking_custom {
      @include breakpoint-sp {
        width: 100%;
        margin: auto;
      }
      .entry-list-unit {
        border-color: $blog_border_color;
        @include breakpoint-sp {
          padding: 20px 0 10px;
        }
        .img {
          padding: 0 !important;
          @include breakpoint-sp {
            padding-right: 0 !important;
          }
          img {
            border-radius: 0;
          }
        }
        .cont {
          border-left: 0;
          @include breakpoint-sp {
            padding: 0 !important;
          }
          h3 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--fo-text-main-color);
            margin: 0 0 10px;
            @include breakpoint-sp {
              margin-top: 1em;
              padding: 0;
            }
            a {
              padding: 0;
              margin: 0;
            }
          }
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0;
          }
        }
        .article-rank {
          background: #fff;
          color: var(--fo-main-color);
          border: 1px solid var(--fo-main-color);
          z-index: 2;
          @include breakpoint-msp {
            min-width: 45px;
            height: 45px;
            font-size: 20px;
            line-height: 45px;
          }
          &:is(.rank-1,.rank-2,.rank-3) {
            background: var(--fo-main-color) !important;
            color: #fff;
            border: 1px solid var(--fo-main-color);
          }
        }
      }
    }
  }
}

/*--- カテゴリーアイコン ---*/
.fa-folder-open-o::before {
  font-family: $font_family_awsm;
}

/*------------- side bar（サイドバー）END -------------*/

/*----------------------------------
    foot（フッター）
----------------------------------*/
.theme-fo-base {
  .foot {
    &.ft_custom {
      background: $footer_bg_color;
      background-repeat: no-repeat;
      color: var(--fo-text-main-color);
      padding: 0;
      .foot-cont {
        padding: 60px 20px 70px;
        @include breakpoint-msp {
          padding: 40px 20px;
        }
        .row {
          //ロゴの部分
          &.ft_logo_row {
            & + .ft_site_map_row {
              @include breakpoint-pc {
                margin-top: 30px;
              }
              @include breakpoint-msp {
                margin-top: 20px;
              }
            }
          }
          &.ft_site_map_row {
            @include breakpoint-tb {
              display: flex;
              gap: 10px;
            }
            & + .ft_bottom_row {
              margin-top: 35px;
              @include breakpoint-ssp {
                margin-top: 15px;
              }
            }
            //各colの幅やスタイル部分
            .col {
              vertical-align: top;
              //リンクリストの部分
              &.site_map_col {
                & + .site_map_col {
                  @include breakpoint-ssp {
                    padding-top: 10px;
                  }
                }
              }
            }
          }
          //ボタン固定
          &.page_top_row {
            @include page_top;
          }
          .col {
            @include breakpoint-sp {
              margin: 0;
              padding: 0;
            }
            .component {
              //イメージ
              &.image {
                &.ft_logo_img {
                  img {
                    max-width: 244px !important;
                    width: 100% !important;
                  }
                }
              }
              //リスト
              &.list {
                &.site_map_list {
                  margin: 0;
                  ul {
                    font-size: inherit;
                    li {
                      list-style-type: none;
                      font-size: inherit;
                      color: inherit;
                      &:not(:first-child) {
                        margin: 8px 0 0;
                      }
                      a {
                        display: inline-block;
                        color: inherit;
                        padding: 0;
                        &:hover {
                          background: transparent;
                          opacity: $hover_opacity;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      //コピーライト部分
      .foot-copyright {
        @include copyright_custom;
      }
    }
  }
}

/*------------- foot（フッター END）-------------*/

/*----------------------------------
    LP（フルカスタム用）
----------------------------------*/
/*
LP variables（変数）
LP button（ボタン）
LP header (見出し）
LP richtext（テキスト）
LP form（フォーム）
LP メインビジュアル
LP contents(コンテンツ)
LP body（本体）
*/

/* --------------------------------
    LP variables（変数）
----------------------------------- */

//フォント
$lp_font_family: "Noto Sans JP";

//hover時の不透明度
$lp_hover_opacity: .4;

//カラー
$lp_main_color: black; //メインカラー
$lp_sub_color: #eee; //サブカラー
$lp_accent_color: #df8c3b; //アクセントカラー
$lp_text_color: #333; //テキストカラー
$lp_a_text_color: #003b82; //テキストリンクのカラ
$lp_form_hissu_color: #c70909;//赤 フォームの「必須マーク」カラー

//ヘッダー
$lp_header_logo: 200px; //PCでの幅サイズ（固定）
$lp_header_sp_logo: 30px; //SPでの高さサイズ（maxサイズ）
$lp_header_height: 80px; //PC時のヘッダーの高さ（固定時に使用）
$lp_header_sp_height: 52px; //SP時のヘッダーの高さ（固定時に使用）

//セクション余白
$lp_section_padding: 120px; //PC時のパディング
$lp_section_sp_padding: 60; //SP時のパディング

//テキスト
$lp_text_pc_fontsize: 16px; //ベースとなるフォントサイズ（PC）
$lp_text_sp_fontsize: 16px; //ベースとなるフォントサイズ（SP）
$lp_text_line_height: 1.5; //ベースとなるline-height（行間）
$lp_text_letter_spacing: .04em;

//見出し
$lp_hd_line_height: 1.5; //見出し用line-height（行間）
$lp_hd_letter_spacing:.04em;
$lp_hd_font_weight: bold; //見出し用
$lp_hd_font_strong: normal; //見出し用（編集画面の「.strong」に対応）
$lp_title_font_family: $lp_font_family; //サイト内見出しのフォントファミリー
////pc
$lp_hd_pc_h1_fontsize: 46px; //サイト内（ブログコンテンツを除く）の見出しh1のフォントサイズ（PC）
$lp_hd_pc_h2_fontsize: 38px; //サイト内（ブログコンテンツを除く）の見出しh2のフォントサイズ（PC）
$lp_hd_pc_h3_fontsize: 30px; //サイト内（ブログコンテンツを除く）の見出しh3のフォントサイズ（PC）
$lp_hd_pc_h4_fontsize: 20px; //サイト内（ブログコンテンツを除く）の見出しh4のフォントサイズ（PC）
$lp_hd_pc_h5_fontsize: 18px; //サイト内（ブログコンテンツを除く）の見出しh5のフォントサイズ（PC）
////sp
$lp_hd_sp_h1_fontsize: 26px; //サイト内（ブログコンテンツを除く）の見出しh1のフォントサイズ（SP）
$lp_hd_sp_h2_fontsize: 24px; //サイト内（ブログコンテンツを除く）の見出しh2のフォントサイズ（SP）
$lp_hd_sp_h3_fontsize: 22px; //サイト内（ブログコンテンツを除く）の見出しh3のフォントサイズ（SP）
$lp_hd_sp_h4_fontsize: 18px; //サイト内（ブログコンテンツを除く）の見出しh4のフォントサイズ（SP）
$lp_hd_sp_h5_fontsize: 16px; //サイト内（ブログコンテンツを除く）の見出しh5のフォントサイズ（SP）

//ボックスシャドウ
$lp_box_shadow_common: 2px 2px 10px 0 rgba(#000,.08);
$lp_box_shadow_nav_common: 0 3px 6px  rgba(#000,.08);

//コピーライト
$lp_copyright_bg_color: #eae8e8; //コピーライトの背景色
$lp_copyright_text_color: $lp_text_color; //コピーライトのテキストカラー
$lp_copyright_text_fontsize: 12px; //コピーライトのフォントサイズ

//角丸
$lp_border_radius_common: 10px;
$lp_border_radius_btn_common: 50vh;

//その他
$lp_max_width: 1100px; //検索結果コンテンツ幅調整用
$lp_border_color: #eee;
$lp_inPageLink_pc: 80px; //ページ内リンクPC（PC時のヘッダーの高さを指定）
$lp_inPageLink_sp: 52px; //ページ内リンクSP（SP時のヘッダーの高さを指定）

/*----------------------------------
    LP button（ボタン）
----------------------------------*/
.component {
  &.button {
    &:is(
      .lp_btn_custom01,
      .lp_btn_custom02
      ) {
      .button-cont {
        a {
          box-sizing: border-box;
          letter-spacing: $lp_text_letter_spacing;
          line-height: 1.3;
          text-align: left;
          text-decoration: none;
          border-radius: 0;
          //サイズ小のとき
          &.size-s {
            //フォントサイズやボタンの大きさを設定
            min-width: 220px;
            font-size: 14px;
            padding: 9px 20px;
            @include breakpoint-pro {
              min-width: 200px;
            }
            @include breakpoint-sp {
              min-width: 80%;
              width: auto;
            }
            @include breakpoint-tb {
              min-width: 200px;
            }
          }
          //サイズ中のとき
          &.size-m {
            min-width: 280px;
            font-size: 16px;
            padding: 15.5px 20px;
            @include breakpoint-sp {
              width: auto;
              min-width: 90%;
              padding: 15px;
            }
            @include breakpoint-tb {
              min-width: 280px;
            }
          }
          //サイズ大のとき
          &.size-l {
            display: inline-block;
            min-width: 350px;
            font-size: 20px;
            margin: auto;
            padding: 20px;
            @include breakpoint-sp {
              width: 100%;
              min-width: auto;
            }
            @include breakpoint-tb {
              width: auto;
              min-width: 350px;
            }
          }
          &:hover {
            opacity: 1;
          }
        }
      }
    }
    //ボタン01
    &.lp_btn_custom01 {
      .button-cont {
        a {
          &:is(.size-s,.size-m,.size-l) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: $lp_border_radius_btn_common;
            border: 2px solid rgba(0,0,0,0);
            &::before {
              content: "\f15c";
              font-family: $font_family_awsm6;
              font-weight: 400;
              color: inherit;
              margin-right: 10px;
              position: relative;
              top: .5px;
            }
          }
          &:is(.blue,.red,.orange,.black,.white) {
            background: $lp_main_color;
            color: #fff;
            border-color: $lp_main_color;
          }
          &:hover {
            opacity: $lp_hover_opacity;
          }
        }
      }
    }
    //ボタン02
    &.lp_btn_custom02 {
      .button-cont {
        a {
          &:is(.size-s,.size-m,.size-l) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: $lp_border_radius_btn_common;
            border: 2px solid rgba(0,0,0,0);
            &::before {
              content: "\f0e0";
              font-family: $font_family_awsm6;
              font-weight: 400;
              color: inherit;
              margin-right: 10px;
              position: relative;
              top: .5px;
            }
          }
          &:is(.blue,.red,.orange,.black,.white) {
            background: $lp_sub_color;
            color: #000;
            border-color: $lp_sub_color;
          }
          &:hover {
            opacity: $lp_hover_opacity;
          }
        }
      }
    }
    //telボタン
    &.lp_btn_custom_tel {
      .button-cont {
        a {
          &:where(.size-s,.size-m,.size-l) {
            background-color: transparent;
            font-family: $lp_font_family;
            letter-spacing: $lp_text_letter_spacing;
            color: $lp_text_color;
            text-decoration: none;
            position: relative;
            border-radius: 0;
            margin: 0;
            padding: 0;
            //背景色とかborder色など外観を設定
            &::before {
              content: "\f095";
              font-family: $font_family_awsm6;
              font-size: 100%;
              font-weight: 900;
              position: relative;
              margin-right: .3rem;
            }
            &:visited {
              color: $lp_text_color;
              text-decoration: none;
            }
            &:hover {
              opacity: $lp_hover_opacity;
            }
            &.size-s {
              font-size: 18px;
            }
            &.size-m {
              font-size: 20px;
            }
            &.size-l {
              display: inline-block;
              font-size: 32px;
            }
          }
        }
      }
    }
  }
}

/*----------------------------------
    LP heading（見出し）
----------------------------------*/
@mixin lp-heading {
  .component {
    &.heading {
      &.lp_inPageLink {
        @include breakpoint-pc {
          margin-top: calc(-#{$lp_inPageLink_pc} - 10px);
          padding-top: calc(#{$lp_inPageLink_pc} + 10px);
        }
        @include breakpoint-sp {
          margin-top: calc(-#{$lp_inPageLink_sp} - 10px);
          padding-top: calc(#{$lp_inPageLink_sp} + 10px);
        }
      }
      &.lp_hd_custom01 {
        :is(h1,h2,h3,h4,h5) {
          font-family: $lp_font_family;
          font-weight: $lp_hd_font_weight;
          line-height: $lp_hd_line_height;
          letter-spacing: $lp_hd_letter_spacing;
          .strong {
            font-weight: $lp_hd_font_strong;
          }
          @include breakpoint-sp {
            overflow-wrap: break-word;
          }
        }
        h1 {
          font-size: $lp_hd_pc_h1_fontsize;
          @include breakpoint-sp {
            font-size: $lp_hd_sp_h1_fontsize;
          }
        }
        h2 {
          font-size: $lp_hd_pc_h2_fontsize;
          @include breakpoint-sp {
            font-size: $lp_hd_sp_h2_fontsize;
          }
        }
        h3 {
          font-size: $lp_hd_pc_h3_fontsize;
          @include breakpoint-sp {
            font-size: $lp_hd_sp_h3_fontsize;
          }
        }
        h4 {
          font-size: $lp_hd_pc_h4_fontsize;
          @include breakpoint-sp {
            font-size: $lp_hd_sp_h4_fontsize;
          }
        }
        h5 {
          font-size: $lp_hd_pc_h5_fontsize;
          @include breakpoint-sp {
            font-size: $lp_hd_sp_h5_fontsize;
          }
        }
      }
      /*--- カスタム見出し ---*/
      // カスタム見出し01
      &.lp_hd_custom01 {
        :is(h1,h2) {
          margin-bottom: 60px;
        }
        :is(h3,h4,h5) {
          margin-bottom: 30px;
        }
      }
    }
  }
}

/*----------------------------------
    LP richtext（テキスト）
----------------------------------*/
@mixin lp-richtext($lp-marginTop:10px) {
  .component {
    &.richtext {
      font-family: $lp_font_family;
      font-size: $lp_text_pc_fontsize;
      color: $lp_text_color;
      line-height: $lp_text_line_height;
      letter-spacing: $lp_text_letter_spacing;
      @include breakpoint-sp {
        font-size: $lp_text_sp_fontsize;
      }
      :link {
        text-decoration: none;
      }
      :visited {
        text-decoration: none;
      }
      a {
        color: $lp_a_text_color;
        &:hover {
          opacity: $lp_hover_opacity;
        }
      }
      p {
        font-size: inherit;
        line-height: inherit;
        margin: 0;
        & + :is(p,ul,ol,.normal-table,.table-with-row-header,.table-with-two-headers,.component.button) {
          margin-top: $lp-marginTop;
        }
      }
      //リスト
      li {
        font-size: inherit;
        a {
          font-size: inherit;
        }
      }
      //テーブル
      table {
        :is(thead,tbody,tr,th,td) {
          border-color: #eee;
          tr {
            :is(th,td) {
              background-clip: padding-box; //FF,edgeでボーダー消える現象回避;
              position: static; //FF,edgeでボーダー消える現象回避;
              p {
                font-size: inherit;
                & + :is(p,ul,ol,.component.button) {
                  margin-top: $lp-marginTop !important;
                }
              }
              :is(ul,ol) {
                margin-left: 25px;
                & + :is(p,ul,ol,.component.button) {
                  margin-top: $lp-marginTop !important;
                }
              }
              .component.button {
                & + :is(p,ul,ol,.component.button) {
                  margin-top: $lp-marginTop !important;
                }
              }
            }
          }
        }
      }
      :is(ul,ol) {
        margin: 0 0 0 25px;
        & + :is(p,ul,ol,.normal-table,.table-with-row-header,.table-with-two-headers,.component.button) {
          margin-top: $lp-marginTop;
        }
      }
      :is(table,.normal-table,.table-with-row-header,.table-with-two-headers) {
        & + :is(p,ul,ol,.normal-table,.table-with-row-header,.table-with-two-headers,.component.button) {
          margin-top: $lp-marginTop;
        }
      }
      .component.button {
        margin: 0;
        &.button {
          & + :is(p,ul,ol,.normal-table,.table-with-row-header,.table-with-two-headers,.component.button) {
            margin-top: $lp-marginTop;
          }
          .button-cont {
            a {
              &.blue {
                background: #254a73;
                color: #fff !important;
                text-decoration: none;
                &:hover {
                  opacity: .4;
                }
              }
            }
          }
        }
      }
    }
  }
}
/*----------------------------------
    LP form（フォーム）
----------------------------------*/
@mixin lp-form($font-weight:bold) {
  .component {
    &.form {
      //カスタムフォーム
      &.lp_form_custom {
        font-family: $lp_font_family;
        font-size: $lp_text_pc_fontsize;
        color: $lp_text_color;
        @include breakpoint-sp {
          font-size: $lp_text_sp_fontsize;
        }
        .form-title {
          font-size: inherit;
          color: inherit;
          &:empty {
            display: none;
          }
        }
        //エラー
        .show-notice {
          font-size: inherit;
          border-radius: 0;
          font-size: $lp_text_pc_fontsize;
          @include breakpoint-sp {
            font-size: $lp_text_sp_fontsize;
          }
          &:empty {
            display: none;
          }
          span {
            padding: 5px;
            & + span {
              padding: 0 5px 5px;
            }
          }
        }
        .form-label {
          &::after {
            line-height: 1.5;
            padding: 3px 7px !important;
          }
        }
        .contact_form {
          font-size: inherit;
          color: inherit;
          input {
            accent-color: $lp_main_color;
          }
          //inputフルカスタム(必要な時に使用)
          input[type="text"],
          input[type="email"],
          input[type="password"],
          input[type="date"],
          input[type="search"],
          input[type="url"],
          select,
          textarea {
            background: #fff;
            height: auto;
            font-family: inherit !important;
            font-size: inherit;
            line-height: $lp_text_line_height;
            letter-spacing: $lp_text_letter_spacing;
            color: inherit;
            border-radius: 0;
            border: solid 1px rgba(0,0,0,.20);
            padding: .6rem .75rem;
            &::placeholder {
              font-family: inherit;
              font-size: inherit;
              color: rgba(0,0,0,.30);
            }
            &:hover {}
            &:focus {
              background-color: #fff;
              color: #555;
              border-color: #5a5a5a;
            }
          }
          input[type="text"].form-error,
          input[type="email"].form-error,
          input[type="password"].form-error,
          input[type="date"].form-error,
          input[type="search"].form-error,
          input[type="url"].form-error,
          select.form-error,
          textarea.form-error {
            background: #fdf5f2;
            border: 1px solid $lp_form_hissu_color !important;
          }
          .group {
            font-size: inherit;
            color: inherit;
            margin: 20px 0;
            .form-cont {
              font-size: inherit;
              color: inherit;
            }
          }
          .form-label {
            font-size: inherit;
            @include breakpoint-sp {
              display: inline-block !important;
            }
          }
          .agree-label {
            line-height: 1.5;
          }
          .form-cont {
            font-size: inherit;
            p {
              font-size: inherit;
              margin-top: .25rem;
            }
            :is(.checkbox,.radio) {
              label {
                display: flex;
                align-items: center;
              }
            }
          }
          //規約テキスト
          .service_term {
            background: #fff;
            overflow: auto;
            font-size: inherit;
            padding: 20px;
          }
          //規約リンク
          .service_term_link {
            font-size: inherit;
            margin-top: 20px;
            margin-bottom: 5px;
            a {
              color: $lp_a_text_color;
              letter-spacing: 0;
              text-decoration: none;
              &:hover {
                opacity: .4;
              }
            }
            & + label.agreement {
              padding: 5px 0;
              .form-label {
                display: flex !important;
                align-items: center;
                padding: 0;
                &::after {
                  position: initial;
                  padding: 3px 7px !important;
                }
              }
            }
          }
        }
      }
      //送信ボタンスタイル
      &.lp_form_btn_custom01 {
        .form-submit {
          margin-top: 20px;
          .popup-link {
            min-width: 200px;
            background: $lp_main_color;
            font-family: $lp_font_family;
            font-size: 18px;
            font-weight: $font-weight;
            border: 1px solid $lp_main_color;
            border-radius: $lp_border_radius_btn_common;
            padding: 15px 60px;
            @include breakpoint-tb {
              min-width: 200px;
              width: auto;
            }
            @include breakpoint-sp {
              padding: 10px 60px;
            }
            &:hover {
              background: #fff;
              color: $lp_main_color;
            }
          }
        }
      }
      //フォームの必須
      .form-label.require {
        &:after {
          background: $lp_form_hissu_color;
          margin-left: 20px;
        }
      }
      input[type=checkbox],
      input[type=radio] {
        min-height: auto;
      }
      &.vertical {
        .form-label {
          &:after {
            position: relative;
            top: -2px;
          }
        }
      }
      &.horizontal {
        .form-label {
          &:after {
            @include breakpoint-pc {
              top: 6px;
            }
            @include breakpoint-sp {
              top: -3px;
            }
          }
        }
      }
    }
  }
}
/*----------------------------------
    LP メインビジュアル
----------------------------------*/
@mixin lp-mv {
  &.lp_mv_sec {
    padding: 0;
  }
}
/*----------------------------------
    LP contents(コンテンツ)
----------------------------------*/
@mixin lp-contents {
  font-family: $lp_font_family;
  color: $lp_text_color;
  line-height: $lp_text_line_height;
  letter-spacing: $lp_text_letter_spacing;
  //セクション余白調整
  @include breakpoint-pc {
    padding: calc(#{$lp_section_padding} - 30px) 0 calc(#{$lp_section_padding} - 40px);
  }
  @include breakpoint-sp {
    padding: $lp_section_sp_padding 0;
  }
  &.lp_cta_sec {
    .inner {
      .row {
        .col {
          .component {
            &.cta {
              margin: 0;
            }
          }
        }
      }
    }
  }
  .inner {
    .row {
      //よくあるご質問
      &.lp_faq_row {
        margin: 10px 0 20px;
        & + .lp_faq_row {
          margin-top: 40px;
        }
        .col {
          background: #fff;
          box-shadow: $lp_box_shadow_common;
          border-radius: $lp_border_radius_common;
          padding: 20px;
          .component {
            &.richtext {
              &:is(.faq_qu,.faq_an) {
                position: relative;
                border-bottom: 1px solid $lp_border_color;
                margin: 0;
                padding: 15px 15px 15px 50px;
                @include breakpoint-sp {
                  padding-left: 40px;
                }
                &::before {
                  content: "Q.";
                  display: inline-block;
                  font-size: 28px;
                  font-weight: bold;
                  color: $lp_accent_color;
                  position: absolute;
                  left: 5px;
                  top: 4px;
                  @include breakpoint-sp {
                    top: 2px;
                  }
                }
              }
              &.faq_an {
                border-bottom: 0;
                &::before {
                  content: "A.";
                  color: $lp_text_color;
                }
              }
            }
          }
        }
      }
      .col {
        .component {
          &.richtext {}
          &.image {}
          &.list {}
        }
      }
    }
  }
}

/*----------------------------------
    LP body（本体）
    基本触らないでください
----------------------------------*/
//ヘッダー固定時ズレを修正
html {
  &:has(.lp_sticky_sec) {
    @include breakpoint-pc {
      scroll-padding-top: calc(#{$lp_header_height} + 10px);
    }
    @include breakpoint-sp {
      scroll-padding-top: calc(#{$lp_header_height} + 10px);
    }
  }
}

@include theme-fo-base {
  //LPヘッダー
  &.lp_header_sec {
    font-family: $lp_font_family;
    color: $lp_text_color;
    line-height: $lp_text_line_height;
    letter-spacing: $lp_text_letter_spacing;
    padding: 0;
    @include lp-heading();
    @include lp-richtext();
    @include lp-form();
    .inner {
      padding: 10px 20px;
      @include breakpoint-sp {
        padding: 10px;
      }
      .row {
        &.header_row {
          display: flex;
          align-items: center;
          @include breakpoint-pc {
            min-height: 60px;
          }
          .col {
            padding: 0;
            &.logo_col {
              @include breakpoint-pc {
                max-width: 300px;
                min-width: 150px;
                width: auto !important;
              }
              .component {
                &.image {
                  margin: 0;
                  &.lp_logo_img {
                    img {
                      @include breakpoint-pc {
                        max-width: $lp_header_logo !important;
                        width: 100% !important;
                      }
                      @include breakpoint-sp {
                        max-height: $lp_header_sp_logo !important;
                      }
                    }
                  }
                }
              }
            }
            &.btn_col {
              display: flex !important;
              justify-content: flex-end;
              align-items: center;
              flex: 1;
              @include breakpoint-pc {
                width: auto !important;
              }
              .component {
                margin: 0;
                &:not(:first-child) {
                  @include breakpoint-pc {
                    margin-left: 15px;
                  }
                }
                &.button {
                  margin-top: 0;
                  .button-cont {
                    a {
                      @include breakpoint-sp {
                        background: none;
                        width: auto;
                        min-width: auto;
                        font-size: 0 !important;
                        letter-spacing: 0;
                        border-radius: 0;
                        border: 0;
                        margin: 0;
                        box-shadow: none;
                        padding: 5px 10px 5px 5px;
                      }
                      &::before {
                        @include breakpoint-sp {
                          font-size: 22px;
                          line-height: 1;
                          color: $lp_main_color;
                          margin: 0;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &.nav_row {
          @include breakpoint-pc {
            margin: 20px 0 -10px;
          }
          .col {
            padding: 0;
            .component {
              &.list {
                margin: 0;
                ul {
                  @include breakpoint-pc {
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                  }
                  li {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    @include breakpoint-pc {
                      display: table-cell;
                    }
                    @include breakpoint-sp {
                      width: 50%;
                    }
                    a {
                      display: block;
                      font-size: inherit;
                      color: inherit;
                      text-align: center;
                      padding: 20px 10px;
                      @include breakpoint-sp {
                        padding: 10px 5px;
                      }
                      &:hover {
                        background-color: $lp_main_color;
                        color: #fff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    //LPコンテンツ記述
    & ~ section {
      @include lp-heading();
      @include lp-richtext();
      @include lp-form();
      @include lp-mv();
      @include lp-contents();
      //フッター
      &.lp_footer_sec {
        padding: 0;
        .inner {
          max-width: 100% !important;
          padding: 0;
          .row {
            padding: 0;
            &:not(.copyright_row) {
              max-width: $lp_max_width;
              margin: 0 auto;
              padding: 0 20px;
            }
            &.site_map_row {
              padding: 40px 20px;
              .col {
                vertical-align: middle;
              }
            }
            &.page_top_row {
              @include page_top;
            }
            &.copyright_row {
              .col {
                padding: 0;
                .component {
                  &.richtext {
                    &.foot-copyright {
                      @include copyright_custom;
                    }
                  }
                }
              }
            }
            .col {
              padding: 0;
              .component {
                &.image {
                  &.footLogo_img {
                    img {
                      max-width: 250px !important;
                      width: 100% !important;
                    }
                  }
                }
                &.list {
                  &.site_map_list {
                    ul {
                      display: flex;
                      gap: 10px 20px;
                      @include breakpoint-sp {
                        flex-direction: column;
                      }
                      li {
                        margin: 0;
                        padding: 0;
                        a {
                          color: inherit;
                          &:hover {
                            opacity: $lp_hover_opacity;
                          }
                        }
                      }
                    }
                    &.vertical {
                      ul {
                        flex-direction: column;
                        li {
                          a {
                            padding: 0;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //LPセクション固定
  &.lp_sticky_sec {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: $lp_box_shadow_nav_common;
  }
}
/*------------- LP（フルカスタム用） END-------------*/
/*----------------------------------
    JSパーツ記述場所
----------------------------------*/

/*------------- JSパーツ記述場所 END-------------*/

//col空処理
@include theme-fo-base {
  .inner {
    .row {
      .col {
        &:empty {
          background: none;
          border: 0;
          box-shadow: none;
          @include breakpoint-sp {
            display: none !important;
          }
        }
      }
    }
  }
}

/*----------------------------------
    編集画面用CSS（編集画面のみに効くCSS）
----------------------------------*/
@include edit-page {
  //既存フォント以外のフォントファミリー設定（使用しない場合は削除してください）
  // --fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
  // --fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
  //SP編集画面の幅制限
  @include breakpoint-sp {
    max-width: 769px;
    margin: auto;
  }
  .pcOnly {
    border: 1px solid blue;
    &::before {
      content: "PCのみ表示";
      background: blue;
      color: #fff;
      position: absolute;
      top: -24px;
      right: 0;
      padding: 0 5px;
    }
  }
  .spOnly {
    @include breakpoint-pc {
      display: block !important;
      border: 1px solid red;
      opacity: .5;
      z-index: 1;
    }
    &::before {
      @include breakpoint-pc {
        content: "SPのみ表示";
        position: absolute;
        background: red;
        color: #fff;
        top: -24px;
        right: 0;
        padding: 0 5px;
      }
    }
  }
  .displayNone {
    @include breakpoint-pc {
      display: block !important;
      opacity: .5;
    }
    &::before {
      @include breakpoint-pc {
        content: "classで非表示設定";
        background: black;
        color: #fff;
        position: absolute;
        top: -24px;
        right: 0;
        padding: 0 5px;
      }
    }
  }
  //新CMS編集画面の共通ナビ固定解除
  header#navigations {
    &[class*="one_row_fix-navi"],
    &[class*="two_row_fix-navi"] {
      position: relative !important;
      width: 100%;
      &::after {
        content: "ナビ固定中";
        background: #0987d4;
        box-sizing: border-box;
        width: 100%;
        font-size: 18px;
        line-height: 25px;
        color: #fff;
        text-align: center;
        position: absolute;
        bottom: -45px;
        padding: 10px;
        z-index: -1;
      }
    }
  }
  //hover時に下線を削除
  :is(.navi-001-01,.navi-002-01) {
    header {
      .inner {
        .main-menu {
          .level-01-trigger {
            &:hover {
              text-decoration: none;
            }
          }
          a {
            text-decoration: none;
          }
        }

      }
    }
  }
  //メインビジュアルパレット見えない対策
  .theme-fo-base {
    //新CMS編集画面のヘッダ固定解除
    &[style*="padding-top"] {
      padding-top: 45px !important;
    }
  }
  //オーバーレイが公開画面で二重にかかるバグ
  .theme-fo-base {
    .main-visual {
      .overlay {
        display: block !important;
      }
    }
  }
  //row余白調整
  :where(.theme-fo-base) {
    :where(
      .main-visual .main-visual-content,
      .wrapper .contents section .inner,
      .foot .foot-cont
    ) {
      :where(.row) {
        &:not(:first-child) {
          margin-top: 30px;
        }
      }
    }
  }
  //sticky解放用
  .theme-fo-base {
    &:has(:is(.lp_sticky_sec)) {
      .wrapper {
        .contents {
          section {
            overflow: visible;
          }
        }
      }
    }
  }
  //ページ内リンクずれ対策class
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          .component {
            &.heading {
              &.inPage_link {
                margin-top: 10px;
                padding-top: 0;
              }
            }
          }
        }
      }
    }
  }
  //コンテンツ
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          //編集画面内の仕様回避の為
          margin: 50px 0 !important;
          &.foPrp_footer_sec {
            margin-bottom: 100px !important;
            .inner {
              padding: 20px 0;
              .row {
                .col {
                  .component {
                    &.cta {
                      .cta-row {
                        &.page_top_row {
                          @include edit-page_top;
                          margin-bottom: 30px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .inner {
            .row {
              .col {
                .component {
                  &.richtext {
                    &.foot-copyright {
                      text-align: center;
                      @include copyright_custom;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //sp時センター寄せ
  .component {
    &.button {
      &.sp_center {
        &::before {
          content: "SP時に中央よせ";
          background: #0987d4;
          color: #fff;
          position: absolute;
          bottom: -24px;
          left: 0;
          padding: 0 5px;
        }
      }
    }
  }
  //フッター
  .theme-fo-base {
    .foot {
      &.ft_custom {
        .foot-cont {
          .row {
            &.page_top_row {
              @include edit-page_top;
            }
          }
        }
      }
    }
  }
  //カスタムパーツの記述はここにお願いします
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          .inner {
            .row {
              .col {}
            }
          }
        }
      }
    }
  }
  //LPの記述はここにお願いします
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          &.lp_sticky_sec {
            position: relative;
            &::after {
              content: "固定中";
              color: #fff;
              font-size: 18px;
              position: absolute;
              bottom: -45px;
              line-height: 25px;
              width: 100%;
              box-sizing: border-box;
              background: #0987d4;
              text-align: center;
              padding: 10px;
            }
          }
          &.lp_footer_sec {
            .inner {
              .row {
                &.page_top_row {
                  .col {
                    .component {
                      &.image {
                        position: static !important;
                        margin: 10px 0 !important;
                        &::before {
                          content: "ページ右下に固定されます";
                          display: inline-block;
                          text-align: center;
                          background: #0987d4;
                          color: #fff;
                          position: absolute;
                          right: 0;
                          bottom: -24px;
                          left: 0;
                          z-index: 1;
                          padding: 0 5px;
                        }
                      }
                    }
                  }
                }
                &.copyright_row {
                  margin-top: 30px;
                }
              }
            }
          }
          .inner {
            .row {
              .col {
                .component {
                  &.heading {
                    &.lp_inPageLink {
                      margin-top: 10px;
                      padding-top: 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //JSパーツの記述はここにお願いします
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          .inner {
            .row {
              .col {}
            }
          }
        }
      }
    }
  }
  //共通パーツに白文字を使った時の警告文
  &:has(.inner > [class*="id-"]) {
    &::after {
      content: "何も表示されない場合は「白」設定の可能性があるので、右上の「ダークモード」をONにしてください";
      color: #c70909;
      font-size: 12px;
      line-height: 1.3;
      white-space: pre;
      padding: 5px;
      border: 1px solid #c70909;
      position: absolute;
      top: -28px;
      left: 0;
    }
  }
  //共通パーツに白文字を使った時の警告文 end
}

/*------------- 編集画面用CSS END -------------*/
 

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.