/*------------トップページ------------*/
/*------------トップページ------------*/
/*------------トップページ------------*/
/*------------トップページ------------*/

/*************************************************/
/* フロントページにヘッダー画像 ***********************/
/*************************************************/

/* ヘッダー画像をviewportいっぱいに表示*/
.twentyseventeen-front-page .header-background {
  /* 緑の50pxのボーダーをトップに設定 */

  background-image: url("/wp-content/uploads/2024/11/PC_KV-1.png");
  /* ヘッダー画像が最大の高さを取るようにする */
  background-size: cover;
  /* 画像全体が見えるように変更 */
  /* 画像が要素全体をカバーするように拡大 */
  background-position: top center;
  /* 画像を中央に配置 */
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100vw;
  height: calc(100vw * 813 / 1024);
  /* 必要に応じて高さを調整 */
}

/*************************************************/
/* スクロール カスタムヘッダーに置くs ******************/
/*************************************************/
/*スクロールダウン全体の場所*/
/*----------------修正s--------------------*/
/*----------------修正--------------------*/
/*----------------修正--------------------*/
/*----------------修正--------------------*/
/*----------------修正--------------------*/

.twentyseventeen-front-page .site {
  position: relative;
  /* 親要素に設定して、absolute要素の基準にする */
}

.twentyseventeen-front-page .site::before {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 600px;
  left: 15px;
  /*線の形状*/
  width: 2px;
  height: 100px;
  background: #cccccc;
}

/* 線の描写 */
.twentyseventeen-front-page .site::after {
  content: "";
  /*描画位置*/
  position: absolute;
  left: 15px;
  top: 100px;
  /*線の形状*/
  width: 2px;
  height: 30px;
  background: rgba(16, 72, 73, 1);
  /*線の動き1.4秒:かけて動く。永遠にループ*/
  animation: pathmove2 4s ease-in-out infinite;
}

/*----------------修正e--------------------*/
/*----------------修正--------------------*/
/*----------------修正--------------------*/
/*----------------修正--------------------*/
/*----------------修正--------------------*/

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove2 {
  0% {
    height: 0;
    top: 600px;
    opacity: 0;
  }

  30% {
    height: 30px;
    opacity: 1;
  }

  100% {
    height: 0;
    top: 700px;
    opacity: 0;
  }
}

/*************************************************/
/* スクロール カスタムヘッダーに置くe ******************/
/*************************************************/

.page-id-2698 {
  background: #fafafa;
}

.page-id-2698 h2,
.page-id-2698 h3,
.page-id-2698 .beginner,
.page-id-2698 .firsttime,
.page-id-2698 .expert,
.page-id-2698 .experience,
.page-id-2698 .instagram p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  padding: 0;
}

/* @@@@@@@中央寄せにしたい s */
/* 親要素に中央揃え */
.page-id-2698 picture {
  display: flex;
  justify-content: center;
  /* 横方向の中央揃え */
}

/* @@@@@@@中央寄せにしたい e */

.page-id-2698 h2,
.page-id-2698 h3 {
  color: #104849;
}

.page-id-2698 h2 {
  font-size: 5.6rem;
  margin-top: 30px;
  margin-bottom: 10px;
  text-align: center;
}

.page-id-2698 h3 {
  font-size: 3rem;
}

/* 画像の背景色を指定 */
.page-id-2698 .group__01 {
  background: #f1f5f3;
  padding: 60px;
  border: 1px solid #104849;
}

/* 3つの違いカードの装飾 */
.page-id-2698 .card_shadow__02 {
  border-top: 2px solid #104849;
  flex-direction: row-reverse;
}

/* 店舗ギャップを大きくしている */
.page-id-2698 .card_style__01,
.page-id-2698 .card_style__02 {
  gap: 50px;
}

/* 店舗写真とテキストを逆に */
.page-id-2698 .shop__01 {
  flex-direction: row-reverse;
}

.page-id-2698 .menu__01 {
  background: #fff;
}

/* フレックスボックスのシャドウをとる */
.page-id-2698 .group__03 .is-layout-flex {
  box-shadow: none;
}

/* 「編集」の文字を非表示 */
.page-id-2698 .post-edit-link,
.page-id-2698 .entry-title {
  visibility: hidden;
}

.page-id-2698 .mincho__01 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 2.8;
}

/* マーカー風の指定 */
.page-id-2698 .mincho__01 span {
  background: linear-gradient(transparent 50%, #cdcb9d 50%);
  font-weight: bold;
}

/* カバー画像のテキスト幅と行間を指定 */
.twentyseventeen-front-page .group__04,
.twentyseventeen-front-page .group__05 {
  line-height: 2.2;
  width: 100%;
}

/* カバー画像のマージンを広げている */
.twentyseventeen-front-page .middle_cover_full_width .wp-block-cover__inner-container {
  margin: 10%;
}

/* 全幅画像の上にスペースを作っている */
.twentyseventeen-front-page .beene_arranged {
  margin-top: 200px;
}

/* カバー画像の文字大きさ */
.twentyseventeen-front-page .beginner,
.twentyseventeen-front-page .expert {
  font-size: 3rem;
  margin-top: 80px;
}

.twentyseventeen-front-page .firsttime,
.twentyseventeen-front-page .experience {
  font-size: 5.2rem;
}

.twentyseventeen-front-page .beene_concerns,
.twentyseventeen-front-page .beene_discomfort {
  font-size: 1.8rem;
  line-height: 2.2;
}

/* メニューカードにグラデーションをかけている */
.page-id-2698 .menu__01 {
  flex-direction: column;
  /* background: linear-gradient(#104849, #458081);
  gap: 5px;
  height: 58rem;
  margin-bottom: 50px; */
}

/* 画像の縁にボーダー @@@@@@@@@@@@@@@@@@@*/
.twentyseventeen-front-page .card_shadow__01 .photo_img_01 {
  border: 5px solid #265F60;
}

/* テキストに高さを持たせることでカードの高さを揃えている */
.page-id-2698 .hair__01 {
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  padding-bottom: 5rem;
  /* height: 280px; */
}

.page-id-2698 .damage {
  margin-top: 10px;
}

/* .page-id-2698
  .wp-block-column
  .explanation
  .is-layout-flow
  .wp-block-column-is-layout-flow {
  height: 300px;
} */

/* .page-id-2698 .is-layout-flex {
  box-shadow: none;
} */

/* カードのスタイル */
/* .twentyseventeen-front-page .wp-container-core-columns-is-layout-10, */
.twentyseventeen-front-page .wp-container-core-columns-is-layout-11,
.twentyseventeen-front-page .wp-container-core-columns-is-layout-12 {
  /* height: 301px; */
  flex-direction: row-reverse;
  /* border-top: 2px solid #104849; */
  margin: 0;
  padding: 0;
  /* background: #fff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08); */
  margin-bottom: 30px;
}

/* カードの中のテキストグループ */
.twentyseventeen-front-page .group__06,
.twentyseventeen-front-page .mini_group_01 {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}

.twentyseventeen-front-page .group__06 p {
  line-height: 2;
}

/*----------------マージンs--------------------*/
/*----------------マージン--------------------*/
/*----------------マージン--------------------*/
/*----------------マージン--------------------*/
/*----------------マージン--------------------*/
.site-footer .widget-column.footer-widget-2 .has-text-align-center {
  margin: 0px;
  margin-top: 10px;
}

/*----------------マージンe--------------------*/
/*----------------マージン--------------------*/
/*----------------マージン--------------------*/

/* メニューセクション */
/* メニューセクション */
/* メニューセクション */
/* メニューセクション */
/* メニューセクション */
/* カードのスタイル */
.twentyseventeen-front-page .menu__05>.menu__01 {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-bottom: 3rem;
  /*
  margin: auto;
  padding: 0;
  margin-bottom: 30px;
  height: 40rem;*/
}

.twentyseventeen-front-page .menu__05>.menu__01 .wp-block-image img {
  width: 100%;
}

/*------------------修正s---------------------*/
/*------------------修正---------------------*/
/*------------------修正---------------------*/
/*------------------修正---------------------*/
/*------------------修正---------------------*/
.twentyseventeen-front-page .yokote {
  margin-top: 20px;
}

.twentyseventeen-front-page a.wp-block-latest-posts__post-title {
  font-size: 25px;
}

.twentyseventeen-front-page .wp-block-latest-posts__post-date {
  font-size: 12px;
}

.twentyseventeen-front-page .wp-block-latest-posts__post-excerpt {
  font-size: 14px;
}

/*------------------修正e---------------------*/
/*------------------修正---------------------*/
/*------------------修正---------------------*/
/*------------------修正---------------------*/
/*------------------修正---------------------*/

/*------------------修正s-------------------*/
/*------------------修正-------------------*/
/*------------------修正-------------------*/
/*------------------修正-------------------*/
/*------------------修正-------------------*/
/* フッターの下線に見えるボックスシャドウ */
.widget a,
.site-footer .widget-area a {
  box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
  -webkit-box-shadow: none;

}

.site-footer .widget-area a:hover {
  box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
}

.site-footer {
  border-top: none;
}


/*------------------修正e-------------------*/
/*------------------修正-------------------*/
/*------------------修正-------------------*/
/*------------------修正-------------------*/
/*------------------修正-------------------*/

.twentyseventeen-front-page .menu__05>.menu__01 .wp-block-buttons {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translateY(80%);
  /* 親要素の下端から80%はみ出す */
  /*
  margin: auto;
  padding: 0;
  margin-bottom: 30px;
  height: 40rem;*/
}

/* カードのトップに2本の線を付ける */
.twentyseventeen-front-page .shop_group__01 {
  position: relative;
  border-top: 2px solid #ececec;
}

.twentyseventeen-front-page .shop_group__01::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  /* 1本目の線の上に重ねるために少し上に移動 */
  /* bottom: -5px;  */
  width: 15%;
  border-bottom: 2px solid #104849;
  /* 2本目の線 */
}

/* お知らせ */
.twentyseventeen-front-page .beene_notice .wp-block-group__inner-container {
  display: flex;
  gap: 20px;
  align-items: center;
}

.twentyseventeen-front-page .beene_notice span {
  background: #104849;
  padding: 3px;
  border-radius: 2px;
  color: #fff;
}

.twentyseventeen-front-page .beene_information {
  border-bottom: 2px solid #ececec;
  padding-bottom: 3px;
}

/* サブタイトルの文字を明朝に */
.twentyseventeen-front-page .beene_subtitle {
  font-family: "Shippori Mincho", serif;
  text-align: center;
  margin-top: 10px;
}

/* ボタンのマージンをとってカードの縁にかける */
/* .twentyseventeen-front-page
  .wp-block-buttons
  > .wp-block-button.has-custom-font-size
  .wp-block-button__link {
  margin-top: 0;
  margin-bottom: 20px;
} */

/* 営業時間・定休日 */
.twentyseventeen-front-page .opening_times .wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained,
.twentyseventeen-front-page .closedday .wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 店舗を横並び */
/* .twentyseventeen-front-page .shop__02 .wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained {
	display:flex;
} */

.twentyseventeen-front-page .salon span,
.twentyseventeen-front-page .shop__02 span {
  background: #104849;
  padding: 3px;
  border-radius: 2px;
  color: #fff;
}


/* レイアウトを逆にする */
/* .twentyseventeen-front-page .wp-container-core-columns-is-layout-17,
.twentyseventeen-front-page .wp-container-core-columns-is-layout-18,
.twentyseventeen-front-page .wp-container-core-columns-is-layout-20,
.twentyseventeen-front-page .wp-container-core-columns-is-layout-21 {
  flex-direction: row-reverse;
} */

/* ブログレイアウト */
.twentyseventeen-front-page .beene_posts {
  display: flex;
  flex-grow: 1;
  gap: 20px;
}

/* 背景色を全幅に設定 */
.twentyseventeen-front-page .beene_blog {
  position: relative;
  padding: 60px 0;
  z-index: 1;
}

.twentyseventeen-front-page .beene_blog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* 左端に揃える */
  margin-right: -50vw;
  /* 右端に揃える */
  height: 100%;
  background: #f1f5f3;
  z-index: -1;
}

/* 写真の白い枠を消している */
.twentyseventeen-front-page .entry-content a img {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*-------------行間s--------------------*/
/*-------------行間--------------------*/
/*-------------行間--------------------*/
/*-------------行間--------------------*/
/*-------------行間--------------------*/
/* フッター */
.site-footer .widget-column.footer-widget-1 {
  flex-direction: row;
  width: 100vw;
  line-height: 1.2;
  padding-left: 30px;
}

/*-------------行間e--------------------*/
/*-------------行間--------------------*/
/*-------------行間--------------------*/
/*-------------行間--------------------*/
/*-------------行間--------------------*/

/* instagram s */
/* instagram */
/* instagram */
/* instagram */
/* instagram */
/* instagram */

.twentyseventeen-front-page .instagram h2::before {
  content: "\f16d";
  /* InstagramのUnicode */
  font-family: "Font Awesome 5 Brands";
  font-weight: lighter;
  /* ブランド用フォントファミリ */
  font-size: 50px;
  /* アイコンのサイズ */
  margin-right: 5px;
  /* アイコンとテキストの間のスペース */
  color: #104849;
}

.twentyseventeen-front-page .beene_instagram_account {
  margin-top: 50px;
  text-align: center;
}

/* instagram e */
/* instagram */
/* instagram */
/* instagram */
/* instagram */
/* instagram */

@media screen and (max-width: 767px) {
  .page-id-2698 h2 {
    font-size: 3.6rem;
  }

  .page-id-2698 h3 {
    font-size: 2.2rem;
  }

  .twentyseventeen-front-page p {
    text-align: left;
    width: 95%;
    line-height: 2;
    margin: 0 auto;
  }

  .twentyseventeen-front-page .header-background {
    background-image: url("/wp-content/uploads/2024/11/SP_KV-1.png");
    /* ヘッダー画像が最大の高さを取るようにする */
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100vw;
    height: calc(100vw * 928 / 375);
  }

  .twentyseventeen-front-page .group__01 {
    padding: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    border-left: none;
    border-right: none;
  }

  .site-footer .widget-column.footer-widget-1 {
    flex-direction: column;
  }

  /* .twentyseventeen-front-page .wrap {
    padding: 0;
  } */

  .twentyseventeen-front-page .beene_arranged {
    margin-top: 200px;
  }

  .twentyseventeen-front-page .hearty_img_01 {
    width: 100vw;
  }

  .twentyseventeen-front-page h2 {
    width: 80%;
    margin: 0 auto;
  }

  .twentyseventeen-front-page .beginner,
  .twentyseventeen-front-page .expert {
    font-size: 2.2rem;
  }

  .twentyseventeen-front-page .firsttime,
  .twentyseventeen-front-page .experience {
    font-size: 3.2rem;
  }

  .twentyseventeen-front-page .beene_concerns,
  .twentyseventeen-front-page .beene_discomfort {
    font-size: 1.5rem;
    line-height: 2.2;
    width: 95%;
    margin: 0 auto;
  }

  .twentyseventeen-front-page .mincho__01 {
    font-size: 1.8rem;
    line-height: 2.2;
  }

  .twentyseventeen-front-page .card__01 h2 {
    margin-top: 20px;
  }

  /* 画像に関するcss */
  /* 画像に関するcss */

  /* メニューセクションの全幅カバー画像を入れ替え */
  /*beginer */
  .twentyseventeen-front-page .beene_beginner .wp-block-cover__image-background {
    content: url("/wp-content/uploads/2024/09/Rectangle-64-3.jpg");
  }

  /*expart */
  .twentyseventeen-front-page .beene_expart .wp-block-cover__image-background {
    content: url("/wp-content/uploads/2024/09/Rectangle-64-4.jpg");
  }

  .twentyseventeen-front-page .card_shadow__02 {
    flex-direction: column-reverse;
  }

  .twentyseventeen-front-page .wp-container-core-columns-is-layout-11,
  .twentyseventeen-front-page .wp-container-core-columns-is-layout-12,
  .twentyseventeen-front-page .wp-container-core-columns-is-layout-14,
  .twentyseventeen-front-page .wp-container-core-columns-is-layout-15,
  .twentyseventeen-front-page .wp-container-core-columns-is-layout-17 {
    flex-direction: column-reverse;
  }

  .twentyseventeen-front-page .card_shadow__01 .photo_img_01 img {
    width: 100%;
  }

  .twentyseventeen-front-page .beene_posts {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }

  /* ボタンについてのcss */
  /* ボタンについてのcss */
  /* ボタンを横位置にしている @@@@@@@@@@@@@*/
  .twentyseventeen-front-page .wp-block-buttons.is-content-justification-center {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
  }

  /* @@@@@@@@カンプに合わせて画像の大きさを変えている */
  /* .twentyseventeen-front-page .wp-image-3267 {
    width: 100%;
    height: auto;
  } */
}