@charset "utf-8";
:root {
    --ink: #1e2328;
    --sub: #3f4249;
    --line: #e5e7eb;
    --accent: #2f6f4e;
    --accent-soft: #eaf3ee;
    --bg: #fafaf9;
  }
 
  * { box-sizing: border-box; }
 

  .qa-category-title h2 {
    font-size: clamp(1em, 2.5vw, 2.5em);
    margin: 2.5rem 0 0.75rem;
  }
 
  /* カテゴリ一覧(目次) */
  .category-grid {
    display: grid;
    grid-template-columns: 1fr; /* モバイルは1列 */
    gap: 2rem;
    max-width: 1200px;
  }
 
  @media (min-width: 640px) {
    .category-grid {
      grid-template-columns: 1fr 1fr; /* PCは2列で省スペースに */
    }
  }
 
  .category {
    padding: 1.1rem 1.1rem 0.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
 
  .category h3 {
    font-size: 2rem;
    color: var(--sub);
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
  }
 
  .category ul {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
  }
 
  .category li + li {
    border-top: 1px dashed var(--line);
  }
 
  .category a {
    display: block;
    padding: 0.55rem 0.1rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.5rem;
  }
 
  .category a::before {
    content: "Q. ";
    color: var(--accent);
    font-weight: 600;
  }
 
  .category a:hover {
    color: var(--accent);
  }
 
  /*
    ここから下がCMS側の骨組み(.flex-faq > .box×2)に合わせたスタイル。
    .box は1番目=質問、2番目=回答で区別。
    js-accordion-open は開いている状態を表すクラスとしてJSが付け外しする
    (参考サイトと同じく、クリックで付与/削除される想定)。
  */
  .faq-group {
    border-top: 1px solid var(--line);
  }
 
  .flex-faq {
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 150px;
  }
 
  /* 1つ目の.box = 質問(クリックで開閉するトリガー) */
  .flex-faq > .box:first-child {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.1em 0.25em;
    cursor: pointer;
  }
 
  .flex-faq > .box:first-child > div {
    flex: 1;
    font-weight: 600;
    font-size: clamp(0.95em, 1.6vw, 1.05em);
  }
 
  .flex-faq > .box:first-child::before {
    content: "Q";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.85em;
  }
 
  .flex-faq > .box:first-child::after {
    content: "";
    margin-left: auto;
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid var(--sub);
    border-bottom: 2px solid var(--sub);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
 
  .flex-faq.js-accordion-open > .box:first-child::after {
    transform: rotate(-135deg);
  }
 
  .flex-faq.js-accordion-open > .box:first-child > div {
    color: var(--accent);
  }
 
  /* 2つ目の.box = 回答(初期はheight:0、開いたらJSがpxで高さをセット) */
  .flex-faq > .box:last-child {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.25s ease;
  }
 
  .flex-faq.js-accordion-open > .box:last-child {
    opacity: 1;
  }
 
  .flex-faq > .box:last-child > div {
    display: flex;
    gap: 1em;
    padding: 0 0.25em 1.3em 0.25em;
    color: var(--sub);
    font-size: 0.95em;
    flex-direction: column;
    background: #eff;
    }
 
  .flex-faq > .box:last-child > div::before {
    content: "A";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.85em;
    font-weight: 600;
  }
 
  /* 遷移直後に「ここだよ」と伝えるための一瞬のハイライト */
  .flex-faq.is-target > .box:first-child {
    animation: flash 1s ease;
  }
 
  @keyframes flash {
    0% { background: var(--accent-soft); }
    100% { background: transparent; }
  }

b {font-weight:800!important;}
h4 {font-size:1.2em;font-weight:800!important;}
#c2 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c2 h1,
#c2 div {
	text-align: center;
}
#c3 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c6 {
	clear: both;
	margin: 50px auto  ;
	padding:    ;
}
#c12 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c12 h3,
#c12 div {
	text-align: left;
}
#c18 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c18 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c18 ul li { margin-right: px; }
#c18 ul li:last-child { margin-right: 0; }
#c21 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c31 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c31 h3,
#c31 div {
	text-align: left;
}
#c23 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c23 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c23 ul li { margin-right: px; }
#c23 ul li:last-child { margin-right: 0; }
#c28 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c33 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c33 h3,
#c33 div {
	text-align: left;
}
#c30 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c30 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c30 ul li { margin-right: px; }
#c30 ul li:last-child { margin-right: 0; }
#c25 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c32 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c32 h3,
#c32 div {
	text-align: left;
}
#c27 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c27 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c27 ul li { margin-right: px; }
#c27 ul li:last-child { margin-right: 0; }
#c64 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c65 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c65 h3,
#c65 div {
	text-align: left;
}
#c66 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c66 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c66 ul li { margin-right: px; }
#c66 ul li:last-child { margin-right: 0; }
#c61 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c62 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c62 h3,
#c62 div {
	text-align: left;
}
#c63 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c63 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c63 ul li { margin-right: px; }
#c63 ul li:last-child { margin-right: 0; }
#c58 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c59 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c59 h3,
#c59 div {
	text-align: left;
}
#c60 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c60 ul li {
	width: 100%;
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c60 ul li { margin-right: px; }
#c60 ul li:last-child { margin-right: 0; }
#c24 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c39 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c39 h2,
#c39 div {
	text-align: left;
}
#c37 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c34 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c34 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c34 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c35 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c35 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c35 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c36 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c36 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c36 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c67 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c67 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c67 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c38 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c52 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c52 h2,
#c52 div {
	text-align: left;
}
#c53 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c54 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c54 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c54 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c55 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c55 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c55 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c56 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c56 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c56 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c57 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c46 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c46 h2,
#c46 div {
	text-align: left;
}
#c47 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c48 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c48 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c48 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c49 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c49 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c49 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c51 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c40 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c40 h2,
#c40 div {
	text-align: left;
}
#c41 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c42 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c42 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c42 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c43 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c43 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c43 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c45 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c78 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c78 h2,
#c78 div {
	text-align: left;
}
#c79 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c80 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c80 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c80 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c81 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c81 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c81 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c82 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c73 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c73 h2,
#c73 div {
	text-align: left;
}
#c74 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c75 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c75 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c75 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c76 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c76 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c76 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c77 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c68 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c68 h2,
#c68 div {
	text-align: left;
}
#c69 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c70 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c70 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c70 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c71 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c71 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c71 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c83 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c83 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c83 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c72 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c84 {
	clear: both;
	background-color: #3baafe66;
	margin: 20px auto  ;
	padding: 10px   ;
}
#c84 h3,
#c84 div {
	text-align: center;
}
#c85 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c86 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c86 h2,
#c86 div {
	text-align: center;
}
#c87 {
	clear: both;
	margin: 20px 0 0 0;
	padding:    ;
}
#c87 h3,
#c87 div {
	text-align: center;
}
#c88 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c17 {
	clear: both;
	display: none;
	margin:    ;
	padding:    ;
}
@media screen and (min-width: 469px) and (max-width: 768px) {
#c2 {
}
#c3 {
}
#c6 {
}
#c12 {
}
#c18 {
}
#c21 {
}
#c31 {
}
#c23 {
}
#c28 {
}
#c33 {
}
#c30 {
}
#c25 {
}
#c32 {
}
#c27 {
}
#c64 {
}
#c65 {
}
#c66 {
}
#c61 {
}
#c62 {
}
#c63 {
}
#c58 {
}
#c59 {
}
#c60 {
}
#c24 {
}
#c39 {
}
#c37 {
}
#c34 {
}
#c34 {
}
#c35 {
}
#c35 {
}
#c36 {
}
#c36 {
}
#c67 {
}
#c67 {
}
#c38 {
}
#c52 {
}
#c53 {
}
#c54 {
}
#c54 {
}
#c55 {
}
#c55 {
}
#c56 {
}
#c56 {
}
#c57 {
}
#c46 {
}
#c47 {
}
#c48 {
}
#c48 {
}
#c49 {
}
#c49 {
}
#c51 {
}
#c40 {
}
#c41 {
}
#c42 {
}
#c42 {
}
#c43 {
}
#c43 {
}
#c45 {
}
#c78 {
}
#c79 {
}
#c80 {
}
#c80 {
}
#c81 {
}
#c81 {
}
#c82 {
}
#c73 {
}
#c74 {
}
#c75 {
}
#c75 {
}
#c76 {
}
#c76 {
}
#c77 {
}
#c68 {
}
#c69 {
}
#c70 {
}
#c70 {
}
#c71 {
}
#c71 {
}
#c83 {
}
#c83 {
}
#c72 {
}
#c84 {
}
#c85 {
}
#c86 {
}
#c87 {
}
#c88 {
}
#c17 {
	display: none;
}
}
@media screen and (max-width: 468px) {
#c2 {
}
#c3 {
}
#c6 {
}
#c12 {
}
#c18 {
}
#c21 {
}
#c31 {
}
#c23 {
}
#c28 {
}
#c33 {
}
#c30 {
}
#c25 {
}
#c32 {
}
#c27 {
}
#c64 {
}
#c65 {
}
#c66 {
}
#c61 {
}
#c62 {
}
#c63 {
}
#c58 {
}
#c59 {
}
#c60 {
}
#c24 {
}
#c39 {
}
#c37 {
}
#c34 {
}
#c34 {
}
#c35 {
}
#c35 {
}
#c36 {
}
#c36 {
}
#c67 {
}
#c67 {
}
#c38 {
}
#c52 {
}
#c53 {
}
#c54 {
}
#c54 {
}
#c55 {
}
#c55 {
}
#c56 {
}
#c56 {
}
#c57 {
}
#c46 {
}
#c47 {
}
#c48 {
}
#c48 {
}
#c49 {
}
#c49 {
}
#c51 {
}
#c40 {
}
#c41 {
}
#c42 {
}
#c42 {
}
#c43 {
}
#c43 {
}
#c45 {
}
#c78 {
}
#c79 {
}
#c80 {
}
#c80 {
}
#c81 {
}
#c81 {
}
#c82 {
}
#c73 {
}
#c74 {
}
#c75 {
}
#c75 {
}
#c76 {
}
#c76 {
}
#c77 {
}
#c68 {
}
#c69 {
}
#c70 {
}
#c70 {
}
#c71 {
}
#c71 {
}
#c83 {
}
#c83 {
}
#c72 {
}
#c84 {
}
#c85 {
}
#c86 {
}
#c87 {
}
#c88 {
}
#c17 {
	display: none;
}
}