/*
    Theme Name:  salonism
    Version:     1.0.0
    Author:      ビーグル
    Description: 美容室ポータルサイト親テーマ
/* =========================================
   GOURMET タイトル
========================================= */

.food_pr_title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:36px;
    margin:0 0 40px;
}

.food_pr_title::before,
.food_pr_title::after{
    content:"";
    flex:1;
    height:1px;
    background:#b79a62;
}

.food_pr_title_center{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
}

.food_pr_title_en{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:64px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    color:#b79a62 !important;
}

.food_pr_title_center small{
    display:block;
    margin-top:10px;
    font-size:14px;
    font-weight:500;
    letter-spacing:.18em;
    color:#333;
}
@media (max-width:767px)

.food_pr_title{
    gap:16px;
    margin-bottom:24px;
}

.food_pr_title_en{
    font-size:40px !important;
}

.food_pr_title_center small{
    font-size:11px;
    margin-top:6px;
}
/* =====================================
   ヘッダーメニューのカラフルな下線
===================================== */

.menu_top > a,
.menu_feature > a,
.menu_news > a,
.menu_beginner > a{
    position:relative !important;
    display:inline-block !important;
    padding-bottom:14px !important;
}

.menu_top > a::after,
.menu_feature > a::after,
.menu_news > a::after,
.menu_beginner > a::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:3px !important;
    border-radius:20px !important;
}

/* TOP */
.menu_top > a::after{
    background:#71b995 !important;
}

/* FEATURE */
.menu_feature > a::after{
    background:#cfad61 !important;
}

/* NEWS */
.menu_news > a::after{
    background:#df8da7 !important;
}

/* 初めての方へを1行にする */
.header_nav ul li.menu_beginner {
  width: 130px !important;
  min-width: 130px !important;
  flex: 0 0 130px !important;
}

.header_nav ul li.menu_beginner > a {
  white-space: nowrap !important;
}

/* 初心者マークと黄色い線を整える */
.header_nav ul li.menu_beginner > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-bottom: 14px;
}

.header_nav ul li.menu_beginner .beginner_mark {
  display: inline-block !important;
  width: 20px;
  height: auto;
}

.header_nav ul li.menu_beginner > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 92px;
  height: 3px;
  background-color: #f2c94c;
}/* 初心者マークを表示 */
.header_nav ul li.menu_beginner > a > img.beginner_mark {
  display: none !important;
}
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  flex: 0 0 18px !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain;
/* 初めての方へ：マークを背景画像で表示 */
.header_nav ul li.menu_beginner > a {
  position: relative;
  padding-left: 25px !important;
  background-image: url("./images/beginner_mark.png") !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: left center !important;
}

/* HTML内の画像は重複防止で隠す */
.header_nav ul li.menu_beginner > a > img.beginner_mark {
  display: none !important;
}/* BEAUTY */
.menu_beauty > a::after {
  background-color: #d69ac4 !important;
}

/* HAIR ITEM */
.menu_hair_item > a::after {
  background-color: #8eb8d8 !important;
}

/* RECRUIT */
.menu_recruit > a::after {
  background-color: #a5c985 !important;
}/* BEAUTY */
.header_nav .menu_beauty > a::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin: 10px auto 0;
  background-color: #d9a0c4;
}

/* HAIR ITEM */
.header_nav .menu_hair_item > a::after {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 10px auto 0;
  background-color: #8fb7d8;
}

/* RECRUIT */
.header_nav .menu_recruit > a::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 10px auto 0;
  background-color: #9fc88c;
}

/* ===================================
   PCヘッダーを上下2段にする
=================================== */
@media screen and (min-width: 1000px) {

  /* ヘッダー全体 */
  body > header,
  header.fade_in_single {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px 0 0 !important;
    background-color: #fff !important;
  }

  /* ロゴを上段中央へ */
  .header_logo {
    order: 1 !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 auto 12px !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  .header_logo > a {
    display: inline-block !important;
    width: auto !important;
  }

  .header_logo img {
    display: block !important;
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* メニューを下段にする */
  .header_nav {
    order: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }

  .header_nav > ul {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* 各メニュー */
  .header_nav > ul > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 105px !important;
    height: 66px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    flex: 0 0 auto !important;
  }

  .header_nav > ul > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 0 13px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    text-align: center !important;
  }

  /* HAIR ITEMを1行にする */
  .header_nav .menu_hair_item {
    min-width: 115px !important;
  }

  .header_nav .menu_hair_item > a {
    white-space: nowrap !important;
  }

  /* 初めての方へ */
  .header_nav .menu_beginner {
    min-width: 135px !important;
  }

  /* 掲載サロン一覧 */
  .header_nav .header_reserve_button {
    min-width: 180px !important;
    padding: 0 22px !important;
    background-color: #e1f5e8 !important;
  }

  /* スライダーがヘッダーの下から始まるようにする */
  main {
    clear: both !important;
  }
}
/* PCメニューの下線を枠の下に固定 */
@media screen and (min-width: 1000px) {

  /* 既存のaタグ側の線をすべて消す */
  .header_nav > ul > li > a::after {
    display: none !important;
  }

  /* 各メニュー枠を基準にする */
  .header_nav > ul > li {
    position: relative !important;
    height: 58px !important;
  }

  /* 共通の線 */
  .header_nav > ul > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 78px;
    height: 3px;
    transform: translateX(-50%);
  }

  /* 色 */
  .header_nav .menu_top::after {
    background-color: #62b98b;
  }

  .header_nav .menu_feature::after {
    background-color: #d4a94f;
  }

  .header_nav .menu_news::after {
    background-color: #df86a3;
  }

  .header_nav .menu_beauty::after {
    background-color: #d99ac5;
  }

  .header_nav .menu_hair_item::after {
    background-color: #8fb8d9;
  }

  .header_nav .menu_recruit::after {
    background-color: #9fc88c;
  }

  .header_nav .menu_beginner::after {
  width: 104px;
  background-color: #f2c94c;
}

/* @mediaを閉じる */
/* PCトップ画像の高さ */
@media screen and (min-width: 1000px) {
  .first_view,
  .first_view .slider,
  .first_view .slick-list,
  .first_view .slick-track,
  .first_view .slick-slide {
    height: 530px !important;
    min-height: 460px !important;
  }

  .first_view .slick-slide img {
    width: 100% !important;
    height: 530px !important;
    min-height: 530px !important;
    object-fit: cover !important;
  }
}}