#index .sp_section {
	background-color: #FFF !important;
}

#index .sp_section #section-contents {
	/*position: relative;*/
	/*border: 1px solid #000;*/
}
/* --- pages.css 12行目付近を修正 --- */

/* 1. 全体の箱から余白を消す */
#index .sp_section .sp_section_inner {
    width: 100% !important; /* autoから100%に変更 */
    margin: 0 !important;   /* 5%の余白を削除 */
    position: relative;
}

/* 2. header自体とその中身（h1など）に一律で余白を適用 */
.sp_section_inner > header,
.sp_section_inner > header > * {
    margin-top: 5% !important;
    margin-bottom: 2% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
}

/* 2. 代わりに、中身の各要素（header, h2, div, section等）に個別に余白を与える */
/* ただし、背景を広げたい .footer-nav-area だけは除外する */
.sp_section_inner > *:not(.footer-nav-area) {
    margin-left: 5% !important;
    margin-right: 5% !important;
}

/* 3. ページトップのメイン画像(h2.head2)など、端まで広げたい要素も除外設定 */
.sp_section_inner > h2.head2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    left: 0 !important; /* 既存の-5%指定を打ち消し */
}
.sp_section_inner > div.parenting_park_wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    left: 0 !important; /* 既存の-5%指定を打ち消し */
	/*border:10px solid #F00;*/
}




#index .sp_section {
  /* * これを追加することで、内部の position: fixed が
   * ブラウザ画面ではなく、この .sp_section を基準にします。
   */
  /*transform: translateZ(0);*/
}

/* --- パンくずリスト修正用CSS --- */

/* 全体の枠：横並び（Flex）設定 */
.breadcrumb_area {
    display: flex;          /* 横並びにする */
    align-items: flex-start;/* 上揃え（テキストが増えても画像は上に固定） */
    gap: 10px;              /* 画像とテキストの間隔 */
    margin-bottom: 15px;    /* 下のマップ画像との余白 */
    width: 100%;
    box-sizing: border-box;
}

/* 左側のアイコン画像エリア */
.breadcrumb_area .bc_icon {
    flex-shrink: 0;         /* 横幅が縮まないように固定 */
    width: 60px;            /* 画像の表示サイズ（適宜調整してください） */
}

.breadcrumb_area .bc_icon img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側のテキストリストエリア */
.breadcrumb_area .bc_list {
    flex-grow: 1;           /* 残りの幅を全て使う */
    display: flex;          /* リスト内も横並びに */
    flex-wrap: wrap;        /* ★重要：幅を超えたら折り返す */
    align-items: center;    /* 垂直方向中央揃え */
    list-style: none;       /* ・を消す */
    margin: 0;
    padding: 0;
    font-size: 12px;        /* 文字サイズ（適宜調整） */
    line-height: 1.6;       /* 行間 */
}

.breadcrumb_area .bc_list li {
    display: inline-block;
    white-space: nowrap;    /* 「｜TOP｜」などのカタマリで改行させる */
    margin-right: 2px;      /* 文字間の微調整 */
}

.breadcrumb_area .bc_list a {
    text-decoration: none;
    color: #333;            /* リンク色 */
}


/* -------------------------------------------------- */
/* header */
/* -------------------------------------------------- */

header h1 {
	margin: 0;
	padding: 0;
	/*border: 1px solid #000;*/
}

header h1 img {
	margin: 0;
	padding: 0;
	/*border: 1px solid #000;*/
	width: 50%;
	height:auto;
}

/*#index .sp_section header { display: none; }*/
#index .sp_section header { display: block !important; z-index: 100; margin: 0!important; padding: 0!important; /*border: 1px solid #000;*/ } /*width: 30%;*/
@media (max-width: 834px) {
	/*#index .sp_section header { display: none; }*/
	/*#index .sp_section header { position: absolute; top:0; left: 0; display: block !important; z-index: 100; }*/
}




.sp_section_inner h2:not(.head2) {
	display: none;
/*    margin: 24px auto;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.sp_section_inner small {
    margin-top: 13px;
    font-size: 13px;
    display: block;*/
}

.sp_section_inner > h2 {
  position: relative;
  left: -5%;
  width: 110%; /* 5%×左右＝10%を追加して全幅 */
  margin: 0;
  padding: 0;
}
.sp_section_inner > h2 img {
  width: 100%;
  height: auto;
  display: block;
}

.sp_section_inner img {
    max-width: 100%; /* 22.05.25：relative条件にあわせ修正 */
    height: auto;
    /*border-radius: 10px;*/
}

.flex {
	/*border: 1px solid #544A41;*/
}
.wrap980 {
	/*border: 1px solid #544A41;*/
}

/* --- 下層ページ共通：article 全幅レイアウト --- */

article {
    /* 1. 親の margin: 5% を打ち消して画面の両端（100%）まで広げる */
    position: relative !important;
    left: -5% !important;
    width: 110% !important; 
    
    /* 2. 背景設定（各ページで背景を変える場合は、ここではなく各 ID 等で指定） */
    background-color: transparent; 
    /*margin-bottom: 40px !important;*/
}

/* 3. article 直下の .wrap980 に 5% の余白を戻す */
article .wrap980 {
    width: 100% !important;
    padding-left: 5% !important;
    padding-right: 14% !important; /* 右側の余白ズレの対処療法です。ご容赦ください。 */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 4. コンテンツ内の画像サイズが崩れないよう調整 */
article img {
    max-width: 100%;
    height: auto;
}


/* -------------------------------------------------- */
/* about */
/* -------------------------------------------------- */
h3.about01 {
	display: block;
	text-indent: -9999px;
	background-position: left center;
    background-repeat: no-repeat;
    width: min(80%, 80vw);
	margin: auto !important;
	aspect-ratio: 3 / 1;
	height: auto;
    background-image: url(../../img/2025/about/point01_2.png);
    background-size: contain;
}

h3.about02 {
	display: block;
	text-indent: -9999px;
	background-position: left center;
    background-repeat: no-repeat;
    width: min(80%, 80vw);
	margin: auto !important;
	aspect-ratio: 3 / 1;     
	height: auto;
    background-image: url(../../img/2025/about/point02_2.png);
    background-size: contain;
}

h3.about03 {
	display: block;
	text-indent: -9999px;
	background-position: left center;
    background-repeat: no-repeat;
    width: min(80%, 80vw);
	margin: auto !important;
	aspect-ratio: 3 / 1;     
	height: auto;
    background-image: url(../../img/2025/about/point03_2.png);
    background-size: contain;
}

h3.about04 {
	display: block;
	text-indent: -9999px;
	background-position: left center;
    background-repeat: no-repeat;
    width: min(80%, 80vw);
	margin: auto !important;
	aspect-ratio: 3 / 1;     
	height: auto;
    background-image: url(../../img/2025/about/point04_2.png);
    background-size: contain;
}

h3.about05 {
	display: block;
	text-indent: -9999px;
	background-position: left center;
    background-repeat: no-repeat;
    width: min(80%, 80vw);
	margin: auto !important;
	aspect-ratio: 3 / 1;     
	height: auto;
    background-image: url(../../img/2025/about/point05_2.png);
    background-size: contain;
}

/* -------------------------------------------------- */
/* home */
/* -------------------------------------------------- */

.home01box {
    margin-left: 40%;
}

div.home01 {
    border: 1px solid #544A41;
    margin: 10px;
    border-radius: 10px;
    /*background-image: url("../../img/home/papa.jpg");*/
    background-image: url("../../img/2025/home/papa.png");
    /*background-size: auto 90%;*/
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 40px !important;
    /*padding: 40px 30px 40px 40px !important;*/
}

div.home02 {
    border: 1px solid #544A41;
    margin: 10px;
    border-radius: 10px;
    /*background-image: url("../../img/home/mama.jpg");*/
    background-image: url("../../img/2025/home/mama.png");
    /*background-size: auto 90%;*/
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 40px;
}
div.home03 {
    border: 1px solid #544A41;
    margin: 10px;
    border-radius: 10px;
    /*background-image: url("../../img/home/sakura.jpg");*/
    background-image: url("../../img/2025/home/sakura.png");
     /*background-size: auto 90%;*/
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 40px;
}
div.home04 {
    border: 1px solid #544A41;
    margin: 10px;
    border-radius: 10px;
    /*background-image: url("../../img/home/hajime.jpg");*/
    background-image: url("../../img/2025/home/hajime.png");
    /*background-size: auto 90%;*/
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 40px;
}
div.home05 {
    border: 1px solid #544A41;
    margin: 10px;
    border-radius: 10px;
    background-image: url("../../img/home/hinatasan.jpg");
     /*background-size: auto 90%;*/
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 40px;
}
div.home06 {
    border: 1px solid #544A41;
    margin: 10px;
    border-radius: 10px;
    background-image: url("../../img/home/miraisan.jpg");
    /*background-size: auto 90%;*/
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 40px;
}

h3.home01 {
    margin: 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 100%;
	height: auto;
    /*background-image: url(../../img/home/papa_title.jpg);*/
    background-image: url(../../img/2025/home/papa_title.png);
    background-size: contain;
}

h3.home02 {
    margin: 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 100%;
	height: auto;
    /*background-image: url(../../img/home/mama_title.jpg);*/
    background-image: url(../../img/2025/home/mama_title.png);
    background-size: contain;
}

h3.home03 {
    margin: 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 100%;
	height: auto;
    /*background-image: url(../../img/home/sakura_title.jpg);*/
    background-image: url(../../img/2025/home/sakura_title.png);
    background-size: contain;
}

h3.home04 {
    margin: 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 100%;
	height: auto;
    /*background-image: url(../../img/home/hajime_title.jpg);*/
    background-image: url(../../img/2025/home/hajime_title.png);
    background-size: contain;
}

h3.home05 {
    margin: 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 100%;
	height: auto;
    background-image: url(../../img/home/hinata_title.jpg);
    background-size: contain;
}

h3.home06 {
    margin: 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 100%;
	height: auto;
    background-image: url(../../img/home/mirai_title.jpg);
    background-size: contain;
}


/* -------------------------------------------------- */
/* map */
/* -------------------------------------------------- */

/* ロゴタイトルの表示設定 */
.map_wrap .logotitle {
    /* 横100%を解除し、画像本来の比率を守る */
    width: auto !important; 
    
    /* 高さを基準にする（マチマチな高さを一定に揃えて美しく見せる） */
    height: 100px !important; 
    
    /* スマホの横幅からはみ出さないための保険 */
    max-width: 100% !important; 
    
    /* 縦に潰れるのを防ぐ */
    object-fit: contain !important; 
    
    /* 中央に配置する場合 */
    display: block !important;
    margin: 0 auto 15px auto !important;
}

/* 下のメインマップ画像は横幅いっぱいに維持 */
.map_wrap img:not(.logotitle) {
    width: 100% !important;
    height: auto !important;
}


h3.map01 {
    /*margin: 0 !important;*/
	display: block;
    text-align: left !important;
}
h3.map02 {
    /*margin: 0 !important;*/
	display: block;
    text-align: left !important;
}
h3.map03 {
    /*margin: 0 !important;*/
	display: block;
    text-align: left !important;
}
h3.map04 {
    /*margin: 0 !important;*/
	display: block;
    text-align: left !important;
}
h3.map05 {
    /*margin: 0 !important;*/
	display: block;
    text-align: left !important;
}

@media only screen and (min-width: 769px) {
.mapbox {
    /*padding: 20px;*/
}
}


/* -------------------------------------------------- */
/* immigration */
/* -------------------------------------------------- */

h3.immigration01 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 400px; /*340px;*/
	height: 86px; /*90px;*/
    background-image: url(../../img/2025/immigration/coordinator_01.png);
    /*background-image: url(../../img/immigration/sub_title01.jpg);*/
    background-size: contain;
}

h3.immigration02 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 400px; /*340px;*/
	height: 86px; /*90px;*/
    background-image: url(../../img/2025/immigration/coordinator_02.png);
    /*background-image: url(../../img/immigration/sub_title02.jpg);*/
    background-size: contain;
}

h3.immigration03 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 340px;
	height: 90px;
    /*background-image: url(../../img/2025/immigration/coordinator_03.png);*/
    background-image: url(../../img/immigration/sub_title03.jpg);
    background-size: contain;
}

h3.immigration04 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 340px;
	height: 90px;
    background-image: url(../../img/immigration/sub_title04.jpg);
    /*background-image: url(../../img/immigration/sub_title04.jpg);*/
    background-size: contain;
}

h3.immigration05 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 400px; /*340px;*/
	height: 86px; /*90px;*/
    background-image: url(../../img/2025/immigration/coordinator_05.png);
    /*background-image: url(../../img/immigration/sub_title05.jpg);*/
    background-size: contain;
}


@media only screen and (min-width: 769px) {
.immigrationbox {
    padding: 10px;
}
}

.immigrationbox img {
    max-width: 100%;
	height: auto;
}

/* --- pages.css 修正用コード --- */

/* 1. すべてのブロックの基本設定（リセットと配置調整） */
.support .support_wrap {
    background-color: transparent; /* 一旦背景色を透明に */
    margin-top: 0;
    margin-bottom: 0;
    
    /* 画面端まで広げるためのネガティブマージン */
    /* 親要素の左右余白(5%)を打ち消して広げます */
    margin-left: -6%; 
    margin-right: -6%;
    padding: 40px 6%; /* 広げた分、内側に余白を作って文字位置を戻す */
    width: 112%;      /* 左右に広げた分、幅を100%以上に設定 */
    box-sizing: border-box;
}

/* 2. 偶数番目（2, 4, 6...）だけ背景色をつける */
.support .support_wrap:nth-of-type(even) {
    /* サイトのトーンに合わせた薄い水色（またはお好みの色） */
    background-color: #E8F4F9; 
}

/* 3. デザイン調整：背景色分けをする場合、間の線(hr)は不要になるため消す */
/*.support hr {
    display: none;
}*/


/* --- .workcation_wrap 用修正コード --- */

/* 1. 基本設定：左右に広げて余白を確保 */
.workcation_wrap {
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 0;
    
    /* 親要素の余白を打ち消して画面端まで広げる */
    margin-left: -6%;
    margin-right: -6%;
    padding: 40px 6%; /* 広げた分、内側に余白を作って文字位置を戻す */
    width: 112%;      /* 左右に広げた分、幅を100%以上に設定 */
    box-sizing: border-box;
}

/* 2. 偶数番目のブロックだけ背景色をつける */
.workcation_wrap:nth-of-type(even) {
    /* サポートページと同じ薄い水色 */
    background-color: #E8F4F9; 
}

/* 3. もしブロックの間に区切り線(hr)がある場合は非表示にする */
/* ページ全体のクラス名が .workcation の場合を想定しています */
/*.workcation hr {
    display: none;
}*/

/* -------------------------------------------------- */
/* immigration start */
/* -------------------------------------------------- */
/* --- 4列の画像ボタンナビゲーション --- */
#immigration-start {
	background-image: url(/img/2025/immigration/start/bg_hajimeno.jpg);
	background-size: 100% auto; /* 横幅を100%にし、高さは比率を維持 */
	background-position: top center; /* 中央に配置 */
	background-repeat: no-repeat; /* 画像の繰り返しを停止 */
	background-color: #B9EB87;
}
.chips-img-nav {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 横に4つ均等配置 */
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  /*margin: 20px 0 40px 0 !important;*/
  margin: 0 0 0 0 !important;
}

.chips-img-nav li a {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important; /* 正方形にする場合。比率に合わせて調整 */
  text-indent: -9999px !important; /* テキストを飛ばして画像のみにする */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: opacity 0.2s ease;
}

.chips-img-nav li a:hover {
  opacity: 0.8;
}

/* 各ボタンの画像パス（実際の画像名に合わせて修正してください） */
.chip-sumai a     { background-image: url(/img/2025/immigration/start/01_residence.png); }
.chip-shigoto a    { background-image: url(/img/2025/immigration/start/02_works.png); }
.chip-kosodate a   { background-image: url(/img/2025/immigration/start/03_parenting.png); }
.chip-koureisha a  { background-image: url(/img/2025/immigration/start/04_senior.png); }

/* モバイル対応：画面が狭い場合は2列×2行にする */
/*@media (max-width: 480px) {
  .chips-img-nav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}*/

/* 追加：start-img-nav01 の横並びと余白設定 */
.start-img-nav01 {
    display: flex !important;
    justify-content: space-between !important;
    list-style: none !important;
    padding: 0 5% !important; /* 左右に 5% の余白を付与 */
    margin: 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.start-img-nav01 li {
    width: 48% !important; /* 2カラム並び（隙間を考慮） */
    margin: 0 !important;
}

.start-img-nav01 li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* スマホ等で縦に並べたい場合は以下を有効にしてください */
/*
@media (max-width: 480px) {
    .start-img-nav01 {
        flex-direction: column !important;
        gap: 15px !important;
    }
    .start-img-nav01 li {
        width: 100% !important;
    }
}
*/



/* -------------------------------------------------- */
/* parenting */
/* -------------------------------------------------- */

.chips-img-nav-parenting {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 横に4つ均等配置 */
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  /*margin: 20px 0 40px 0 !important;*/
  margin: 0 0 0 0 !important;
}

.chips-img-nav-parenting li a {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important; /* 正方形にする場合。比率に合わせて調整 */
  text-indent: -9999px !important; /* テキストを飛ばして画像のみにする */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: opacity 0.2s ease;
}

.chips-img-nav-parenting li a:hover {
  opacity: 0.8;
}

/* 各ボタンの画像パス（実際の画像名に合わせて修正してください） */
.chip-p01 a  { background-image: url(/img/2025/parenting/01_park.png); }
.chip-p02 a  { background-image: url(/img/2025/parenting/02_hospital.png); }
.chip-p03 a  { background-image: url(/img/2025/parenting/03_center.png); }


/* 外枠のコンテナ */
.parenting_wrap {
  max-width: 90%;
  margin: 20px auto;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN", "Mainari", sans-serif;
}

/* parenting_wrap内の画像が枠を超えないようにする */
.parenting_wrap img {
    /*display: block !important;*/
    max-width: 100% !important; /* 親要素の幅に強制的に合わせる */
    height: auto !important; /* 比率を維持 */
    margin-bottom: 15px !important;
    /*border-radius: 8px;*/ /* デザインに合わせて角を丸くする場合 */
}

.parenting_wrap p {
	text-align: left;
}

/* タイトル：二重線の枠 */
.parenting_wrap .title {
  display: block;
  /*border: 3px double #72B7B2;*/ /* 二重線と指定の色 */
  /*color: #72B7B2;*/
  /*font-size: 24px;*/
  /*font-weight: bold;*/
  /*letter-spacing: 1em;*/ /* 文字間隔を広く */
  /*padding: 10px 0;*/
  margin-bottom: 20px;
  /*text-indent: 1em;*/ /* letter-spacingによる右寄れを補正 */
}

/* 施設リスト：横並び */
.parenting_wrap .parenting-facilities {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  gap: 15px;
}

.parenting_wrap .parenting-facilities li {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

/* アイコン：擬似要素で円形アイコンを再現 */
.parenting_wrap .parenting-facilities li::before {
  content: "";
  display: inline-block;
  width: 28px;  /* アイコンの表示サイズ */
  height: 28px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 4. 各PNG画像の割り当て（パスを適宜変更してください） */
.fac-parking::before { background-image: url("/img/2025/parenting/icon_parking.png"); }
.fac-toilet::before  { background-image: url("/img/2025/parenting/icon_toilet.png"); }
.fac-space::before    { background-image: url("/img/2025/parenting/icon_space.png"); }
.fac-machine::before { background-image: url("/img/2025/parenting/icon_machine.png"); }

/* 親要素：子要素（タブとコンテンツ）の高さを揃える */
.area-section {
  display: flex !important;
  align-items: stretch !important; 
  width: 100% !important;
  /*border-bottom: 2px solid #eee;*/
}

/* 左側のタブ：背景は親の高さ一杯に伸びる */
.area-tab {
  width: 30px !important;
  height: auto !important; 
  display: flex !important;
  /* 修正：上端に配置 */
  align-items: flex-start !important; 
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* 縦書きテキスト：白文字に変更 */
.area-tab span {
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  /* 修正：文字色を白に */
  color: #ffffff !important; 
  /*font-weight: bold;*/
  white-space: nowrap;
  /* 上付けにした際の余白を調整 */
  padding-top: 20px !important; 
  letter-spacing: 0.3em;
}

/* 各エリアの色設定（背景色は維持、文字はすべて白が適用される） */
.area-green .area-tab { background-color: #76C1B1 !important; }
.area-pink .area-tab  { background-color: #E8A1B5 !important; }
.area-blue .area-tab  { background-color: #69C5D8 !important; }
.area-yellow .area-tab { background-color: #D3B95B !important; }
.area-purple .area-tab { background-color: #B397C2 !important; }
.area-other .area-tab  { background-color: #F68F77 !important; }

.area-section-inside {
	margin-left: 2%;
	margin-right: 5%;
}

/* 縦の仕切り線（画像にある水色の線） */
.area-content {
  /*border-left: 1px solid #00FFFF;*/
}



h3.parenting01 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 340px;
	height: 90px;
    /*background-image: url(../../img/parenting/sub_title01.jpg);*/
    background-image: url(../../img/parenting/sub_title01.jpg);
    background-size: contain;
}

h3.parenting02 {
    margin: auto;
    padding: 20px 0 !important;
	display: block;
	text-indent: -9999px;
	background-position: left;
    background-repeat: no-repeat;
    width: 400px;
	height: 90px;
    /*background-image: url(../../img/parenting/sub_title02.jpg);*/
    background-image: url(../../img/parenting/sub_title02.jpg);
    background-size: contain;
}

.recipe_head {
	background-image: url(../../img/parenting/recipe_movie_left.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
}

/*@media only screen and (min-width: 769px) {
.parentingbox {
    padding: 10px;
}
}

.parenting_wrap {
	background-color: #FEF6F1;
	margin: 5%;
	border-radius: 10px;
}

.parenting_wrap p {
	margin: 5%;
}*/


.support_link a {
    /*border-radius: 100px;
    display: block;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: #A6D39E;
    color: #FFF;
	font-weight: bold;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;*/
}




/* -------------------------------------------------- */
/* photo */
/* -------------------------------------------------- */

div.photo {
    padding: 6vw;
}
@media only screen and (min-width: 769px) {
div.photo {
    padding: 0;
}
}

div.photo .slider{
    margin: 30px auto 100px auto;
    width: 100%;
}

div.photo .slider img{
    height: auto;
    width: 100%;
}
/*slick setting*/
div.photo .slick-prev:before,
div.photo .slick-next:before {
    color: #000;
}

div.photo .slick-slide {
    margin: 0 1vw;
}
@media only screen and (min-width: 769px) {
div.photo .slick-slide {
    margin: 0 10px;
}
}

div.photo .slider img {
    border-radius: 20px;
}

div.photo .thumb img {
    border-radius: 10px;
}

/* -------------------------------------------------- */
/* newsbox */
/* -------------------------------------------------- */

.newsbox {
    padding-top: 20px;
    padding-bottom: 20px;
}

.newsbox h3 {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.newsbox span.date {
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.conpaging {
	clear: both;
    padding-top: 30px;
	margin: 30px auto 50px auto;
	text-align: center;
    /*border: 1px solid #000;*/
 	background-image: url(../../img/common/hr_line.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
}

/*.conpaging div {
	display: inline-block;
	margin-left: 80px;
	margin-right: 80px;
}*/

.conpaging a:link { color:#000; text-decoration: none; }
.conpaging a:visited { color:#000; text-decoration: none; }
.conpaging a:hover { color:#000; text-decoration: none; }
.conpaging a:active { color:#000; text-decoration: none; }
.conpaging a:focus { outline:none;}


/* -------------------------------------------------- */
/* qa */
/* -------------------------------------------------- */

.toggle-header {
	padding: 1em;
	border: 1px solid #999;
}

/* チップ（丸いボタン） */
/* --- チップを背景画像で置換（高さ固定・幅なりゆき） --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;           /* ボタン同士の間隔 */
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  justify-content: center;
}

.chip {
  display: block;
  /* ★高さを固定（お好みのサイズに調整してください） */
  height: 60px; 
  /* ★幅は中身（画像）に合わせる */
  width: auto; 
  
  /* テキスト非表示設定 */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;

  /* 背景画像の設定 */
  background-size: contain;    /* 画像を高さ一杯に収める */
  background-repeat: no-repeat;
  background-position: center;
  
  background-color: transparent;
  transition: opacity 0.2s ease;
}

/* --- 個別に画像の横幅を担保する --- */
/* 背景画像は「中身」ではないため、width: auto だけでは幅が0になります。
   各チップに、実際の画像の比率に合わせた「最低幅」を指定します。 */

/*.chip-red    { background-image: url('../../img/2025/chips/btn_kurashi.png'); width: 120px; }
.chip-blue   { background-image: url('../../img/2025/chips/btn_shigoto.png'); width: 140px; }
.chip-lime   { background-image: url('../../img/2025/chips/btn_sumai.png'); width: 110px; }
.chip-orange { background-image: url('../../img/2025/chips/btn_kosodate.png'); width: 160px; }
.chip-green  { background-image: url('../../img/2025/chips/btn_access.png'); width: 150px; }
.chip-brown  { background-image: url('../../img/2025/chips/btn_medical.png'); width: 160px; }
.chip-gray   { background-image: url('../../img/2025/chips/btn_flow.png'); width: 130px; }*/

.chip-red    { background-image: url('../../img/2025/qa/03_living_2.png'); width: 128px; }
.chip-blue   { background-image: url('../../img/2025/qa/02_works_2.png'); width: 128px; }
.chip-lime   { background-image: url('../../img/2025/qa/03_residence_2.png'); width: 128px; }
.chip-orange { background-image: url('../../img/2025/qa/04_parenting_2.png'); width: 195px; }
.chip-green  { background-image: url('../../img/2025/qa/05_access_2.png'); width: 182px; }
.chip-brown  { background-image: url('../../img/2025/qa/06_medical_2.png'); width: 228px; }
.chip-gray   { background-image: url('../../img/2025/qa/07_ijyu_2.png'); width: 183px; }

.chip-orange_start { background: #EEA870; }
.chip-blue_start   { background: #7CA5CB; }
.chip-pink_start   { background: #EE9EAE; }
.chip-green_start  { background: #6EB348; }


/* ====== ▼ V字マーク：1本だけで描く（衝突しない） ====== */
.down-mark{
  position: relative;
  width: 60px;                        /* 全体の横幅 */
  height: 40px;                       /* 全体の高さ */
  margin: clamp(18px,3.5vw,28px) auto clamp(10px,2.5vw,18px);
}

/* 右下がりと左下がりを一本で表現（L字を回転） */
.down-mark::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;                           /* V の上端位置 */
  width: 26px;                        /* 腕の長さ（調整可） */
  height: 26px;                       /* 腕の長さ（調整可） */
  transform: translateX(-50%) rotate(-45deg);
  border-left: 6px solid #3b2e29;     /* 左腕 */
  border-bottom: 6px solid #3b2e29;   /* 右腕 */
  border-top: 0;
  border-right: 0;
  border-radius: 2px;                 /* 角を少し丸める */
}

/* 既存の after を確実に無効化（他CSSの影響を断つ） */
.down-mark::after{
  content: none !important;
  border: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
}


/* -------------------------------------------------- */
/* Contact Form7 */
/* -------------------------------------------------- */

.contact_link a {
    border-radius: 100px;
    display: block;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: #4593CF;
    color: #FFF;
	font-weight: bold;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
}

.contact_link2 a {
    border-radius: 100px;
    display: block;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: #B9387C;
    color: #FFF;
	font-weight: bold;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
}


.contact7 {
	max-width: 100%;
	box-sizing: border-box;
}
/*.contact7 dd {
	margin: 0 0 30px 0;
}*/
.contact7 dt {
	font-weight: normal;
}

/* 必須マーク */
.contact7 .must {
	background: #FF1A00;
}

/* 任意マーク */
.contact7 .optional {
	background: #999;
}

.contact7 input {
    padding: 0.5em;
}

.contact7 select {
    padding: 0.5em;
    font-size: 1.1em;
}

.contact7 textarea {
    padding: 0.5em;
    /*font-size: 1.1em;*/
}


.contact7 .must,
.contact7 .optional {
	color: #FFF;
	border-radius: 3px;
	font-size: 10px;
	margin-left: 10px;
	padding: 5px 10px;
	letter-spacing: 2px;
}
.btn_contact7 {
	text-align: center;
}
btn_contact7 input {
	width: 70%;
    padding: 0.5em;
  color: #3A87AD;
  background-color: #D9EDF7;

font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #005513;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;	
}
.btn_contact7 input:hover {
	background-color: #FFF;
	color: #005513; 
}
/*@media screen and (min-width: 768px) {
.contact7 dt {
	float: left;
	clear: left;
	width: 35%;
	padding: 5px 10px 5px 0;
	}
.contact7 dd {
	margin-left: 35%;
	}

.btn_contact7 input {
	width: 70%;
  color: #3A87AD;
  background-color: #D9EDF7;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #005513;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;	
}
.btn_contact7 input:hover {
	background-color: #FFF;
	color: #005513; 
}
}*/

/*既存のリスト（点）を非表示*/
 .post_content ul { 
  list-style: none;
  margin: 0;
}

/*初期アラート画面の非表示*/
.screen-reader-response {
  display: none;
}

/*エラーアラートの出力*/
.wpcf7-response-output,.wpcf7-validation-errors,
.wpcf7-response-output,.wpcf7-acceptance-missing {
  margin: 10px 0 12.5px 0;
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
  padding: 10px 15px;
}

/*サクセスアラートの出力*/
.wpcf7-response-output,.wpcf7-mail-sent-ok {
  margin: 10px 0 12.5px 0;
  color: #3A87AD;
  background-color: #D9EDF7;
  border: 1px solid #BCE8F1;
  padding: 10px 15px;
}

.wpcf7 span.wpcf7-not-valid-tip {
    display: block;
    position: static;
    top: 0;
    left: 0;
    border: none;
    color: red;
}

/* Contact Form 7のラジオボタンを縦並びに */
.wpcf7-list-item {
    /*margin-top:10px;*/
    display: block;
    font-size: 1.1em;
    line-height: 160%;
}

@media screen and (min-width: 768px) {
.last {
    margin-left:10px;
    /*border: 1px solid #FF0000;*/
}
}

/* [YouTube] iframeのレスポンシブ対応 */
.frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 28.125%; /*56.25%;*/
  padding-top: 28.125%;
  overflow: hidden;
  /*margin-bottom: 50px;*/
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}





/* -------------------------------------------------- */
/* 1. タブ全体のコンテナ (位置決め) */
/* -------------------------------------------------- */
/* 固定タブ本体 */
.side-tab-sticky {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 999;
  width: auto;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.15));
}

/* 文字ボタン → 画像ボタンへ変更 */
.side-tab-sticky .side-tab-link {
  display: block;

  /* 文字は非表示 */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;

  /* ボタン画像 */
  width: 64px;   /* 画像サイズに合わせて調整 */
  height: 220px; /* 画像サイズに合わせて調整 */
  background: url('../../img/2025/common/side_tab_circle.png') no-repeat right center;
  background-size: contain;

  /* 既存の文字ボタン装飾を無効化 */
  padding: 0;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  border-radius: 0;

  transition: opacity 0.3s ease;
}

.side-tab-sticky .side-tab-link:hover {
  /*opacity: 0.85;
  background-color: transparent;*/
}

/* PC表示時 */
@media (min-width: 835px) {
  .side-tab-sticky {
    right: var(--rw);
  }
}


/* -------------------------------------------------- */
/* --- スライダー用スタイル --- */
/* -------------------------------------------------- */

/* スポット全体の余白 */
.spot_block {
    margin-bottom: 50px;
}

/* タイトル */
.spot_title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    border-left: none !important; /* 既存スタイルの打ち消し */
    padding-left: 0 !important;
}

/* スライダー外枠（黒背景用） */
.spot_slider {
    background-color: #000; /* 背景色：黒 */
    padding: 0;
    margin-bottom: 15px;
    position: relative;     /* 矢印配置の基準 */
}

/* 画像の設定 */
.spot_slider .slide_item img {
    width: 100%;
    height: auto;
    max-height: 400px;      /* PCで見すぎないように制限 */
    object-fit: contain;    /* 画像の比率を維持して枠に収める */
    display: block;
    margin: 0 auto;
}

/* 説明文 */
.spot_text {
    font-size: 0.95rem;
    line-height: 1.6;
}


/* --- 矢印のカスタマイズ（修正版） --- */
.custom-arrow {
    width: 40px;
    height: 40px;
    z-index: 10;
    cursor: pointer;
    position: absolute; /* 親要素 .spot_slider を基準に配置 */
    top: 50%;
    transform: translateY(-50%);
    /* 背景や余計な装飾をリセット */
    background: transparent;
    border: none;
}

/* 矢印の線を疑似要素で描画 */
.custom-arrow:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-top: 3px solid #FFF;  /* 白い線 */
    border-right: 3px solid #FFF; /* 白い線 */
    
    /* 位置調整（枠の真ん中に来るように） */
    position: absolute;
    top: 50%;
    left: 50%;
    /* border以外のデフォルトスタイルを打ち消し */
    font-family: inherit !important; 
}

/* 左矢印 (custom-prev) */
.custom-prev {
    left: 10px;
}
.custom-prev:before {
    /* 左向きに回転しつつ、中心位置を補正 */
    transform: translate(-35%, -50%) rotate(-135deg);
}

/* 右矢印 (custom-next) */
.custom-next {
    right: 10px;
}
.custom-next:before {
    /* 右向きに回転しつつ、中心位置を補正 */
    transform: translate(-65%, -50%) rotate(45deg);
}

/* ホバー時の挙動 */
.custom-arrow:hover:before {
    opacity: 0.7;
}


/* -------------------------------------------------- */
/* --- 子育て支援マップ カードデザイン --- */
/* -------------------------------------------------- */

.parenting_wrap2 {
    /* 背景色（画像から抽出した淡いピンク/ベージュ） */
    background-color: #FFF5F0; 
    
    /* カードの角丸設定 */
    border-radius: 20px;       /* 4隅を20px丸くする */
    overflow: hidden;          /* はみ出した画像を角丸に沿って切り取る */
    
    /* レイアウト調整 */
    margin: 20px auto;         /* 上下の間隔と中央寄せ */
    max-width: 90%;            /* 横幅 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* ほんのり影をつけて浮かせる（任意） */
    font-family: "Hiragino Kaku Gothic ProN", "Mainari", sans-serif;
}

/* 1. メイン写真（一番上のimg） */
.parenting_wrap2 > img {
    width: 100%;
    height: auto;
    display: block;            /* 画像下の隙間を消す */
    margin: 0 !important;      /* 余白をゼロにしてカードの端まで広げる */
    border-radius: 0;          /* 写真自体の角丸は親のoverflowに任せる */
}

/* 2. テキスト（タイトル・住所・説明文）共通 */
.parenting_wrap2 p {
    text-align: left;
    margin: 0;
    padding: 0 24px;           /* 文字の左右に余白を作る */
    color: #333;
    line-height: 1.6;
}

/* タイトル（1つ目のp） */
.parenting_wrap2 p:nth-of-type(1) {
    font-size: 1.6rem;         /* 大きく */
    margin-top: 24px;          /* 写真との間隔 */
    margin-bottom: 8px;
}

/* 住所（2つ目のp） */
.parenting_wrap2 p:nth-of-type(2) {
    font-size: 1.1rem;
    margin-bottom: 16px;
    font-weight: normal;       /* 必要であれば太字解除 */
}

/* 説明文（3つ目のp） */
.parenting_wrap2 p:nth-of-type(3) {
    font-size: 1rem;
    margin-bottom: 10px;
}

/* 3. 右下のアイコンエリア */
.parenting_wrap2 .right {
    text-align: right;         /* 右寄せ */
    padding: 10px 20px 24px 0; /* 右・下の余白 */
}

.parenting_wrap2 .right img {
    width: 20px;               /* アイコンサイズ */
    height: auto;
    margin-left: 2px;          /* アイコン同士の間隔 */
    display: inline-block;
    margin-bottom: 0 !important; /* 既存CSSの影響を打ち消し */
    vertical-align: bottom;
}

.parenting_wrap3 {
    /* 背景色 */
    background-color: #F4FAFC; 
    
    /* カードの角丸設定 */
    border-radius: 20px;       /* 4隅を20px丸くする */
    overflow: hidden;          /* はみ出した画像を角丸に沿って切り取る */
    
    /* レイアウト調整 */
    margin: 20px auto;         /* 上下の間隔と中央寄せ */
    max-width: 90%;            /* 横幅 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* ほんのり影をつけて浮かせる（任意） */
    font-family: "Hiragino Kaku Gothic ProN", "Mainari", sans-serif;
}

/* 1. メイン写真（一番上のimg） */
.parenting_wrap3 > img {
    width: 100%;
    height: auto;
    display: block;            /* 画像下の隙間を消す */
    margin: 0 !important;      /* 余白をゼロにしてカードの端まで広げる */
    border-radius: 0;          /* 写真自体の角丸は親のoverflowに任せる */
}

/* 2. テキスト（タイトル・住所・説明文）共通 */
.parenting_wrap3 p {
    text-align: left;
    margin: 0;
    padding: 0 24px;           /* 文字の左右に余白を作る */
    color: #333;
    line-height: 1.6;
}

/* タイトル（1つ目のp） */
.parenting_wrap3 p:nth-of-type(1) {
    font-size: 1.6rem;         /* 大きく */
    margin-top: 24px;          /* 写真との間隔 */
    margin-bottom: 8px;
}

/* 住所（2つ目のp） */
.parenting_wrap3 p:nth-of-type(2) {
    font-size: 1.1rem;
    margin-bottom: 16px;
    font-weight: normal;       /* 必要であれば太字解除 */
}

/* 説明文（3つ目のp） */
.parenting_wrap3 p:nth-of-type(3) {
    font-size: 1rem;
    margin-bottom: 10px;
}

/* 3. 右下のアイコンエリア */
.parenting_wrap3 .right {
    text-align: right;         /* 右寄せ */
    padding: 10px 20px 24px 0; /* 右・下の余白 */
}

.parenting_wrap3 .right img {
    width: 20px;               /* アイコンサイズ */
    height: auto;
    margin-left: 2px;          /* アイコン同士の間隔 */
    display: inline-block;
    margin-bottom: 0 !important; /* 既存CSSの影響を打ち消し */
    vertical-align: bottom;
}

.area-section > div:not(.area-tab) {
    flex: 1;       /* 余白を全て埋める */
    width: 100%;   /* 幅を最大にする */
    min-width: 0;  /* Flexboxのバグ回避用（念のため） */
}

.parenting_wrap4 {
    /* レイアウト調整 */
	display: block;
    margin: 20px auto;         /* 上下の間隔と中央寄せ */
    width: 90%;            /* 横幅 */
    min-width: 90%;            /* 横幅 */
    font-family: "Hiragino Kaku Gothic ProN", "Mainari", sans-serif;
	border-top: 1px solid #000;
}

.area-green .parenting_wrap4 { border-top: 1px solid #76C1B1 !important; }
.area-pink .parenting_wrap4  { border-top: 1px solid #E8A1B5 !important; }
.area-blue .parenting_wrap4  { border-top: 1px solid #69C5D8 !important; }
.area-yellow .parenting_wrap4 { border-top: 1px solid #D3B95B !important; }
.area-purple .parenting_wrap4 { border-top: 1px solid #B397C2 !important; }
.area-other .parenting_wrap4  { border-top: 1px solid #F68F77 !important; }

/* 最後の要素だけ下線（border-bottom）を追加する指定 */

.area-green .parenting_wrap4:last-child  { border-bottom: 1px solid #76C1B1 !important; }
.area-pink .parenting_wrap4:last-child   { border-bottom: 1px solid #E8A1B5 !important; }
.area-blue .parenting_wrap4:last-child   { border-bottom: 1px solid #69C5D8 !important; }
.area-yellow .parenting_wrap4:last-child { border-bottom: 1px solid #D3B95B !important; }
.area-purple .parenting_wrap4:last-child { border-bottom: 1px solid #B397C2 !important; }
.area-other .parenting_wrap4:last-child  { border-bottom: 1px solid #F68F77 !important; }

/* -------------------------------------------------- */
/* フォトギャラリー + ページャー設定 */
/* -------------------------------------------------- */

/* 1. リスト全体の初期化（画像リスト・ページャー共通） */
.box1.photo ul {
    list-style: none !important; /* 黒丸を確実に消す */
    padding: 0;
    margin: 0;
}

/* -------------------------------------------------- */
/* 2. 画像リスト部分の設定 */
/* （.wp-pagenavi 以外の ul を対象にします） */
/* -------------------------------------------------- */
.box1.photo ul:not(.wp-pagenavi) {
    display: flex;
    flex-direction: column;      /* 縦並び */
    align-items: center;         /* 中央寄せ */
    gap: 40px;                   /* 画像ごとの間隔 */
}

.box1.photo ul:not(.wp-pagenavi) li {
    width: 100%;
    max-width: 320px;            /* 画像の最大幅（スマホ等で見やすいサイズ） */
    text-align: center;          /* キャプションを中央に */
}

/* 画像の正方形トリミング */
.box1.photo ul:not(.wp-pagenavi) img {
    width: 100%;                 /* 指定した幅いっぱいに */
    aspect-ratio: 1 / 1;         /* 正方形比率（幅と同じ高さにする） */
    object-fit: cover;           /* 枠いっぱいに表示し、はみ出た部分をカット */
    object-position: center;     /* 中央を基準に表示 */
    
    border-radius: 12px;         /* 角を少し丸く */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* ふんわり影をつけて写真を際立たせる */
    vertical-align: bottom;
}

/* キャプション（pタグ） */
.box1.photo ul:not(.wp-pagenavi) p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}


/* -------------------------------------------------- */
/* 3. ページャー（.wp-pagenavi）のデザイン修正版 */
/* -------------------------------------------------- */
.box1.photo .wp-pagenavi {
    margin-top: 60px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* * 【ポイント】
 * まず li 自体を「無効（押せない）ボタン」としてスタイリングします。
 * リンクがない「<Prev」などはこのスタイルで表示されます。
 */
.box1.photo .wp-pagenavi li {
    display: flex;
    justify-content: center;
    align-items: center;
    
    min-width: 44px;             /* ボタンの最小幅 */
    height: 44px;                /* 高さ */
    padding: 0 16px;             /* 内側の余白 */
    box-sizing: border-box;      /* 線を含めたサイズ計算 */
    
    /* ▼無効状態（リンクなし）のデザイン */
    background-color: #f5f5f5;   /* 背景：薄いグレー */
    color: #ccc;                 /* 文字：濃いグレー */
    border: 1px solid #ddd;      /* 枠線：薄いグレー */
    border-radius: 6px;          
    
    font-weight: bold;
    font-size: 14px;
}

/* * リンク（aタグ）がある場合は、親の li のスタイルを上書きします。
 * ネガティブマージンを使って li の余白分までエリアを広げます。
 */
.box1.photo .wp-pagenavi li a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 親(li)のpaddingとborderを打ち消して全面に広げる計算 */
    width: calc(100% + 32px);    /* 左右padding(16px*2)分広げる */
    height: calc(100% + 2px);    /* 上下border(1px*2)分広げる */
    margin: -1px -16px;          /* 外側に広げて親の枠線に重ねる */
    
    background-color: #fff;      /* 有効時は白背景 */
    color: #555;                 /* 有効時の文字色 */
    border: 1px solid #ddd;      /* 枠線 */
    border-radius: 6px;
    text-decoration: none;
    
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ホバー時（マウスを乗せたとき） */
.box1.photo .wp-pagenavi li a:hover {
    background-color: #72B7B2;   /* テーマカラー */
    color: #fff;
    border-color: #72B7B2;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(114, 183, 178, 0.4);
    
    /* z-indexを上げて隣の要素と重なっても綺麗に見えるようにする */
    position: relative; 
    z-index: 1;
}

/* -------------------------------------------------- */
/* 3. ページャー（.wp-pagenavi）のデザイン修正版 */
/* -------------------------------------------------- */
.news .wp-pagenavi {
    margin-top: 60px;
    margin-bottom: 40px;
	margin-right: 3em !important;
	margin-left: auto !important;
    display: flex;
    justify-content: center !important;
    gap: 10px;
	/*border: 1px solid #CCC;*/
	
}

/* * 【ポイント】
 * まず li 自体を「無効（押せない）ボタン」としてスタイリングします。
 * リンクがない「<Prev」などはこのスタイルで表示されます。
 */
.news .wp-pagenavi li {
    display: flex;
    justify-content: center;
    align-items: center;
    
    min-width: 44px;             /* ボタンの最小幅 */
    height: 44px;                /* 高さ */
    padding: 0 16px;             /* 内側の余白 */
    box-sizing: border-box;      /* 線を含めたサイズ計算 */
    
    /* ▼無効状態（リンクなし）のデザイン */
    background-color: #f5f5f5;   /* 背景：薄いグレー */
    color: #ccc;                 /* 文字：濃いグレー */
    border: 1px solid #ddd;      /* 枠線：薄いグレー */
    border-radius: 6px;          
    
    font-weight: bold;
    font-size: 14px;
}

/* * リンク（aタグ）がある場合は、親の li のスタイルを上書きします。
 * ネガティブマージンを使って li の余白分までエリアを広げます。
 */
.news .wp-pagenavi li a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 親(li)のpaddingとborderを打ち消して全面に広げる計算 */
    width: calc(100% + 32px);    /* 左右padding(16px*2)分広げる */
    height: calc(100% + 2px);    /* 上下border(1px*2)分広げる */
    margin: -1px -16px;          /* 外側に広げて親の枠線に重ねる */
    
    background-color: #fff;      /* 有効時は白背景 */
    color: #555;                 /* 有効時の文字色 */
    border: 1px solid #ddd;      /* 枠線 */
    border-radius: 6px;
    text-decoration: none;
    
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ホバー時（マウスを乗せたとき） */
.news .wp-pagenavi li a:hover {
    background-color: #72B7B2;   /* テーマカラー */
    color: #fff;
    border-color: #72B7B2;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(114, 183, 178, 0.4);
    
    /* z-indexを上げて隣の要素と重なっても綺麗に見えるようにする */
    position: relative; 
    z-index: 1;
}


/* -------------------------------------------------- */
/* NEWS一覧時の挙動調整 */
/* -------------------------------------------------- */
.topic-thumbnail {
	margin: 0 !important;
	padding: 0 !important;
}
p.newsboxp {
	border-bottom: 1px solid #CCC;
	margin: 0 !important;
	padding: 0 !important;
	padding-bottom: 1em !important;
}


/* ==================================================
   お問い合わせフォーム モダンデザイン化
   ================================================== */

/* --- 1. フォーム全体の枠組み --- */
.contact7 {
    width: 100%;
    max-width: 800px;       /* フォームの最大幅 */
    margin: 40px auto;      /* 中央寄せ */
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* dl, dt, dd のリセットと基本設定 */
.contact7 dt, 
.contact7 dd {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* --- 2. 項目名（ラベル）のデザイン --- */
.contact7 dt {
    margin-top: 24px;       /* 上の項目との間隔 */
    margin-bottom: 8px;     /* 入力欄との間隔 */
    font-weight: bold;
    font-size: 1.05rem;
    color: #333;
    display: flex;
    align-items: center;
    flex-wrap: wrap;        /* スマホでラベルが長くなっても大丈夫なように */
}

/* 必須・任意ラベルの装飾 */
.contact7 .must,
.contact7 .optional {
    font-size: 12px;
    padding: 3px 8px;
    margin-left: 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: normal;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.contact7 .must {
    background-color: #E86F6F; /* 少し柔らかい赤 */
}
.contact7 .optional {
    background-color: #999;    /* グレー */
}

/* --- 3. 入力フィールド（テキスト・メール・電話・セレクト） --- */
.contact7 input[type="text"],
.contact7 input[type="email"],
.contact7 input[type="tel"],
.contact7 textarea,
.contact7 select {
    width: 100%;
    padding: 14px 16px;     /* 内側の余白を広げてタップしやすく */
    border: 1px solid #ccc;
    border-radius: 6px;     /* 角を少し丸く */
    background-color: #f9f9f9; /* ほんのりグレーの背景（入力エリアを明確化） */
    font-size: 16px;        /* iOSでズームされないサイズ */
    appearance: none;       /* ブラウザのデフォルトスタイルを削除 */
    transition: all 0.3s ease;
    box-sizing: border-box;
    line-height: 1.5;
}

/* 入力中のフォーカスデザイン */
.contact7 input:focus,
.contact7 textarea:focus,
.contact7 select:focus {
    background-color: #fff;
    border-color: #72B7B2;  /* テーマカラーの緑 */
    box-shadow: 0 0 0 3px rgba(114, 183, 178, 0.2); /* ふわっと光る枠 */
    outline: none;
}

/* テキストエリアの高さ */
.contact7 textarea {
    min-height: 200px;
    resize: vertical;       /* 縦方向のみリサイズ許可 */
}

/* --- 4. チェックボックス・ラジオボタンの調整 --- */
.wpcf7-list-item {
    display: inline-block;
    margin: 0 15px 10px 0;  /* 隣との間隔 */
}
.wpcf7-list-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.wpcf7-list-item input {
    transform: scale(1.2);  /* チェックボックスを少し大きく */
    margin-right: 6px;
    cursor: pointer;
}
.wpcf7-list-item-label {
    font-size: 1rem;
}

/* --- 5. 送信ボタンのデザイン --- */
.btn_contact7 {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 60px;
}



/* --- 6. 住所入力欄などの注釈（smallタグ） --- */
.contact7 dt small {
    display: block;
    font-size: 0.85em;
    color: #888;
    margin-top: 4px;
    font-weight: normal;
}

/* --- 7. エラーメッセージの調整 --- */
.wpcf7-not-valid-tip {
    font-size: 0.9em;
    margin-top: 5px;
    color: #E86F6F !important;
    font-weight: bold;
}

/* --- 送信ボタンの画像置換 --- */
.wpcf7-form .btn_contact7 {
    text-align: center; /* ボタンを中央寄せに */
    margin-top: 30px;   /* 必要に応じて上部余白を調整 */
}

.wpcf7-form input.wpcf7-submit {
    display: inline-block;
    border: none;
    background-color: transparent; /* 背景色を透明に */
    
    /* ★画像のパス（実際の画像がある場所へ書き換えてください） */
    background-image: url('../../img/2025/onlineform/bottom_send.jpg'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;      /* 枠内に画像を収める */
    
    /* ★画像のサイズに合わせて調整してください（例：幅300px, 高さ80pxの場合） */
    width: 300px;  
    height: 80px;

    /* テキストを非表示にする設定 */
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* ホバー（マウスオン）時の演出 */
.wpcf7-form input.wpcf7-submit:hover {
    opacity: 0.8; /* 少し薄くする */
}