@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.c-gnav>.menu-item {
width: 130px;   /*ナビ同士の間隔*/
letter-spacing: .1rem;   /*文字の間隔*/
}

.c-gnav {
	margin-right : 1.2rem;
}

#header #gnav li:hover {
	/* マウスオーバーで色を変える */
  color : #fad03d ;
}

.is-style-fill {
	/* マウスオーバーで色を変える */
  color : #fad03d ;
}

.wp-block-button is-style-fill:hover {
	/* マウスオーバーで色を変える */
  color : #fad03d ;
}

	/* 追従ヘッダー */
#fix_header .c-gnav .menu-item .ttl {
	/* フォントを大きく */
	font-size : 1.1em !important;
}

#fix_header .c-gnav .menu-item .desc {
	/* フォントを大きく */
	font-size : 16px !important;
	}

#fix_header .c-gnav li:hover {
	/* マウスオーバーで色を変える */
  color : #fad03d !important;
	}

/* 通常状態 */
.my-hover-btn .wp-block-button__link{
  transition: 
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}

/* ホバー時 */
.my-hover-btn .wp-block-button__link:hover{
  background-color: #fad03d !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  color: #000; /* 文字色：黒（視認性UP） */
}

/* ===== 無限ループ・マルキー型スライダー（完成版 / 四角デザイン） ===== */

.activity-marquee{
  overflow:hidden;
  width:100%;
}

/* track（レーン） */
.activity-marquee__track{
  overflow:hidden;
}

/* WordPressの内側ラッパー対応 */
.activity-marquee__track > .wp-block-group__inner-container{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  will-change:transform;
  animation: marqueeLoop 35s linear infinite;
}

/* ホバーで停止（PCのみ） */
@media (hover:hover){
  .activity-marquee:hover 
  .activity-marquee__track > .wp-block-group__inner-container{
    animation-play-state: paused;
  }
}

/* 各カード（item） */
.activity-marquee__item{
  flex:0 0 auto;
  width:clamp(180px, 22vw, 260px);
  text-align:center;
}

/* 画像（角丸なし・四角） */
.activity-marquee__item .wp-block-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;   /* ← 四角デザイン */
}

/* タイトル */
.activity-marquee__item h3,
.activity-marquee__item h4{
  margin:10px 0 0;
  font-size:1rem;
  line-height:1.3;
}

/* 無限ループ（2セット前提） */
@keyframes marqueeLoop{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}


/* 余計なマージンを消して幅ズレを防ぐ */
.activity-marquee__item .wp-block-image{
  margin: 0;
}

/* 画像：四角＋高さ揃え */
.activity-marquee__item .wp-block-image img{
  width: 100%;
  height: var(--marquee-img-h);
  object-fit: cover;
  display: block;
  border-radius: 0; /* ← 四角 */
}

/* タイトル（ズレ防止で下マージン固定） */
.activity-marquee__item h3,
.activity-marquee__item h4{
  margin: 10px 0 0;
  line-height: 1.2;
}

/* カードを上下中央揃え→上揃えにする */
.activity-marquee__track > .wp-block-group__inner-container{
  align-items: flex-start;
}

/* JSがセットする距離で動く（--marquee-distance が入らないと0で止まる） */
@keyframes marqueeAuto{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(calc(-1 * var(--marquee-distance, 0px)),0,0); }
}

/* 動きが苦手な人向け（ONなら止まる） */
@media (prefers-reduced-motion: reduce){
  .activity-marquee__track > .wp-block-group__inner-container{
    animation: none !important;
  }
}

/* グループの “内側ラッパー” をグリッド化する */
.wp-block-group.cat-grid > .wp-block-group__inner-container{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* スマホは1列 */
@media (max-width: 782px){
  .wp-block-group.cat-grid > .wp-block-group__inner-container{
    grid-template-columns: 1fr !important;
  }
}

/* テーマ側の余白が邪魔することがあるので消す */
.wp-block-group.cat-grid > .wp-block-group__inner-container > *{
  margin: 0 !important;
}

/* カバー（cat-item）の高さを強制 */
.wp-block-cover.cat-item{
  min-height: 280px !important; /* ←まずここを変える */
  height: 280px !important;
}

/* ===== カード本体 ===== */
.wp-block-cover.cat-item{
  position: relative;
  overflow: hidden;
}

/* ===== 内側の白枠 ===== */
.wp-block-cover.cat-item::after{
  content:"";
  position:absolute;
  inset:18px;                  /* 枠の内側余白（線の位置） */
  border:1.5px solid #fff;     /* 細めの白線 */
  z-index:2;
  pointer-events:none;
  transition: 
    transform .6s ease,
    opacity .4s ease;
  transform: rotate(0deg) scale(1);
  opacity:1;
}

/* ===== ホバー時：くるっと回って消える ===== */
.wp-block-cover.cat-item:hover::after{
  transform: rotate(180deg) scale(1.2);
  opacity:0;
}

/* =========================
  オーバーレイ（通常時）
========================= */
.wp-block-cover.cat-item::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.30);  /* 通常時 */
  transition: .35s ease;
  z-index: 1;
  pointer-events:none;
}

/* =========================
  ホバーでオーバーレイ濃く
========================= */
.wp-block-cover.cat-item:hover::before{
  background: rgba(0,0,0,.55);  /* ホバー時 */
}

/* =========================
  文字エリア（通常）
========================= */
.wp-block-cover.cat-item .wp-block-cover__inner-container{
  position: relative;
  z-index: 2;
  transition: transform .35s ease;
  transform: scale(1);
  text-align: center;
}

/* =========================
  ホバーで文字拡大
========================= */
.wp-block-cover.cat-item:hover .wp-block-cover__inner-container{
  transform: scale(1.2);
}


/* --- SWELL: フッターが下に押し下げられて空白が出るのを解除 --- */

/* サイト全体を縦flexにしている場合があるので解除 */
.l-siteBody{
  display: block !important;
  min-height: auto !important;
}

/* フッターが auto で下に押されてる場合を解除 */
.l-footer{
  margin-top: 0 !important;
}

/* 念のためコンテンツ側の下余白も0に */
.l-content,
.l-main{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* リンクリストアイテムの背景と下線 */
/* フッターのリンクリスト：区切り線の色 */
.l-footer .swell-block-linkList.-border .swell-block-linkList__item{
  border-bottom-color: #ccc !important;
}

/* 一番上だけ付く上線も色を揃える */
.l-footer .swell-block-linkList.-border .swell-block-linkList__item{
  border-bottom-color: #4d54ad !important;
}

/* 一番上だけ付く上線も色を揃える */
.l-footer .swell-block-linkList.-border .swell-block-linkList__item:first-child{
  border-top-color: #4d54ad !important;
}

/* ===== モーダル全体 ===== */
.tel-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* 背景 */
.tel-modal__bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

/* ボックス */
.tel-modal__box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  width: 85%;
  max-width: 320px;
  text-align: center;
}

/* テキスト */
.tel-modal__text{
  font-size: 16px;
  margin-bottom: 20px;
}

/* ボタン */
.tel-modal__buttons{
  display: flex;
  gap: 10px;
}

/* キャンセル */
.tel-modal__cancel{
  flex: 1;
  padding: 12px;
  background: #eee;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

/* 発信 */
.tel-modal__call{
  flex: 1;
  padding: 12px;
  background: #0f2a44;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

.page-id-123 h1.c-pageTitle{
  font-size: 35px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: #000080;
}

@media screen and (max-width: 768px){

  .c-pageTitle,
  h1.c-pageTitle{
    font-size: 24px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em !important;
    color: #FFFFFF !important;
  }

  .l-topTitleArea,
  .l-topTitleArea .l-topTitleArea__body{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .post_content h2,
  .swell-block-fullWide__inner h2,
  .wp-block-heading {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

  .wp-block-embed iframe,
  .wp-block-embed__wrapper iframe,
  iframe {
    height: 400px !important;
    min-height: 400px !important;
  }

}

}