@charset "UTF-8";
/*===================================================
 style.scss
================================================== */
/* --------------------------------------------------
 WordPressテーマ化 コメント
-------------------------------------------------- */
/*
Theme Name: YKR PortFolio
Author: ゆうき
Description: ポートフォリオの掲載とブログ更新を同時に行えるように制作したゆくろのポートフォリオテーマです。
Version: 1.0
*/
/* --------------------------------------------------
 Pages 各ページ Scss読み込み
-------------------------------------------------- */
/*===================================================
 visual.scss
 各ページビジュアルの定義
================================================== */
/* //////////// 変数読み込み //////////// */
/* ===================================================
 mixin.scss
 使い回しパーツの定義
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/*===================================================
  variables.scss
  変数格納
================================================== */
/* --------------------------------------------------
 Width 画面・コンテンツ幅
-------------------------------------------------- */
/* --------------------------------------------------
 Background ページ背景色
-------------------------------------------------- */
/* --------------------------------------------------
 Nav-Background ナビゲーション背景色
-------------------------------------------------- */
/* --------------------------------------------------
 Slide-Background スライド Prev/Nextボタン背景色
-------------------------------------------------- */
/* --------------------------------------------------
 Box-Shadow 影
-------------------------------------------------- */
/* --------------------------------------------------
 Color フォント色
-------------------------------------------------- */
/* --------------------------------------------------
 Border 罫線色
-------------------------------------------------- */
/* --------------------------------------------------
 Button/Link ボタン,リンク色
-------------------------------------------------- */
/* --------------------------------------------------
 Font Family 文字指定
-------------------------------------------------- */
/* --------------------------------------------------
 Line Height 行間
-------------------------------------------------- */
/* --------------------------------------------------
 Letter Spacing 文字間
-------------------------------------------------- */
/*===================================================
 function.scss
 関数定義
================================================== */
/* //////////// 変数読み込み(割り算使用のための読み込み) //////////// */
/* --------------------------------------------------
  clamp() 文字サイズ調整の関数定義
-------------------------------------------------- */
/* --------------------------------------------------
  vw() vwの自動計算
-------------------------------------------------- */
/*===================================================
 mq.scss
 メディアクエリ定義
================================================== */
/* ⬇︎ PC / SP指定の非表示 ====================== */
@media screen and (max-width: 767px) {
  .is-pc {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .is-tab {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  .is-sp {
    display: none;
  }
}

/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
  Max-Width コンテンツ最大幅の指定
-------------------------------------------------- */
/* --------------------------------------------------
  Center-Width 文字列最大幅の指定
-------------------------------------------------- */
/* --------------------------------------------------
  ホバー時左からの下線表示の指定
-------------------------------------------------- */
/* --------------------------------------------------
  テキストホバーの指定
-------------------------------------------------- */
/* --------------------------------------------------
  画像ホバーの指定
-------------------------------------------------- */
/* --------------------------------------------------
  「 ＞ 」矢印の指定
-------------------------------------------------- */
/* --------------------------------------------------
  棒付き矢印の指定
-------------------------------------------------- */
/* --------------------------------------------------
  VW指定
-------------------------------------------------- */
/*===================================================
 visual.scss
 各ページビジュアルの定義
================================================== */
/* //////////// 変数読み込み //////////// */
/* ===================================================
  animation.scss
  アニメーションパーツ定義
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
  Animationのmixinベース定義
-------------------------------------------------- */
/* //////////// @Keyframes //////////// */
/* //////////// ベースアニメーション //////////// */
/* ⬇︎ 以下、各アニメーション内容定義 ---------------------------------------------------*/
/* --------------------------------------------------
  キャッチコピー アニメーション
-------------------------------------------------- */
.js-text-animation span {
  opacity: 0;
}
.js-text-animation.appeartext span {
  animation-name: is_text_on;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}
@keyframes is_text_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 Top-Works トップページ Works 制作実績 指定 
-------------------------------------------------- */
.top-works {
  /* ===== モックアップの指定 ===== */
}
.top-works__contents {
  display: flex;
  justify-content: space-between;
}
.top-works__contents:last-child {
  margin-bottom: 0;
}
.top-works__contents--odd {
  justify-content: space-between;
  flex-direction: row-reverse;
}
@media screen and (max-width: 1024px) {
  .top-works__contents {
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .top-works__contents {
    flex-wrap: wrap;
    flex-direction: column;
    margin: 32px auto 0 auto;
    padding-top: 0;
  }
}
.top-works__thumb {
  width: 25%;
  margin-right: 64px;
}
.top-works__thumb--odd {
  margin-right: 0;
  margin-left: 64px;
}
@media screen and (max-width: 1024px) {
  .top-works__thumb {
    margin-right: 32px;
    width: 30%;
  }
  .top-works__thumb--odd {
    margin-right: 0;
    margin-left: 32px;
  }
}
@media screen and (max-width: 767px) {
  .top-works__thumb {
    width: 80%;
    margin: 0 auto 24px auto;
  }
}
.top-works__image {
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 767px) {
  .top-works__image {
    width: 100%;
  }
}
.top-works__text-box {
  margin-bottom: 32px;
}
.top-works__text {
  display: block;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
@media screen and (max-width: 1024px) {
  .top-works__text {
    margin-bottom: 16px;
  }
}
.top-works__desc {
  flex: 1;
}
.top-works__mockup-list {
  display: flex;
}
@media screen and (max-width: 1024px) {
  .top-works__mockup-list {
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .top-works__mockup-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 0;
  }
}
.top-works__mockup-label {
  text-align: center;
  font-size: clamp(1.6rem, 1.6rem + 0vw, 1.6rem);
  font-weight: 600;
  margin-top: 16px;
  font-family: "Klee One", cursive;
}
.top-works__mockup-item {
  width: 50%;
  border-right: 1px solid #cecece;
}
.top-works__mockup-item:first-child {
  padding-right: 24px;
}
@media screen and (max-width: 767px) {
  .top-works__mockup-item:first-child {
    padding: 0;
  }
}
.top-works__mockup-item:nth-child(2) {
  padding-left: 24px;
  border-right: none;
}
@media screen and (max-width: 767px) {
  .top-works__mockup-item:nth-child(2) {
    padding: 0;
  }
}
@media screen and (max-width: 1024px) {
  .top-works__mockup-item {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .top-works__mockup-item {
    width: 100%;
    border-right: none;
  }
}
.top-works__mockup-thumb {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.top-works__mockup-image {
  width: 100%;
  transition: 0.5s;
}
.top-works__mockup-image:hover {
  transform: scale(1.05);
}

/* ******* トップページ SP画面限定 ******* */
.page-link-sp {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
}
@media screen and (max-width: 1024px) {
  .page-link-sp {
    text-align: center;
  }
}
.page-link-sp--news {
  width: 231px;
}
.page-link-sp__link {
  display: inline-block;
  color: #555;
  font-weight: 600;
  position: relative;
  padding: 0 24px 4px 0;
  border-bottom: 1px solid #cecece;
}
.page-link-sp__link::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
}
.page-link-sp__link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}

/* ******* トップページ SP画面限定 ******* */
/* --------------------------------------------------
 Top-About トップページ About Yukuro CreateFolioについて 指定 
-------------------------------------------------- */
.top-about {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
  .top-about {
    flex-wrap: nowrap;
    gap: 48px;
  }
}
@media screen and (max-width: 767px) {
  .top-about {
    gap: 32px;
    flex-wrap: wrap;
  }
}
.top-about__desc {
  width: 60%;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
@media screen and (max-width: 1024px) {
  .top-about__desc {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .top-about__desc {
    width: 100%;
  }
}
.top-about__text {
  line-height: 1.5;
  margin-bottom: 16px;
}
.top-about__text:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .top-about__text {
    margin-bottom: 16px;
  }
}
.top-about__profile-img {
  width: 50%;
}
@media screen and (max-width: 1024px) {
  .top-about__profile-img {
    width: 80%;
    margin: 0 auto;
  }
}

/* --------------------------------------------------
 Top-Blog Blog ブログ 指定 
-------------------------------------------------- */
/* --------------------------------------------------
 Top-News News お知らせ 指定 
-------------------------------------------------- */
/*===================================================
 about.scss
 aboutページの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
  ご挨拶本文
-------------------------------------------------- */
.about-text__box {
  max-width: 976px;
  margin: 0 auto;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
.about-text__item {
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .about-text__item {
    margin-bottom: 16px;
  }
}
.about-text__item:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
  About-genre 制作ジャンル
-------------------------------------------------- */
.about-genre {
  max-width: 976px;
  margin: 0 auto;
}
.about-genre__box {
  max-width: 976px;
  margin: 0 auto;
}
.about-genre .is-layout-flex {
  gap: 48px;
  align-items: start;
}
@media screen and (max-width: 1024px) {
  .about-genre .is-layout-flex {
    flex-direction: column;
    gap: 16px 0;
  }
}
.about-genre__list {
  flex-grow: 1;
}
@media screen and (max-width: 1024px) {
  .about-genre__list {
    margin-bottom: 24px;
  }
  .about-genre__list:last-child {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 1024px) {
  .about-genre__list {
    margin-bottom: 16px;
  }
  .about-genre__list:last-child {
    margin-bottom: 0;
  }
}
.about-genre__item {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 16px;
  position: relative;
  padding-left: 16px;
}
.about-genre__item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
.about-genre__item:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .about-genre__item {
    margin-bottom: 16px;
  }
  .about-genre__item:last-child {
    margin-bottom: 0;
  }
}
.about-genre__item > a {
  display: inline-block;
  color: #555;
  position: relative;
  border-bottom: 1px solid #cecece;
  padding-bottom: 4px;
  transition: 0.3s;
}
.about-genre__item > a:hover {
  color: #818181;
}
@media screen and (max-width: 767px) {
  .about-genre__item > a {
    width: 100%;
  }
}
.about-genre__item > a::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
  right: -20px;
}

/* --------------------------------------------------
  About-row 制作の流れ
-------------------------------------------------- */
.about-flow__desc {
  max-width: 976px;
  margin: 0 auto;
  margin-bottom: 48px;
}
@media screen and (max-width: 767px) {
  .about-flow__desc {
    margin-bottom: 32px;
  }
}
.about-flow__label {
  font-size: clamp(1.4rem, 1.2rem + 0.625vw, 2rem);
  margin-bottom: 24px;
}
@media screen and (max-width: 1024px) {
  .about-flow__label {
    margin-bottom: 16px;
  }
}
.about-flow__text {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 16px;
}
@media screen and (max-width: 1024px) {
  .about-flow__text {
    margin-bottom: 8px;
  }
}
.about-flow__text--bold {
  font-size: clamp(1.4rem, 1.2666666667rem + 0.4166666667vw, 1.8rem);
  font-weight: 600;
}
.about-flow__text--desc {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  height: 48px;
  margin-bottom: 12px;
}
@media screen and (max-width: 1024px) {
  .about-flow__text--desc {
    height: auto;
  }
}
.about-flow__desc-list {
  padding-bottom: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 48px 64px;
}
@media screen and (max-width: 1024px) {
  .about-flow__desc-list {
    gap: 0 24px;
  }
}
@media screen and (max-width: 767px) {
  .about-flow__desc-list {
    flex-direction: column;
    gap: 32px 0;
    padding: 0 0;
  }
}
.about-flow__item {
  display: flex;
  flex-direction: column;
  width: calc(50% - 32px);
}
@media screen and (max-width: 1024px) {
  .about-flow__item {
    width: calc(50% - 12px);
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .about-flow__item {
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 0;
  }
}
.about-flow__number {
  font-size: clamp(1.8rem, 1.7333333333rem + 0.2083333333vw, 2rem);
  font-weight: 600;
  position: relative;
  margin-bottom: 12px;
}
.about-flow__number::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 90%;
  height: 1px;
  background-color: #cecece;
}
@media screen and (max-width: 767px) {
  .about-flow__number::after {
    width: 90%;
  }
}
.about-flow__thumb > img {
  width: 100%;
}
.about-flow .wp-block-columns {
  flex-wrap: wrap !important;
  padding: 0;
}

/* --------------------------------------------------
  About-me 私について
-------------------------------------------------- */
.about-me__item {
  margin-bottom: 48px;
  display: flex;
  gap: 0 48px;
}
.about-me__item:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .about-me__item {
    gap: 0 24px;
  }
}
@media screen and (max-width: 767px) {
  .about-me__item:nth-child(odd) {
    flex-direction: column-reverse;
  }
}
.about-me__item--reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .about-me__item {
    flex-direction: column;
    display: block;
    margin-bottom: 40px;
  }
}
.about-me__thumb {
  flex: 1;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .about-me__thumb {
    margin-bottom: 24px;
  }
}
.about-me__thumb img {
  width: 100% !important;
}
.about-me__desc {
  flex: 1;
  width: 100%;
}
.about-me__label {
  font-size: clamp(1.6rem, 1.4rem + 0.625vw, 2.2rem);
  margin-bottom: 32px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about-me__label {
    margin-bottom: 24px;
  }
}
.about-me__text {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 16px;
}
.about-me__text:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .about-me__text {
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------
  About-skill 所有資格
-------------------------------------------------- */
.about-license {
  display: flex;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}
.about-license__item {
  flex-wrap: wrap;
}
.about-license .is-layout-flex {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 40px;
  gap: 0 32px;
}
.about-license .is-layout-flex:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .about-license .is-layout-flex {
    flex-wrap: wrap !important;
    margin-bottom: 32px;
  }
}
.about-license__licence-icon {
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: top;
  font-size: 24px;
}
.about-license__date {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  width: 160px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 4px;
  border: 1px solid #cecece;
}
@media screen and (max-width: 767px) {
  .about-license__date {
    margin: 0 0 16px 0;
  }
}
.about-license__name {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
@media screen and (max-width: 767px) {
  .about-license__name {
    display: block;
    margin-top: 16px;
  }
}

/* --------------------------------------------------
  About-skill 言語・ツール
-------------------------------------------------- */
.about-skill__box {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}
@media screen and (max-width: 767px) {
  .about-skill__box {
    width: 100%;
    gap: 24px 0;
  }
}
.about-skill__item {
  width: calc(50% - 32px);
  display: flex;
  border-bottom: 1px dotted #cecece;
  padding-bottom: 32px;
}
@media screen and (max-width: 1024px) {
  .about-skill__item {
    width: calc(50% - 8px);
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .about-skill__item {
    width: 100%;
    padding-bottom: 24px;
  }
}
.about-skill__skill-icon {
  min-width: 56px;
  margin-right: 32px;
}
@media screen and (max-width: 767px) {
  .about-skill__skill-icon {
    min-width: 46px;
    margin-right: 16px;
  }
}
.about-skill__icon {
  width: 56px;
  height: 56px;
}
@media screen and (max-width: 767px) {
  .about-skill__icon {
    width: 46px;
    height: 46px;
  }
}
.about-skill__label {
  font-size: clamp(1.6rem, 1.5333333333rem + 0.2083333333vw, 1.8rem);
  margin-bottom: 8px;
}
.about-skill__detail {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
}
.about-skill__detail--bold {
  font-weight: 600;
}
.about-skill__text {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
.about-skill__git-link {
  display: inline-block;
  color: #555;
  border-bottom: 1px solid #cecece;
}

/* --------------------------------------------------
  About-udemy udemy講座一覧
-------------------------------------------------- */
.about-udemy {
  width: 100%;
}

/*===================================================
 works.scss
 worksページの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
.works-greeting__box {
  max-width: 976px;
  margin: 0 auto;
}

/* --------------------------------------------------
  works-category カテゴリーリストの指定 works_top.html
-------------------------------------------------- */
.works-category {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}
@media screen and (max-width: 1024px) {
  .works-category {
    gap: 32px;
  }
}
.works-category__item {
  width: calc(50% - 32px);
  position: relative;
}
@media screen and (max-width: 767px) {
  .works-category__item {
    width: 100%;
  }
}
.works-category__thumb {
  width: 100%;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .works-category__thumb {
    height: 100%;
  }
}
.works-category__image {
  width: 100%;
  transition: 0.5s;
}
.works-category__image:hover {
  transform: scale(1.1);
}
.works-category__label-inner {
  color: #fafafa;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.works-category__label {
  text-align: center;
  font-weight: 400;
  font-family: "Klee One", cursive;
}
.works-category__label--lg {
  display: block;
  font-size: clamp(2rem, 1.8666666667rem + 0.4166666667vw, 2.4rem);
  margin-bottom: 8px;
}
.works-category__label--sm {
  display: block;
  font-size: clamp(1.4rem, 1.2666666667rem + 0.4166666667vw, 1.8rem);
}

/* --------------------------------------------------
  works-tab タブナビゲーションの指定
-------------------------------------------------- */
.works-tab {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 48px;
  background-color: #f4f4f4;
}
@media screen and (max-width: 1024px) {
  .works-tab {
    padding: 0 8px;
  }
}

/* --------------------------------------------------
  contents-works worksページのベース指定
-------------------------------------------------- */
.contents-works {
  width: 100%;
  margin: 0 auto 120px auto;
}
.contents-works__button-area {
  display: flex;
  margin-bottom: 48px;
}
@media screen and (max-width: 767px) {
  .contents-works__button-area {
    flex-wrap: wrap;
  }
}
.contents-works__button-item {
  margin-right: 80px;
}
.contents-works__button-item:last-child {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .contents-works__button-item {
    width: 100%;
    margin: 0 0 24px 0;
    z-index: 0;
  }
}
.contents-works__button-label {
  font-weight: 600;
  font-size: 1.6em;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .contents-works__button-label {
    width: 100%;
    margin-bottom: 8px;
  }
}

/* --------------------------------------------------
  works-list 作品一覧 指定
-------------------------------------------------- */
.works-list {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: 64px 64px;
}
@media screen and (max-width: 1024px) {
  .works-list {
    flex-wrap: wrap;
    gap: 48px 48px;
  }
}

/* --------------------------------------------------
  works-item 作品紹介カード 指定
-------------------------------------------------- */
.works-card {
  width: calc(50% - 32px);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .works-card {
    width: calc(50% - 32px);
  }
}
@media screen and (max-width: 767px) {
  .works-card {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .works-card--mb {
    margin-bottom: 32px;
  }
}
.works-card__works-image {
  text-align: center;
}
.works-card__image {
  width: 95%;
  margin-bottom: 24px;
  transition: 0.5s;
}
.works-card__image:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 767px) {
  .works-card__image {
    width: 100%;
  }
}
.works-card__title {
  font-size: clamp(1.6rem, 1.5333333333rem + 0.2083333333vw, 1.8rem);
  text-align: center;
  flex: 1;
  height: 100%;
  min-height: 0%;
  margin-bottom: 16px;
  font-family: "Klee One", cursive;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .works-card__title {
    margin-bottom: 16px;
  }
}
.works-card__excerpt {
  flex: 1;
  height: 100%;
  margin-bottom: 24px;
}
.works-card__excerpt > p {
  font-size: 1.4rem;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.works-card__management-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .works-card__management-list {
    margin-bottom: 16px;
  }
}
.works-card__management-item {
  display: block;
  position: relative;
}
.works-card__management-item:not(:first-child)::before {
  content: "|";
  padding: 0 8px;
  color: #cecece;
}
.works-card__genre {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 1.4rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .works-card__genre {
    gap: 8px;
    margin-bottom: 16px;
  }
}
.works-card__category {
  font-size: 1.4rem;
  padding: 8px 16px;
  border: 1px solid #cecece;
  margin-right: 24px;
}
@media screen and (max-width: 1024px) {
  .works-card__category {
    padding: 8px 6px;
  }
}
.works-card__industry {
  font-size: 1.4rem;
  position: relative;
  padding-left: 24px;
  display: flex;
}
@media screen and (max-width: 767px) {
  .works-card__industry {
    flex-wrap: wrap;
    gap: 8px 0;
  }
}
.works-card__industry::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1px;
  background-color: #707070;
}
.works-card__industry li {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  position: relative;
}
.works-card__industry li:not(:first-child)::before {
  content: "|";
  padding: 0 8px;
  color: #cecece;
}
@media screen and (max-width: 767px) {
  .works-card__industry li:not(:first-child)::before {
    padding: 0 4px;
  }
}
.works-card__detail-link {
  text-align: center;
}
.works-card__detail-link .secondary-button {
  width: 320px;
  padding: 8px 0;
  height: auto;
  margin: 0 auto;
  line-height: 1.5;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
}
@media screen and (max-width: 767px) {
  .works-card__detail-link .secondary-button {
    width: 100%;
  }
}
.works-card__detail-link .secondary-button__works {
  display: block;
}

/* --------------------------------------------------
  single-works 作品ページ
-------------------------------------------------- */
.works-eyecatch {
  margin-bottom: 24px;
}
.works-eyecatch > img {
  width: 100%;
}

.works-label {
  padding-bottom: 16px;
}
.works-label__title {
  font-size: clamp(1.8rem, 1.6666666667rem + 0.4166666667vw, 2.2rem);
  text-align: center;
  margin-bottom: 16px;
  font-family: "Klee One", cursive;
}
.works-label__parent-category > a {
  display: inline-block;
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  position: relative;
  padding-left: 24px;
  color: #555;
}
.works-label__parent-category > a::after {
  position: absolute;
  top: 0;
  left: 0;
  content: url("../../images/blog_ico/ico_folder.svg");
  vertical-align: bottom;
}
.works-label__parent-category > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.works-label__parent-category > a:hover::before {
  transform: scale(1, 1);
}
@media screen and (max-width: 767px) {
  .works-label__parent-category > a {
    margin: 0 0 8px 0;
  }
}
.works-label__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.works-label__category-desc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .works-label__category-desc {
    gap: 8px;
  }
}

.works-desc__label {
  font-size: 14px;
  font-weight: 600;
}
.works-desc__text-bt {
  margin-bottom: 16px;
}

.works-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .works-info {
    flex-wrap: wrap;
    gap: 8px;
  }
}
.works-info__label {
  display: block;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  margin-bottom: 0;
  width: 15%;
  color: #555;
}
@media screen and (max-width: 767px) {
  .works-info__label {
    width: 100%;
    font-weight: 600;
  }
}
.works-info__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media screen and (max-width: 767px) {
  .works-info__list {
    width: 100%;
  }
}
.works-info__item {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  position: relative;
}
.works-info__item:not(:first-child)::before {
  content: "|";
  padding: 0 8px;
  color: #cecece;
}
@media screen and (max-width: 767px) {
  .works-info__item:not(:first-child)::before {
    padding: 0 4px;
  }
}

.related-article {
  padding-top: 64px;
}
.related-article .wp-block-columns.wp-container-12 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .related-article .wp-block-columns.wp-container-12 {
    width: 100%;
    flex-direction: column;
  }
}
.related-article .wp-block-group__inner-container {
  padding: 0;
}
.related-article__heading {
  font-size: clamp(1.6rem, 1.4666666667rem + 0.4166666667vw, 2rem);
  margin-bottom: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-bottom: none;
  font-family: "Klee One", cursive;
}
.related-article__heading::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #cecece;
  margin-left: 32px;
}
.related-article__heading::before {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #cecece;
  margin-right: 32px;
}
.related-article__item {
  width: calc(50% - 10px);
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .related-article__item {
    width: 100%;
  }
}
.related-article__thumb {
  position: relative;
  overflow: hidden;
}
.related-article__thumb > .wp-element-caption {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(85, 85, 85, 0.9);
  color: #fafafa;
  font-weight: 600;
  height: 56px;
  padding: 12px;
  font-size: 14px;
  text-align: left;
}
.related-article img {
  width: 100%;
  transition: 0.7s;
}
.related-article img:hover {
  transform: scale(1.2);
}

/* --------------------------------------------------
  works-desc 作品一覧ページの説明 ※造形・衣装制作ページで使用
-------------------------------------------------- */
.works-desc {
  max-width: 976px;
  margin: 0 auto;
}
.works-desc__text {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 1rem;
}
.works-desc__text-link {
  font-weight: 600;
  display: inline-block;
  padding: 0 4px;
  text-decoration: underline;
  color: #555;
}

/*===================================================
 blog.scss
 blogページの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
.top-blog {
  margin-bottom: 48px;
}

.blog-wrap {
  display: flex;
  flex-wrap: wrap;
}

.blog-wrapper {
  display: flex;
  gap: 0 64px;
  flex-wrap: wrap;
}
@media screen and (max-width: 1024px) {
  .blog-wrapper {
    gap: 32px;
  }
}
@media screen and (max-width: 767px) {
  .blog-wrapper {
    gap: 32px 16px;
  }
}
.blog-wrapper .primary-button {
  margin-top: 40px;
}

/* --------------------------------------------------

-------------------------------------------------- */
.blog-list {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .blog-list {
    padding: 0 8px;
  }
}
@media screen and (max-width: 1024px) {
  .blog-list {
    gap: 16px 16px;
  }
}

/* --------------------------------------------------
  最新の記事一覧
-------------------------------------------------- */
.new-article {
  overflow: hidden;
  position: relative;
  display: -webkit-box;
}
.new-article__wrapper {
  display: flex;
  gap: 32px;
}
@media screen and (max-width: 1024px) {
  .new-article__wrapper {
    flex-wrap: wrap;
    gap: 32px;
  }
}
@media screen and (max-width: 767px) {
  .new-article__wrapper {
    gap: 48px;
  }
}
.new-article__item {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid #cecece;
}
@media screen and (max-width: 1024px) {
  .new-article__item {
    width: calc(50% - 16px);
  }
}
@media screen and (max-width: 767px) {
  .new-article__item {
    width: 100%;
  }
}
.new-article__thumb {
  overflow: hidden;
  margin-bottom: 16px;
}
.new-article__thumb > img {
  width: 100%;
  transition: 0.5s;
}
.new-article__thumb > img:hover {
  transform: scale(1.1);
}
.new-article__category {
  display: flex;
  margin-bottom: 16px;
}
.new-article__category-link {
  display: inline-block;
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  position: relative;
  padding-left: 24px;
  color: #555;
}
.new-article__category-link:nth-child(n+2) {
  margin-left: 24px;
}
@media screen and (max-width: 1024px) {
  .new-article__category-link:nth-child(n+2) {
    margin-left: 12px;
    margin-bottom: 0;
  }
}
.new-article__category-link:last-child {
  margin-right: 0;
}
.new-article__category-link::after {
  position: absolute;
  top: 0;
  left: 0;
  content: url("../../images/ico/ico_folder.svg");
  vertical-align: bottom;
}
.new-article__category-link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.new-article__category-link:hover::before {
  transform: scale(1, 1);
}
@media screen and (max-width: 1024px) {
  .new-article__category-link {
    margin: 0 0 0 0;
  }
}
.new-article__label {
  display: flex;
  flex-direction: column;
}
.new-article__label-inner {
  flex-grow: 1;
}
.new-article__title-link {
  font-weight: 600;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
  color: #555;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .new-article__title-link {
    height: 48px;
  }
}
.new-article__title-link:hover {
  transition: 0.3s;
}
.new-article__title-link:hover:hover {
  color: #818181;
}
.new-article__date-box {
  text-align: right;
}
.new-article__date {
  flex-grow: 1;
  padding-left: 24px;
  display: inline-block;
  font-size: clamp(1.3rem, 1.2666666667rem + 0.1041666667vw, 1.4rem);
  position: relative;
  color: #555;
}
.new-article__date::before {
  position: absolute;
  top: 1px;
  left: 0;
  content: url("../../images/ico/ico_clock.svg");
}
@media screen and (max-width: 767px) {
  .new-article__date::before {
    left: 0;
  }
}

/* --------------------------------------------------
  single.php
  ブログ記事CSSスタイル
-------------------------------------------------- */
.blog-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid #cecece;
  margin-bottom: 32px;
}
.blog-heading__title {
  font-size: clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem);
  margin-bottom: 24px;
  line-height: 1.5;
  font-family: "Klee One", cursive;
}
.blog-heading__genre {
  display: flex;
}
.blog-heading__date {
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  position: relative;
  display: block;
  padding-left: 20px;
  margin-left: auto;
}
.blog-heading__date::before {
  position: absolute;
  top: 1px;
  left: 0;
  content: url("../../images/ico/ico_clock.svg");
}
@media screen and (max-width: 767px) {
  .blog-heading__date::before {
    right: 70px;
  }
}
.blog-heading__category-link {
  display: inline-block;
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  position: relative;
  padding-left: 24px;
  color: #555;
}
.blog-heading__category-link:nth-child(n+2) {
  margin-left: 24px;
}
@media screen and (max-width: 1024px) {
  .blog-heading__category-link:nth-child(n+2) {
    margin-left: 12px;
    margin-bottom: 0;
  }
}
.blog-heading__category-link:last-child {
  margin-right: 0;
}
.blog-heading__category-link::after {
  position: absolute;
  top: 0;
  left: 0;
  content: url("../../images/ico/ico_folder.svg");
  vertical-align: bottom;
}
.blog-heading__category-link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.blog-heading__category-link:hover::before {
  transform: scale(1, 1);
}
@media screen and (max-width: 1024px) {
  .blog-heading__category-link {
    margin: 0 0 0 0;
  }
}

.blog-eyecatch {
  margin-bottom: 48px;
}
.blog-eyecatch > img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
 ブログ記事内前後遷移リンク
-------------------------------------------------- */
.blog-prev_next {
  max-width: 768px;
  margin: 0 auto;
}
.blog-prev_next__list {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .blog-prev_next__list {
    flex-direction: column;
    gap: 8px;
  }
}
.blog-prev_next__item {
  width: 100%;
  display: block;
}
@media screen and (max-width: 1024px) {
  .blog-prev_next__item {
    margin-bottom: 32px;
    padding-right: 0;
    border: none;
  }
  .blog-prev_next__item:last-child {
    margin-bottom: 0;
    padding-left: 0;
  }
}
.blog-prev_next__btn {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  color: #555;
  margin-bottom: 8px;
  text-align: left;
  font-weight: 600;
}
.blog-prev_next__btn--next {
  text-align: right;
}
.blog-prev_next__label {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
}
.blog-prev_next__thumb {
  width: 70%;
  overflow: hidden;
}
.blog-prev_next__thumb:nth-child(2) {
  margin-right: 0;
}
.blog-prev_next__thumb > img {
  transition: 0.5s;
  width: 100%;
}
.blog-prev_next__thumb > img:hover {
  transform: scale(1.2);
}
@media screen and (max-width: 767px) {
  .blog-prev_next__thumb {
    width: 50%;
  }
}
.blog-prev_next__title-inner {
  width: 100%;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .blog-prev_next__title-inner {
    width: 100%;
  }
}
.blog-prev_next__title-text {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  font-weight: 600;
  color: #555;
}
.blog-prev_next__title-text:hover {
  transition: 0.3s;
}
.blog-prev_next__title-text:hover:hover {
  color: #818181;
}

/* --------------------------------------------------
 ブログ関連記事一覧
-------------------------------------------------- */
.related-article__label {
  text-align: center;
}
.related-article__list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.related-article__item {
  width: calc(33.3333333333% - 16px);
  border-bottom: 1px solid #cecece;
  padding-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .related-article__item {
    width: calc(50% - 16px);
  }
}
.related-article__thumb {
  margin-bottom: 8px;
}
.related-article__title {
  color: #555;
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 16px;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .related-article__title {
    height: 40px;
  }
}
@media screen and (max-width: 767px) {
  .related-article__title {
    min-height: 32px;
  }
}
.related-article__title:hover {
  transition: 0.3s;
}
.related-article__title:hover:hover {
  color: #818181;
}
.related-article__date-box {
  text-align: right;
}
.related-article__date {
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-left: auto;
  color: #555;
}
.related-article__date::before {
  position: absolute;
  top: 1px;
  left: 0;
  content: url("../../images/ico/ico_clock.svg");
}

/*===================================================
 news.scss
 ニュース一覧・詳細ページ
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 ニュース詳細ページ
-------------------------------------------------- */
.news-desc {
  max-width: 768px;
  /* --------------------------------------------------
   各種見出し
  -------------------------------------------------- */
  /* --------------------------------------------------
  引用 / テキスト関連
  -------------------------------------------------- */
  /* --------------------------------------------------
  テーブル
  -------------------------------------------------- */
  /* --------------------------------------------------
  リスト
  -------------------------------------------------- */
  /* --------------------------------------------------
  ボタン
  -------------------------------------------------- */
}
.news-desc h2 {
  font-size: clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem);
  padding: 12px;
  background-color: #fafafa;
  margin-bottom: 32px;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
}
.news-desc h3 {
  padding: 0 0 6px 12px;
  border-bottom: 1.5px solid #cecece;
  margin: 32px 0;
  font-size: clamp(1.8rem, 1.7333333333rem + 0.2083333333vw, 2rem);
}
.news-desc h4 {
  font-size: clamp(1.6rem, 1.5333333333rem + 0.2083333333vw, 1.8rem);
  border-left: 6px solid #cecece;
  padding-left: 8px;
  margin: 24px 0;
}
.news-desc h5 {
  font-size: clamp(1.6rem, 1.6rem + 0vw, 1.6rem);
  margin: 16px 0;
}
.news-desc blockquote {
  border-left: 1.5px solid #cecece;
  padding: 8px 16px;
  margin-bottom: 24px;
}
.news-desc blockquote:last-of-type {
  margin-bottom: 0;
}
.news-desc blockquote p {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
}
.news-desc p {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
}
.news-desc .wp-block-spacer {
  height: 48px !important;
  margin: 0;
}
.news-desc a {
  display: inline-block;
  color: #555;
  padding-bottom: 2px;
  border-bottom: 1px solid #707070;
  transition: 0.3s;
  font-weight: 600;
}
.news-desc a::after {
  content: "⇀";
  padding-left: 8px;
}
.news-desc a:hover {
  opacity: 0.6;
}
.news-desc .wp-block-table {
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .news-desc .wp-block-table {
    overflow-x: scroll;
  }
}
.news-desc table {
  width: 100%;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  border-collapse: collapse;
  background-color: #f4f4f4;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}
@media screen and (max-width: 767px) {
  .news-desc table {
    width: 800px;
  }
}
.news-desc table th,
.news-desc table td {
  border: 1px solid #cecece;
  padding: 10px;
}
.news-desc table a {
  color: #555;
  padding-bottom: 2px;
  border-bottom: 1px solid #707070;
  transition: 0.3s;
}
.news-desc table a::after {
  content: "⇀";
}
.news-desc table a:hover {
  opacity: 0.6;
}
.news-desc ul {
  padding: 0 16px;
  margin: 0 16px;
  list-style-position: inside;
}
.news-desc ul li {
  list-style-type: square;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
}
.news-desc ul li:last-child {
  margin-bottom: 0;
}
.news-desc ul li ul {
  margin: 12px;
}
.news-desc ul li ul li {
  list-style-type: disc;
}
.news-desc ul li ul li ul li {
  list-style-type: circle;
}
.news-desc ol {
  padding: 0 16px;
  margin: 0 16px;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  counter-reset: item;
  list-style-type: none;
}
.news-desc ol li {
  margin-bottom: 12px;
}
.news-desc ol li::before {
  counter-increment: item;
  content: counters(item, "-") ". ";
}
.news-desc ol li ol {
  margin: 12px;
  counter-reset: 0;
}
.news-desc img {
  margin-bottom: 32px;
}
.news-desc img.alignright {
  display: block;
  margin: 0 0 0 auto;
}
.news-desc img.alignleft {
  display: block;
  margin: 0 auto 0 0;
}
.news-desc img.aligncenter {
  display: block;
  margin: 0 auto;
}
.news-desc strong {
  font-weight: 600;
}
.news-desc .wp-block-button {
  width: 320px;
  margin: 24px auto 32px auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .news-desc .wp-block-button {
    width: 100%;
    text-align: center;
  }
}
.news-desc .wp-block-button__link {
  display: block;
  padding: 16px 24px;
  margin: 0 auto;
  color: #fafafa;
  font-size: 16px;
  background: #555;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .news-desc .wp-block-button__link {
    z-index: 0;
  }
}
.news-desc .wp-block-button__link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #f4f4f4;
  border: 1px solid #707070;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.5s;
}
.news-desc .wp-block-button__link:hover {
  color: #555;
  border-color: #707070;
}
.news-desc .wp-block-button__link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.news-desc .wp-block-button__link:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
  top: 45%;
  right: 16px;
  border-color: #fafafa;
}
@media screen and (max-width: 767px) {
  .news-desc .wp-block-button__link:after {
    right: 10%;
  }
}
.news-desc .wp-block-button__link:hover::after {
  border-color: #707070;
}

/* --------------------------------------------------
 Config ページ設定 Scss読み込み
-------------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* --------------------------------------------------
 Component 共通コンポーネント Scss読み込み
-------------------------------------------------- */
/*===================================================
 c-nav.scss
 各種ナビゲーションの指定
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 header-fixed__nav 固定ナビゲーション
-------------------------------------------------- */
.header-nav {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
}
.header-nav ul {
  display: flex;
  justify-content: center;
  position: relative;
}
.header-nav ul .menu-item {
  margin-right: 5%;
}
.header-nav ul .menu-item a {
  display: block;
  font-size: 14px;
  transition: all 0.3s;
  color: #fafafa;
  position: relative;
  line-height: 60px;
}
.header-nav ul .menu-item a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: 16px;
}
.header-nav ul .menu-item a:hover::before {
  transform: scale(1, 1);
}
.header-nav ul .menu-item_arrow {
  margin-right: 5%;
}
.header-nav ul .menu-item_arrow > a {
  display: block;
  font-size: 14px;
  transition: all 0.3s;
  color: #fafafa;
  position: relative;
  line-height: 60px;
}
.header-nav ul .menu-item_arrow > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: 16px;
}
.header-nav ul .menu-item_arrow > a:hover::before {
  transform: scale(1, 1);
}
.header-nav ul .menu-item_arrow > a::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -16px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fafafa;
  border-right: 2px solid #fafafa;
  transform: rotate(45deg);
}
.header-nav ul .menu-item_arrow > a:hover::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fafafa;
  border-right: 2px solid #fafafa;
  transition: all 0.3s;
  transform: rotate(135deg);
}
.header-nav ul .menu-item_arrow > a::after {
  top: 26px;
}
.header-nav .sub-menu {
  position: absolute;
  top: 60px;
  left: 0;
  height: 40px;
  background-color: #555;
  width: 100%;
  display: flex;
  justify-content: center;
}
.header-nav .sub-menu .menu-subitem {
  margin-right: 5%;
}
.header-nav .sub-menu .menu-subitem a {
  color: #fafafa;
  position: relative;
  font-size: 14px;
  position: relative;
  line-height: 40px;
}
.header-nav .sub-menu .menu-subitem a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: 8px;
}
.header-nav .sub-menu .menu-subitem a:hover::before {
  transform: scale(1, 1);
}

/* --------------------------------------------------
 category-nav ブログカテゴリーナビ
-------------------------------------------------- */
.category-nav {
  max-width: 976px;
  margin: 0 auto;
  justify-content: center;
  margin: 0 auto 48px auto;
}
.category-nav__list {
  display: flex;
  height: 80px;
}
@media screen and (max-width: 1024px) {
  .category-nav__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    height: 100%;
  }
}
.category-nav__item {
  width: 50%;
  text-align: center;
  border: 1px solid #cecece;
  transition: 0.3s;
  padding: 8px;
  background-color: #fafafa;
}
.category-nav__item:hover {
  background-color: #555;
  color: #fafafa;
}
.category-nav__item > a {
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  position: relative;
}
.category-nav__item > a:hover > .category-nav__link-icon {
  filter: brightness(0) saturate(100%) invert(99%) sepia(32%);
}
.category-nav__item > a:hover > .category-nav__text {
  color: #fafafa;
}
.category-nav__icon {
  width: 32px;
  height: 32px;
}
.category-nav__link-icon {
  margin-bottom: 8px;
}
.category-nav__text {
  color: #555;
  font-size: 14px;
}
@media screen and (max-width: 1024px) {
  .category-nav__text {
    font-size: 1.2rem;
  }
}
.category-nav .style-change {
  background-color: #555;
}
.category-nav .style-change > .category-nav__link-icon {
  filter: brightness(0) saturate(100%) invert(99%) sepia(32%);
}
.category-nav .style-change > .category-nav__text {
  color: #fafafa;
}

/* --------------------------------------------------
 header-single__nav singleページ用固定ナビゲーション
-------------------------------------------------- */
.header-single-nav {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
}
.header-single-nav ul {
  display: flex;
  justify-content: center;
  position: relative;
}
.header-single-nav ul .menu-item {
  margin-right: 5%;
}
.header-single-nav ul .menu-item a {
  display: block;
  font-size: 14px;
  transition: all 0.3s;
  color: #fafafa;
  position: relative;
  line-height: 60px;
}
.header-single-nav ul .menu-item a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: 16px;
}
.header-single-nav ul .menu-item a:hover::before {
  transform: scale(1, 1);
}
.header-single-nav ul .menu-item_arrow {
  margin-right: 5%;
}
.header-single-nav ul .menu-item_arrow > a {
  display: block;
  font-size: 14px;
  transition: all 0.3s;
  color: #fafafa;
  position: relative;
  line-height: 60px;
}
.header-single-nav ul .menu-item_arrow > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: 16px;
}
.header-single-nav ul .menu-item_arrow > a:hover::before {
  transform: scale(1, 1);
}
.header-single-nav ul .menu-item_arrow > a::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -16px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fafafa;
  border-right: 2px solid #fafafa;
  transform: rotate(45deg);
}
.header-single-nav ul .menu-item_arrow > a:hover::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fafafa;
  border-right: 2px solid #fafafa;
  transition: all 0.3s;
  transform: rotate(135deg);
}
.header-single-nav ul .menu-item_arrow > a::after {
  top: 26px;
}
.header-single-nav .sub-menu {
  position: absolute;
  top: 60px;
  left: 0;
  height: 40px;
  background-color: #555;
  width: 100%;
  display: flex;
  justify-content: center;
}
.header-single-nav .sub-menu .menu-subitem {
  margin-right: 5%;
}
.header-single-nav .sub-menu .menu-subitem a {
  color: #fafafa;
  position: relative;
  font-size: 14px;
  position: relative;
  line-height: 40px;
}
.header-single-nav .sub-menu .menu-subitem a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: 8px;
}
.header-single-nav .sub-menu .menu-subitem a:hover::before {
  transform: scale(1, 1);
}

/* ================================== 以下 スマホ画面指定 ================================== */
/* --------------------------------------------------
 header-mobile__nav スマホ用ナビゲーション
-------------------------------------------------- */
.header-mobile__nav {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------
 bottom_nav スマホ用ボトムナビゲーション
-------------------------------------------------- */
.bottom-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 5px 0;
  background-color: rgba(85, 85, 85, 0.9);
  z-index: 999;
}
.bottom-nav .bottom-menu {
  display: flex;
  justify-content: space-between;
}
.bottom-nav .bottom-menu > li {
  width: 20%;
  text-align: center;
}
.bottom-nav .bottom-menu > li > a {
  display: block;
  color: #fafafa;
  padding-top: 4px;
  font-size: 12px;
}
.bottom-nav .size {
  font-size: 2.5rem;
  margin-bottom: 4px;
}
.bottom-nav span {
  display: block;
}

/* --------------------------------------------------
 scroll-nav スマホ用スクロールナビゲーション
-------------------------------------------------- */
.scroll-menu {
  position: relative;
  background-color: rgba(85, 85, 85, 0.9);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.scroll-menu::-webkit-scrollbar-track {
  background-color: #cecece;
}
.scroll-menu__list {
  display: flex;
  justify-content: space-between;
  width: -moz-max-content;
  width: max-content;
  padding: 6px;
  margin: 0 auto;
  padding-right: 25px;
}
.scroll-menu__list:last-child {
  padding-right: 12px;
}
.scroll-menu__list--about {
  min-width: 350px;
}
.scroll-menu__item-about {
  padding: 0 12px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  display: table-cell;
  border-right: 0.5px solid #cecece;
  box-sizing: border-box;
}
.scroll-menu__item-about:last-child {
  border: none;
  padding-right: 0;
}
.scroll-menu__item-works {
  width: 100%;
  padding: 0 16px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  display: table-cell;
  border-right: 0.5px solid #cecece;
  box-sizing: border-box;
}
.scroll-menu__item-works:last-child {
  border: none;
  padding-right: 0;
}
.scroll-menu__item-blog {
  width: 100%;
  padding: 0 16px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  display: table-cell;
  border-right: 0.5px solid #cecece;
  box-sizing: border-box;
}
.scroll-menu__item-blog:last-child {
  border: none;
  padding-right: 0;
}
.scroll-menu a {
  display: inline-block;
  color: #fafafa;
  font-size: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
  letter-spacing: 0.1em;
}

/*===================================================
 c-sidenav.scss
 サイドナビゲーションの指定
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 side-left サイドナビ 左側 指定
-------------------------------------------------- */
.side-left {
  position: fixed;
  top: 50%;
  left: 24px;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1024px) {
  .side-left {
    display: none;
  }
}
.side-left__sns-list {
  writing-mode: vertical-rl;
  display: flex;
  flex-wrap: wrap;
  width: 16px;
}
.side-left__sns-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  transition: 0.6s;
}
.side-left__sns-item:hover {
  transform: scale(1.3);
}
.side-left__text-link {
  font-size: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
  color: #555;
  margin-bottom: 8px;
}
.side-left__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.side-left.is-fixed {
  position: fixed;
  top: 50%;
  left: 1.5%;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------
 side-right サイドナビ 右側 指定
-------------------------------------------------- */
.side-right {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  text-decoration: none;
  transform: rotate(90deg);
  font-size: clamp(1rem, 0.8666666667rem + 0.4166666667vw, 1.4rem);
  line-height: 1.5rem;
  color: #555;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
@media screen and (max-width: 767px) {
  .side-right {
    right: 0px;
  }
}
.side-right::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
.side-right__link {
  color: #555;
  transition: 0.6s;
}
.side-right__link:hover {
  transform: scale(1.5);
}

/*===================================================
 search.scss
 検索フォーム
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 search 検索フォーム
-------------------------------------------------- */
.searchform {
  padding: 0;
  margin: 0 10px 0 0;
  display: flex;
  z-index: 1000;
}
@media screen and (max-width: 1024px) {
  .searchform {
    display: none;
  }
}
.searchform input[type=text] {
  display: block;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  height: 40px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background-color: #fafafa;
}
.searchform input[type=submit] {
  vertical-align: top;
  border: none;
  background: url("../../images/ico/ico_search-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: 40px;
  padding: 4px 16px;
  background-color: #555;
  transition: 0.3s;
}
.searchform input[type=submit]:hover {
  background-color: #878787;
}

/* --------------------------------------------------
 ブログナビ 検索フォーム
-------------------------------------------------- */
.blog-nav-search .searchform input[type=text] {
  width: 100%;
}

/* --------------------------------------------------
 search-wrap スマホ用検索フォーム
-------------------------------------------------- */
/*========= 検索窓を開くための虫眼鏡ボタン設定 ===========*/
.search-open-btn {
  position: absolute;
  right: 16px;
  background: url("../../images/ico/ico_search-white.svg") no-repeat center; /*虫眼鏡アイコンを背景に表示*/
  width: 48px;
  height: 48px;
  background-size: 24px 24px;
  cursor: pointer;
}

/* ========= 検索窓の設定 =============== */
/*==検索窓背景のエリア*/
.search-wrap {
  display: none;
  position: fixed; /*固定配置にして*/
  top: 0;
  left: 0;
  z-index: -1; /*最背面に設定*/
  opacity: 0; /*透過を0に*/
  transition: all 0.4s; /*transitionを使ってスムースに現れる*/
  width: 100%;
  height: 100vh;
  /*ボタンクリック後、JSで.search-wrapに panelactive クラスが付与された後の見た目*/
  /*==検索フォームの設定*/
}
.search-wrap.panelactive {
  opacity: 1; /*不透明に変更*/
  z-index: 0; /*全面に出現*/
  line-height: 0;
  background: rgba(85, 85, 85, 0.85);
  /*中の要素を天地中央揃えにする設定*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-wrap__inner {
  display: flex;
}
.search-wrap__input {
  -webkit-appearance: none; /*SafariやChromeのデフォルトの設定を無効*/
  outline: none;
  cursor: pointer; /*カーソルを指マークに*/
}
.search-wrap__input[type=text] {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: none;
  transition: all 0.5s;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
}
.search-wrap__input[type=text]:focus {
  background: #fff;
}
.search-wrap__submit {
  background: url("../../images/ico/ico_search-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: #555;
  background-size: 24px 24px;
  border: none;
  width: 56px;
  height: 56px;
  cursor: pointer;
}

/*==検索窓のエリア*/
.search-wrap .search-area {
  display: none; /*検索窓のエリアは、はじめ非表示*/
}

/* ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後 */
.search-wrap.panelactive .search-area {
  display: block; /*検索窓エリアを表示*/
  width: 80%;
  position: relative;
}

/*======= 閉じるための×ボタン ========*/
.search-close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 2;
  cursor: pointer;
  width: 56px;
  height: 56px;
}
.search-close-btn__border {
  display: inline-block;
  position: absolute;
  top: 50;
  right: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
}
.search-close-btn__border:nth-last-of-type(1) {
  top: 15%;
  right: 8px;
  transform: translateY(6px) rotate(-135deg);
  width: 50%;
}
.search-close-btn__border:nth-last-of-type(2) {
  top: 35%;
  right: 8px;
  transform: translateY(-6px) rotate(135deg);
  width: 50%;
}

.search-none__text {
  margin-bottom: 32px;
}
.search-none .searchform {
  width: 400px;
  margin: 0 auto;
}
.search-none input[type=text] {
  height: 48px;
  border: 1px solid #cecece;
  padding: 0 16px;
}
.search-none input[type=submit] {
  vertical-align: top;
  background: url("../../images/ico/ico_search-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: 40px;
  background-color: #555;
}

/* --------------------------------------------------
 Works 絞り込み検索 指定
-------------------------------------------------- */
.px-3 {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 16px;
}

/***** 非表示：Bootstrap使用時は不要 *****/
.d-none {
  display: none;
}

/*===================================================
 heading.scss
 各ページビジュアルの定義
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 Contents-Heading ページ内コンテンツ見出し 
-------------------------------------------------- */
.contents-heading {
  font-size: clamp(2.8rem, 2.1333333333rem + 2.0833333333vw, 4.8rem);
  text-align: center;
  margin-bottom: clamp(3.2rem, 2.6666666667rem + 1.6666666667vw, 4.8rem);
  position: relative;
  font-family: "Klee One", cursive;
}
.contents-heading__main {
  position: relative;
}
.contents-heading__main::before {
  content: "";
  position: absolute;
  border-bottom: 1px solid;
  width: 40px;
  bottom: -16px;
  left: 50%;
  background-color: #707070;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .contents-heading__main::before {
    bottom: -10px;
  }
}
.contents-heading__sub {
  display: block;
  font-size: clamp(1.6rem, 1.5333333333rem + 0.2083333333vw, 1.8rem);
  padding-top: 40px;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .contents-heading__sub {
    padding-top: 24px;
  }
}
.contents-heading__side-link {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contents-heading__link {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  color: #555;
  padding: 0 24px 4px 0;
  font-weight: 300;
  border-bottom: 1px solid #cecece;
}
.contents-heading__link::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
}
.contents-heading__link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.contents-heading__link:hover::after {
  transform: scale(1, 1);
}
.contents-heading__time {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  color: #555;
  font-weight: 300;
}

/* --------------------------------------------------
 Contents-Title コンテンツ内容見出し 
-------------------------------------------------- */
.contents-title {
  text-align: center;
  position: relative;
  /* ===== 以下 リンク付きタイトルの指定 ===== */
}
.contents-title__title {
  width: clamp(30rem, 25.8rem + 13.125vw, 42.6rem);
  margin: 0 auto 32px auto;
  text-align: center;
  font-size: clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem);
  position: relative;
  font-weight: 600;
  font-family: "Klee One", cursive;
}
.contents-title__title--works {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .contents-title__title {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 767px) {
  .contents-title__title {
    width: 240px;
    margin-bottom: 24px;
  }
}
.contents-title__title::after {
  content: "";
  width: clamp(4rem, 2.1333333333rem + 5.8333333333vw, 9.6rem);
  height: 1px;
  background-color: #707070;
  position: absolute;
  top: 50%;
  left: 0;
}
.contents-title__title::before {
  content: "";
  width: clamp(4rem, 2.1333333333rem + 5.8333333333vw, 9.6rem);
  height: 1px;
  background-color: #707070;
  position: absolute;
  top: 50%;
  right: 0;
}
.contents-title__page-link {
  margin-left: auto;
  position: absolute;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 1024px) {
  .contents-title__page-link {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .contents-title__page-link {
    width: 261px;
    margin: 0 auto;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.contents-title__link {
  color: #555;
  position: relative;
  padding: 0 24px 4px 0;
  font-weight: 600;
  border-bottom: 1px solid #cecece;
}
.contents-title__link::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
}
.contents-title__link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.contents-title__link:hover::after {
  transform: scale(1, 1);
}

/*===================================================
 scroll.scss
 各ページビジュアルの定義
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 Top-Scroll Works背景スライド文字 指定 
-------------------------------------------------- */
.scroll-anime {
  overflow: hidden;
  height: 130px;
  position: absolute;
  width: 99vw;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-anime__box {
  position: relative;
  width: 100%;
  height: inherit;
}
.scroll-anime__item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  left: 0;
  top: 0;
  width: 75%;
  height: inherit;
  animation-name: scroll-anime;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.scroll-anime__item:first-child {
  animation-name: first-scroll;
}
.scroll-anime__item:nth-child(2) {
  animation-name: second-scroll;
}
@keyframes first-scroll {
  from {
    transform: translateX(4px);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes second-scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(4px);
  }
}
.scroll-anime__text {
  font-size: 5vw;
  letter-spacing: 0.2rem;
  color: #E2E2E2;
  font-weight: 600;
}

/*===================================================
 c-blog.scss
 ブログ内要素の指定
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 single.php SNSシェア / 関連記事一覧
-------------------------------------------------- */
.article-nav {
  background-color: #fafafa;
  padding: 64px 0;
}
@media screen and (max-width: 1024px) {
  .article-nav {
    padding: 48px 18px;
  }
  .article-nav:last-child {
    padding-bottom: 48px;
  }
}
.article-nav__inner {
  max-width: 768px;
  margin: 0 auto;
}

/* --------------------------------------------------
 Blog-card 共通ブログカードの指定
-------------------------------------------------- */
.blog-card {
  display: flex;
  align-items: center;
  width: calc(50% - 32px);
  height: 160px;
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
}
@media screen and (max-width: 767px) {
  .blog-card {
    border: none;
  }
}
.blog-card:nth-child(1) {
  border-top: 1px solid #cecece;
}
.blog-card:nth-child(n+3) {
  border-top: none;
}
.blog-card--category {
  width: 100%;
}
.blog-card--category:first-child {
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .blog-card--category:first-child {
    border-bottom: 1px solid #cecece;
  }
}
@media screen and (max-width: 1024px) {
  .blog-card {
    width: calc(50% - 16px);
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 16px;
    border-bottom: 1px solid #cecece;
  }
  .blog-card--category {
    width: 100%;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .blog-card {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 16px;
    width: calc(50% - 8px);
    border-top: none;
    border-bottom: 1px solid #cecece;
  }
  .blog-card--category {
    width: calc(50% - 8px);
  }
}
.blog-card__label {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .blog-card__label {
    padding-left: 0;
    border-bottom: none;
  }
}
@media screen and (max-width: 767px) {
  .blog-card__label {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    border-bottom: none;
  }
}
.blog-card__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
}
@media screen and (max-width: 1024px) {
  .blog-card__inner {
    padding: 0;
  }
}
.blog-card__thumb {
  width: 70%;
  height: auto;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .blog-card__thumb {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
  }
}
.blog-card__thumb > img {
  width: 100%;
  height: 100%;
  transition: 0.7s;
}
.blog-card__thumb > img:hover {
  transform: scale(1.2);
}
.blog-card__title {
  font-size: clamp(1.3rem, 1.2rem + 0.3125vw, 1.6rem);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .blog-card__title {
    height: 50px;
  }
}
@media screen and (max-width: 1024px) {
  .blog-card__title {
    padding-top: 0;
    min-height: 40px;
  }
}
.blog-card__title-link {
  color: #555;
  transition: 0.3s;
  font-weight: 600;
  flex-grow: 1;
}
.blog-card__title-link:hover {
  color: #818181;
}
.blog-card__category-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  flex-grow: 1;
}
.blog-card__category-link > a {
  color: #555;
  font-size: 13px;
  position: relative;
  padding-left: 24px;
}
.blog-card__category-link > a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  content: url("../../images/ico/ico_folder.svg");
  vertical-align: bottom;
}
.blog-card__category-link > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.blog-card__category-link > a:hover::before {
  transform: scale(1, 1);
}
@media screen and (max-width: 767px) {
  .blog-card__category-link > a {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .blog-card__category-link {
    flex-grow: 1;
    flex-wrap: wrap;
  }
}
.blog-card__date-box {
  text-align: right;
}
.blog-card__date {
  text-align: right;
  flex-grow: 1;
  margin-left: auto;
  padding-left: 24px;
  display: inline-block;
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  position: relative;
  color: #555;
}
.blog-card__date::before {
  position: absolute;
  top: 1px;
  left: 0;
  content: url("../../images/ico/ico_clock.svg");
}
@media screen and (max-width: 767px) {
  .blog-card__date::before {
    left: 0px;
  }
}

/* --------------------------------------------------
 Blog-Category ブログカテゴリーカード
-------------------------------------------------- */
.blog-category {
  display: flex;
  justify-content: center;
  gap: 0 64px;
}
@media screen and (max-width: 1024px) {
  .blog-category {
    justify-content: center;
  }
}
.blog-category--top {
  margin-bottom: 48px;
}
.blog-category__item {
  width: calc(50% - 32px);
}
.blog-category__item:nth-child(n+2) {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .blog-category__item {
    width: 100%;
    margin-bottom: 48px;
  }
}
.blog-category__thumb-link {
  width: 100%;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.blog-category__thumb {
  position: relative;
}
.blog-category__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  font-size: clamp(1.6rem, 1.4666666667rem + 0.4166666667vw, 2rem);
  font-weight: 300;
  color: #fafafa;
  font-family: "Klee One", cursive;
}
.blog-category__image {
  width: 100%;
  transition: 0.5s;
}
.blog-category__image:hover {
  transform: scale(1.1);
}
.blog-category__category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-grow: 1;
  gap: 16px 0;
  margin-bottom: 32px;
  height: 96px;
}
@media screen and (max-width: 1024px) {
  .blog-category__category-list {
    height: auto;
    margin-bottom: 32px;
  }
}
.blog-category__category-list--top {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .blog-category__category-list--top {
    margin-bottom: 0;
  }
}
.blog-category__category-item {
  width: calc(50% - 8px);
}
.blog-category__blog-list {
  margin-bottom: 32px;
}
@media screen and (max-width: 1024px) {
  .blog-category__blog-list {
    display: flex;
    gap: 0 16px;
    margin-bottom: 32px;
  }
}

/* --------------------------------------------------
 Blog-Affiliate アフィリエイト広告
-------------------------------------------------- */
.blog-affiliate {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 0;
  display: flex;
  gap: 0 32px;
}
@media screen and (max-width: 1024px) {
  .blog-affiliate {
    padding: 0 8px;
  }
}
@media screen and (max-width: 1024px) {
  .blog-affiliate {
    padding: 48px 18px 0 18px;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 16px;
  }
}
@media screen and (max-width: 767px) {
  .blog-affiliate {
    padding: 32px 18px 0 18px;
    margin-bottom: 0;
    gap: 16px;
  }
}
.blog-affiliate__thumb {
  width: 33.3333333333%;
}
@media screen and (max-width: 767px) {
  .blog-affiliate__thumb {
    width: calc(50% - 8px);
  }
}

/* --------------------------------------------------
 Blog-Nav ブログ内ナビゲーション
-------------------------------------------------- */
.blog-nav {
  background-color: #f4f4f4;
  /* ========= 関連キーワード ========= */
}
.blog-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px;
  display: flex;
  gap: 0 40px;
}
@media screen and (max-width: 1024px) {
  .blog-nav__inner {
    padding: 0 8px;
  }
}
@media screen and (max-width: 1024px) {
  .blog-nav__inner {
    padding: 48px 18px;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .blog-nav__inner {
    padding: 32px 18px;
    flex-wrap: wrap;
  }
}
.blog-nav__item {
  width: 33.3333333333%;
}
@media screen and (max-width: 1024px) {
  .blog-nav__item {
    width: 100%;
    margin-bottom: 24px;
  }
  .blog-nav__item:last-child {
    margin-bottom: 0;
  }
}
.blog-nav__label {
  font-size: 1.6rem;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid #cecece;
  position: relative;
  margin-bottom: 16px;
}
.blog-nav__label::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  border-bottom: 1px solid #707070;
  width: 150px;
  height: 1px;
}
.blog-nav__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 8px;
}
.blog-nav__tag-list a {
  font-size: 1.125rem;
  position: relative;
  padding: 8px;
  background-color: #878787;
  color: #fafafa;
  padding-left: 28px;
  transition: 0.3s;
}
.blog-nav__tag-list a::before {
  content: "";
  position: absolute;
  top: 27%;
  left: 0;
  background-image: url("../../images/ico/ico_tag.svg");
  width: 14px;
  height: 14px;
  margin-left: 8px;
}
.blog-nav__tag-list a:hover {
  opacity: 0.8;
}

/* --------------------------------------------------
 ブログナビ プロフィールCSS
-------------------------------------------------- */
.blog-profile__icon-profile {
  display: flex;
  gap: 0 16px;
  margin-bottom: 16px;
}
.blog-profile__text {
  font-size: 1.4rem;
}
.blog-profile__desc {
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.blog-profile__link-about {
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .blog-profile__link-about {
    text-align: center;
  }
}
.blog-profile__link {
  font-size: 1.4rem;
  color: #555;
  display: inline-block;
  position: relative;
  padding: 0 24px 4px 0;
  border-bottom: 1px solid #cecece;
  font-weight: 600;
}
.blog-profile__link::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
}
.blog-profile__link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.blog-profile__link:hover::after {
  transform: scale(1, 1);
}

/* --------------------------------------------------
 Table of Contentsプラグイン 目次のスタイリング
-------------------------------------------------- */
#toc_container {
  box-sizing: border-box;
  margin: 0 auto 48px auto;
  background-color: #fafafa;
  display: block !important;
}
#toc_container .toc_title {
  font-weight: 600;
  text-align: center;
  background-color: #555;
  color: #fafafa;
  padding: 4px 0;
}
#toc_container .toc_title a {
  display: inline-block;
  color: #fafafa;
  border-bottom: 1px solid #cecece;
  line-height: 1.75;
}
#toc_container .toc_list {
  padding: 24px;
}
#toc_container ul a {
  font-size: 14px;
  display: block;
  color: #555;
  border-bottom: 1px dotted #cecece;
  line-height: 1.75;
  transition: 0.3s;
}
#toc_container ul a:hover {
  color: #818181;
}
#toc_container .toc_list > li > a {
  border-bottom: 2px solid #cecece;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
#toc_container ul ul {
  padding: 16px 0 8px 16px;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
#toc_container li {
  margin-bottom: 14px;
}

/*===================================================
 button.scss
 ボタンのベース指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 ページ共通ボタン 優先度高 指定 
-------------------------------------------------- */
.primary-button {
  width: 320px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
}
@media screen and (max-width: 767px) {
  .primary-button {
    width: 100%;
  }
}
.primary-button__link {
  padding: 20px 24px;
  margin: 0 auto;
  color: #fafafa;
  font-size: 16px;
  background: #555;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .primary-button__link {
    z-index: 0;
  }
}
.primary-button__link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #f4f4f4;
  border: 1px solid #707070;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.5s;
}
.primary-button__link:hover {
  color: #555;
  border-color: #707070;
}
.primary-button__link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.primary-button__link:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
  top: 45%;
  right: 16px;
  border-color: #fafafa;
}
@media screen and (max-width: 767px) {
  .primary-button__link:after {
    right: 10%;
  }
}
.primary-button__link:hover::after {
  border-color: #707070;
}

/* --------------------------------------------------
 ページ共通ボタン 優先度低 指定 
-------------------------------------------------- */
.secondary-button {
  height: 40px;
  line-height: 40px;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  text-align: center;
  background-color: #878787;
  color: #fafafa;
  position: relative;
  transition: all 0.3s;
}
.secondary-button:hover {
  opacity: 0.8;
}

/* --------------------------------------------------
 お問い合わせフォーム ボタンスタイル 指定 
-------------------------------------------------- */
.form-box__button {
  width: 320px;
  height: 58px;
  margin: 0 auto;
  cursor: pointer;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  border: none;
  background-color: #555;
  color: #fafafa;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  .form-box__button {
    width: 100%;
    text-align: center;
    z-index: 0;
  }
}
.form-box__button:hover {
  background: #f4f4f4;
  border: 1px solid #cecece;
  color: #555;
}
.form-box__button[disabled] {
  background-color: #b2b2b2;
  color: #fafafa;
  cursor: not-allowed;
}

/* --------------------------------------------------
 Works セレクトボタン 指定 
-------------------------------------------------- */
.select-button {
  width: 296px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #555;
  color: #fafafa;
  position: relative;
  z-index: 1;
  margin-right: 80px;
}
.select-button:last-child {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .select-button {
    width: 100%;
  }
}
.select-button::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  right: 32px;
  top: 45%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  z-index: -1;
}
.select-button:hover::after {
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  z-index: 0;
}
.select-button__label {
  font-size: 1.6em;
  margin-bottom: 16px;
  font-weight: 600;
}
.select-button__item {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  color: #fafafa;
  font-size: 1.6em;
  text-align: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: 0.3s;
}
.select-button__item:hover {
  background: #f4f4f4;
  border: 1px solid #cecece;
  color: #555;
}

.wp-block-button {
  width: 280px;
  margin: 0 auto;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  text-align: center;
}
.wp-block-button__link {
  display: block;
  border-radius: 0;
  padding: 16px 42px;
  margin: 0 auto;
  color: #fafafa;
  font-size: 16px;
  background: #555;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .wp-block-button__link {
    z-index: 0;
  }
}
.wp-block-button__link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #f4f4f4;
  border: 1px solid #707070;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.5s;
}
.wp-block-button__link:hover {
  color: #555;
  border-color: #707070;
}
.wp-block-button__link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.wp-block-button__link:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
  top: 45%;
  right: 12%;
  border-color: #fafafa;
}
@media screen and (max-width: 767px) {
  .wp-block-button__link:after {
    right: 20%;
  }
}
.wp-block-button__link:hover::after {
  border-color: #707070;
}

/*===================================================
 form.scss
 お問い合わせフォームの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 テキスト入力フォームの指定
-------------------------------------------------- */
.form-box {
  max-width: 440px;
  margin: 40px auto 0 auto;
  display: flex;
  gap: 48px;
  flex-direction: column;
  justify-content: center;
  color: #555;
  /* --------------------------------------------------
   Label / Required ラベル / 必須の指定
  -------------------------------------------------- */
  /* --------------------------------------------------
   Input フォームラベルの指定
  -------------------------------------------------- */
  /* --------------------------------------------------
   Radio ラジオボタンの指定
  -------------------------------------------------- */
  /* デフォルトのボタン */
  /* チェック前のボタン */
  /* チェック後のボタン */
  /* --------------------------------------------------
    プライバシーポリシー チェックボックスの指定
    -------------------------------------------------- */
  /* --------------------------------------------------
   エラー エラーメッセージの指定
  -------------------------------------------------- */
}
@media screen and (max-width: 767px) {
  .form-box {
    width: 100%;
  }
}
.form-box input,
.form-box textarea,
.form-box select {
  outline: none;
}
.form-box__item--button {
  width: 280px;
  margin: 0 auto 0 auto;
}
.form-box__item--button p {
  position: relative;
}
.form-box__item--button p .wpcf7-spinner {
  position: absolute;
  top: 25%;
  right: 0;
}
.form-box .wpcf7-not-valid {
  border-bottom: 1px solid #dc3232;
}
.form-box__label {
  display: block;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 16px;
}
.form-box__required {
  margin-left: 16px;
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  padding: 2px;
  color: #dc3232;
}
.form-box__form {
  width: 424px;
  height: 32px;
  letter-spacing: 0.1em;
  border: transparent;
  border-bottom: 1px solid #a7a7a7;
  background-color: transparent;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  padding: 0 8px 8px;
}
@media screen and (max-width: 767px) {
  .form-box__form {
    width: 100%;
    padding: 0;
  }
}
.form-box__form--select {
  width: 440px;
  color: #555;
  padding-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .form-box__form--select {
    width: 100%;
    padding: 0;
  }
}
.form-box__form--textarea {
  border: 1px solid #a7a7a7;
  width: 416px;
  height: 176px;
  padding: 12px;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  resize: none;
}
@media screen and (max-width: 767px) {
  .form-box__form--textarea {
    width: 94%;
    padding: 8px;
  }
}
.form-box .wpcf7-list-item.first {
  margin: 0;
}
.form-box .wpcf7-list-item-label {
  cursor: pointer;
  display: flex;
}
.form-box input[type=radio] {
  opacity: 0; /* デフォルトのボタンを非表示 */
  position: absolute;
}
.form-box .wpcf7-list-item-label::before {
  background: transparent;
  border: 1px solid #333;
  border-radius: 100%; /* ラジオボタンっぽく丸くする */
  content: "";
  height: 16px;
  margin-bottom: auto;
  margin-right: 0.5em;
  margin-top: auto;
  transition: background-color 0.5s; /* 色をじんわり変化させる */
  width: 16px;
}
.form-box input[type=radio]:checked + .wpcf7-list-item-label::before {
  background-color: #555; /* チェック後の中心の色 */
  box-shadow: inset 0 0 0 3px #f4f4f4; /* 中心の色のスタイル */
}
.form-box__pribacypolicy .wpcf7-list-item-label::before, .form-box__pribacypolicy .wpcf7-list-item-label::after {
  display: none;
}
.form-box__pribacypolicy .wpcf7-list-item > label {
  display: flex;
  align-items: center;
}
.form-box__pribacypolicy .wpcf7-list-item {
  margin-left: 0;
}
.form-box__pribacypolicy input[type=checkbox] {
  margin: 0 16px 0 0;
  width: 16px;
  height: 16px;
}
.form-box__pribacy-link {
  color: #555;
  border-bottom: 1px solid #cecece;
  transition: 0.3s;
}
.form-box__pribacy-link:hover {
  color: #818181;
}
.form-box .error {
  width: 100%;
  padding: 0;
  display: inline-block;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  color: #555;
  box-sizing: border-box;
}

/*===================================================
 visual.scss
 各ページビジュアルの定義
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
.pkz {
  width: 100%;
  overflow: auto;
  background-color: #fafafa;
}
@media screen and (max-width: 1024px) {
  .pkz {
    background-color: #fafafa;
  }
}
.pkz__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  white-space: pre;
  overflow-x: auto;
}
@media screen and (max-width: 1024px) {
  .pkz__inner {
    padding: 0 8px;
  }
}
@media screen and (max-width: 1024px) {
  .pkz__inner {
    overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
    padding: 10px 18px;
  }
  .pkz__inner::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .pkz__inner::-webkit-scrollbar-track {
    background-color: #f4f4f4;
  }
  .pkz__inner::-webkit-scrollbar-thumb {
    background-color: #555;
  }
}
.pkz__inner .fa-sharp {
  padding: 0 24px;
}
@media screen and (max-width: 1024px) {
  .pkz__inner .fa-sharp {
    padding: 0 12px;
  }
}
.pkz__inner span {
  font-size: 14px;
  color: #555;
}
@media screen and (max-width: 1024px) {
  .pkz__inner span {
    font-size: 12px;
  }
}
.pkz__inner span a span {
  border-bottom: 1px solid #cecece;
  transition: 0.3s;
}
.pkz__inner span a span::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.pkz__inner span a span:hover {
  color: #818181;
}

/*===================================================
 slider.scss
 カルーセル・スライドショーの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
  Prev / Next ボタンデザイン
-------------------------------------------------- */
.swiper-button-prev,
.swiper-button-next {
  width: 48px;
  height: 48px;
  background-color: rgba(85, 85, 85, 0.65);
  cursor: pointer;
  transition: 0.3s;
  top: 40%;
}
@media screen and (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 40px;
    height: 40px;
    top: 40%;
  }
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(85, 85, 85, 0.9);
}

.swiper-button-prev {
  left: 0;
}
.swiper-button-prev::after {
  content: "";
  background-image: url("/images/ico/ico_slide-arrow.svg");
  width: 12px;
  height: 22px;
}
@media screen and (max-width: 767px) {
  .swiper-button-prev::after {
    background-image: url("/images/ico/ico_slide-arrow_sp.svg");
    width: 9px;
    height: 16px;
  }
}

.swiper-button-next {
  right: 0;
}
.swiper-button-next::after {
  content: "";
  background-image: url("/images/ico/ico_slide-arrow.svg");
  transform: rotate(180deg);
  width: 12px;
  height: 22px;
}
@media screen and (max-width: 767px) {
  .swiper-button-next::after {
    background-image: url("/images/ico/ico_slide-arrow_sp.svg");
    width: 9px;
    height: 16px;
  }
}

/* --------------------------------------------------
  swiper-pagination スワイプボタンデザイン
-------------------------------------------------- */
.swiper-pagination > .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgb(97, 97, 97);
  background-color: inherit;
}
.swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #555;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 12px;
}

/* --------------------------------------------------
  自動画像カルーセル about.html
-------------------------------------------------- */
/* スライダーのwrapper */
.loop-swiper {
  z-index: -1000;
  margin-bottom: 80px;
}
.loop-swiper__wrapper > .wp-block-group__inner-container {
  transition-timing-function: linear;
  width: 100%;
  display: flex;
}
.loop-swiper__item {
  max-width: 360px;
  height: auto;
  margin-right: 32px;
}
@media screen and (max-width: 767px) {
  .loop-swiper__item {
    width: 240px;
    height: 240px;
    margin-right: 16px;
  }
}
.loop-swiper__item:nth-child(even) {
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .loop-swiper__item:nth-child(even) {
    margin-top: 24px;
  }
}

/* --------------------------------------------------
  カードスライド about.html udemy講座一覧
-------------------------------------------------- */
.card-slide {
  width: 100%;
  margin: 0 auto;
  z-index: 0;
  overflow: hidden;
  position: relative;
  height: auto;
  padding-bottom: 40px;
  box-sizing: content-box;
}
@media screen and (max-width: 767px) {
  .card-slide {
    width: 100%;
    height: auto;
    padding-bottom: 40px;
  }
}
.card-slide__item {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .card-slide__item {
    width: 50%;
  }
}
.card-slide__label {
  background-color: #555;
  min-height: 72px;
  min-height: 72px;
  padding: 12px;
  color: #fafafa;
  font-size: 1.4rem;
  line-height: 1.5;
}
.card-slide__image {
  width: 100%;
}
.card-slide .swiper-pagination {
  bottom: 0;
}

.metaslider {
  position: relative;
}
.metaslider .caption-wrap {
  height: 38px;
}

/*===================================================
 pagination.scss
 ページネーションの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
  Blog ページネーション 指定
-------------------------------------------------- */
.pagination {
  margin-top: 48px;
  list-style: none;
  display: flex;
  justify-content: center;
  transition: 0.3s;
  background-color: #f4f4f4;
}
.pagination .page-numbers {
  display: block;
  text-decoration: none;
  color: #555;
  border: 1px solid #cecece;
  padding: 20px;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  transition: 0.5s;
}
.pagination .page-numbers:hover {
  color: #fafafa;
  background-color: #555;
}
@media screen and (max-width: 767px) {
  .pagination .page-numbers {
    padding: 16px;
  }
}
.pagination .current {
  background-color: #555;
  color: #fafafa;
}

/*===================================================
 c-accordion.scss
 アコーディオンメニューの指定
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 Accordion アコーディンオンナビゲーション ※ フッター #about-genre
-------------------------------------------------- */
.accordion-footer {
  width: 100%;
  margin-bottom: 32px;
  transition: all 0.5s;
}
.accordion-footer.open {
  transform: translateZ(0);
}
.accordion-footer .menu-item {
  border-bottom: 1px solid #cecece;
  margin-bottom: 16px;
}
.accordion-footer .menu-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.accordion-footer .menu-item > a {
  position: relative;
  padding: 8px 0;
  color: #fafafa;
  display: block;
  font-size: 14px;
}
.accordion-footer .menu-item > a:first-of-type {
  color: #fafafa;
  position: relative;
  padding-right: 2em;
}
.accordion-footer .menu-item > a::after, .accordion-footer .menu-item > a::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 10px;
  height: 1px;
  background-color: #fafafa;
  transition: 0.2s;
}
.accordion-footer .menu-item > a::after {
  transform: rotate(90deg);
}
.accordion-footer .menu-item > a.open::before {
  transform: rotate(0deg);
}
.accordion-footer .menu-item > a.open::after {
  background: transparent;
}
.accordion-footer .menu-item > a.open:first-of-type {
  color: #fafafa;
}
.accordion-footer .sub-menu {
  display: none;
  padding: 20px;
}
.accordion-footer .sub-menu .menu-subitem {
  padding: 0;
  margin-bottom: 20px;
}
.accordion-footer .sub-menu .menu-subitem:last-child {
  margin-bottom: 0;
}
.accordion-footer .sub-menu > li > a {
  color: #fafafa;
  font-size: 14px;
  padding-left: 16px;
  position: relative;
}
.accordion-footer .sub-menu > li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  background-color: #fafafa;
}

/* --------------------------------------------------
 Accordion アコーディンオンナビゲーション ※ ブログ
-------------------------------------------------- */
.accordion-blog {
  width: 100%;
  margin-bottom: 32px;
  transition: all 0.5s;
}
.accordion-blog:last-child {
  margin-bottom: 0;
}
.accordion-blog.open {
  transform: translateZ(0);
}
.accordion-blog .menu-item {
  border-bottom: 1px solid #cecece;
  margin-bottom: 16px;
}
.accordion-blog .menu-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.accordion-blog .menu-item > a {
  position: relative;
  padding: 8px 0;
  color: #555;
  display: block;
  font-size: 14px;
}
.accordion-blog .menu-item > a:hover {
  transition: 0.3s;
}
.accordion-blog .menu-item > a:hover:hover {
  color: #818181;
}
.accordion-blog .menu-item > a:first-of-type {
  color: #555;
  position: relative;
  padding-bottom: 16px;
}
.accordion-blog .menu-item > a::after, .accordion-blog .menu-item > a::before {
  display: block;
  content: "";
  position: absolute;
  top: 40%;
  right: 0;
  right: 20px;
  margin: auto;
  width: 10px;
  height: 1px;
  background-color: #555;
  transition: 0.2s;
}
.accordion-blog .menu-item > a::after {
  transform: rotate(90deg);
}
.accordion-blog .menu-item > a.open::before {
  transform: rotate(0deg);
}
.accordion-blog .menu-item > a.open::after {
  background: transparent;
}
.accordion-blog .menu-item > a.open:first-of-type {
  color: #555;
}
.accordion-blog .sub-menu {
  display: none;
}
.accordion-blog .sub-menu .menu-subitem {
  padding: 0;
  margin-bottom: 20px;
}
.accordion-blog .sub-menu .menu-subitem:last-child {
  margin-bottom: 0;
}
.accordion-blog .sub-menu > li > a {
  color: #555;
  font-size: 14px;
  padding-left: 8px;
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid #cecece;
}
.accordion-blog .sub-menu > li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  background-color: #fafafa;
}
.accordion-blog .sub-menu > li > a:hover {
  transition: 0.3s;
}
.accordion-blog .sub-menu > li > a:hover:hover {
  color: #818181;
}

/*===================================================
 c-tab.scss
 タブメニューの指定
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 WordPress WPTabプラグインCSS
-------------------------------------------------- */
#sp-wp-tabs-wrapper_686.sp-tab__lay-default > ul li.sp-tab__nav-item {
  width: 33.3333333333%;
  margin-top: 0;
  border-bottom: 1px solid #cecece;
}
@media screen and (max-width: 767px) {
  #sp-wp-tabs-wrapper_686.sp-tab__lay-default > ul li.sp-tab__nav-item {
    width: 50%;
    margin-bottom: 8px;
  }
}

#sp-wp-tabs-wrapper_686 .sp-tab__nav {
  display: flex;
  align-items: center;
  margin-bottom: 48px;
}
#sp-wp-tabs-wrapper_686.sp-tab__nav-link {
  border: 2px solid #707070;
}
#sp-wp-tabs-wrapper_686 .sp-tab__tab_title {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  transition: 0.3s;
}
#sp-wp-tabs-wrapper_686 .sp-tab__tab_title > img {
  margin-right: 16px;
}
#sp-wp-tabs-wrapper_686 .sp-tab__tab_title > span {
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  #sp-wp-tabs-wrapper_686 .sp-tab__tab_title > span {
    font-size: 14px;
  }
}
#sp-wp-tabs-wrapper_686 .sp-tab__nav-link .sp-tab__tab_title:hover {
  color: #818181 !important;
}
#sp-wp-tabs-wrapper_686 .sp-tab__nav-link .sp-tab__tab_title:hover img {
  filter: invert(53%) sepia(2%) saturate(3%) hue-rotate(342deg) brightness(95%) contrast(93%);
}

#sp-wp-tabs-wrapper_686 .sp-tab__nav-tabs .sp-tab__nav-item.show .sp-tab__nav-link,
#sp-wp-tabs-wrapper_686.sp-tab__lay-default ul li label.sp-tab__active {
  border-bottom: 2px solid #707070;
}
#sp-wp-tabs-wrapper_686 .sp-tab__nav-tabs .sp-tab__nav-item.show .sp-tab__nav-link .sp-tab__tab_title > span,
#sp-wp-tabs-wrapper_686.sp-tab__lay-default ul li label.sp-tab__active .sp-tab__tab_title > span {
  font-weight: 600;
}

.sp-tab-content {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}
@media screen and (max-width: 1024px) {
  .sp-tab-content {
    gap: 16px;
  }
}

ul.tab li {
  /*タブ部分*/
  float: left;
  margin-right: 10px;
}

ul.tab li.active a {
  /*選択中のタブ*/
  color: #333;
  font-weight: bold;
}

.tab_area {
  /*切り替え部分非表示*/
  display: none;
}

.tab_content {
  /*内容*/
  width: 300px; /*幅*/
  clear: both;
  overflow: hidden;
}

.tab_content ul li {
  /*内容のリスト表示*/
  clear: both; /*画像有りの場合*/
}

.tab_content ul li img {
  /*リスト内画像*/
  float: left;
  margin: 0 10px 10px 0;
}

/* --------------------------------------------------
 Tab タブメニュー
-------------------------------------------------- */
.tab {
  /* //////////// タブ内エリア //////////// */
}
.tab__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}
.tab__list--top-blog {
  justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  .tab__list {
    flex-wrap: wrap;
    gap: 16px 0;
    margin-bottom: 24px;
  }
}
.tab__item {
  width: 50%;
  text-align: center;
  border-bottom: 1px solid #cecece;
}
.tab__item--two-tab {
  width: 50%;
}
.tab__item--three-tab {
  width: 33.3333333333%;
}
@media screen and (max-width: 767px) {
  .tab__item {
    width: 50%;
  }
}
.tab__icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: baseline;
}
.tab__link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.2rem, 1.0666666667rem + 0.4166666667vw, 1.6rem);
  padding-bottom: 4px;
  color: #555;
  position: relative;
}
.tab__link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  border-color: #707070;
  bottom: -2px;
}
.tab__link:hover::before {
  transform: scale(1, 1);
}
.tab__item.active .tab__link {
  font-weight: 600;
  padding-top: 2px;
  border-bottom: 2px solid #707070;
  pointer-events: none;
}
.tab__area {
  display: none; /*はじめは非表示*/
  opacity: 0; /*透過0*/
}
.tab__area--pagination {
  display: flex;
}
.tab__area.is-active {
  display: block; /*表示*/
  animation-name: tabAnime;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes tabAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*===================================================
 sns.scss
 snsアイコン・シェアボタンの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
.sns-menu {
  display: flex;
  justify-content: center;
  gap: 0 24px;
  margin-bottom: 32px;
}
.sns-menu .size {
  font-size: 3rem;
  color: #fafafa;
  transition: 0.5s;
}
.sns-menu .size:hover {
  transform: scale(1.3);
}

/* --------------------------------------------------
 SNSシェアボタンの指定
-------------------------------------------------- */
.sns-share {
  margin-bottom: 48px;
}
.sns-share__heading {
  font-size: clamp(1.6rem, 1.4666666667rem + 0.4166666667vw, 2rem);
  margin-bottom: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  font-family: "Klee One", cursive;
}
.sns-share__heading::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #cecece;
  margin-left: 32px;
}
.sns-share__heading::before {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #cecece;
  margin-right: 32px;
}
.sns-share__list {
  display: flex;
  gap: 16px 16px;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .sns-share__list {
    flex-wrap: wrap;
    gap: 16px 16px;
    justify-content: flex-start;
  }
}
.sns-share__item {
  width: 16.6666666667%;
  box-sizing: border-box;
  text-align: center;
  background-color: #555;
}
@media screen and (max-width: 1024px) {
  .sns-share__item {
    width: calc(50% - 8px);
  }
}
.sns-share__link {
  padding: 6px 12px;
  border: 1px solid #555;
  transition: 0.5s;
}
.sns-share__link:hover {
  background-color: #fafafa;
  border: 1px solid #fafafa;
  color: #555;
}
.sns-share__link:hover > i, .sns-share__link:hover span, .sns-share__link:hover div {
  color: #fafafa;
}
.sns-share__link--twitter:hover {
  background-color: #55acee;
}
.sns-share__link--facebook:hover {
  background-color: #3b5998;
}
.sns-share__link--line:hover {
  background-color: #25af00;
}
.sns-share__link--hatebu:hover {
  background-color: #00a5de;
}
.sns-share__link--pinterest:hover {
  background-color: #e7001a;
}
.sns-share__link--pocket:hover {
  background-color: #f03e51;
}
.sns-share__icon {
  font-size: 20px;
  margin-bottom: 8px;
  color: #fafafa;
}
.sns-share__icon--font {
  line-height: 1;
}
.sns-share__label {
  display: block;
  font-size: 12px;
  color: #fafafa;
}

/*===================================================
 works.scss
 worksページの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
.works-contents {
  /* --------------------------------------------------
   各種見出し
  -------------------------------------------------- */
  /* --------------------------------------------------
   引用 / テキスト関連
  -------------------------------------------------- */
  /* --------------------------------------------------
   テーブル
  -------------------------------------------------- */
  /* --------------------------------------------------
   リスト
  -------------------------------------------------- */
  /* --------------------------------------------------
   画像 / 動画
  -------------------------------------------------- */
  /* 画像中央寄せ */
  /* --------------------------------------------------
  ボタン
  -------------------------------------------------- */
}
.works-contents h2 {
  font-size: clamp(1.8rem, 1.6666666667rem + 0.4166666667vw, 2.2rem);
  padding: 12px 12px;
  margin-bottom: 24px;
  margin-top: 56px;
  border-bottom: 1px solid #cecece;
  border-left: 4px solid #707070;
}
@media screen and (max-width: 767px) {
  .works-contents h2 {
    margin-top: 48px;
  }
}
.works-contents h3 {
  padding: 12px 0 12px 8px;
  border-bottom: 2px solid #cecece;
  margin: 40px 0 16px 0;
  font-size: clamp(1.8rem, 1.7333333333rem + 0.2083333333vw, 2rem);
  position: relative;
}
.works-contents h3::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 120px;
  height: 2px;
  background-color: #707070;
}
.works-contents h4 {
  font-size: clamp(1.6rem, 1.5333333333rem + 0.2083333333vw, 1.8rem);
  border-left: 4px solid #707070;
  padding: 6px 8px 6px 8px;
  margin: 32px 0 16px 0;
}
.works-contents h5 {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin: 24px 0 8px 0;
}
.works-contents blockquote {
  border-left: 1.5px solid #cecece;
  padding: 8px 16px;
  margin-bottom: 24px;
}
.works-contents blockquote:last-of-type {
  margin-bottom: 0;
}
.works-contents blockquote p {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
}
.works-contents strong {
  font-weight: 600;
}
.works-contents p {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 8px;
  line-height: 1.5;
}
.works-contents .wp-block-spacer {
  height: 48px !important;
  margin: 0;
}
.works-contents a {
  display: inline-block;
  color: #0080ff;
  text-decoration: underline;
  transition: 0.3s;
  font-weight: 600;
  padding: 0 4px;
}
.works-contents a:hover {
  opacity: 0.6;
}
.works-contents .external-link {
  display: inline-block;
  position: relative;
}
.works-contents .external-link a {
  display: inline-block;
  padding: 0 32px 2px 4px;
}
.works-contents .external-link a::after {
  content: url("../../images/ico/ico_external-link.svg");
  position: absolute;
  top: 10%;
  right: 8px;
}
.works-contents .wp-block-table {
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .works-contents .wp-block-table {
    overflow-x: scroll;
  }
}
.works-contents table {
  width: 100%;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  border-collapse: collapse;
  background-color: #fafafa;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}
@media screen and (max-width: 767px) {
  .works-contents table {
    width: 800px;
  }
}
.works-contents table thead th {
  background-color: #555;
  color: #fafafa;
}
.works-contents table th,
.works-contents table td {
  border: 1px solid #cecece;
  padding: 10px;
}
.works-contents table a {
  color: #0080ff;
  padding-bottom: 2px;
  transition: 0.3s;
}
.works-contents table a:hover {
  opacity: 0.6;
}
.works-contents ul {
  background-color: #fafafa;
  padding: 16px 16px 16px 32px;
  padding-inline-start: 40px;
  list-style-position: inside;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  margin: 32px 0;
}
@media screen and (max-width: 767px) {
  .works-contents ul {
    padding-inline-start: 32px;
    padding: 16px 8px 16px 32px;
  }
}
.works-contents ul li {
  list-style-type: square;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
  line-height: 1.5;
}
.works-contents ul li:last-child {
  margin-bottom: 0;
}
.works-contents ul li ul {
  margin: 0;
  box-shadow: none;
  padding: 8px;
}
.works-contents ul li ul li {
  list-style-type: disc;
}
.works-contents ul li ul li ul li {
  list-style-type: circle;
}
.works-contents ol {
  background-color: #fafafa;
  padding: 16px 32px 16px 32px;
  padding-inline-start: 24px;
  list-style-position: inside;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  counter-reset: item;
  list-style-type: none;
  margin: 32px 0;
}
@media screen and (max-width: 767px) {
  .works-contents ol {
    padding-inline-start: 16px;
  }
}
.works-contents ol li {
  margin-bottom: 12px;
  line-height: 1.5;
}
.works-contents ol li:last-child {
  margin-bottom: 0;
}
.works-contents ol li::before {
  counter-increment: item;
  content: counters(item, "-") ". ";
}
.works-contents ol li ol {
  padding: 8px;
  counter-reset: 0;
  box-shadow: none;
  margin: 0;
}
.works-contents img {
  margin-bottom: 32px;
}
.works-contents img.alignright {
  display: block;
  margin: 0 0 0 auto;
}
.works-contents img.alignleft {
  display: block;
  margin: 0 auto 0 0;
}
.works-contents img.aligncenter {
  display: block;
  margin: 0 auto;
}
.works-contents .wp-block-image {
  text-align: center;
}
.works-contents .wp-block-image {
  margin: 32px auto;
}
.works-contents .wp-block-image img {
  margin-bottom: 0;
}
.works-contents .wp-block-image .wp-element-caption {
  margin-top: 0;
  text-align: center;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  padding: 12px 8px;
}
.works-contents .wp-block-columns {
  margin-bottom: 32px;
  align-items: flex-start;
  display: flex;
  gap: 32px;
}
@media screen and (max-width: 767px) {
  .works-contents .wp-block-columns {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}
.works-contents .wp-block-video {
  margin: 32px auto;
}
.works-contents .wp-block-video video {
  width: 100%;
}
.works-contents .wp-block-button {
  width: 320px;
  margin: 24px auto 32px auto;
  text-align: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .works-contents .wp-block-button {
    width: 100%;
    text-align: center;
  }
}
.works-contents .wp-block-button__link {
  display: block;
  padding: 16px 24px;
  margin: 0 auto;
  color: #fafafa;
  font-size: 16px;
  background: #555;
  position: relative;
  z-index: 1;
  transition: 0.3s;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .works-contents .wp-block-button__link {
    z-index: 0;
  }
}
.works-contents .wp-block-button__link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #f4f4f4;
  border: 1px solid #707070;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.5s;
}
.works-contents .wp-block-button__link:hover {
  color: #555;
  border-color: #707070;
}
.works-contents .wp-block-button__link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.works-contents .wp-block-button__link:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
  top: 45%;
  right: 16px;
  border-color: #fafafa;
}
@media screen and (max-width: 767px) {
  .works-contents .wp-block-button__link:after {
    right: 10%;
  }
}
.works-contents .wp-block-button__link:hover::after {
  border-color: #707070;
}

/*===================================================
 c-blog-contents.scss
 ブログパーツ
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
.blog-contents {
  max-width: 768px;
  /* --------------------------------------------------
   各種見出し
  -------------------------------------------------- */
  /* --------------------------------------------------
   引用 / テキスト関連
  -------------------------------------------------- */
  /* --------------------------------------------------
   テーブル
  -------------------------------------------------- */
  /* --------------------------------------------------
   リスト
  -------------------------------------------------- */
  /* --------------------------------------------------
   画像 / ビデオ
  -------------------------------------------------- */
  /* 画像中央寄せ */
  /* YouTube動画中央寄せ */
  /* --------------------------------------------------
   ボタン
  -------------------------------------------------- */
  /* --------------------------------------------------
   コード
  -------------------------------------------------- */
}
@media screen and (max-width: 767px) {
  .blog-contents {
    width: 100%;
  }
}
.blog-contents .wp-block-preformatted {
  width: 100%;
}
.blog-contents h2 {
  font-size: clamp(1.8rem, 1.6666666667rem + 0.4166666667vw, 2.2rem);
  padding: 16px 12px;
  background-color: #fafafa;
  margin: 48px 0 24px 0;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  border-left: 8px solid #707070;
}
.blog-contents h3 {
  padding: 12px 0 12px 8px;
  border-bottom: 2px solid #cecece;
  border-top: 2px solid #cecece;
  margin: 40px 0 16px 0;
  font-size: clamp(1.8rem, 1.7333333333rem + 0.2083333333vw, 2rem);
  position: relative;
}
.blog-contents h3::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 120px;
  height: 2px;
  background-color: #707070;
}
.blog-contents h3::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 120px;
  height: 2px;
  background-color: #707070;
}
.blog-contents h4 {
  font-size: clamp(1.7rem, 1.6666666667rem + 0.1041666667vw, 1.8rem);
  border-left: 4px solid #707070;
  padding: 6px 8px 6px 8px;
  margin: 32px 0 16px 0;
}
.blog-contents h5 {
  font-size: clamp(1.6rem, 1.6rem + 0vw, 1.6rem);
  margin: 24px 0 8px 0;
}
.blog-contents .wp-block-quote {
  border-left: 1.5px solid #cecece;
  padding: 8px 16px;
  margin-bottom: 24px;
}
.blog-contents .wp-block-quote:last-of-type {
  margin-bottom: 0;
}
.blog-contents .wp-block-quote p {
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  margin-bottom: 8px;
}
.blog-contents .wp-block-quote p:last-child {
  margin-bottom: 0;
}
.blog-contents .wp-block-quote cite {
  text-align: right;
}
.blog-contents strong {
  font-weight: 600;
}
.blog-contents p {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  line-height: 1.5;
  margin-bottom: 8px;
}
.blog-contents .wp-block-spacer {
  height: 48px !important;
  margin: 0;
}
.blog-contents a {
  display: inline-block;
  color: #0080ff;
  text-decoration: underline;
  transition: 0.3s;
  font-weight: 600;
  padding: 0 4px;
}
.blog-contents a:hover {
  opacity: 0.6;
}
.blog-contents .external-link {
  display: inline-block;
  position: relative;
}
.blog-contents .external-link a {
  display: inline-block;
  padding: 0 32px 2px 4px;
}
.blog-contents .external-link a::after {
  content: url("../../images/ico/ico_external-link.svg");
  position: absolute;
  top: 10%;
  right: 8px;
}
.blog-contents .wp-block-liquid-speech-balloon {
  margin: 24px 0;
}
.blog-contents .liquid-speech-balloon-text p {
  line-height: 1.5;
}
.blog-contents .liquid-speech-balloon-text p:last-child {
  margin-bottom: 0;
}
.blog-contents .liquid-speech-balloon-text p:first-child {
  margin-bottom: 0;
}
.blog-contents .table-wrapper {
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .blog-contents .table-wrapper {
    overflow-x: scroll;
  }
}
.blog-contents table {
  width: 100%;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  border-collapse: collapse;
  background-color: #fafafa;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}
@media screen and (max-width: 767px) {
  .blog-contents table {
    width: 800px;
  }
}
.blog-contents table th,
.blog-contents table td {
  border: 1px solid #cecece;
  padding: 10px;
}
.blog-contents table a {
  color: #0080ff;
  padding-bottom: 2px;
  transition: 0.3s;
}
.blog-contents table a:hover {
  opacity: 0.6;
}
.blog-contents .no_bullets ul li {
  list-style: none;
}
.blog-contents .no_bullets ul li a {
  padding-bottom: 0;
  border: none;
}
.blog-contents .no_bullets ul li a::after {
  content: "";
}
.blog-contents ul {
  background-color: #fafafa;
  padding: 16px 16px 16px 32px;
  padding-inline-start: 40px;
  list-style-position: inside;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  margin: 32px 0;
}
@media screen and (max-width: 767px) {
  .blog-contents ul {
    padding-inline-start: 32px;
    padding: 16px 8px 16px 32px;
  }
}
.blog-contents ul li {
  list-style-type: square;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
  line-height: 1.5;
}
.blog-contents ul li:last-child {
  margin-bottom: 0;
}
.blog-contents ul li ul {
  margin: 0;
  box-shadow: none;
  padding: 8px;
}
.blog-contents ul li ul li {
  list-style-type: disc;
}
.blog-contents ul li ul li ul li {
  list-style-type: circle;
}
.blog-contents ol {
  background-color: #fafafa;
  padding: 16px 32px 16px 32px;
  padding-inline-start: 24px;
  list-style-position: inside;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  counter-reset: item;
  list-style-type: none;
  margin: 32px 0;
}
@media screen and (max-width: 767px) {
  .blog-contents ol {
    padding-inline-start: 16px;
  }
}
.blog-contents ol li {
  margin-bottom: 12px;
  line-height: 1.5;
}
.blog-contents ol li:last-child {
  margin-bottom: 0;
}
.blog-contents ol li::before {
  counter-increment: item;
  content: counters(item, "-") ". ";
}
.blog-contents ol li ol {
  padding: 8px;
  counter-reset: 0;
  box-shadow: none;
  margin: 0;
}
.blog-contents img {
  margin-bottom: 32px;
}
.blog-contents img.alignright {
  display: block;
  margin: 0 0 0 auto;
}
.blog-contents img.alignleft {
  display: block;
  margin: 0 auto 0 0;
}
.blog-contents img.aligncenter {
  display: block;
  margin: 0 auto;
}
.blog-contents .wp-block-image {
  text-align: center;
}
.blog-contents .wp-block-image {
  margin: 32px auto;
}
.blog-contents .wp-block-image img {
  margin-bottom: 0;
}
.blog-contents .wp-block-image .wp-element-caption {
  margin-top: 0;
  text-align: center;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  padding: 12px 8px;
}
.blog-contents .video-container {
  margin: 32px auto;
}
.blog-contents .wp-block-columns {
  display: flex;
  align-items: flex-start;
  margin: 32px 0;
  gap: 32px;
}
.blog-contents .wp-block-columns .wp-block-image {
  margin: 0;
}
.blog-contents .wp-block-columns .wp-element-caption {
  margin-top: 0;
  text-align: center;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  padding: 12px 8px;
}
.blog-contents .wp-block-columns img {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .blog-contents .wp-block-columns {
    align-items: center;
    flex-direction: column;
  }
}
.blog-contents .wp-block-video {
  margin: 32px auto;
}
.blog-contents .wp-block-video video {
  width: 100%;
}
.blog-contents .wp-block-video .wp-element-caption {
  text-align: center;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  margin-top: 4px;
}
.blog-contents .wp-block-button {
  width: 320px;
  margin: 24px auto 32px auto;
  text-align: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .blog-contents .wp-block-button {
    width: 100%;
    text-align: center;
  }
}
.blog-contents .wp-block-button__link {
  display: block;
  padding: 16px 24px;
  margin: 0 auto;
  color: #fafafa;
  font-size: 16px;
  background: #555;
  position: relative;
  z-index: 1;
  transition: 0.3s;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .blog-contents .wp-block-button__link {
    z-index: 0;
  }
}
.blog-contents .wp-block-button__link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #f4f4f4;
  border: 1px solid #707070;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.5s;
}
.blog-contents .wp-block-button__link:hover {
  color: #555;
  border-color: #707070;
}
.blog-contents .wp-block-button__link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.blog-contents .wp-block-button__link:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
  top: 45%;
  right: 16px;
  border-color: #fafafa;
}
@media screen and (max-width: 767px) {
  .blog-contents .wp-block-button__link:after {
    right: 10%;
  }
}
.blog-contents .wp-block-button__link:hover::after {
  border-color: #707070;
}
.blog-contents .wp-block-code {
  margin-bottom: 32px;
  background-color: #555;
  color: #fafafa;
  padding: 16px 16px 16px 16px;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  line-height: 1.8;
  position: relative;
}
@media screen and (max-width: 767px) {
  .blog-contents .wp-block-code {
    overflow: hidden;
    overflow-x: auto;
  }
}

/*===================================================
 c-blog-article.scss
 ブログ埋め込みパーツ
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 blog-internal 内部リンク埋め込み 
-------------------------------------------------- */
.blog-internal {
  display: block;
  background-color: #fafafa;
  border: 1px solid #cecece;
  max-width: 100%;
  margin: 32px 0;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  transition: 0.3s ease-in-out;
}
.blog-internal__label {
  position: relative;
}
.blog-internal__label::before {
  font-family: FontAwesome;
  position: absolute;
  padding: 6px 12px;
  content: "\f02e  関連記事";
  background-color: #555;
  color: #fafafa;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  z-index: 1;
  font-weight: 300;
}
.blog-internal a {
  padding: 0;
  border-bottom: none;
  text-decoration: none;
}
.blog-internal:hover {
  cursor: pointer;
  opacity: 0.9;
}
.blog-internal__inner {
  display: flex;
  padding: 8px 16px 16px;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .blog-internal__inner {
    flex-wrap: wrap;
  }
}
.blog-internal__thumbnail {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .blog-internal__thumbnail {
    width: 100%;
  }
}
.blog-internal__thumbnail img {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .blog-internal__thumbnail img {
    width: 100%;
  }
}
.blog-internal__content {
  width: 80%;
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .blog-internal__content {
    width: 100%;
  }
}
.blog-internal__title {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.5;
  color: #555;
}
.blog-internal__title:hover {
  text-decoration: underline;
}
.blog-internal__excerpt {
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  font-weight: 300;
  color: #555;
  margin: 0 10px 5px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------
 blog-iframe 外部リンク埋め込み 
-------------------------------------------------- */
.blog-iframe {
  display: block;
  background-color: #fafafa;
  border: 1px solid #cecece;
  max-width: 100%;
  margin: 32px 0;
  padding: 16px;
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  transition: 0.3s ease-in-out;
  position: relative;
}
.blog-iframe a {
  padding: 0;
  border-bottom: none;
  text-decoration: none;
  display: block;
}
.blog-iframe img {
  margin-bottom: 0;
}
.blog-iframe:hover {
  cursor: pointer;
  opacity: 0.9;
}
.blog-iframe__label {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  padding: 6px 12px 6px 32px;
  background-color: #555;
  color: #fafafa;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  font-weight: 300;
}
.blog-iframe__label::before {
  font-family: FontAwesome;
  position: absolute;
  top: 23%;
  left: 12px;
  content: "\f08e";
  background-color: #555;
  color: #fafafa;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
  z-index: 1;
  font-weight: 300;
}
.blog-iframe__inner {
  display: flex;
  gap: 16px;
  white-space: inherit;
}
@media screen and (max-width: 767px) {
  .blog-iframe__inner {
    flex-wrap: wrap;
  }
}
.blog-iframe__thumbnail {
  width: 40%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .blog-iframe__thumbnail {
    width: 100%;
  }
}
.blog-iframe__thumbnail img {
  width: 100%;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .blog-iframe__thumbnail img {
    width: 100%;
  }
}
.blog-iframe__content {
  width: 80%;
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .blog-iframe__content {
    width: 100%;
  }
}
.blog-iframe__title {
  width: 100%;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.4;
  color: #555;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-iframe__title:hover {
  text-decoration: underline;
}
.blog-iframe__excerpt {
  font-size: clamp(1.2rem, 1.1333333333rem + 0.2083333333vw, 1.4rem);
  font-weight: 300;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-iframe__sitename {
  color: #555;
  font-size: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
  font-weight: 300;
  text-align: right;
}

/* --------------------------------------------------
 Layout ページ構成 Scss読み込み
-------------------------------------------------- */
/*===================================================
 header.scss
 各種ヘッダー横幅・縦幅等の指定
================================================== */
/* ⬇︎ //////////// 変数読み込み //////////// */
/* ⬆︎ //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 header-fixed__nav 固定ナビ
-------------------------------------------------- */
.header-fixed {
  width: 100%;
  margin: 0 auto;
  transition: 0.5s;
  background-color: rgba(85, 85, 85, 0.9);
  box-shadow: 5px 5px 6px rgba(65, 65, 65, 0.1);
  padding: 12px 0;
  z-index: 50;
  position: fixed;
  top: -63px;
}
.header-fixed .custom-logo-link {
  width: 152px;
  height: 48px;
  z-index: 100;
}
.header-fixed__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .header-fixed__inner {
    padding: 0 8px;
  }
}
.header-fixed.is-show {
  top: 0;
}

/* --------------------------------------------------
 header-mobile__nav スマホ用ヘッダー
-------------------------------------------------- */
.header-mobile {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  width: 100%;
  height: 56px;
  background-color: rgba(85, 85, 85, 0.9);
}
.header-mobile .custom-logo-link {
  width: 136px;
  height: 36px;
  margin: 0;
}

/* --------------------------------------------------
 header-single singleページ用固定ナビ
-------------------------------------------------- */
.header-single {
  width: 100%;
  height: auto;
  transition: 0.5s;
  left: 0;
  background-color: rgba(85, 85, 85, 0.9);
  padding: 6px 0;
  z-index: 1;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
.header-single.fixed {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
}
.header-single__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .header-single__inner {
    padding: 0 8px;
  }
}
.header-single .custom-logo-link {
  width: 152px;
  height: 48px;
  z-index: 100;
}

/*===================================================
 footer.scss
 フッターの指定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
/* --------------------------------------------------
 PC Footer PC画面用フッターの指定
-------------------------------------------------- */
.footer-pc {
  position: relative;
  background-color: #313131;
  /* //////////// ロゴの指定 //////////// */
  /* //////////// フッターナビゲーションの指定 //////////// */
  /* //////////// サブナビゲーションの指定 //////////// */
  /* //////////// コピーライトの指定 //////////// */
}
.footer-pc__inner {
  max-width: 976px;
  margin: 0 auto;
  padding: 48px 0;
}
.footer-pc .custom-logo-link {
  width: 200px;
  height: 56px;
  margin: 0 auto 48px auto;
}
.footer-pc .menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.footer-pc .menu .footer-menu {
  width: 100%;
  cursor: pointer;
}
.footer-pc .menu .footer-menu > a {
  display: inline-block;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  color: #fafafa;
  margin-bottom: 16px;
  position: relative;
}
.footer-pc .menu .footer-menu > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.footer-pc .menu .footer-menu > a:hover::before {
  transform: scale(1, 1);
}
.footer-pc .footer-submenu {
  margin-bottom: 16px;
  position: relative;
  padding-left: 16px;
}
.footer-pc .footer-submenu:last-child {
  margin-bottom: 0;
}
.footer-pc .footer-submenu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  background-color: #cecece;
}
.footer-pc .footer-submenu > a {
  display: inline-block;
  color: #fafafa;
  font-size: 14px;
  position: relative;
  line-height: 1.5;
}
.footer-pc .footer-submenu > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.footer-pc .footer-submenu > a:hover::before {
  transform: scale(1, 1);
}
.footer-pc .footer-subnav {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.footer-pc .footer-subnav > li {
  border-right: 1px solid #cecece;
  padding: 0 24px;
}
.footer-pc .footer-subnav > li:first-child {
  padding-left: 0;
}
.footer-pc .footer-subnav > li:last-child {
  border: none;
  padding-right: 0;
}
.footer-pc .footer-subnav > li > a {
  font-size: 14px;
  color: #fafafa;
  position: relative;
  display: inline-block;
}
.footer-pc .footer-subnav > li > a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.footer-pc .footer-subnav > li > a:hover::before {
  transform: scale(1, 1);
}
.footer-pc__copyright {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  color: #fafafa;
  font-weight: 300;
}
.footer-pc__copyright-text {
  display: block;
  padding: 0 4px;
  color: #fafafa;
}

/* --------------------------------------------------
 SP Footer SP画面用フッターの指定
-------------------------------------------------- */
.footer-sp {
  background-color: #313131;
  /* //////////// snsナビゲーションの指定 //////////// */
  /* //////////// サブナビゲーションの指定 //////////// */
  /* //////////// コピーライトの指定 //////////// */
}
.footer-sp__inner {
  padding: 24px 18px 64px 18px;
}
.footer-sp .custom-logo-link {
  width: 136px;
  height: 37px;
  margin: 0 auto 24px auto;
}
.footer-sp__sns-box {
  display: flex;
  justify-content: center;
  gap: 0 24px;
  margin-bottom: 32px;
}
.footer-sp__sns-icon {
  width: 32px;
  height: 32px;
  transition: 0.3s;
}
.footer-sp__sns-icon:hover {
  transform: scale(1);
}
.footer-sp .footer-subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
  gap: 16px 0;
}
.footer-sp .footer-subnav > li {
  padding-right: 24px;
}
.footer-sp .footer-subnav > li:last-child {
  padding-right: 0;
}
.footer-sp .footer-subnav > li > a {
  font-size: 14px;
  color: #fafafa;
}
.footer-sp__copyright {
  display: block;
  text-align: center;
  color: #fafafa;
  font-size: 14px;
}

/*===================================================
 base.scss
 ページ内ベース設定
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  box-sizing: border-box;
  font-family: "Noto Sans", YuGothic, "Yu Gothic", "ヒラギノ角ゴシック", "Hiragino Sans", "Arial", sans-serif;
  letter-spacing: 0.1em;
  color: #555;
}
@media screen and (min-width: 1025px) {
  body {
    min-width: 1280px;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  -o-object-fit: contain;
     object-fit: contain;
}

a {
  display: block;
  text-decoration: none;
  font-weight: 300;
}

li {
  list-style: none;
}

h1 {
  margin: 0;
  padding: 0;
}

p {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin-bottom: 8px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 300;
  letter-spacing: 4;
}
p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  p {
    line-height: 1.7;
  }
}

/* --------------------------------------------------
 ページ内 z-index指定
-------------------------------------------------- */
.container {
  position: relative;
}
@media screen and (max-width: 1024px) {
  .container {
    padding-top: 56px;
  }
}
@media screen and (max-width: 1024px) {
  .container--top {
    padding-top: 56px;
  }
}

/* --------------------------------------------------
 ページ内 各コンテンツベース余白指定
-------------------------------------------------- */
.contents {
  z-index: 1;
  background-color: #f4f4f4;
}
.contents__article {
  padding: 72px 0;
}
.contents__article--white-bg {
  background-color: #fafafa;
}
.contents__article--about {
  padding-top: 48px;
}
@media screen and (max-width: 1024px) {
  .contents__article--about {
    padding: 32px 18px;
  }
}
.contents__article--works {
  padding-top: 48px;
  background-color: #f4f4f4;
}
@media screen and (max-width: 1024px) {
  .contents__article--works {
    padding: 32px 18px;
  }
}
.contents__article--single {
  max-width: 768px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .contents__article {
    padding: 48px 18px;
  }
  .contents__article:last-child {
    padding-bottom: 48px;
  }
}
.contents__article-inner {
  max-width: 1280px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .contents__article-inner {
    padding: 0 8px;
  }
}
@media screen and (max-width: 1024px) {
  .contents__article-inner {
    padding: 0 0;
  }
}
.contents__article-inner > p {
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
}
.contents__desc {
  max-width: 976px;
  margin: 0 auto;
  font-size: clamp(1.4rem, 1.3333333333rem + 0.2083333333vw, 1.6rem);
  margin: 0 auto 40px auto;
}
@media screen and (max-width: 767px) {
  .contents__desc {
    margin: 0 auto 32px auto;
  }
}
.contents__desc--search-form {
  margin-top: 64px;
}
.contents__wrapper {
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 72px;
}
.contents__wrapper:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .contents__wrapper {
    margin-bottom: 64px;
  }
}
.contents__wrapper--about-genre {
  margin-bottom: 48px;
}
@media screen and (max-width: 767px) {
  .contents__wrapper--about-genre {
    margin-bottom: 32px;
  }
}
.contents .primary-button {
  margin-top: 40px;
}

/* --------------------------------------------------
 WordPress font-weight / linkのhover指定
-------------------------------------------------- */
.font-bold {
  font-weight: 600;
}

.border-link > a {
  display: inline-block;
  font-size: 14px;
  color: #555;
  position: relative;
  padding-right: 32px;
  border-bottom: 1px solid #707070;
  transition: 0.3s;
}
.border-link > a::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 16px;
  height: 4px;
  border-bottom: 2px solid #707070;
  border-right: 2px solid #707070;
  transform: skew(45deg);
}
.border-link > a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.border-link > a:hover {
  color: #878787;
}
.border-link > a:hover::before {
  border-bottom: 2px solid #878787;
  border-right: 2px solid #878787;
}
.border-link > a:hover::after {
  transform: scale(1, 1);
}

/* --------------------------------------------------
 WordPress flex並び替え
-------------------------------------------------- */
.is-layout-flex {
  justify-content: center;
}
.is-layout-flex--works-flex {
  margin: 40px 0;
  flex-wrap: nowrap !important;
}
@media screen and (max-width: 1024px) {
  .is-layout-flex--works-flex {
    margin: 24px 0;
  }
}

.wp-element-caption {
  text-align: right;
  padding: 8px 8px;
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .wp-element-caption {
    text-align: right;
    padding: 4px 0;
    font-size: 11px;
  }
}

.wp-block-group__inner-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* --------------------------------------------------
 WordPress 区切り線
-------------------------------------------------- */
.wp-block-separator {
  opacity: 0;
  margin-bottom: 32px;
}
.wp-block-separator--large {
  margin-bottom: 64px;
}
@media screen and (max-width: 1024px) {
  .wp-block-separator--large {
    margin-bottom: 40px;
  }
}
.wp-block-separator--works {
  opacity: 1;
  margin-top: 16px;
  margin-bottom: 40px;
}

.wp-block-image--padding-bt {
  margin-bottom: 48px;
}

.hr {
  margin: 16px 0;
  height: 1px;
  background-color: #cecece;
}

/*===================================================
 visual.scss
 各ページビジュアルの定義
================================================== */
/* //////////// 変数読み込み //////////// */
/* //////////// 変数読み込み //////////// */
.main_visual {
  position: relative;
  z-index: 100;
}
.main_visual__eye-catching > img {
  width: 100%;
  height: 100%;
}
.main_visual__text-line {
  padding-right: 64px;
  position: absolute;
  top: 40%;
  right: 64px;
  text-align: right;
  font-family: "Klee One", cursive;
  font-size: clamp(2rem, 0.8rem + 3.75vw, 5.6rem);
  color: #fafafa;
}
@media screen and (max-width: 1024px) {
  .main_visual__text-line {
    padding-right: 8px;
    right: 0;
  }
}
.main_visual__top-catch {
  display: block;
  padding-right: 120px;
  margin-bottom: 32px;
}
@media screen and (max-width: 1024px) {
  .main_visual__top-catch {
    padding-right: 64px;
    margin-bottom: 8px;
  }
}
.main_visual__bottom-catch {
  display: block;
  padding-left: 64px;
}
.main_visual__img {
  width: 100%;
  position: relative;
}
.main_visual__inner {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.main_visual .custom-logo-link {
  width: 200px;
  height: 55px;
}
.main_visual__menu {
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main_visual__menu nav {
  margin-left: auto;
}
.main_visual__menu nav ul {
  display: flex;
  justify-content: flex-end;
}
.main_visual__menu nav ul li {
  margin-right: 56px;
  font-size: clamp(1.4rem, 1.4rem + 0vw, 1.4rem);
}
.main_visual__menu nav ul li:last-child {
  margin-right: 0;
}
.main_visual__menu nav ul li a {
  color: #fafafa;
  position: relative;
}
.main_visual__menu nav ul li a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cecece;
  left: 0;
  bottom: 4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
  bottom: -4px;
}
.main_visual__menu nav ul li a:hover::before {
  transform: scale(1, 1);
}
.main_visual .page-heading {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  padding-left: 80px;
  color: #fafafa;
  line-height: 48px;
  font-family: "Klee One", cursive;
}
@media screen and (max-width: 767px) {
  .main_visual .page-heading {
    line-height: 32px;
  }
}
.main_visual .page-heading__main-heading {
  font-size: clamp(2rem, 1.0666666667rem + 2.9166666667vw, 4.8rem);
  font-weight: 300;
}
.main_visual .page-heading__sub-heading {
  font-weight: 300;
  font-size: clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem);
  position: relative;
  padding-left: 40px;
  color: #fafafa;
}
.main_visual .page-heading__sub-heading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(1.6rem, 1.0666666667rem + 1.6666666667vw, 3.2rem);
  height: 1px;
  background-color: #cecece;
}
@media screen and (max-width: 767px) {
  .main_visual .page-heading__sub-heading {
    padding-left: 24px;
  }
}
@media screen and (max-width: 767px) {
  .main_visual .page-heading {
    padding-left: 16px;
  }
}

/* --------------------------------------------------
 Mixin 使い回しパーツ Scss読み込み
-------------------------------------------------- *//*# sourceMappingURL=style.css.map */