/*********************************************/

@charset "UTF-8";

/*********************************************/



/* ======================================

  スマホ・ヘッダー

========================================= */

/* ハンバーガーメニュー・アイコンサイズ
-------------------------------------------*/
/* === ▽ スマートフォン ▽ === */
.c-iconBtn__icon {
    display: block;
    font-size: 32px;
}


/* スマホでチャッチフレーズ表示させる
-------------------------------------------*/
/* === ▽ スマートフォン ▽ === */
@media (max-width: 959px) {
  .l-header__inner .c-catchphrase {
  display: block;
  margin-top: -6px;
  margin-bottom: 5px;
  font-size: 11px;
  color: #333;
  }
  }


/**************************************** */


/* ======================================

  ヘッダー

========================================= */

/* ヘッダーナビ項目左右余白広げる
-------------------------------------------*/
.-parallel .l-header__gnav .c-gnav>li>a {
  padding: 16px 20px;
  }


/* グローバルナビゲーション・アイコン
-------------------------------------------*/
.icon-homenav {
    width: 16px;
    margin-right: 6px;
    vertical-align: middle; /* テキストとアイコンを垂直に中央揃え */
    line-height: 1.2; /* 必要に応じて調整 */
    padding-bottom: 6px;
}


.icon-pearl {
    width: 14px;
    margin-right: 6px;
    vertical-align: middle; /* テキストとアイコンを垂直に中央揃え */
    line-height: 1.2; /* 必要に応じて調整 */
    padding-bottom: 4px;
}


.icon-contact {
    width: 15px;
    margin-right: 6px;
    vertical-align: middle; /* テキストとアイコンを垂直に中央揃え */
    line-height: 1.2; /* 必要に応じて調整 */
    padding-bottom: 3px;
}


.icon-online-shop {
    width: 16px;
    margin-right: 6px;
    vertical-align: middle; /* テキストとアイコンを垂直に中央揃え */
    line-height: 1.2; /* 必要に応じて調整 */
    padding-bottom: 3px;
}


.c-gnav>.menu-item>a .ttl {
    display: block;
    font-size: 14px;
    line-height: 1.2; /* 必要に応じて調整 */
}


.c-gnav .ttl {
    color: inherit;
    line-height: 1;
    position: relative;
    z-index: 1;
}


/* グローバルナビのホバー色
-------------------------------------------*/
/* === ▽ PC ▽ === */
.c-gnav > li:hover {
    color: #CF2E92; /* 好きな色を指定 */
}


/**************************************** */


/* ======================================

  PC追従ヘッダー

========================================= */

/* 追従ヘッダー背景色
-------------------------------------------*/
/* === ▽ PC ▽ === */
.l-fixHeader__inner {
  background-color: rgba(240, 0, 117, 0.1); /* 透明度を設定した#fdf42a */
  align-items: stretch;
  color: var(--color_header_text);
  display: flex;
  padding-bottom: 0;
  padding-top: 0;
  position: relative; /* 修正: 'relative' のタイプミスを修正 */
  z-index: 1;
}


/**************************************** */


/* ======================================

  SNSアイコン

========================================= */

/* SNSアイコンの大きさ
-------------------------------------------*/
.u-fz-14 {
    font-size: 16px;
}


/* YouTubeアイコンの固定
-------------------------------------------*/
/* === ▽ PC ▽ === */
/* デフォルトでは非表示にする */
.fixed-youtube {
    display: none;
}


/* スマホ用の固定表示 */
@media (max-width: 599px) {
    .fixed-youtube {
        display: block; /* スマホのみ表示 */
        position: fixed;
        top: 10px; /* 必要に応じて調整 */
        right: 10px; /* 必要に応じて調整 */
        width: 80px; /* 必要に応じて調整 */
        z-index: 1001; /* 他の要素よりも上に表示するための調整 */
        opacity: 0; /* 初期状態は非表示 */
        visibility: hidden; /* 初期状態は非表示 */
        transition: opacity 0.5s, visibility 0.5s; /* フェードインのためのトランジション */
    }

    .fixed-youtube.visible {
        opacity: 1; /* スクロールしたら表示 */
        visibility: visible; /* スクロールしたら表示 */
    }
}


/**************************************** */


/* ======================================

  スマホ開閉メニュー

========================================= */

.sp-openclos-menu {
    display: block; /* 画像をブロック要素に */
    margin-left: auto; /* 左右のマージンを自動に */
    margin-right: auto; /* 左右のマージンを自動に */
}


/**************************************** */


/* ======================================

  メイン

========================================= */

/* メインビジュアル・アイコン表示
-------------------------------------------*/
/* === ▽ PC ▽ === */
.pctop-youtube-icon {
  position: fixed;
  top: 70%px; /* 必要に応じて調整 */
  right: 10px; /* 必要に応じて調整 */
  z-index: 1000; /* 必要に応じて調整 */
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards; /* フェードインアニメーション */
  animation-delay: 2s; /* 表示遅延 */
}


@keyframes fadeIn {
  to {
      opacity: 1;
  }
}


/**************************************** */


/* ======================================

  ページタイトル

========================================= */


/* ======================================

  h1

========================================= */

/* フォント設定
-------------------------------------------*/
.my-font {
  font-family: 'Shippori Mincho', 'Hiragino Mincho Pro', 'MS PMincho', 'MS Mincho', serif;
  font-weight:500;
}


/**************************************** */


/* ======================================

  h2

========================================= */

/* テキスト中央揃え
-------------------------------------------*/
h2 {
	text-align: center;
}


/**************************************** */


/* ======================================

  h3

========================================= */


/* ======================================

  テキスト

========================================= */

/* 人気動画特集・投稿ページテキスト
-------------------------------------------*/
.my-text02 {
  line-height: 2;
}


/* スマホブログパーツ【730】・テキスト
-------------------------------------------*/
.my-text03 {
  line-height: 2.5;
}


/* 投稿ページ・動画特集・テキスト
-------------------------------------------*/
.my-text04 {
  line-height: 2.5; 
  letter-spacing: 0.1em; 
}


.is-style-section_ttl {
  line-height: 2;
}


/* マーカー背景の余白
-------------------------------------------*/
.has-white-background-color {
  background-color: #fff !important;
  color: var(--swl-text_color--black, #333);
  padding: 10px; /* すべての方向に20pxのパディングを設定 */
}


/**************************************** */


/* ======================================

  テーブル

========================================= */

/* 会社概要ページ・PCテーブル */
-------------------------------------------*/
/* === ▽ PC ▽ === */
.my-table01 {
  border: 2px solid black; /* テーブル全体の外枠を太くする */
  border-collapse: collapse; /* 枠線が重ならないようにする */
} 

.my-table01 th, .my-table01 td {
  border: 2px dotted black; /* セルの枠線を点線にする */
  padding: 1.5em 0; /* セル内の上下の余白を0.5行分空ける */
}

/* 外枠を上書きして太いソリッドにする */
.my-table01 th:first-child,
.my-table01 td:first-child {
  border-left: 2px solid black; /* 左端の外枠をソリッドに */
}

.my-table01 th:last-child,
.my-table01 td:last-child {
  border-right: 2px solid black; /* 右端の外枠をソリッドに */
}

.my-table01 tr:first-child th,
.my-table01 tr:first-child td {
  border-top: 2px solid black; /* 上端の外枠をソリッドに */
}

.my-table01 tr:last-child th,
.my-table01 tr:last-child td {
  border-bottom: 2px solid black; /* 下端の外枠をソリッドに */
}


/**************************************** */


/* ======================================

  投稿ページ

========================================= */

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  padding: .4em .4em;
}


/**************************************** */


/* ======================================

  トップページ

========================================= */

/* 真珠画像とテキストアニメーション
-------------------------------------------*/
/* === ▽ PC ▽ === */
.back-pic {
  position: relative;
  display: inline-block;
}

.back-pic img {
  display: block;
  width: 100%; /* 必要に応じて調整 */
  height: auto; /* 必要に応じて調整 */
}

.my-text01 {
  position: absolute;
 left: 50%; /* 左端を中央に */
  top: 45px; /* 上からの距離を調整 */
  transform: translateX(-80%); /* 中央寄せに調整 */
  z-index: 2;
}


/* テキストを非表示にするための初期スタイル */
.animate-text span {
  display: inline-block;
  opacity: 0;
  transform: translateX(100%) scale(0.8);
  transition: opacity 1s, transform 1s;
}

/* テキストを表示するためのアニメーションスタイル */
.animate-text span.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* 色のスタイルを維持するためのクラス */
.swl-inline-color {
  /* color: #cf2e92 !important; 重要度を高める */
}


/* テキストフェードインアニメーション
-------------------------------------------*/
/* 初期状態では透明で、画面外に位置する */
.animation {
  opacity: 0;
  transform: translateY(10px); /* 初期位置を少し下に設定 */
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out; /* 透明度と位置の変化を滑らかに */
}

/* JavaScriptによってこのクラスが追加された時、要素をフェードインさせる */
.fade-in {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}


/* 動画再生とテキスト
-------------------------------------------*/
/* === ▽ PC ▽ === */
.video-container {
  position: relative;
  width: 100%; /* 必要に応じて調整 */
  height: auto; /* 必要に応じて調整 */
}

.background-video {
  width:55%;
  height: auto;
  display: block;
}

.overlay-text {
  position: absolute;
  left: 35%; /* 左端を中央に */
  top: 240px;
  transform: translateX(-50%); /* 中央寄せに調整 */
  z-index: 2;
}


/* スマホ・テキストアニメーション
-------------------------------------------*/
/* === ▽ スマートフォン ▽ === */
@media (max-width: 768px) {
  .animation-sp span {
      display: inline-block;
      opacity: 0;
      transform: translateX(45px); /* 右から左への移動 */
      transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s ease;
      font-size: 2em; /* フォントサイズを2emに設定 */
  }

  .animation-sp span.visible {
      opacity: 1;
      transform: translateX(0px);
  }
}


/* 動画再生とテキスト
-------------------------------------------*/
/* === ▽ スマートフォン ▽ === */
@media (max-width: 768px) {
  .video-container {
      position: relative;
      width: 80%;
      height: auto;
      margin: 0 auto;
  }
}


@media (max-width: 768px) {
  .background-video {
      width: 100%;
      height: auto;
      display: block;
  }
}


@media (max-width: 768px) {
  .overlay-text {
      position: absolute;
      left: 50%;
      top: 53%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      z-index: 2;
      color: #333;
  }
}

.video-container.sp_only .overlay-text {
  line-height: 2 !important;
}


/* トップページ・テキストリンク
-------------------------------------------*/
/* === ▽ PC ▽ === */
/* 特定のリンクのスタイルをカスタマイズ */
.has-text-align-center.animation.pc_only.u-mb-ctrl.u-mb-15 a {
  text-decoration: none; /* 下線を削除 */
  color: inherit; /* リンクの色を親要素と同じにする */
}

/* === ▽ スマートフォン ▽ === */
.sp_only .custom-link {
  text-decoration: none; /* 下線を消す */
  color: inherit; /* リンクの色を変えない */
}


/**************************************** */


/* ======================================

  お問い合わせページ

========================================= */

/* お問い合わせの送信ボタンの色を変更
-------------------------------------------*/
div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
  background-color: #a1f4f7;
  color: #000;
  padding: 13px 30px; /* ボタンの内側の余白を調整 */
  font-size: 18px; /* フォントサイズを調整 */
  font-weight: 600;
}

.contact-form {
  display: flex;
  align-items: center;
}

.contact-form img {
  margin-right: 10px; /* アイコンとテキストの間のスペースを調整 */
  vertical-align: middle; /* アイコンの垂直位置を調整 */
}

.contact-form .swl-inline-color {
  display: inline-block;
  vertical-align: middle; /* テキストの垂直位置を調整 */
} 


/* お問い合わせページタイトル下余白調整
-------------------------------------------*/
/* === ▽ PC ▽ === */
@media (min-width: 600px) {
  .l-topTitleArea {
      min-height: 240px;
      padding: 1em 0;
      margin-bottom: 10px;
  }
}


/**************************************** */


/* ======================================

  フッター

========================================= */


/* ======================================

  ページトップへ戻る

========================================= */

/* 大きさ・背景色・ホバー色
-------------------------------------------*/
/* === ▽ PC ▽ === */
.c-fixBtn {
  align-items: center;
  background: #fff;
  border: 1.2px solid var(--color_main);
  border-radius: var(--swl-radius--8, 0);
  box-shadow: var(--swl-box_shadow);
  color: var(--color_main);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 90px;
  justify-content: center;
  letter-spacing: normal;
  line-height: 1;
  opacity: .75;
  overflow: hidden;
  text-align: center;
  transition: all .25s;
  width: 90px;
}

.c-fixBtn__icon {
  display: block;
  font-size: 24px;
}

.c-fixBtn.hov-bg-main:hover {
background: radial-gradient(circle at 30% 30%, 
            #ffffff 0%, 
            #fff8e1 20%, 
            #ffe0b2 40%, 
            #e8f5e9 60%, 
            #fce4ec 80%, 
            #f3e5f5 100%);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.7) inset,
            0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.c-fixBtn.hov-bg-main:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) inset, 
            0 0 10px rgba(0, 0, 0, 0.1);
}

.c-fixBtn__icon {
  display: block;
  font-size: 24px;
  font-weight: 200;
}

/* アイコンの色を常に黒に保つ */
.c-fixBtn.hov-bg-main:hover .c-fixBtn__icon {
  color: black;
}


/**************************************** */


/* ======================================

  スマホ開閉メニュー

========================================= */

/* ======================================

  サイドバー

========================================= */

/* サイドバーの高さをメインコンテンツを合わせる
-------------------------------------------*/
.youtube-sidebar {
  height: auto;
  margin-top: 35%;
  max-width: 100%;
}

/* サイドバーのテキストタイトル・アニメーション
-------------------------------------------*/
/* キーフレームで点滅アニメーションを定義 */
@keyframes flash {
  0%, 100% { opacity: 1; }   /* 開始時と終了時は完全に不透明 */
  50% { opacity: 0; }        /* 途中で透明になる */
}

/* animation-flash クラスが適用された要素にアニメーションを適用 */
.animation-flash {
  animation: flash 2s ease-in-out infinite; /* 合計2秒間のサイクルで無限に繰り返し */
}


/**************************************** */


/* ======================================

  お知らせ一覧

========================================= */

/* お知らせ一覧の装飾
-------------------------------------------*/
/** 投稿リストテキストのお知らせ一覧 **/
/* 日付とカテゴリー並べ替え */
.newslist .p-postList__cat {
  order: 1;
  }
  .newslist .p-postList__times.c-postTimes.u-thin {
  order: 2;
  }
  /* 日付とカテゴリーのアイコン非表示 */
  .newslist time.c-postTimes__posted.icon-posted::before,.top-newslist span.p-postList__cat.icon-folder::before{
  display: none;
  }
  /* 日付とカテゴリーの文字サイズ */
  .newslist .p-postList__cat,.top-newslist time.c-postTimes__posted {
  font-size: 13.5px;
  }
  /* カテゴリーの装飾 */
  .newslist .p-postList__cat {
  color: #009aff;
  border: solid 1px #009aff;
  border-radius: 4px;
  padding: 4px;
  }


/**************************************** */


/* ======================================

  アニメーション

========================================= */


/* ======================================

  パンくずリスト非表示

========================================= */

#breadcrumb {
  display: none;
 }


/**************************************** */