@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){
  /*必要ならばここにコードを書く*/
	/* トップページ限定：Cocoon不要な要素の非表示 */
.front-top-page .breadcrumb,
.front-top-page .article-header,
.front-top-page .article-footer {
  display: none;
}

/* トップページ限定：Cocoon余白リセット */
.front-top-page .content,
.front-top-page .entry-content {
  margin-top: 0;
  margin-bottom: 0;
}

.front-top-page .main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0;
}

.front-top-page .article {
  margin-bottom: 0 !important;
}

.front-top-page .footer {
  margin-top: 0;
}

/* トップページ限定：カラム余白（Cocoon対策） */
.front-top-page.body .wp-block-columns {
  margin-bottom: 0;
}
}

/* スライダー全体 */
.slider-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

/* スライド画像 */
.slideimg {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  animation-name: fadeAnime, zoomAnime;
  animation-duration: 12s, 12s;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: ease, ease-out;
}

/* 個別画像（ここで画像パス設定）.slideimg:nth-of-type(1) {
  background-image: url("");　/* ←" "内に画像URLを入れます  */
.slideimg:nth-of-type(1) {
  background-image: url('https://www.kamioshima.com/wp/wp-content/uploads/2026/05/7B1A4328_thumb.jpg');
  animation-delay: 0s, 0s;
}
.slideimg:nth-of-type(2) {
  background-image: url('https://www.kamioshima.com/wp/wp-content/uploads/2026/05/DSCN3548.jpg');
  animation-delay: 3s, 3s;
}
.slideimg:nth-of-type(3) {
  background-image: url('https://www.kamioshima.com/wp/wp-content/uploads/2026/05/DSC00157_thumb.jpg');
  animation-delay: 6s, 6s;
}

.slideimg:nth-of-type(4) {
  background-image:url('https://www.kamioshima.com/wp/wp-content/uploads/2026/05/unnamed-6-scaled.jpg');
  animation-delay: 9s, 9s;
}

/* フェードアニメーション */
@keyframes fadeAnime {
  0%, 40%, 100% { opacity: 0; }
  15%, 25% { opacity: 1; }
}

/* 背景ズームアニメーション */
@keyframes zoomAnime {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  100% { transform: scale(1.1); }
}

/* 中央テキスト（固定表示） */
.slider-text {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

/* タイトル */
.slider-text .heading {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}

/* サブタイトル */
.slider-text p {
  font-size: 18px;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* スマホ対応 */
@media (max-width:768px) {
  .slider-container { height: 400px; }
  .slider-text .heading { font-size: 24px; }
  .slider-text p { font-size: 16px; }
}
.slider-container {
  height: 100svh;
}
.tab-switch {
  --tab-color:#92bac2;
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin-inline: auto;
  gap: 0 5px;
}

/* ラジオ非表示 */
.tab-switch input {
  display: none;
}

/* タブボタン */
.tab-switch label {
  padding: 0.7em 1em;
  background:#eee;
  cursor: pointer;
  order: -1;
  text-align: center;
}

/* コンテンツ非表示 */
.tab-content {
  display: none;
  width: 100%;
  padding: 1.5em 0;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch input:checked + label {
  background: var(--tab-color);
  color: #fff;
}
.tab-switch input:checked + label + .tab-content {
  display: block;
}
.tab-switch label {
  flex: 1; /* 均等幅 */
}
/* --------------------------------
  ボックスメニュー：カラム数切り替え
-------------------------------- */

/* grid用のリセット */
[class*="is-style-box-column-"] .box-menus .box-menu {
  width: unset;
}

/* grid化 */
[class*="is-style-box-column-"] .box-menus {
  display: grid;
}

/* gap（余白あり）のみ適用：is-style-box-column- かつ -gap を含むクラスに限定 */
[class*="is-style-box-column-"][class*="-gap"] .box-menus {
  gap: 0.5em;
}

/* --- PC: 列数指定 --- */
/* 2列（PC） */
[class*="is-style-box-column-2-"] .box-menus {
  grid-template-columns: repeat(2, 1fr);
}

/* 3列（PC） */
[class*="is-style-box-column-3-"] .box-menus {
  grid-template-columns: repeat(3, 1fr);
}

/* 4列（PC） */
[class*="is-style-box-column-4-"] .box-menus {
  grid-template-columns: repeat(4, 1fr);
}

/* 5列（PC） */
[class*="is-style-box-column-5-"] .box-menus {
  grid-template-columns: repeat(5, 1fr);
}

/* 6列（PC） */
[class*="is-style-box-column-6-"] .box-menus {
  grid-template-columns: repeat(6, 1fr);
}

/* --- モバイル（834px以下） --- */
@media screen and (max-width: 834px) {

  /* モバイル2列：-m2系は2列に統一 */
  [class*="is-style-box-column-2-"] .box-menus,
  [class*="is-style-box-column-3-"][class*="-m2"] .box-menus,
  [class*="is-style-box-column-4-"][class*="-m2"] .box-menus,
  [class*="is-style-box-column-5-"][class*="-m2"] .box-menus,
  [class*="is-style-box-column-6-"][class*="-m2"] .box-menus {
    grid-template-columns: repeat(2, 1fr);
  }

  /* モバイル3列：-m3系のみ3列 */
  [class*="is-style-box-column-3-"][class*="-m3"] .box-menus,
  [class*="is-style-box-column-5-"][class*="-m3"] .box-menus,
  [class*="is-style-box-column-6-"][class*="-m3"] .box-menus {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ウィジェットカード設定（Grid） ---------------------------------------------- */

/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
  display: grid;
}

/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
  grid-template-columns: repeat(2, 1fr);
}

/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
  grid-template-columns: repeat(3, 1fr);
}

/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
  grid-template-columns: repeat(4, 1fr);
}

/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {

  /* column-x-1系：モバイルでは1列 */
  :is(.is-style-column-2-1,
      .is-style-column-3-1,
      .is-style-column-4-1) .widget-entry-cards {
    grid-template-columns: 1fr;
  }

  /* column-x-2系：モバイルでは2列 */
  :is(.is-style-column-3-2,
      .is-style-column-4-2) .widget-entry-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}