@charset "utf-8";
/* ================================================================================
汎用
================================================================================ */

/* カラーパレット */
:root { 
--main:#34951a;
--sub:#e5f1e4;
--bg:#f4f5f7;
--wh:#fff;
--gray:#ddd;
}

/* フォント */
html, h1, h2, h3, h4, h5, h6, button, input, tr, td, dt, dd, p, li { color:var(--txt); font-family:"Noto Sans JP", sans-serif; font-optical-sizing:auto; }

/* 背景色 */
html { background-color:var(--bg); }

/* メインコンテンツ装飾 */
body { border-top:5px solid var(--main); box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; height:100%; }
body main { flex:1; }

/* ================================================================================
ヘッダー
================================================================================ */

/* ヘッダ */
header h1 img { box-sizing:border-box; padding:7.5px 5px; height:auto; max-width:175px; width:50%; }
header h1 span.flex { justify-content:space-between; align-items:flex-end; }
header h2 { font-size:24px; font-weight:600; background-color:var(--sub); padding:50px 10px; margin:5px 0 10px 0; }

@container( min-width:960px ) { /* PC版記述 */

/* ヘッダー */
header h1 { margin:auto; width:90%; max-width:1200px; }
header h1 img { padding:0; max-width:225px; width:auto; }

}

/* ================================================================================
メイン
================================================================================ */

/* お役立ち機能ボタン */
.button-convenient a { position:relative; display:flex; justify-content:space-around; align-items:center; margin:0 10px 20px auto; max-width:230px; padding:10px 0px 10px 25px; line-height:1.8; text-decoration:none; transition:0.3s ease-in-out; font-weight:500; }
.button-convenient a:before, .button-convenient a:after { content:""; display:block; position:absolute; top:50%; }
.button-convenient a:before { border-top:solid 2px #333; border-right:solid 2px #333; left:1.1rem; transform:translateY(-50%) rotate(45deg); transition:all 0.3s; height:0.5rem;width:0.5rem; z-index:2; }
.button-convenient a:after { left:0; background:var(--sub); z-index:1; width:3rem; height:3rem; border-radius:4rem; transform:translateY(-50%); transition:all 0.5s; }
.button-convenient a span { position:relative; transition:all 0.3s; z-index:3; }
.button-convenient a:hover span { color:#fff; }
.button-convenient a:hover:before { left:2.5rem; border-top:solid 2px #fff; border-right:solid 2px #fff; }
.button-convenient a:hover:after { right:0; width:100%; background:var(--main); }

/* リスト */
ul.shiryo-list { border-top:1px solid rgba(52,149,26,0.5); justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin:0 0 20px 0; }
ul.shiryo-list li { aspect-ratio:1/1; list-style:none; height:auto; width:50%; }
ul.shiryo-list li a { box-sizing:border-box; border-bottom:1px solid rgba(52,149,26,0.5); border-right:1px solid rgba(52,149,26,0.5); display:flex; justify-content:center; align-items:center; overflow:hidden; position:relative; height:100%; width:100%; z-index:1; }
ul.shiryo-list li a:link, ul.shiryo-list li a:visited { transition:.1s; }
ul.shiryo-list li a:active, ul.shiryo-list li a:hover { background-color:rgba(52,149,26,0.05); transition:.1s; }
ul.shiryo-list li a img { aspect-ratio:100/141; border:1px solid var(--gray); box-sizing:border-box; object-fit:contain; overflow:hidden; transform-origin:center center; transform:translateY(-10px);  margin:auto; height:auto; max-width:60px; width:100%; }
ul.shiryo-list li a p { background-color:var(--main); color:var(--wh); padding:5px 10px; position:absolute; bottom:0; left:0; width:100%; }

.pager-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 30px auto;
}

.pager-nav li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: var(--main, #2cb4ad);
  color:var(--wh);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.pager-nav li a:hover { background-color:#228f88; }
.arrow { height:1em; width:1em; }
ul.mokuji-list .arrow { height:24px; width:24px; }
.prev .arrow { order: -1; }
.next .arrow { order:1; }

@media (max-width: 480px) {

.pager-nav { align-items:center; gap:12px; }

}

/* 目次リスト */
ul.mokuji-list { border-top:1px solid var(--main); }
ul.mokuji-list li { border-bottom:1px solid var(--main); box-sizing:border-box; width:100%; }
ul.mokuji-list li a { justify-content:flex-start; align-items:center; padding:10px; }
ul.mokuji-list li a:link, ul.mokuji-list li a:visited { transition:.3s; }
ul.mokuji-list li a:active, ul.mokuji-list li a:hover { background-color:rgba(52,149,26,0.1); transition:.3s; }
ul.mokuji-list li a div.mokuji-thumb { aspect-ratio:1/1; border:1px solid rgba(52,149,26,0.5); box-sizing:border-box; overflow:hidden; margin-right:10px; width:60px; }
ul.mokuji-list li a div.mokuji-thumb img { object-fit:cover; object-position:top center; max-width:100%; }
ul.mokuji-list li a p.mokuji-txt { font-size:16px; justify-content:space-between; align-items:center; width:calc( 100% - 60px ); }
ul.mokuji-list li a p.mokuji-txt svg { stroke:var(--main); }

/* 画像 */
div.ph-area { aspect-ratio:16/9; background-color:rgba(0,0,0,0.025); border:1px solid #ddd; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; position:relative; margin:10px auto; max-width:100%; }
div.ph-area img { max-width:100%; }

/* キャプション */
.ph-area .ph-caption { position:absolute; bottom:5px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.6); color:#fff; font-size:14px; padding:4px 10px; border-radius:5px; pointer-events:none; white-space:nowrap; }

/* モーダル全体 */
.img-modal { display:none; position:fixed; z-index:999; padding:40px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.9); box-sizing:border-box; }

/* 拡大画像 */
.modal-content { margin:auto; display:block; max-width:90%; max-height:80vh; border:4px solid #fff; border-radius:8px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

/* 閉じるボタン */
.close-modal { position:absolute; top:20px; right:30px; color:#fff; font-size:32px; font-weight:bold; cursor:pointer; }

@container( max-width:767px )  { /* 右端のボーダーを消す処理 */

/* リスト */
ul.shiryo-list li:nth-child(even) a { border-right:none; }

}

@container(min-width: 768px) and (max-width: 960px)  { /* 右端のボーダーを消す処理 */

/* リスト */
ul.shiryo-list li { width:33.3%; }
ul.shiryo-list li:nth-child(3n) a { border-right:none; }
ul.shiryo-list li a img { transform:translateY(-10px); max-width:80px; }

/* 目次リスト */
ul.mokuji-list { border-right:1px solid var(--main); border-left:1px solid var(--main); margin:auto; max-width:90%; }
ul.mokuji-list li { list-style:none; }

}

@container( min-width:960px ) { /* PC版記述 */

/* お役立ち機能ボタン */
.button-convenient a { margin:0 10px 20px auto; max-width:260px; }

/* リスト */
ul.shiryo-list { margin:0 0 60px 0; }
ul.shiryo-list li { width:25%; }
ul.shiryo-list li:nth-child(4n) a { border-right:none; }
ul.shiryo-list li a img { transform:translateY(0); transition:.1s; max-width:none; height:auto; width:100px; }
ul.shiryo-list li a:hover img { transition:.1s; height:auto; width:120px; }
ul.shiryo-list li a p { bottom:-50px; transition:.1s; }
ul.shiryo-list li a:hover p { bottom:0; transition:.1s; }

/* 目次リスト */
ul.mokuji-list { border-right:1px solid var(--main); border-left:1px solid var(--main); margin:auto; max-width:1000px; }
ul.mokuji-list li { list-style:none; }

/* キャプション */
.ph-area .ph-caption { bottom:12.5px; }

}

/* ================================================================================
お役立ち機能紹介ページ用
================================================================================ */

/* 全体 */
main.helpful-content article { padding:20px 0; margin:auto; max-width:90%; }
main.helpful-content article section, main.helpful-content article nav.helpful-mokuji { margin-bottom:30px; }
.nmb01::before, .nmb02::before, .nmb03::before, .nmb04::before, .nmb05::before, .annotation::before { margin-right:2px; }
.nmb01, .nmb02, .nmb03, .nmb04, .nmb05, .annotation { text-indent:calc( -1rem + -2px ); padding-left:calc( 1rem + 2px ); }
.annotation::before { content:'※'; }

/* 見出し */
article h1, article h2 {  font-weight:600; margin-bottom:10px; }
article h1 { color:var(--main); font-size:24px; }
article h2 { font-size:18px; }

/* ページ内ナビ */
main.helpful-content article nav.helpful-mokuji { background-color:var(--sub); border-radius:10px; padding:15px 20px; }

/* テキスト */
article p { text-align:justify; line-height:1.8; }

/* リスト */
article ul li { list-style:none; line-height:1.8; }
.nmb01::before { content:'①'; }
.nmb02::before { content:'②'; }
.nmb03::before { content:'③'; }
.nmb04::before { content:'④'; }
.nmb05::before { content:'⑤'; }

@container(min-width: 768px) and (max-width: 960px)  { /* タブレット版表示 */

/* 全体 */
main.helpful-content article { max-width:80%; }

}

@container( min-width:960px ) { /* PC版記述 */

/* 全体 */
main.helpful-content article { width:100%; max-width:1000px; }

}


/* ================================================================================
フッタ
================================================================================ */

/* フッタ全体 */
footer { background-color:var(--main); color:var(--wh); padding:10px; }

/* コピーライト */
footer p.copy { font-size:12px; text-align:center; }


/* Google風検索コンポーネント全体 */
.google-like-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
  max-width: 480px;
  font-family: "Noto Sans JP", Arial, sans-serif;
}

/* 検索ボックスの外観（Google風） */
.google-like-search .gsc-control-cse {
  background: transparent;
  border: none;
  padding: 0;
}

.google-like-search .gsc-control-wrapper-cse {
  width: 100%;
}

/* 入力フィールド部 */
.google-like-search .gsc-input-box {
  display: flex !important;
  align-items: center;
  width: 100%;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  padding: 8px 14px;
  transition: box-shadow 0.2s ease;
  background: #fff;
}

.google-like-search .gsc-input-box:hover {
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}

/* 入力フォーム */
.google-like-search input.gsc-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  font-size: 15px;
  padding: 6px;
  background: none !important;
  box-shadow: none !important;
}

/* 検索アイコンの置き換え */
.google-like-search .gsc-search-button-v2 {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 8px;
  cursor: pointer;
}

/* アイコンをSVG風に統一 */
.google-like-search .gsc-search-button-v2 svg {
  width: 18px;
  height: 18px;
  fill: #5f6368;
}

/* Google提供のボタンを隠す（下の自作ボタンを使用） */
.google-like-search .gsc-search-button-v2,
.google-like-search .gsc-clear-button {
  display: none !important;
}

/* 自作ボタン群 */
.google-like-search .buttons {
  margin-top: 16px;
  text-align: center;
}

.google-like-search .buttons button {
  background: var(--main);
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: var(--wh);
  padding: 6px 14px;
  margin: 0 4px;
  font-size: 13px;
  cursor: pointer;
}

.google-like-search .buttons button:hover {
  border: 1px solid #dadce0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}