@charset "UTF-8";
/* =========================
RESET
========================= */
html lang {
  margin-top: 0;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

img{
max-width:100%;
height:auto;
display:block;
}


body{
font-family: "Zen Maru Gothic", sans-serif;

color:#333;
line-height:1.8;
background:#ffffff;
position: relative;
}

a{
text-decoration:none;
}

/* =========================
HEADER
========================= */

.header{

position: fixed;
width: 100%;
z-index: 999;
background-color: #ffffff;
box-shadow:
0 10px 30px rgba(164, 164, 164, 0.08);
}

.header__inner{
padding: 15px 30px;
max-width:1350px;
margin:auto;



display:flex;
justify-content:space-between;
align-items:center;

}
.mail_menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

}
.menu{
    width: 35px;
}
.header-btn{
    display: flex;
    flex-direction: row;
    font-weight:300;
}
.mail{
    width: 25px;
}

/* =========================
logo
========================= */
/* ロゴ全体のスタイル */
.logo {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  gap: 10px; /* 画像とテキストの間の余白 */
  text-decoration: none; /* リンクの下線を消す */
}

/* ロゴ画像 */
.logo img {
  width: auto; /* 幅は自動（元の画像の比率を維持） */
  height: 68px; /* 高さを添付画像に合わせて調整 */
}

/* ロゴテキスト全体のラッパー */
.logo-wrap {
  display: flex;
  flex-direction: column;
}

/* ロゴテキスト行のラッパー */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1; /* 行間を非常に狭くする */
  gap: 7px;
}

/* 「夫婦カウンセリングの」 */
.logo-text-p {
  font-size: 11px; /* 小さなサイズ */
  font-weight: 550; /* 通常の太さ */
  color: #494949; /* 深めのグレー */
  letter-spacing: 1.6px; /* 文字間隔を調整 */
  margin-bottom: -2px; /* 次の行との行間を詰める */
  color: #10462e;
}

/* 「ごきげん家族ラボ」 */
.logo-main {
  margin-left: -3px;
  font-size: 21px; /* 大きなサイズ */
  font-weight: 700; /* 太字 */
  color: #364528; /* 深い緑 */
  letter-spacing: 1.5px; /* 文字間隔を調整 */
  margin-bottom: -1px; /* 次の行との行間を詰める */
}

/* 「ごきげん家族ラボ」の中の「家族ラボ」 */
.logo-main .green-text {
  color: #598a22; /* 明るい緑（ロゴ画像の山やサブテキストと同じ色） */
}

/* 「オンライン相談室」 */
.logo-sub {
  font-size: 11px; /* 小さなサイズ */
  font-weight: 550; /* 中くらいの太さ */
  color: #64a915; /* 明るい緑 */
  letter-spacing: 1.6px; /* 文字間隔を調整 */
  text-align: left; /* 左寄せ */
}

/* 画像とテキストの垂直方向の配置調整（必要に応じて） */
/* 例えば、画像がテキストに対して少し上にずれる場合 */
.logo img {
  /* margin-top: -6px; */
  width: 46px;
  height: auto;
}

.header-btn{
background:#f47b20;
color:#fff;
padding:10px 25px;
border-radius:999px;
transition:.3s;
display: flex;
flex-direction: row;
font-weight:400;
gap: 5px;
}


.header-btn:hover{
opacity:.8;
}

/* ==========================================
   Header
========================================== */
.header {
  position: fixed;
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(164, 164, 164, 0.08);
}

.header__inner {
  padding: 15px 30px;
  max-width: 1350px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 右側ボタンの並び（横並びで15pxの間隔） */
.mail_menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px; /* ボタン同士の間隔を調整 */
}

/* ボタン共通のベーススタイル */
.header-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px; /* アイコンと文字の間隔 */
  padding: 10px 25px;
  border-radius: 999px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: .3s;
}


.header-btn--line{
padding-left: 14px;
padding-right: 25px;
padding-top: 3px;
padding-bottom: 3px;
}

.header-btn:hover {
  opacity: .8;
}

/* 各ボタンの固有カラー設定 */
.header-btn--line {
  background: #06C755; /* LINE公式のブランドカラー */
  gap: 0px;
}

.header-btn--mail {
  background: #f47b20; /* お問い合わせのオレンジ */
}

/* アイコンのサイズ調整 */
.line-icon {
  width: 40px;
  height: auto;
  display: block;
}


.mail {
  width: 20px;
  height: auto;
  display: block;
}
/* 文字の調整 */
.mail_text {
  letter-spacing: 1.5px;
  margin: 0;
  font-size: 14px;
  white-space: nowrap; /* ボタン内で文字が改行されるのを防ぐ */
}
/* =========================
FV
========================= */

.fv{
padding:89px 50px 0px 50px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;

position: relative;
z-index: -1;

}

.fv__flower__box{
    position: absolute;
    left: 0;
    z-index: -2;
}

.fv__inner{
max-width:1280px;
display:flex;
align-items:center;
justify-content: center;
}

.fv__content{

width: 47%;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 20px;

}

.fv__visual{
width: 53%;
position:relative;
display: flex;
flex-direction: column;
justify-content: center;

}

.fv__visual img{
width:100%;
border-radius:20px;
object-fit:cover;
}

.fv__title{
width: fit-content;
font-size:45px;
font-weight:700;
line-height:1.5;
margin-bottom:20px;
text-shadow:
    0 0 8px  rgb(255, 255, 255), /* 中心近く：くっきり濃い白 */
    0 0 15px rgb(255, 255, 255), /* 中間：しっかり不透明な白 */
    0 0 30px rgba(255, 255, 255, 0.9), /* 外側1：ほわっと広がる白 */
    0 0 45px rgba(255, 255, 255, 0.6); /* 外側2：境界を馴染ませる薄い白 */
}

.fv__title span{
color:#f47b20;
}

.fv__text{
font-size:18px;
margin-bottom:65px;
font-weight: 450;
text-shadow:
    0 0 8px  rgba(255, 255, 255, 1.0), /* 中心近く：くっきり濃い白 */
    0 0 15px rgba(255, 255, 255, 1.0), /* 中間：しっかり不透明な白 */
    0 0 30px rgba(255, 255, 255, 0.9), /* 外側1：ほわっと広がる白 */
    0 0 45px rgba(255, 255, 255, 0.6); /* 外側2：境界を馴染ませる薄い白 */
}

.fv-book{
display:flex;
gap:18px;
align-items:center;
width: fit-content;

background:#fff;

padding:15px 25px 15px 15px;
border-radius:3px;
border:solid 1px #c1c1c1;

overflow:visible;
}

.fv-book__image{
display: flex;
flex-direction: row;
width:130px;

margin-top: -10%;
margin-bottom: -10%;
}

.fv-book__image2{
    height: fit-content;
}

.fv-book__label{
display:inline-block;

background:#3e8a57;
color:#fff;

padding:13px 25px;
border-radius:8px;

font-size:14px;
margin-bottom:12px;
}

.fv-book__name{
font-size:28px;
font-weight:700;
color:#3e8a57;
}

.fv-book__info{
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fv-book__label{
    display:inline-block;

    background:#5d8f67;
    color:#fff;

    font-size:19px;
    font-weight:500;
    letter-spacing: 2px;
    line-height: 100%;

    padding:8px 25px;
    border-radius:2px;

    margin-bottom:12px;
}

.fv-book__title{
    font-size:18px;
    font-weight:500;
    color:#222;

    line-height:1.4;
    margin-bottom:12px;
}

.fv-book__title_span{
    color: #517626;
    font-size: 25px;
}

.fv-book__text{
    font-size:15px;
    line-height:2;
    color:#555;
}

.fv-badge{
color: #ffffff;
position:absolute;
letter-spacing: 1.5px;
font-size: 17px;

right:20px;
bottom:4px;
line-height: 170%;

width:165px;
height:165px;

background:#C9A66C;

border-radius:50%;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

font-weight:500;

box-shadow:
0 10px 30px rgba(0,0,0,.08);
}

/* お悩み以降 */



.section-trouble,.section-maintenance, .section-services,.section-price,.section-profile,.section-flow,.section-faq,.section-column{
  margin-bottom: 60px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FEFBF5;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-right: 40px;
  padding-left: 40px;
  gap: 20px;
  margin-bottom: 20px;
  z-index: 88;

}


/* 見出しのデザイン */
.section-title {
  font-size: 26px;
  text-align: center;
  color: #2c2c2c;
  font-weight: 550;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.section-title br{
  display: none;
}
.section-title-box{
    display: flex;
    flex-direction: row;
    gap: 20px;
   
}


/* ==========================================================================
   SECTION 1: こんなお悩みはありませんか？ (4カラム)
   ========================================================================== */
.grid-4column {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.card-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px 23px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 5px rgba(147, 147, 147, 0.08);
}

.card-icon {
  margin-bottom: 15px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dummy-icon {
  font-size: 40px; /* ダミー絵文字サイズ */
}

.card-title {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 12px 0;
  color: #333333;
}

.card-text {
  font-size: 14px;
  margin: 0;
  text-align: center;
  font-weight: 450;
  color: #333333;
  letter-spacing: 1.8px;
}

/* ==========================================================================
   SECTION 2: 定期的なメンテナンス
   ========================================================================== */
.maintenance-box {
    width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 30px 25px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.maintenance-center {
  text-align: center;
  

}

.maintenance-title {
  font-size: 25px;
  color: #0a5c36; /* 深いグリーン */
  margin: 0 0 15px 0;
  font-weight: bold;
}

.maintenance-title br{
  display: none;
}

.maintenance-text {
  line-height: 200%;
  font-size: 16px;
  font-weight: 450;
  margin: 0;
  color: #333333;
  letter-spacing: 1.8px;
  display: inline-block;
  text-align: center;
}

.maintenance-tablet-icon2{
  display: none;
}
.dummy-icon-large {
  font-size: 50px;
}

/* ==========================================================================
   SECTION 3: こきげん家族ラボのサービス (3カラム)
   ========================================================================== */
.grid-3column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.service-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px 17px 17px 17px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 13px;
  text-align: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.service-icon {
  
}

.service-icon {
  padding-top: 5px;
}

.service-content {
  width: 100%;
  text-align: start;
}

.service-title {
  width: fit-content;
  font-size: 18px;
  color: #0a5c36; /* 深いグリーン */
  margin: 0 0 15px 0;
  line-height: 1.4;
  font-weight: bold;
  letter-spacing: 1.8px;
}

.highlight-orange {
  color: #ee7800; /* オレンジのアクセントカラー */
}

.service-text {
 
  width: fit-content;
  font-size: 14px;
  margin: 0;
  text-align: left;
  color: #444444;
  font-weight: 450;
  letter-spacing: 1.8px;
}

.grid-3column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.service-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px 17px 17px 17px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 13px;
  /* text-align: center; と justify-content: center; は横並び（row）で左寄せにしたい場合は不要なため削除してスッキリさせました */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.service-icon {
  padding-top: 5px;
}

/* ==========================================
   👇 ここを追加：アイコン画像のサイズをガチッと固定
   ========================================== */
.dummy-icon-service {
  display: block;
  width: 50px;   /* 💡アイコンを表示したい横幅（デザインに合わせて40px〜60px等で微調整してください） */
  height: 50px;  /* 💡アイコンを表示したい縦幅 */
}

.dummy-icon-service img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 💡どんな縦横比の画像が来ても、枠内に綺麗に収める魔法の指定 */
}
/* ========================================== */

.service-content {
  /* width: 100%; だとアイコンの横幅を圧迫して潰す原因になるので、Flexbox用のレスポンシブな指定に変更 */
  flex: 1;
  text-align: start;
}

.service-title {
  width: fit-content;
  font-size: 18px;
  color: #0a5c36; /* 深いグリーン */
  margin: 0 0 15px 0;
  line-height: 1.4;
  font-weight: bold;
  letter-spacing: 1.8px;
}

.highlight-orange {
  color: #ee7800; /* オレンジのアクセントカラー */
}

.service-text {
  width: fit-content;
  font-size: 14px;
  margin: 0;
  text-align: left;
  color: #444444;
  font-weight: 450;
  letter-spacing: 1.8px;
}
/* ==========================================================================
   SECTION 4: ご相談料金
   ========================================================================== */


   .price-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  
}

/* 緑色の丸型時間バッジ */
.price-time-badge {
  background-color: #0a5c36; /* 深いグリーン */
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* スマホ等で丸が潰れるのを防ぐ */
}

.badge-unit {
  font-size: 19px;
  font-weight: normal;
  margin-left: 2px;
}

.price-wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  gap: 15px;
}

.grid-3column{
  flex: 1;
}

.price-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
}

.price-menu-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 15px 0 0;
  color: #0a5c36;
  line-height: 100%;
} 

.price-amount {
  line-height: 130%;
  font-size: 45px;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

/* 金額の色分け */
.amount-orange {
  color: #f89532; /* 無料用のオレンジ */
}
.amount-brown {
  color: #f89532; /* 金額用のブラウン調オレンジ */
}

.price-unit {
  font-size: 25px;
  font-weight: normal;
  font-weight: 500;
  margin-left: 4px;
}

/* ==========================================================================
   SECTION 5: 相談員プロフィール
   ========================================================================== */
.profile-box {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* 左側：画像エリア */
.profile-image-area {
  flex-shrink: 0;
}
.profile_right{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover; /* 画像が縦横に歪むのを防ぐ */
}

/* 右側：テキストエリア */
.profile-text-area {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}

.profile-sub {
  font-size: 16px;
  color: #333333;
  margin: 0 0 3px 0;
   font-weight: 450;
}

.profile-name {
  line-height: 100%;
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 19px 0;
  color: #000000;
}

.profile-description {
  letter-spacing: 1.5px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  color: #333333;
   font-weight: 450;
}

/* チェックリスト */
.profile-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-checklist li {
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  color: #000000;
  font-weight: 450;
}

.profile-checklist li:last-child {
  margin-bottom: 0;
}

/* 緑のチェックアイコンを擬似要素で再現 */
.profile-checklist li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: #0a5c36;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 6: ご相談の流れ
   ========================================================================== */
.flow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  align-items: stretch;
  width: 100%;
}

.flow-card {
  background-color: #ffffff;
  border-radius: 8px;
  flex: 1;
  padding: 35px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.flow-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  justify-content: center;
  flex-direction: column;
}

.flow-number {
  background-color: #0a5c36;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #111111;
  text-align: center;
  line-height: 120%;
}

.flow-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-direction: column;
 
}

.flow-icon {
  font-size: 40px;
  color: #0a5c36;
}


.flow-text {
  font-size: 14px;
  margin: 0;
  color: #444444;
  font-weight: 450;
  text-align: center;
}

.flow-icon img{
  width:40px;
  min-width:30px;
}

/* 矢印 */
.flow-arrow {
  color: #a3c2b2; /* 薄いグリーン */
  font-size: 35px;
  text-align: center;
  margin: auto 0;
  letter-spacing: 0.0001px;
  line-height: 80%;
}

/* ==========================================================================
   SECTION 7: よくあるご質問 (CSSトグル)
   ========================================================================== */
.faq-container {

  margin: 0 auto;
  width: 100%;
  
}

.faq-item {
  background-color: #ffffff;
  border: 1px solid #e6ede9;
  border-radius: 30px; /* 画像通りの丸みのあるカプセル型 */
  margin-bottom: 12px;
  overflow: hidden;
}

/* クリックするヘッダー部分 */
.faq-question {
  padding: 15px 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none; /* デフォルトの三角矢印を消す */
  position: relative;
  font-weight: bold;
}

.faq-question::-webkit-details-marker {
  display: none; /* Safari用の三角矢印消し */
}

.faq-q-icon {
  color: #0a5c36;
  font-size: 18px;
  margin-right: 15px;
}

.faq-q-text {
  font-size: 16px;
  color: #222222;
  flex: 1;
  font-weight: 450;
  padding-right: 18px;
}

/* 右側の開閉矢印（CSSの擬似要素で自作） */
.faq-question::after {
  content: "";
  position: absolute;
  right: 30px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translateY(-50%) rotate(45deg); /* 下向き矢印 */
  transition: transform 0.3s;
}

/* アコーディオンが開いているとき（open属性がついたとき）の矢印の向き */
.faq-item[open] .faq-question::after {
  transform: translateY(-25%) rotate(-135deg); /* 上向き矢印に */
}

/* 中身の回答エリア */
.faq-answer {
  padding: 0 30px 20px 63px; /* Qのアイコンの位置に揃えてテキストを引っ込める */
  font-size: 15px;
  color: #555555;
  border-top: 1px dashed #e6ede9; /* 開いたときにうっすら境界線 */
  margin-top: -5px;
  padding-top: 15px;
}

.faq-answer p {
  margin: 0;
  font-size: 16px;
  letter-spacing: 1.7px;
  font-weight: 450;
}

/* ==========================================================================
   SECTION 8: コラム
   ========================================================================== */

   .column-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.column-main-title {
  font-size: 24px;
  margin: 0 0 5px 0;
  text-align: left;
}

.column-sub-title {
  font-size: 15px;
  margin: 0;
  color: #333333;
  font-weight: 500;
  letter-spacing: 1.8px;
}

/* 記事一覧へ ボタン */
.btn_more_box{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: -50px;
}
.btn-more {
  background-color: #ffffff;
  border: 1px solid #b6c0bb;
  color: #0a5c36;
  padding: 8px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.btn-more:hover {
  background-color: #0a5c36;
  color: #ffffff;
}

/* ブログカード */
.grid-3column.blog {
  gap: 45px;
}
.blog-card {
  border-radius: 1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-img-thumb {
  
  position: relative;
  flex-shrink: 0;

}

.blog-img-thumb img {
  border-radius: 1px;
   width:100%;
  height:auto;
  display:block;
}



.blog-meta {

  flex: 1;
}

.blog-date-categoly{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 8px;
  align-items: center;
  gap: 8px;
}
.blog-date {
  font-size: 14px;
  color: #a3c2b2;
  display: block;
  line-height: 100%;
  
}
.categoly{
  line-height: 100%;
  font-size: 14px;
  padding: 3px 15px;
  border: solid 1px #0a5c36;
  color: #ffffff;
  border-radius: 999px;
  background-color: #0a5c36;
  letter-spacing: 1.8px;
}

.blog-title {
  
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 450;
  margin: 0 0 8px 0;
  line-height: 1.4;
  color: #111111;
}

.blog-excerpt {
  font-size: 12px;
  color: #666666;
  margin: 0;
  line-height: 1.5;
}


/* ==========================================================================
   FOOTER: フッター
   ========================================================================== */
.site-footer {

position: relative;
}
.footer_background{
  width: 100%;
  position: absolute;
  bottom: 0px;
  z-index: -1;
}
/* フッターのメインエリア（横幅を制限して中央寄せ） */
.footer-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

/* 左側：ロゴ・ブランドエリア */
.logo.footer {
  /* margin-left: -30px;
  margin-bottom: 30px; */
}
.logo-text.footer {
  /* align-items: center; */
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-logo img {
  width: 65px; /* ロゴ画像のサイズ調整 */
  height: auto;
  display: block;
}

.footer-site-name {
  font-size: 28px;
  font-weight: bold;
  color: #111111;
  margin: 0 0 4px 0;
  letter-spacing: 0.05em;
}

.footer-sub-name {
  font-size: 14px;
  color: #0a5c36; /* シンボルカラーの深いグリーン */
  margin: 0;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* 中央ボタンエリア */
.footer-cta {

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* お問い合わせボタン */
.btn-contact {
  background-color: #ee7800; /* アクセントのオレンジ */
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px;
  border-radius: 12px; /* カプセル風の丸み */
  box-shadow: 0 4px 12px rgba(238, 120, 0, 0.2); /* ほんのりオレンジの影 */
  transition: all 0.3s ease;
}

/* ボタンのホバーエフェクト */
.btn-contact:hover {
  background-color: #d66c00;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(238, 120, 0, 0.3);
}

.icon-mail {
  font-size: 20px;
  line-height: 1;
}

/* コピーライトエリア（上の薄い線） */

.footer_p{
  font-weight: 650;
  text-shadow: 0 0 8px #ffffff, 0 0 15px #ffffff;
  letter-spacing: 1.8px;
  font-size: 14px;
}


.footer-copyright {
  border-top: 1px solid #e6ede9; /* 薄いグレーグリーンの区切り線 */
  text-align: center;
  
}

.footer-copyright small {
  font-size: 12px;
  color: #666666;
}

.footer-container{
padding: 5px 30px;
max-width:1350px;
margin:auto;



display:flex;
flex-direction: row;
align-items:center;
margin-bottom: 10px;
margin-top: 20px;
justify-content: center;
gap: 190px;

}

/* ==========================================================================
   SINGLE COLUMN: コラム詳細ページ専用スタイル
   ========================================================================== */
.single-main {
  padding-top: 95px;
  background-color: #FEFBF5;
  padding-bottom: 80px;
}

/* パンくずリスト（一覧ページと共通） */
.breadcrumb-container {
  max-width: 800px;
  margin: 0 auto;

}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #666666;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: #aaaaaa;
}

.breadcrumb a {
  color: #666666;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}


.breadcrumbs{
  max-width: 1280px;
  width: 100%;
}
/* ① パンくずエリア全体の文字サイズを指定（矢印「 > 」もこれで小さくなります） */
.breadcrumbs {
  font-size: 13px;       /* 12px〜14pxあたりでお好みに調整してください */
  color: #666666;        /* 全体の文字色（グレー系） */
}

/* ② 「HOME」などのリンク文字もピンポイントで同じサイズにする */
.breadcrumbs a span {
  font-size: 13px !important; 
  color:#666666;  
}

/* ③ 「お問い合わせ」など今いるページの文字もピンポイントで同じサイズにする */
.breadcrumbs .current-item {
  font-size: 13px !important;
  color: #333333;        /* 今いるページは少し濃いめの色に */
}

/* 記事全体の外枠（デザインに合わせた幅と中央配置） */
.single-article-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 40px;
  border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}
/* 自動生成されたpタグの中身を横並び(フレックス)にする */
.form-label-wrap p {
  display: flex;
justify-content: flex-start;
  align-items: center; /* 上下中央揃え */
  gap: 8px;            /* 「お名前」と「必須」の間の隙間 */
  margin: 0;           /* WordPressが勝手につける謎の余白を消す */
}

/* 自動生成された不要なbrタグを画面から消し去る */
.form-label-wrap br {
  display: none !important;
}
/* 記事ヘッダー */
.entry-header {
  margin-bottom: 24px;
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* カテゴリーバッジ */
.category-badge {
  background-color: #0a5c36;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 4px;
}

.entry-date {
  font-size: 13px;
  color: #888888;
}

.entry-title {
  font-size: 26px;
  font-weight: 550;
  color: #111111;
  line-height: 1.4;
  letter-spacing: 1.8px;
  margin: 0;
}

/* アイキャッチ画像 */
.entry-eyecatch {
  margin-bottom: 24px;
  border-radius: 2px;
  overflow: hidden;
}

.entry-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
}

/* SNSシェアボタン */
.sns-share-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e6ede9;
  padding-bottom: 16px;
}

.share-label {
  font-size: 13px;
  color: #555555;
}

.share-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}



.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: opacity 0.2s;
}

.share-btn:hover {
  opacity: 0.8;
}

/* デザイン画像の丸ボタン背景色（仮アイコン用） */
.share-btn.tw { background-color: #1d9bf0; }
.share-btn.fb { background-color: #1877f2; }
.share-btn.line { background-color: #06c755; }

.share-btn img {
  width: 14px;
  height: auto;
}

/* 記事本文スタイル */
.entry-content {
  font-size: 15px;
  color: #333333;
  line-height: 1.8;
  margin-bottom: 60px;
}

.entry-content p {
  margin: 0 0 1.5em 0;
}

/* H2見出し（1, 2, 3のポイントブロック） */
.point-block {
  margin-top: 40px;
  margin-bottom: 30px;
}
.point_text{
  font-size: 16px;
  letter-spacing: 0.01px;

  
}

.point-title ,.wp-block-heading {
  font-size: 20px;
  font-weight: bold;
  color: #111111;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 30px 0;
  line-height: 1.4;
  letter-spacing: 0.05px;

  display: flex;
  align-items: stretch; /* 👈 中の子要素（数字）を文字の全体の高さまでグッと引き伸ばす */
  gap: 10px;
}

/* WordPressのブロックエディタが出力するH2見出しのスタイル */
.entry-content h2.wp-block-heading {
  position: relative;
  padding-left: 18px;       /* 左側の縦線と文字の間の隙間 */
  font-size: 22px;          /* 文字の大きさ（デザインに合わせて調整してね） */
  font-weight: bold;
  color: #333333;           /* 文字の色 */
  line-height: 1.5;
  margin-top: 40px;         /* 見出しの上の余白 */
  margin-bottom: 20px;      /* 見出しの下の余白 */
}

/* 左側の緑の縦線を擬似要素（::before）で作る */
.entry-content h2.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;                 /* 線の位置（上からの距離） */
  width: 6px;               /* 縦線の太さ */
  height: calc(100% - 8px); /* 線の長さ（上下に少し余白を持たせる） */
  background-color: #0d5c3a;/* ★あなたのサイトのテーマカラー（濃い緑） */
  border-radius: 2px;       /* 線の角をほんの少し丸くして綺麗に見せる */
}

/* ナンバリングの緑丸 */
.point-number {
  background-color: #0a5c36;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  width: 7px;
  height: auto;
  margin-top: -4px;
  margin-bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 1px;
}

/* まとめボックス */
.summary-box {
  margin-top: 50px;
  background-color: #fdfbf7;
  border: 1px solid #e6ede9;
  border-radius: 12px;
  padding: 24px 30px;
}

.summary-box-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.summary-box-icon {
  width: 32px;
  flex-shrink: 0;
  margin-top: 4px;
}

.summary-box-icon img {
  width: 100%;
  height: auto;
}

.summary-box-text p {
  margin: 0;
  font-size: 14px;
  color: #444444;
}

.summary-box-text p:not(:last-child) {
  margin-bottom: 6px;
}

/* 記事ナビゲーション */
.post-navigation {
  border-top: 1px solid #e6ede9;
  padding-top: 30px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.nav-prev, .nav-next {
  width: 50%;
}

.nav-next {
  text-align: right;
}

.post-navigation a {
  text-decoration: none;
  display: block;
}

.nav-arrow {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 6px;
}

.nav-post-title {
  display: block;
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
}

.post-navigation a:hover .nav-post-title {
  text-decoration: underline;
  color: #0a5c36;
}


/* ==========================================================================
   CONTACT FORM: お問い合わせフォーム（CF7考慮版）
   ========================================================================== */
.contact-main {
  background-color: #fdfbf7;
  padding: 60px 20px;
}

.contact-container {
  
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 40px;
  border-radius: 12px;
  /* padding-top: 20px; */
}

/* 各入力行の基本レイアウト（横並び） */
.form-row, 
.form-row-textarea {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f5efeb; /* うっすらとした区切り線 */
}

/* テキストエリアの行だけは上に揃える */
.form-row-textarea {
  align-items: flex-start;
}

/* 左側：ラベルと必須バッジのエリア */
.form-label-wrap {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-label {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
}

/* オレンジ色の必須バッジ */
.badge-required {
  background-color: #ff6f2e;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* 右側：入力欄エリア */
.form-field-wrap {
  flex: 1;
}

/* CF7が自動生成するラッパー対策 */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* 入力テキスト・メアド・電話用の共通スタイル */
.text-input,.select-input,
.textarea-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e1d8d2;
  border-radius: 6px;
  background-color: #faf8f6;
  font-size: 15px;
  color: #333333;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.select-input{
  padding: 13px 16px;
}
select {
  /* 1. ブラウザ標準の矢印を消す */
  -webkit-appearance: none;
  appearance: none;

  /* 2. 背景画像として「∨」を配置し、右側の余白（16pxなど）を調整する */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center; /* ★ここで右からの余白を調整！ */
  background-size: 16px;

  /* 3. テキストが矢印に被らないように内側の右パディングも広げる */
  padding-right: 40px; 
}

/* IE対策（念のため） */
select::-ms-expand {
  display: none;
}

.datetime-flex p {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.text-input:focus,
.textarea-input:focus {
  border-color: #0a5c36; /* フォーカス時はメインの緑に */
  background-color: #ffffff;
}

/* テキストエリア（ご相談内容）専用 */
.textarea-input {
  height: 160px;
  resize: vertical; /* 縦方向のみ引き伸ばし可能 */
  line-height: 1.6;
}

/* プレースホルダーの文字色 */
::placeholder {
  color: #b0a49c;
}

/* ラジオボタン（選択肢）の並び */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
}

/* ラジオボタン自体の見た目（少し大きく押しやすく） */
.radio-group input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #0a5c36; /* チェック時の色をメインの緑に */
  cursor: pointer;
}

/* 注意書き & ポリシーリンク */
.form-privacy-note {
  text-align: center;
  margin-top: 40px;
  font-size: 13px;
  color: #333333;
  line-height: 1.6;
}

.form-privacy-note p {
  margin: 0;
}

.privacy-link {
  color: #0a5c36;
  text-decoration: underline;
  font-weight: bold;
}

/* 送信ボタンエリア（深緑の丸みボタン） */
.form-submit-wrap {
  text-align: center;
  margin-top: 24px;
}

.submit-btn {
  background-color: #0a5c36;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 16px 60px;
  border-radius: 30px; /* 綺麗な丸み */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(10, 92, 54, 0.15);
}

.submit-btn:hover {
  background-color: #074327;
}

.submit-btn:active {
  transform: scale(0.98);
}

.btn-arrow {
  font-size: 16px;
}
/* ==========================================================================
   日付入力欄（クリック時は案内テキストを完全に消す安定版）
   ========================================================================== */
/* 1. 初期状態（未入力）の時は、ブラウザ標準の yyyy/mm/dd を透明にして隠す */
.wpcf7-form-control.text-input[type="date"]::-webkit-datetime-edit {
  color: transparent !important;
}

/* 2. 入力（選択）が完了したら、その文字をちゃんと出す */
.wpcf7-form-control.text-input[type="date"]:not([value=""])::-webkit-datetime-edit {
  color: #333 !important;
}

/* 3. 代わりの「年 / 月 / 日」という文字を重ねる */
.wpcf7-form-control.text-input[type="date"] {
  position: relative;
}
.wpcf7-form-control.text-input[type="date"]::before {
  content: "年 / 月 / 日";
  color: #aaa; /* 薄いグレー */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 4. 【ココが修正ポイント】
      クリック（フォーカス）された時、または日付が入っている時は、
      重ねた「年 / 月 / 日」を完全に消して、ブラウザ標準の動きにすべて任せる */
.wpcf7-form-control.text-input[type="date"]:focus::before,
.wpcf7-form-control.text-input[type="date"]:not([value=""])::before {
  display: none !important;
}

/* 5. クリックされた瞬間は、ブラウザ標準の文字色（黒）をしっかり出して選択しやすくする */
.wpcf7-form-control.text-input[type="date"]:focus::-webkit-datetime-edit {
  color: #333 !important;
}

/* ==========================================================================
   時間選択（セレクトボックスの ∨ の位置を調整）
   ========================================================================== */
.wpcf7-form-control.select-input {
  /* ブラウザ標準の頑固な矢印を一度消す */
  -webkit-appearance: none;
  appearance: none;

  /* 背景画像として綺麗な「∨」をちょうどいい位置に配置する */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center; /* ★これで右側に16pxの綺麗なパディングが作れます！ */
  background-size: 16px;

  /* テキストが矢印に被らないように内側の右余白を多めに取る */
  padding-right: 40px !important; 
}

/* IE用の念のため対策 */
.wpcf7-form-control.select-input::-ms-expand {
  display: none;
}

/* ==========================================================================
   「時間を選択」（最初の選択肢）の文字色を薄くする
   ========================================================================== */
/* まだ何も選んでいない状態（初期状態）の文字色を薄くする */
.wpcf7-form-control.select-input {
  color: #7d7d7d; /* 薄いグレー（上の「年 / 月 / 日」と同じ色） */
}

/* クリックして出てくる選択肢（中身）の文字色は、ちゃんと濃い黒に戻す */
.wpcf7-form-control.select-input option {
  color: #727272;
}

/* 実際に時間を選んだあとは、選択した文字を濃い黒にする */
.wpcf7-form-control.select-input:not(:has(option[value=""]:checked)) {
  color: #979797;
}
/* 日付選択フィールドにカレンダーアイコンを背景として表示 */
.datepicker-field {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px !important;
}


/* 日付と時間を「日」「時」の文字と横並びにする */
.datetime-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 日付枠と時間枠の幅をちょうどいいサイズ（200pxくらい）に固定する */
.datetime-flex .text-input[type="date"],
.datetime-flex .select-input {
  width: 100% !important;
  flex: none !important;
}

/* 「日」「時」の文字のスタイル */
.unit-text {
  font-size: 15px;
  color: #333333;
  margin-right: 8px;
}
/* ==========================================================================
   日付入力欄（修正版：カレンダーが確実に開く設定）
   ========================================================================== */
/* 1. 標準の yyyy/mm/dd を透明にして消す */
.wpcf7-form-control.text-input[type="date"]::-webkit-datetime-edit {
  color: transparent;
}

/* 2. 入力中、または日付が選択されている時は文字をちゃんと出す */
.wpcf7-form-control.text-input[type="date"]:focus::-webkit-datetime-edit,
.wpcf7-form-control.text-input[type="date"]:not([value=""])::-webkit-datetime-edit {
  color: #333;
}

/* 3. 代わりの「年 / 月 / 日」という文字を【カレンダーの邪魔にならない後ろ側】に重ねる */
.wpcf7-form-control.text-input[type="date"] {
  position: relative;
  z-index: 1; /* 入力欄全体の基準レイヤー */
  background-color: transparent !important; /* 背景を透明にして後ろの文字を見せる */
}

.wpcf7-form-control.text-input[type="date"]::before {
  content: "年 / 月 / 日";
  color: #3c3c3c; /* 薄いグレー */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1; /* ★重要：入力欄より「後ろ」に配置して、クリックを絶対に邪魔しない */
}

/* 4. 入力中、または日付が入っている時は重ねた文字を消す */
.wpcf7-form-control.text-input[type="date"]:focus::before,
.wpcf7-form-control.text-input[type="date"]:not([value=""])::before {
  display: none;
}

/* ==========================================================================
   PRIVACY POLICY: プライバシーポリシー
   ========================================================================== */
.privacy-main {
  background-color: #fdfbf7; /* 他のページと共通の背景色 */
  padding: 60px 20px;
}

.privacy-container {
  max-width: 800px; /* 読みやすい縦長の幅 */
  margin: 0 auto;
  background-color: #ffffff;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #e6ede9;
  font-size: 15px;
  color: #333333;
  line-height: 1.8;
}

/* ページタイトル */
.privacy-title {
  font-size: 24px;
  font-weight: bold;
  color: #111111;
  text-align: center;
  margin: 0 0 30px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #0a5c36; /* アクセントの深緑の線 */
}

.privacy-lead {
  margin-bottom: 40px;
}

/* 各条文のセクション */
.privacy-section {
  margin-bottom: 30px;
}

.privacy-section h2 {
  font-size: 16px;
  font-weight: bold;
  color: #0a5c36; /* 条文タイトルを深緑に */
  margin: 0 0 10px 0;
}

.privacy-section p {
  margin: 0;
}

/* 箇条書き部分 */
.privacy-section ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.privacy-section li {
  margin-bottom: 4px;
}

/* 制定日 */
.privacy-date {
  text-align: right;
  margin-top: 50px;
  margin-bottom: 0;
  font-size: 13px;
  color: #888888;
}
/* 404 */
.archive-sub-title.page404-1{
  font-size: 25px;
  font-weight: 500;
  color: #1c1c1c;

}

/* 404本文 */
.page404-text {
  max-width: 700px;
  margin: 0 auto 50px;
    margin-top: 24px;
  line-height: 2;
  font-size: 16px;
  color: #555;
}

/* 段落 */
.page404-text p {
  margin-bottom: 0px;
  margin-top: 10px;
  text-align: center;
}

/* リンクボタンエリア */
.page404-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0 50px;
}

/* ボタン */
.page404-links a {
  display: inline-block;
  padding: 15px 35px;
  background: #0a5c36; /* サイトカラーに変更 */
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  transition: .3s;
}

.page404-links a:hover {
  opacity: .85;
}

/* スマホ */
@media (max-width:540px) {

.page404-text{
  font-size:15px;
  line-height:1.9;
}

.page404-links{
  flex-direction:column;
  align-items:center;
}

.page404-links a{
  width:100%;
  max-width:280px;
  text-align:center;
}

}

/* =========================
1140 スモールPC
========================= */

@media(max-width:1140px){

.fv__title{
font-size:30px;
}

.fv__inner{
gap:10px;
}


.fv__text {
    font-size: 18px;
    margin-bottom: 35px;
    font-weight: 450;
}
.fv-book__title,.fv-book__title_span{
    font-size: 17px;
}

.fv-book__label {
    font-size: 17px;
    padding: 5px 10px;
}
.fv-book{
    gap: 15px;
    padding: 10px 15px;
}
.grid-3column.service {
grid-template-columns: repeat(1,1fr);
width: 100%;
}

  .maintenance-title br{
  display: block;
}
.price-card{
  flex-direction: column;
  padding: 20px 10px 20px 10px;
  gap: 20px;
  justify-content: flex-start;
}
.service-card {
  padding: 0 auto;
  align-items: center;
  padding-left: 45px;
}
.service-icon{
  min-width: 69px;
}
.service-title br{
  display: none;
}

.service-title {
  margin-bottom: 5px;
}
.price-menu-title{
  margin-right: 0;
}

.price-amount {
  font-size: 33px;
}
}
/* =========================
840　タブレット
========================= */
@media(max-width:840px){
.fv{
    height: auto;
    padding-top: 100px;
    padding-left: 30px;
    padding-right: 30px;
}
.fv__inner{
align-items: center;
}

.fv__content{
display: flex;
flex-direction: column;
justify-content: flex-end;

z-index: 2;

}

.fv__visual{
padding-top: 20px;

position:relative;
display: flex;
flex-direction: column;


}
.fv__title{
font-size:22px;
font-weight:700;
line-height:1.5;
margin-bottom:20px;
letter-spacing: 1.8px;
white-space: nowrap;
}

.fv__text{
font-size:14px;
margin-bottom:35px;
font-weight: 450;
white-space: nowrap;
}
.fv__flower__box{
width: 50px;
}
.fv-book__image{
    width: 80px;
}


.fv-badge{
color: #ffffff;
position:absolute;
letter-spacing: 1.4px;
font-size: 12px;
line-height: 160%;
width: 120px;
height: 120px;





background:#C9A66C;

border-radius:50%;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

font-weight:500;

box-shadow:
0 10px 30px rgba(0,0,0,.08);
}

.fv-book__label{
font-size: 13px;
padding: 5px;
margin-bottom: 0px;

}
.fv-book__title_span{
    font-size: 15px;
}
.fv-book{
    gap: 1px;
    padding: 5px 5px 5px 5px;
}
.fv-book__image2{
    width: 18px;
}
.fv-book__title{
   font-size:  14px;
}
.fv-book__title{
    margin-bottom: 0;
}
.section-title {
    font-size: 22px;
  
  }
.mail_text{
    display: none;
}
.mail{
  width: 25px;
}

.header-btn{
  padding-right: 11px;
  padding-left: 11px;
} 

.header-btn--line{
  padding-right: 5px;
  padding-left: 5px;
}

  /* 4カラムから1カラムへ（縦並び） */
  .grid-4column {
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
  }

  /* メンテナンスエリアのレイアウト調整 */
  .maintenance-box {
    flex-direction: column;
    padding: 5px;
    gap: 15px;
  }

  .maintenance-center {
    padding: 0;
  }

  .maintenance-title {
    font-size: 18px;
    line-height: 190%;
    letter-spacing: 1.8px;
    br {
      display: none; /* スマホでは勝手な改行を防ぐ */
    }
  }

  .maintenance-text {
    font-size: 14px;
    text-align: center; /* スマホ時は中央寄せが見やすい */
    line-height: 210%;
    letter-spacing: 1.9px;
  }

  .maintenance-title br{
  display: block;
}

.maintenance-tablet-icon2{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
 

}

.icon2{
  width: 90px;
}
.dummy-icon-large{
  display: none;
}

  /* 左右のイラストを非表示、あるいはサイズ調整（今回は小さくして配置） */
  .dummy-icon-large {
    font-size: 35px;
  }

  /* 3カラムから1カラムへ（縦並び） */
  .grid-3column {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .grid-3column.price{
     grid-template-columns: repeat(3,1fr);
     gap: 8px;
  }

  .service-card {
    padding: 20px 35px;
    margin: 0 auto;
    
  
  }

  .service-title br{
    display: none;
  }
  .dummy-icon-service img{
    width: 50px;
  }

  .profile-box{
    flex-direction: column;
    align-items: center;
    padding: 23px;
  }

  .profile-text-area{
    gap: 12px;
    
  }
.flow-container {

}

.flow-card {
  padding: 40px 5px;



}

.flow-header{
  margin-bottom: 10px;
}

.flow-arrow {}

.faq-q-icon {margin-right: 10px;}

.grid-3column.blog{
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
}

.btn_more_box {
  margin-top: -5px;}

.btn-more {
  padding: 2px 15px;
  gap: 10px;}
.blog-date-categoly {
  flex-direction: column;
 align-items: flex-start;
}
.contact-container{
  margin: 0 24px;
}
/* フッター：スマホ用レスポンシブ */
  .footer-container {
    flex-direction: column; /* 縦並びにする */
    text-align: center;
    gap: 30px;
    padding-bottom: 30px;
  }

  .footer-brand {
    flex-direction: column; /* ロゴと文字も縦に並べる */
    gap: 10px;
  }

  .footer-site-name {
    font-size: 24px;
  }

  .footer-cta {
    width: 100%; /* ボタンを横いっぱいに広げやすくする */
  }

  .btn-contact {
    width: 100%;
    max-width: 320px; /* スマホでボタンが長くなりすぎないように制限 */
    box-sizing: border-box;
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .footer-copyright {
    padding: 20px 15px;
  }

  .single-article-container{
    margin: 0 15px 0 15px;
    padding: 23px;
  }
  .entry-title{
    font-size: 20px;
  }

  .contact-container {
    margin: 0 23px 0 23px;

}

.datetime-flex p{
  flex-direction: column;
  gap: 0px;
}



}
/* =========================
540　スマホ
========================= */

@media (max-width: 540px) {

.section-trouble, .section-maintenance, .section-services, .section-price, .section-profile, .section-flow, .section-faq, .section-column { 
  padding-right: 15px;
  padding-left: 15px;
}
.logo img{
    width: 38px;
}
.logo-main{
    font-size: 18px;
    margin-left: -1px;
}
.logo-sub{
    font-size: 11px;
}
.mail_menu{
  gap: 5px;
}
.logo{
  gap: 3px;
}
.header-btn{
    font-size: 12px;
    letter-spacing: 1.9px;
  
}
.header__inner{
    padding: 10px 7px;
    
}

.fv{
    height: auto;
    padding-top: 70px;
padding-right: 10px;
    padding-left: 10px;
}
.fv__inner {
    flex-direction: column;
gap: 0px;}

.fv__content{
margin-left: 15px;
width: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 0px;
margin-bottom: 0px;
margin-top: 40px;

z-index: 2;

}
.fv-book{
    gap: 10px;
    padding-left: 10px;
}
.fv__visual{
padding-top: 20px;
width: 80%;
max-width: 540px;
position:relative;
display: flex;
flex-direction: column;


}
.fv__title{
    font-size: 26px;
}
.fv__text{
    font-size: 14px;
    margin-bottom: 45px;
    
}
    
.fv-badge{
color: #ffffff;
position:absolute;
letter-spacing: 1.1px;
font-size: 13px;

right: -15px;

width:150px;
height:150px;

background:#C9A66C;

border-radius:50%;


font-weight:500;

box-shadow:
0 10px 30px rgba(0,0,0,.08);
}
.section-title-box{
  grid-gap: 10px;
}
    .section-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

  .section-title-box-flower{
   width:40px;
  height:40px;
  object-fit:contain;
  flex-shrink:0;
  }
.grid-4column {
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
  }

.service-card {
 padding: 15px;
 flex-direction: column;
 align-items: center;
 gap: 15px;
}

.service-title,.service-text{
  text-align: center;
  font-size: 18px;
margin-bottom: 20px;}

.service-text{
  font-size: 14px;
}
.service-content{
  display: flex;
  flex-direction: column;
align-items: center;
}
.card-item{
  padding: 10px;
}

.price-time-badge {
  margin-top: 12px;
  font-size: 18px;
}
.badge-unit {
    font-size:12px}
.grid-3column price{
  grid-template-columns:repeat(3,1fr);}
.profile-text-area{
  flex-direction: column;
}
.grid-3column.price {
  gap: 16px;
grid-template-columns: repeat(1,1fr);}
.profile-sub,.profile-name,.profile-description{
text-align: center;
}

.price-amount{font-size: 32px;
margin-top: 5px;}

/* ご相談の流れ：スマホでは縦並びにして矢印を下向きにする */
  .flow-container {
    flex-direction: column;
    gap: 10px;
  }

  .flow-card {
    width: 100%;
    box-sizing: border-box;
  }

  .flow-arrow {
    transform: rotate(90deg); /* 矢印を下向きにする */
    margin: 5px 0;
  }

  .flow-icon img{
    display: none;
  }
    .flow-header {
      flex-direction: column;
      align-items: center;}
  .flow-body {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0px;
gap: 0;
align-items: center;
  }

  /* FAQ：スマホ時は左右の余白を少し詰める */
  .faq-question {
    padding: 18px 0px 18px 12px;
  }
  .faq-q-text {
    font-size: 14px;
    letter-spacing: 2px;
    padding-right: 35px;
    line-height: 120%;
  }
  .faq-answer p {
    font-size: 14px;
    line-height: 160%;}
  .faq-answer {
    padding: 12px 20px 12px 24px;
    font-size: 13px;

  }

  /* コラムヘッダー：スマホでは縦並びにしてボタンを中央に */
  .column-header-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }
  
  .blog-card {
    flex-direction: column; /* スマホではカードを縦並び（上画像・下テキスト）にする */
  }
  
  .blog-img-thumb {
    width: 100%;

  }
.grid-3column.blog {
  grid-template-columns: repeat(1,1fr);
  width: 100%;
  gap: 30px;
  
}
.blog-date-categoly {
  flex-direction: row;
 align-items: center;
}

.mail_text.footer{display: flex;
font-size: 16px;}

.contact-main {
    padding: 20px 10px;
  }

  .contact-container {
    padding: 20px 15px;
  }

  .form-row, 
  .form-row-textarea {
    flex-direction: column; /* 縦並びに変更 */
    align-items: flex-start;
    gap: 10px;
    padding: 16px 0;
  }

  .form-label-wrap {
    width: 100%;
  }

  .radio-group {
    gap: 12px 16px; /* スマホ用に少し詰める */
  }
  
  .form-privacy-note {
    font-size: 12px;
    text-align: left; /* スマホは左寄せが見やすい */
  }

  .submit-btn {
    width: 100%; /* スマホではボタンを横幅いっぱいに */
    padding: 14px 20px;
  }

  .form-field-wrap{
  width:100%;
}

.wpcf7-form-control-wrap{
  width:100%;
  display:block;
}

.text-input,
.textarea-input{
  width:100%;
  box-sizing:border-box;
}



  .privacy-main {
    padding: 20px 10px;
  }

  .privacy-container {
    padding: 24px 16px;
    border-radius: 6px;
  }

  .privacy-title {
    font-size: 20px;
    margin-bottom: 20px;
  }


}

/* =========================
320　ミニスマホ
========================= */
@media (max-width:320px) {
  .card-item{
  padding: 12px;
}

.service-card {
  flex-direction: column;
  align-items: center;
}

.profile-box{
  padding: 15px;
}
.section-title {
        font-size: 19px;
        margin-bottom: 20px;
    }
}



/* ==========================================================================
   ARCHIVE COLUMN: コラム一覧ページ専用スタイル
   ========================================================================== */
.archive-main {
  padding-top: 95px;
  background-color: #FEFBF5;
  padding-bottom: 80px;
}

/* パンくずリスト */
.breadcrumb-container {
  max-width: 1280px;
  width: 100%;
}

.breadcrumb {
  list-style: none;
 

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #666666;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: #aaaaaa;
}

.breadcrumb a {
  color: #666666;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ページヘッダー（白い枠のタイトルエリア） */
.archive-header-box {
  z-index: 3;
  max-width: 1280px;
  margin: 0 auto 40px auto;

}
.archive-header-title-innner{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.archive-header-inner {

  border: 1px solid #fdfbf7;
  border-radius: 0px 0px 4px 4px;
  padding: 0px 20px 30px 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.archive-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #111111;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.archive-title-flower {
  width: 35px;
  height: auto;
}

.archive-sub-title {
  font-size: 14px;
  color: #555555;
  margin: 0;
 
  
}
.conact_p{
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archive-header-visual img {
  width: 100px;
  height: auto;
  display: block;
}

/* コンテンツ全体幅制限 */
.archive-content-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* メタバー（全12件 / 新しい順） */
.archive-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  border-bottom: 1px solid #e6ede9;
  padding-bottom: 12px;
}

.total-count {
  font-size: 14px;
  color: #666666;
}

/* 簡易プルダウンの見た目調整 */
.sort-select {
  border: none;
  background: transparent;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  padding-right: 15px;
}

/* 記事カード（縦並び・横型レイアウト） */
.archive-list {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 15px;
  margin-bottom: 50px;
}

.archive-card {
  background-color: #ffffff;
  border: 1px solid #e6ede9;
  border-radius: 12px;
  overflow: hidden;
  display: flex; /* 横並びレイアウト */
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}

.archive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

/* 左側サムネイル固定比率（16:9） */
.archive-card-thumb {
 
  flex-shrink: 0;
}

.archive-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* 右側コンテンツエリア */
.archive-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.archive-sub-title{
  font-weight: 400;
  text-align: center;
}
.archive-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* 緑色のカテゴリーバッジ */
.category-badge {
  background-color: #0a5c36;
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: 999px;
  border: solid 1px #0a5c36;
  letter-spacing: 1.8px;
}

.archive-card-date {
  font-size: 12px;
  color: #888888;
}

.archive-card-title {
  font-size: 18px;
  font-weight: bold;
  color: #111111;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.archive-card-excerpt {
  font-size: 14px;
  color: #555555;
  margin: 0 0 15px 0;
  line-height: 1.6;
  flex: 1; /* 残りの高さを埋めて下の「続きを読む」の位置を安定させる */
}

/* 続きを読む リンク */
.link-more {
  font-size: 13px;
  color: #0a5c36;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start; /* 左寄せ */
}

.link-more:hover {
  text-decoration: underline;
}

/* ページネーション */
/* --------------------------------------
 * ページネーション（円形デザイン）
 * -------------------------------------- */

/* 全体の配置調整 */
.pagination-nav .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 40px 0;
  gap: 12px; /* 丸と丸の間の隙間 */
}

/* すべての選択肢（数字、矢印、ドット共通） */
.pagination-nav .pagination li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;  /* 丸の横幅 */
  height: 44px; /* 丸の縦幅 */
  border-radius: 50%; /* 綺麗な正円にする */
  font-size: 16px;
  font-weight: 500;
}

/* 1. 通常のページ（他のページ）と矢印ボタン（>）の見た目 */
.pagination-nav .pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #e0f0ed; /* ★薄い緑〜グレー系の線の色（お好みで変えてね） */
  color: #1e6042;            /* 数字の文字色 */
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: #ffffff;
}

/* 通常のページをホバーしたとき（フワッと少し暗くする） */
.pagination-nav .pagination li a:hover {
  background-color: #ffffff;
  border-color: #0d5c3a;
}

/* 2. 今いるページの見た目（緑の塗りつぶし） */
.pagination-nav .pagination li span.current {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #0d5c3a; /* ★指定の濃い緑色 */
  color: #ffffff;            /* 文字は白 */
  border: 1px solid #0d5c3a;
}

/* 3. 「…」（ドット）部分の見た目調整（丸をつけずに文字だけにする） */
.pagination-nav .pagination li:has(span.dots) {
  border: none;
  width: auto; /* ドットのところだけ幅を狭くする */
}
.pagination-nav .pagination li span.dots {
  color: #999999;
  letter-spacing: 2px;
}