@media only screen and (max-width: 1670px) {
.widecontent {
    max-width: 94%;
}
.slider .slick-box .slick-slide img.slide-image {
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}


@media only screen and (max-width: 1300px) {
.slider .slick-box .slick-slide img.slide-image {
/*width: initial !important;
max-width: initial;
text-align: center;
position: relative;*/
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
    
#carousel .gallery-caption {
display: none;
}
    

header,
header.others {
background:rgba(255, 255, 255, 1);
}

header #headerInner,
header.others #headerInner {
    display: block;
    height: auto !important;
    overflow: hidden;
    padding: 0 40px !important;
    transition: all 0.5s ease-in-out 0s;
}
body #headerContainer.fixed,
body:not(.home) #headerContainer.fixed {
    background: rgba(21, 24, 33, 0.58) none repeat scroll 0 0;
    position: fixed;
    top: 0;
}
header #headerInner #logo,
header.others #headerInner #logo {
    left: 50%;
    margin: 8px 0 0 -78px;
    position: absolute;
    width: 156px !important;
	top: 0 !important;
}
.en-title {
    font-size: 25px;
}

#content_box_full {
}
#headerContainer.shrink #logo {
transition: all 0.5s ease-in-out 0s;
width: 156px !important;
top:0 !important;
}
#headerInner #logo img {
width:100%;
height:auto;
}
#headerInner-sub {
display:none;
}

a.button {
 ? ?margin: 10px auto !important;
 ? ?padding: 11px 15px !important;
width: auto;
min-width: inherit;
}
.footer-body {
padding:20px 0 !important;
text-align:center;
}

.footer-body .footer-logo {
    float: none !important;
    margin: 10px auto 20px !important;
    width: 180px !important;
}
.footer-logo {
float: none;
width: 250px;
margin: 0 auto !important;
}

    .footer-copyright {
    float: none;
    line-height: 1.5rem;
    margin: 0 15px 30px;
    text-align: center;
}
.headline article {
    width: 95%;
}
    

}

@media only screen and (max-width: 1360px) {/*1140*/
    .drawer-navbar-header,
    .drawer-navbar .drawer-brand,
    .drawer-navbar .drawer-brand img.logo {
    width: 190px;
        padding: 3px 0 !important;
}
    .locations-nav {
        display: none;
    }
    .lang.mobile {
     margin: 35px 0 20px;
     display: block;
    }
    nav#sub-menu.mobile {
    display: block;
    }
    nav#sub-menu.mobile ul {
        margin: 20px 0 0 0;
    }
    nav#sub-menu.mobile ul li{
        float: none;
    }

}


@media only screen and (max-width: 860px) {
#inquiry {
    width: 100% !important;
}

body.home .page h2 {
padding: 0;
}



footer .quadruple-wrapper {
    width: 100%;
    text-align: center;
}
footer ul li {
text-align: center;
}
ul.news-posts .news-post div.news-title,
ul#news-list li div.news-title {
display: block;
}
#video {
    left: -100%;
}
}

@media only screen and (max-width: 468px) {
#video {
    left: -180%;
}
        footer h4 {
        text-align: center;
    }
    ul.footer-nav li {
        text-align: center;
        line-height: 1.8em;
    }
.slarge,
.large,
.xlarge,
.xxlarge,
.xxxlarge {
    font-size: 1.5em;
    line-height: 1.4em;
}

.pace {
background-size:300px auto !important;
}

#slick-slide01 .slide-image {
    left:100%;        
}

.slick-content h3 {
    font-size: 1.7em;
    line-height: 1.5em;
    letter-spacing: -1px;
}
.slick-content p {
margin: 50px 0 0 0;
line-height: 1.5em;
    font-size: 1em;
}

#mouse {
    bottom: 60px;
    }
.boxes-wrapper {
	width: 95%;
	margin: 0 auto;
}
ul#news-list{
padding: 0;
margin:  0;
}
	
body.home .page .viewmore {
position: relative;
text-align: center;
}
	
.message-thumb,
.message-body,
.triple-wrapper,
.two-thirds-wrapper,
.quadruple-wrapper,
.quintuple-wrapper,
.double-wrapper {
width:100% !important;
margin:20px 0 !important;
	float: none;
    padding: 0 !important;
    clear: both;
	overflow: hidden;
}
.double-wrapper img {
	margin: 0 !important;
box-sizing: border-box;
text-align: center;
}
	
ul#f-btn li {
float:none;
display:inline-block;
	min-width: 72px;
    margin: 2px;
}
.hero {
min-height: 220px;
height: auto;
overflow: hidden;
}
.tags {
font-size: 2.5em;
line-height: 1em;
word-break: break-all;
padding: 100px 0 30px 0 !important;
}
#left_box {
width: 100%;
margin: 0px auto 50px;
float: none;
}
#right_box {
width: 100%;
margin: 0px auto;
float: none;
}
    .index-box  .slides li a {
	padding: 10px 5px;
}
    .index-box  .slides li a {
        font-size: 0.8em;
        line-height: 1.4em;
    }
.widecontent {
margin: 15px auto;
}
/*
br.mobile {
display:block;
}
*/
br.desktop {
display:none;
}

h2  {font-size: 24px}
h3  {font-size: 20px}
h4  {font-size: 18px}
h5  {font-size: 16px}
h6  {font-size: 16px}


h1.post-title {
    font-size: 20px;
}

h1.plane {
	font-size: 20px;
	padding: 0 0 0 6%;
	line-height: 1em;
	margin: 50px 0 0 !important;
}
.headline {
    padding: 0;
}

.headline article {
    width: 100%;
}

.boxes-desc {
    padding: 15px;
	min-height:inherit;
}

	
.inquiry-box {
    display: block;
}
.inquiry-box thead {
    display: none;
}
.inquiry-box tbody {
    display: block;
}
.inquiry-box tr {
    display: block;
    margin-bottom: 10px;
}
.inquiry-box th, .inquiry-box td {
    border: medium none;
    display: list-item;
    list-style: outside none none;
}
.inquiry-box th {
    list-style-type: none;
    padding: 5px 0;
    width: 100%;
}
.inquiry-box td {
    padding: 0;
}
.inquiry-box td textarea, .inquiry-box td input[type="tel"], .inquiry-box td input {
margin: 5px 1%;
max-width: 98% !important;
}

span.wpcf7-list-item label,
span.wpcf7-list-item {
margin: 0 !important;
}
    
input, textarea, select {
border: 1px solid #cfcfcf;
}
input[type="submit"] {
	background: #FFAB0E;
}

div.alert,
blockquote {
    margin: 20px;
}
.show-image-content {
    width: 80%;
}
.show-image-content p {
margin:10px;
}

.prev-posts a {
   background: transparent url("images/prev-posts.png") no-repeat scroll left top / 70% auto;
    height: 100px;
    margin: -50px 0 0;
    width: 60px;

}
.next-posts a {
   background: transparent url("images/next-posts.png") no-repeat scroll right top / 70% auto;
    height: 100px;
    margin: -50px 0 0;
    width: 60px;
}
.prev-posts a.nomore {
   background: transparent url("images/prev-posts-nomore.png") no-repeat scroll left top / 70% auto;
    height: 100px;
    margin: -50px 0 0;
    width: 60px;

}
.next-posts a.nomore {
   background: transparent url("images/next-posts-nomore.png") no-repeat scroll right top / 70% auto;
    height: 100px;
    margin: -50px 0 0;
    width: 60px;
}

ul.category li a {
padding: 5px 8px;
}


#home-loading-icon {
background-size: 250px !important;
}

.slick-box.home  .slick-list{
	height: 500px;
}
	
	.lp-excerpt {
		width: 90%;
	}
	.frame {
	margin: 0 0 40px;
	padding: 10px 20px 30px;
}
	body.single-lp .entry h2 {

	font-size: 1.5em;
}
	li.widget {
		list-style: none;
	}
	#door {
		height:500px !important;
	}
	body.archive .hero, body.page .hero, body.single-lp .hero {
	height: 500px !important;
}
}


/* --- LPボタン設定：ここから --- */
.lp-floating-contact {
    position: fixed !important;
    left: 2.5% !important;        /* 左右5%ずつ空けて中央寄せ */
    bottom: 5px !important;    /* 下端から浮かせてSafariの変色を防止 */
    width: 95% !important;      /* 以前の80%より少し拡大 */
    z-index: 99999 !important;
    display: flex !important;
    justify-content: center !important;
    background: transparent !important; /* 背景は透明にして他の要素を隠さない */
}

.lp-floating-contact a {
    width: 100% !important;
    height: 56px !important;
    background: #ff8c42 !important; /* ボタン色 */
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    /* border-radius: 50px !important;  丸角で独立感を出す */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* PC表示時にフローティングボタンを非表示 */
@media (min-width: 769px) {
    .lp-floating-contact {
        display: none !important;
    }
}

/* アイコン用設定 */
.lp-floating-contact a i {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
}
/* --- LPボタン設定：ここまで --- */
/* アイコン用設定 */
.lp-floating-contact a i {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
}
/* --- LPボタン設定：ここまで --- */

/*@media (max-width: 768px) {
  .gray-area {
    background-color: #f5f5f5;
    padding: 15px;
  }
*/
/* ===== 比較ブロック ===== */

.compare-wrap {
  gap: 24px;
}

.compare-box {
  background: #fff;
}

.compare-title {
  font-weight: bold;
  color: #fff;
}

.compare-right {
  border: 2px solid #1fa4ad;
}
.compare-left {
  border: 2px solid #9e9e9e;
}
.compare-left .compare-title {
  background: #9e9e9e;
}

.compare-right .compare-title {
  background: #1fa4ad;
}
/* ===== スマホ表示 ===== */
/* 全体レイアウト */
.compare-wrap {
  display: flex;
  align-items: stretch; /* ← 高さを揃える */
  gap: 24px;
  margin: 15px 0px 30px 0px;
}

/* ボックス共通 */
/*.compare-box {
  flex: 1;
  background: #fff;
  padding: 15px;
}
*/
.compare-box
 {
    flex: 1;
    background: #fff;
    padding: 0px 0px 15px 0px;
}
/* 見出し */
.compare-title {
  font-weight: bold;
  color: #fff;
  padding: 10px 16px;
  margin-bottom: 16px;
}

/* 左右で色を変える */
.compare-left .compare-title {
  background: #9e9e9e;
}

.compare-right .compare-title {
  background: #1fa4ad;
}

/* リスト */
.compare-box ul {
  padding-left: 0.5em;
  margin: 0;
}

.compare-box li {
  /*margin-bottom: 0.6em;*/
  margin: 3px 5px 5px;
}

/* 矢印（任意） */
.compare-arrow {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #1fa4ad;
  align-self: center;
}

/* ===== スマホ表示 ===== */
@media (max-width: 768px) {

  .compare-wrap {
    flex-direction: column;
  }

  /* 矢印を下向きに */
  .compare-arrow {
    border: none;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #1fa4ad;
    margin: 0 auto;
  }
}

/* DBS用説明SPAN　*/
.dbs {
  font-size: 17px;
  background-color: #1fa4ad;
  font-weight: bold;
  color: #fff;
  padding: 10px 10px 6px 10px;
  line-height: 2.2em;
}

/* frame-area for sp */
@media (max-width: 768px) {
.frame-3 {
    background: #e6f4ff;
    border-color: #1e73be;
    margin: 10px 0px;
    border-radius: 0px;
    padding: 15px 10px 10px;
 }
}

/* 保育用CSS　*/
body.single .entry p{
  margin-top: 5px;
}
body .entry h2 {
/*    text-align: center; */
    padding: 20px 0 10px;
    font-size: 24px;
}
body h3 {
    font-size: 22px;
    padding: 10px 0px 0px 0px;
}
h4 {
    font-size: 18px;
    padding: 0px;
	margin: 15px 0px 0px;
}


/* スマホだけ表示 */
@media (max-width: 767px){
  .sp-only{
    display: block;
  }
	br.mobile {
        display:block;
    }
}
/* スマホ・タブレット改行 */
@media (max-width: 1200px){
	br.mobile {
        display:block;
    }
}

/* アンカー使用時の表示修正 */
/* アンカーで見出しがヘッダーに隠れる対策（CSS版・強め） */
html, body{
 ?scroll-padding-top: 80px;
}

h2[id], h3[id], h4[id]{
  scroll-margin-top: 80px;
}

/* Easy Table of Contents等の目次プラグイン対策 */
.ez-toc-section{
 ?scroll-margin-top: 120px;
}

/* スマホ（767px以下）でサイドバーを非表示 */
@media (max-width: 767px) {
    #sidebar, .sidebar, .l-sidebar { /* テーマによりID/クラス名が異なります */
        display: none !important;
    }
#center_box {
width: 100%;
margin: 0px auto 50px;
float: none;
}

/* frame-half カルーセル用　Slick修正 */
/* --- SP（768px以下）は1枚表示前提 --- */
@media screen and (max-width: 768px) {
    .frame-half {
        padding: 10px;
    }
}

/* --- LPカルーセル用 ドット強制表示 --- */

.frame-container .slick-dots {
        bottom: -20px;
        margin: 0 auto;
}

.frame-container .slick-dots li button:before {
    font-size: 12px;
    color: #999;   /* 非アクティブ */
    opacity: 1;
}

.frame-container .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #000;   /* アクティブを黒に */
}

/* スマホ時（767px以下）：左右寄せの画像を中央配置にし、回り込みを解除 */
@media (max-width: 767px) {
  /* 左寄せ・右寄せ・中央寄せ、すべての画像に対して */
  .entry img.alignleft,
  .entry .wp-caption.alignleft,
  .entry img.alignright,
  .entry .wp-caption.alignright,
  .entry img.aligncenter,
  .entry .wp-caption.aligncenter {
    display: block !important;
    float: none !important;
    /* 左右の余白を強制的にautoにして中央へ */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    max-width: 100% !important;
    height: auto !important;
    /* もし親要素がflexの場合に備えて */
    width: 100%; 
  }
}

  /* テキスト側の回り込みも念のため強制解除 */
  .entry .alignleft + *, 
  .entry .alignright + * {
    clear: both;
  }
}

/* 20260226 書籍用カルーセル追加設定 */
/* ===============================
   書籍カルーセル専用
   =============================== */

.frame-container-book .gray-flex{
    display:flex;
    gap:20px;
    align-items: stretch;
}
/* SP */
@media (max-width:768px){

.frame-container-book .gray-flex{
    align-items:flex-start;
}

.frame-container-book .gray-image img{
    width:90px;
}

.frame-container-book .gray-text{
    font-size:14px;
    line-height:1.6;
}

}

@media (max-width:768px){

  .frame-container-book .gray-image{
    flex:0 0 35%;
  }

  .frame-container-book .gray-text{
 ? ?flex:0 0 65%;
  }

}



/* =========================
 フロー図設定・矢印型
========================= */
.horizontal-flow {
  display: flex;
  flex-direction: row; /* 常に横並び */
  justify-content: space-between;
  gap: 4px; /* 項目間の隙間 */
  width: 100%;
  margin: 20px 0;
  box-sizing: border-box;
}

.horizontal-flow .flow-item {
  flex: 1;
  min-width: 0; /* flexアイテムの縮小を許可 */
  padding: 15px 2px;
  text-align: center;
  font-weight: bold;
  font-size: 13px; /* 基本サイズ */
  line-height: 1.3;
  color: #004488 !important; /* 文字色は濃いネイビー */
  word-break: break-all; /* 強制折り返し */
  
  /* パズル型の矢印（左が凹み、右が凸） */
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
}

.horizontal-flow .label {
  font-size: 10px;
  display: inline-block;
  margin-bottom: 3px;
  opacity: 0.8;
}

/* 各ステップのパステル配色 */
.horizontal-flow .step1 { background-color: #e3f2fd !important; } /* 薄い青 */
.horizontal-flow .step2 { background-color: #e8f5e9 !important; } /* 薄い緑 */
.horizontal-flow .step3 { background-color: #fff9c4 !important; } /* 薄い黄 */
.horizontal-flow .step4 { background-color: #ffe0b2 !important; } /* 薄い橙 */
.horizontal-flow .step5 { background-color: #ffcdd2 !important; } /* 薄い赤 */
.horizontal-flow .step6 { background-color: #d7d7d7 !important; } /* 薄い灰 */

/* 端の処理 */
.horizontal-flow .flow-item:first-child {
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%) !important;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%) !important;
}
.horizontal-flow .flow-item:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 50%) !important;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 50%) !important;
}

/* スマホ用微調整（画面幅が狭い時） */
@media screen and (max-width: 480px) {
  .horizontal-flow .flow-item {
    font-size: 9px; /* スマホでは文字を小さく */
    padding: 10px 1px;
  }
  .horizontal-flow .label {
    font-size: 8px;
  }
}

/* 農業LP用グリッドメニュー */
/* =========================
   レスポンシブ
========================= */

/*
.lpmenu-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
/*  margin:0 !important; */
  padding:0 !important;
  margin: 10px 0px;
}
*/
/* GRIDメニューからbrを削除 */
.lpmenu-grid > br,
.lpmenu-thumb br,
.lpmenu-body br,
.lpmenu-item br {
  display: none !important;
}

/* ============================================================
   SP・タブレット共通：LPアーカイブ アコーディオン
   iPad Air / Pro (縦・横) および 全スマホをカバー
   ============================================================ */

/* 1025px 以下のデバイスで発動 */
@media (max-width: 1025px) {
  /* --- 1. 全体コンテナ（1カラム化） --- */
  .accordion-item {
    display: block !important; /* PC版のgridを強制解除 */
    width: 92%;
    max-width: 850px;
    margin: 0 auto 12px;
    padding: 0;
    border-bottom: none;
  }

  /* --- 2. 大項目（見出し部分） --- */
  .accordion-header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f6f6f6;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    border: none;
    border-bottom: 1px solid #ccc;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* --- 3. ＋／－アイコン（白丸） --- */
  .accordion-header .icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
  }

  /* 横線（－） */
  .accordion-header .icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: #555;
    border-radius: 2px;
    transform: translate(-50%, -50%);
  }

  /* 縦線（＋） ※閉じてる時のみ表示 */
  .accordion-header .icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 12px;
    background: #555;
    border-radius: 2px;
    transform: translate(-50%, -50%);
  }

  /* 開いた状態：縦線を消す */
  .accordion-item.is-open .accordion-header .icon::after {
    opacity: 0;
  }

  /* --- 4. アコーディオン本体（初期は非表示） --- */
  .accordion-body {
    display: block !important; /* PCのgridを解除 */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: #fff;
    padding: 0 20px;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
  }

  /* 開いた状態 */
  .accordion-item.is-open .accordion-body {
    max-height: 4000px; /* 中身が長くても大丈夫なように */
    opacity: 1;
    padding: 20px 20px;
    border-bottom: 1px solid #ddd;
  }

  /* --- 5. 小項目リスト --- */
  .lp-text-item {
    margin-bottom: 15px;
    display: block;
  }

  .lp-text-link {
    position: relative;
    display: block;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    text-decoration: none;
  }

  /* 三角マーク */
  .lp-text-link::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 0.2em;
    font-size: 0.8em;
    color: #666;
  }

} /* メディアクエリ終了 */

  .gray-area {
    background-color: #f5f5f5;
	width: 100%;
	margin:15px 0px;
	padding: 20px 3px 3px 3px;
  }
@media screen and (max-width: 768px) {
  .frame-half,
  .gray-flex .gray-image img {
        width: 70%;
        height: auto;
        display: block;
        margin: 0 auto; /* 中央配置 */
    }

}


/* =============================================
   LPヘッダー設定：絶対位置指定版
   ============================================= */

/* 1. 背景と文字エリアの共通設定 */
body.single-lp #door,
body.single-lp .hero {
    height: 350px !important;
    min-height: 350px !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. 背景（画像・動画） */
body.single-lp #door {
    z-index: 1 !important;
}
body.single-lp #door img,
body.single-lp #door video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. 文字エリア（ここが重要） */
body.single-lp .hero {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    background: transparent !important;
    display: block !important; /* Flexをやめて単純な箱にする */
}

/* 4. タイトルの入った中身（hero-inner）を直接動かす */
body.single-lp .hero-inner {
    position: absolute !important;
    /* 【ここを調整！】上から何ピクセルの位置に置くか */
    top: 200px !important; 
    
    left: 50% !important;
    transform: translateX(-50%) !important; /* 左右中央に配置 */
    width: 90% !important;
    text-align: center !important;
}

/* 5. 抜粋は消す */
body.single-lp .lp-excerpt {
    display: none !important;
}

/* 6. スマホ版の設定 */
@media (max-width: 767px) {
    body.single-lp #door,
    body.single-lp .hero {
        height: 200px !important;
        min-height: 200px !important;
    }
    body.single-lp .hero-inner {
        /* スマホでのタイトルの位置 */
        top: 105px !important; 
    }
}


/* =========================
   詳細・amazon ボタン（PC）
========================= */
.ga-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  justify-content: flex-end;
}
.ga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 140px;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none !important;
  transition: .3s;
  white-space: nowrap;
}
.ga-btn::after {
  content: "›";
  margin-left: 6px;
  transition: transform .3s;
}
.ga-btn:hover::after {
  transform: translateX(4px);
}
.ga-btn-red   { background: #ed5211; }
.ga-btn-black { background: #222; }
.ga-btn:hover { opacity: .85; }


/* =========================
   スマホ
========================= */
@media (max-width: 1024px) {
  .ga-btn-wrap {
    display: flex;         /* ← 追加 */
    flex-direction: column;
    align-items: flex-end; /* 右寄せ */
    gap: 8px;
  }
  .ga-btn {
    width: 160px; /* 固定幅 */
    flex: none;
    padding: 8px 12px;
    justify-content: center;
  }
}

/* アコーディオン用フレーム（仮） */
.frame-ac {
    width: 100%;
    margin: 10px 0px 30px 0px;
    border: solid 1px #DDD;
    padding: 20px 0px;
}

/* =========================
   スマホ：カード表示（コンパクト横並び）
========================= */

@media(max-width:600px){

  .lpmenu-grid{
    grid-template-columns:1fr;
    gap:10px; /* ←カード間の余白を少し広げる */
  }

  /* カード */
  .lpmenu-item{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:12px;
    box-shadow:0 3px 8px rgba(0,0,0,0.05);
  }

  /* 横並び */
  .lpmenu-link{
    display:flex;
    align-items:center;
    gap:14px;
  }

  /* 画像 */
  .lpmenu-thumb{
    width:100px;
    flex-shrink:0;
    margin:0;
  }

  .lpmenu-thumb img{
    width:100%;
    height:auto;
 ? /* border-radius:6px; /* 少しだけカード感 */ */
  }

  /* タイトル＋矢印 */
  .lpmenu-body{
    flex:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0;
  }

  .lpmenu-text{
    font-size:16px;
    line-height:1.2;
  }

}
@media(max-width:600px){
  .lpmenu-item{
    transition:.2s;
  }

  .lpmenu-item:active{
    transform:scale(0.98);
  }
}

@media (max-width:768px){

  .lpmenu-grid{
    grid-template-columns:1fr !important;
    gap:5px !important;
  }

}

/* =================================================
   lpmenu Layout Base
================================================= */

/* --- グリッド --- */
.lpmenu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 65px;
  margin:15px 0 15px 0;
}

/* --- 不要な改行除去（クラシックエディタ対策） --- */
.lpmenu-grid br{
  display:none !important;
}


/* =================================================
   カード基本（PC）
================================================= */

/* リンク全体 */
.lpmenu-item{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* 画像 */
.lpmenu-thumb{
  line-height:0;
}

.lpmenu-thumb img{
  width:100%;
  height:auto;
  display:block;
}

/* タイトル＋矢印 */
.lpmenu-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin:10px 0;
}

.lpmenu-text{
  font-size:17px;
  line-height:1.4;
}

.lpmenu-arrow{
  margin-left:10px;
  margin-right:5px;
  white-space:nowrap;
  transition:.2s;
}

/* hover */
.lpmenu-item:hover .lpmenu-arrow{
  transform:translateX(4px);
}


/* =================================================
   タブレット（1200以下）
   ※列はPCと同じ3列、gapのみ調整
================================================= */
@media (max-width:1200px){

  .lpmenu-grid{
    gap:20px 24px;
  }

}

/* =========================
   スマホ（800以下）
========================= */
@media (max-width:800px){

  .lpmenu-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  /* カード */
  .lpmenu-item{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:5px;
    box-shadow:0 3px 8px rgba(0,0,0,0.05);
  }

  /* 横並び（ここが重要） */
  .lpmenu-link{
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* 画像 */
  .lpmenu-thumb{
    width:120px;
    flex-shrink:0;
  }

  .lpmenu-thumb img{
    width:100%;
    height:auto;
    display:block;
  }

  /* テキスト＋矢印 */
  .lpmenu-body{
    flex:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0;
  }

  .lpmenu-text{
    font-size:16px;
    line-height:1.4;
  }

}


/* =================================================
   スマホ操作感（任意）
================================================= */
@media (max-width:600px){

  .lpmenu-item{
    transition:.2s;
  }

  .lpmenu-item:active{
    transform:scale(0.98);
  }

}

/* ======================
   Gray Flex 安定版
====================== */

.gray-flex{
  display:flex;
  gap:30px;
  align-items:flex-start;
  flex-wrap:nowrap;   /* ← 折り返し禁止 */
}

/* 画像 */
.gray-image{
  flex:0 0 35%;   /* ← widthより安定 */
  min-width:0;    /* ← 超重要 */
}

.gray-image img{
  width:100%;
  height:auto;
  display:block;
}
/* ======================
   Gray Flex 安定版
====================== */
.gray-flex {
  display: flex;
  gap: 15px;
  align-items: stretch; /* ← flex-start から変更 */
  flex-wrap: nowrap;
}
/* 画像 */
.gray-image {
  flex: 0 0 30%;
  min-width: 0;
}
.gray-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* テキスト */
.gray-text {
  flex: 2;
  min-width: 0;
  display: flex;         /* ← 追加 */
  flex-direction: column; /* ← 追加 */
}
.gray-text p {
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gray-flex {
    flex-wrap: nowrap;
  }
  .gray-image {
    width: 38%;
  }
  .gray-text {
    width: 62%;
    display: flex;         /* ← 追加 */
    flex-direction: column; /* ← 追加 */
  }
}
/* =====================
   スマホだけ縦
===================== */
@media (max-width: 767px) {
  .gray-flex {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .gray-image,
  .gray-text {
    flex: none;
    width: 100%;
  }
}
/* =========================
   カルーセル内だけ横固定
========================= */
@media (max-width: 767px) {
  .frame-container .gray-flex {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .frame-container .gray-image {
    flex: 0 0 40%;
  }
  .frame-container .gray-text {
    flex: 1;
    display: flex;         /* ← 追加 */
    flex-direction: column; /* ← 追加 */
  }
}