/* override.css */
body.myClass body.myClass h1,h2,h3 {
  font-family: "Noto Sans JP", system-ui, -apple-system,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;
}

.offcanvas-caret {
    display: inline-block;
    transition: transform 0.6s ease;
}

.offcanvas-submenu-toggle[aria-expanded="true"] .offcanvas-caret {
    transform: rotate(180deg);
}

body.myClass h3 {
    font-size: clamp(1.1rem, 1.1rem + 0.5vw, 1.6rem);
    font-weight: 500; margin-bottom: 0.3rem;
}


@media (width <= 991.98px) {
    body.myClass .container-header {
         position: sticky !important;
    }
}
body.myClass .cx-header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

/* --- ハンバーガーの親要素を、中身のサイズぴったりに --- */
body.myClass .header .grid-child.container-nav {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

body.myClass .header .grid-child.container-nav .offcanvas-menu-wrapper {
    display: block;
    width: auto;
}

body.myClass .container-header {
    border-bottom: 1px solid #ddd;
}



/*hero*/

/* --- hero: スマホ縦向きのみ縦長画像に切り替え --- */
@media (max-width: 767.98px) and (orientation: portrait) {
    .cx-hero img {
        aspect-ratio: 3 / 4; /* 用意する縦長画像の実際の比率に合わせて調整 */
        object-fit: cover;
    }
}

.cx-hero-caption h2,
.cx-hero-caption p {
    font-family: 'Shippori Mincho', serif;
}

.cx-hero {
    position: relative; /* これが重要:子要素を絶対配置するための基準 */
}

.cx-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- hero: lg未満で画面幅いっぱいに広げる(フルブリード) --- */
@media (max-width: 991.98px) {
    .cx-hero {
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
}

.cx-hero-caption {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; と同じ */
    display: flex;
    flex-direction: column;   /* 見出し・補足文を縦に並べる */
    align-items: center;      /* 横中央 */
    justify-content: center;  /* 縦中央 */
    gap: 0.5rem;               /* 見出しと補足文の間隔 */
    /* 文字を読みやすくするための暗いオーバーレイ(任意) */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.6) 100%
    );
    color: #fff;
    text-align: center;
    padding: 2rem;
}

.cx-hero-caption h2 {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
    font-weight: bold;
    margin: 0;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.7),
         1px -1px 0 rgba(0,0,0,0.7),
        -1px  1px 0 rgba(0,0,0,0.7),
         1px  1px 0 rgba(0,0,0,0.7),
        0 2px 8px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4);
}

.cx-hero-caption p {
    font-size: clamp(0.85rem, 3.5vw, 1.1rem);
    font-weight: bold;
    margin: 0;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.7),
         1px -1px 0 rgba(0,0,0,0.7),
        -1px  1px 0 rgba(0,0,0,0.7),
         1px  1px 0 rgba(0,0,0,0.7),
        0 2px 8px rgba(0,0,0,0.6),
        0 0 20px rgba(0,0,0,0.4); /* 背景に負けないように影をつける */
}


/* --- TOPCOOL風 ホーム: スローガン --- */
.cx-slogan {
    text-align: center;
    margin: 2rem 0 1rem;
}
.cx-slogan h1 {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #1a5fb4;
}

/* --- TOPCOOL風 ホーム: カードグリッド --- */
/* --- TOPCOOL風 ホーム: カードグリッド --- */
.cx-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.cx-card {
    position: relative; /* カード全体クリック化のための基準(::afterをinset:0で重ねる) */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cx-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* --- カード全体をクリック可能にする(タイトルのaを全面オーバーレイ化) --- */
.cx-card .item-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* --- Joomla標準のintro_imageが付与するfloat/marginを打ち消す --- */
.cx-card-img .item-image {
    float: none;
    margin: 0;
}
.cx-card-img .item-image img {
    width: 100%;
    height: auto;
    display: block;
}

.cx-card-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.cx-card-body {
    text-align: center;
    padding: 0.9rem 0.5rem 1.1rem;
}
.cx-card-title {
    font-weight: bold;
    font-size: 1.05rem;
    margin: 0 0 0.3rem; /* h2の標準margin-topを打ち消し */
}

.cx-card-title a{text-decoration: none;
}
.cx-card-sub {
    font-size: 0.85rem;
    color: #666;
}

/* スマホ: カラム数を落とす */
@media (max-width: 767.98px) {
    .cx-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
    .cx-card-grid { grid-template-columns: 1fr; }
}


body.myClass .container-header{background-color: #FFF;background-image:unset;}

/* --- bottom module: 画面幅いっぱいに広げる(staticなら自然とmain幅どまりになる) --- */
body.myClass .site-grid .container-bottom-a {
    grid-column: full-start / full-end;
    background: #f2f2f0; /* 好みの色に調整 */
    margin-top: 1rem;
}

.cx-bottom-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 2rem 0; /* 左右の余白は .container 側のpaddingに任せる */
}

.cx-bottom-item {
    flex: 1 1 300px; /* 最小幅300pxを保ちつつ3等分、狭ければ自動折り返し */
}

.cx-bottom-item h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #1a5fb4;
}

.cx-bottom-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cx-bottom-links li + li {
    margin-top: 0.5rem;
}
.cx-bottom-links a {
    text-decoration: none;
    color: inherit;
}
.cx-bottom-links a:hover {
    text-decoration: underline;
}

.cx-bottom-map iframe {
    display: block;
    width: 100%;
    height: 250px;
}

/* スマホでは縦積みに */
@media (max-width: 767.98px) {
    .cx-bottom-flex {
        flex-direction: column;
        align-items: stretch; /* 横幅は100%のまま維持(左右の見た目を揃える) */
    }
    .cx-bottom-item {
        flex: 0 1 auto; /* ★追加: 縦積み時は伸びを止め、中身の高さに合わせる */
    }
}
.concept-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.concept-section--1 {background-image: url('/image.php?path=images/concept/section1-bg.jpg&w=1600&h=900&crop=1');}
.concept-section--2 {background-image: url('/image.php?path=images/concept/section2-bg.jpg&w=1600&h=900&crop=1');}
.concept-section--3 { background-image: url('/images/concept/section3-bg.jpg'); }
.concept-section--4 { background-image: url('/images/concept/section4-bg.jpg'); }
.concept-section--5 { background-image: url('/images/concept/section5-bg.jpg'); }


.concept-section__overlay {
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* 可読性確保のための暗幕 */
}
.concept-section__inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  color: #fff;
}

@media (max-width: 768px) {
  .concept-section { min-height: 40vh; }
  .concept-section__inner { padding: 2rem 1rem; }
}



/* =========================================
   牧場の一日 - タイムライン記事用CSS
   Cassiopeiaのカスタムスタイルシート(template.user 等)に追加してください
========================================= */

.day-timeline{
  --dt-ink:#3f3227;
  --dt-green:#2f4a2f;
  --dt-green-soft:#cddac0;
  --dt-caption:#7a6d5c;
  position:relative;
  max-width:900px;
  margin:32px auto 0;
  padding:0 4px;
}

.day-timeline::before{
  content:"";
  position:absolute;
  left:52px;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--dt-green-soft);
}

.day-slot{
  position:relative;
  padding-left:100px;
  margin-bottom:52px;
}
.day-slot:last-child{ margin-bottom:0; }

.day-slot-dot{
  position:absolute;
  left:44px;
  top:6px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--dt-green);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--dt-green-soft);
}

.day-slot-time{
  position:absolute;
  left:-100px;
  top:-4px;
  width:90px;
  text-align:right;
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--dt-green);
  font-weight:600;
  line-height:1.4;
}

.day-slot h3{
  font-size:1.1rem;
  margin:0 0 16px;
  color:var(--dt-ink);
}

/* 画像+キャプション */
.day-fig{ margin:0 0 12px; }
.day-fig img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}
.day-fig figcaption{
  font-size:.78rem;
  color:var(--dt-caption);
  text-align:right;
  margin-top:6px;
}
.day-fig-left{
  float:left;
  width:300px;
  max-width:100%;
  margin:2px 24px 14px 0;
}
.day-fig-right{
  float:right;
  width:300px;
  max-width:100%;
  margin:2px 0 14px 24px;
}

/* 動画埋め込み(レスポンシブ) */
.day-video{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:16/9;
  margin:2px 24px 14px 0;
  border-radius:6px;
  overflow:hidden;
  float:left;
}
.day-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.day-group{ overflow:hidden; } /* floatを内包 */
.day-group p{
  line-height:1.9;
  font-size:.92rem;
  margin:0 0 .8rem;
}
.day-clear{ clear:both; }

/* =========== スマホ幅(768px未満)============ */
@media (max-width:767.98px){
  .day-timeline::before{ left:28px; }
  .day-slot{ padding-left:56px; }
  .day-slot-dot{ left:20px; }
  .day-slot-time{
    position:static;
    text-align:left;
    display:block;
    margin-bottom:6px;
  }
  .day-fig-left,
  .day-fig-right,
  .day-video{
    float:none;
    width:100%;
    max-width:100%;
    margin:0 0 14px;
  }
}

/*EC module*/
.lp-module h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1C9A4B;
  border-top: solid 2px #7ecb8f;
  border-bottom: solid 2px #7ecb8f;
  background: -webkit-repeating-linear-gradient(-45deg, #f0fbf3, #f0fbf3 3px,#e3f7ea 3px, #e3f7ea 7px);
  background: repeating-linear-gradient(-45deg, #f0fbf3, #f0fbf3 3px,#e3f7ea 3px, #e3f7ea 7px);
}
@media(min-width: 768px){
.lp-module h2{font-size: 1.4rem;}
}



.ec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media(min-width: 992px){body.topcool .ec-grid {grid-template-columns: repeat(3, 1fr);}}

.ec-card {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  text-align: center;
  background: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* スマホ */
@media (max-width: 768px) {
  .ec-grid {
    grid-template-columns: 1fr;
    gap :1rem;
    width: 100%;
  }
  .ec-card{padding :0.5rem 1rem;}
}


.ec-card h5 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.ec-card p {
  margin: 0;
}

/* CTAだけ強調 */
a.ec-card.ec-cta {
  color: #1C9A4B;
  background: -webkit-repeating-linear-gradient(-45deg, #f0fbf3, #f0fbf3 3px,#e3f7ea 3px, #e3f7ea 7px);
  background: repeating-linear-gradient(-45deg, #f0fbf3, #f0fbf3 3px,#e3f7ea 3px, #e3f7ea 7px);
  border: 1px solid #1C9A4B;
}
/*EC module*/

/* お問い合わせ全幅バナー用のスタイル(元: com_content/featured/default.php から移設) */
.cx-contact-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1.1rem 1.5rem;
    background: #f2f2f0;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cx-contact-banner:hover,
.cx-contact-banner:focus {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.cx-contact-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.cx-contact-banner-icon svg {
    width: 28px;
    height: 28px;
}
.cx-contact-banner-text {
    font-weight: bold;
    font-size: 1.05rem;
}

/* 記事上部用の小さめバリエーション(新規追加分) */
.cx-contact-banner-sm {
    display: inline-flex;
    padding: 0.6rem 1.2rem;
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* フローティングCTAボタン(スマホ限定) */
.cx-floating-cta {
    display: none; /* PCではデフォルト非表示 */
}

@media (max-width: 767.98px) {
    .cx-floating-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        justify-content: center;
        align-items: center;
        padding: 0.9rem;
        background: #0F89DB;
        color: #fff;
        font-weight: bold;
        font-size: 1rem;
        text-decoration: none;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    }
    .cx-floating-cta:hover,
    .cx-floating-cta:focus {
        background: #0c6fb0;
        color: #fff;
        text-decoration: none;
    }

    /* フローティングボタンで隠れる分、記事本文の下に余白を追加 */
    body.recruit-page {
        padding-bottom: 4.5rem;
    }
}