@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ▼ 会社情報スライダー（自前版）の土台 ここから
   以前はスライダーのプラグインが読み込んでいた CSS のうち、必要な分だけを写したもの。
   色・大きさ・見出しの文字などの見た目は、管理画面の「追加 CSS」側にある（そちらが優先される）。
   :where() は、追加 CSS より強くならないようにするための書き方。 */
:root { --swiper-navigation-size: 44px; }
:where([data-self-slider]) .swiper { position: relative; overflow: hidden; margin-left: auto; margin-right: auto; padding: 0; z-index: 1; display: block; }
:where([data-self-slider]) .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; box-sizing: content-box; }
:where([data-self-slider]) .swiper-horizontal { touch-action: pan-y; }
:where([data-self-slider]) .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; display: block; }
:where([data-self-slider]) .swiper-pagination { position: absolute; left: 0; width: 100%; text-align: center; z-index: 10; }
:where([data-self-slider]) .swiper-pagination-bullet { display: inline-block; opacity: .2; cursor: pointer; }
:where([data-self-slider]) .swiper-pagination-bullet-active { opacity: 1; }
:where([data-self-slider]) .swiper-button-prev,
:where([data-self-slider]) .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; }
:where([data-self-slider]) .swiper-button-prev { left: 10px; right: auto; }
:where([data-self-slider]) .swiper-button-next { right: 10px; left: auto; }
/* ▲ 会社情報スライダー（自前版）の土台 ここまで */