@charset "utf-8";
/* CSS Document */

:root {
  --color-bk:   #000;    
  --color-back: #EEE; /* back */
  --color-gy1:  #3B3B3B;
  --color-gy2:  #7D7D7D;
  --m-l: 150px;
  --m-m: 100px;
  --m-ms: 75px;
  --m-s:  50px;
  --m-ss: 30px;
  --m-sss:15px;
  --fontsize-l3: 3.8rem;
  --fontsize-l2: 3.0rem;
  --fontsize-l:  2.4rem;
  --fontsize-m:  1.8rem;
  --fontsize-s:  1.6rem;
  --fontsize-s2: 1.4rem;
  --fontsize-s3: 1.2rem;
}
@media screen and (max-width: 799px) {
  :root {
    --m-l:  80px;
    --m-m:  50px;
    --m-ms: 38px;
    --m-s:  25px;
    --m-ss: 15px;
    --m-sss: 8px;
  --fontsize-l3: 2.4rem;
  --fontsize-l2: 2.0rem;
  --fontsize-l:  1.7rem;
  --fontsize-m:  1.4rem;
  --fontsize-s:  1.2rem;
  --fontsize-s2: 1.1rem;
  --fontsize-s3: 1.0rem;
  }
}

/*

docbox1

*/

.docbox1 p{ margin-top: 1em;}
.docbox1 > p:first-child{ margin-top: 0;}
.docbox1 p a:not(:has(img)){ border-bottom: 1px dotted #AAA; margin-bottom: -1px;}
.docbox1 h1{ font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 3.6rem; line-height: 1.2; color: var(--color-gy1); text-align: center; margin-top: var(--m-s); margin-bottom: 1.5em;}
.docbox1 h2{ font-size: 3.6rem; font-family: "Noto Serif JP", serif; font-weight: 700; text-align: center; margin-top: var(--m-s); margin-bottom: 1.5em;}
/*.docbox1 h2{ font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 2.8rem; line-height: 1.2; padding: 1.5em 0 0 1em; border-left: 2px solid var(--color-gy1); color: var(--color-gy1); margin-top: var(--m-s); margin-bottom: 1.5em;}*/
.docbox1 h3{ margin-top: var(--m-s); color: #000; font-size: 2.2rem; font-weight: 600; padding-left: 2.5em; position: relative;}
.docbox1 h3::before{ position: absolute; content: ""; width: 1.5em; height: 2px; top: 50%; left: 0; background-color: var(--color-gy1);}
.docbox1 h4{ margin-top: var(--m-s); color: var(--color-gy1); font-size: 2.2rem; font-weight: 600; border-top: 1px solid var(--color-gy1); border-bottom: 1px solid var(--color-gy1); padding: 5px 0;}
.docbox1 h5{ margin-top: 1em; color: var(--color-gy1); font-size: 2.0rem; font-weight: 600;  border: 1px solid var(--color-gy1); padding: 5px 1em; background-color: rgba(255,255,255,1.0);}
.docbox1 h6{ margin-top: 1em; font-size: 2.0rem; font-weight: 600;}
.docbox1 ul{ margin-top: 1em; list-style: disc; margin-left: 1.5em;}
.docbox1 ol{ margin-top: 1em; list-style: none; counter-reset: number;}
.docbox1 ul li,.docbox1 ol li{ margin-top: 0.3em; position: relative;}
.docbox1 ul li::marker,.docbox1 ol li::marker{ color: var(--color-gy1);}
.docbox1 ol li::before{ counter-increment: number; content: counter(number)'.'; color: var(--color-gy2); font-weight: 600; margin-right: 10px;}
.docbox1 > table{ width: 100%; margin-top: 1em;}
.docbox1 > table th,.docbox1 > table td{ border-top: 1px solid var(--color-gy1); border-bottom: 1px solid var(--color-gy1); font-size: var(--fontsize-m); line-height: 1.8;}
.docbox1 > table th{ padding: 1em 3em 1em 0; font-weight: 600; white-space: nowrap; text-align: left; vertical-align: top;}
.docbox1 > table td{ padding: 1em 0 1em 0; text-align: left; vertical-align: top;}
.docbox1 > table th > p:first-child,.docbox1 > table td > p:first-child{ margin-top: 0;}
.docbox1img2{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1em;}
.docbox1img2 img{ display: block; width: calc(100% / 2); padding: 1px;}
@media screen and (max-width: 799px) {
  .docbox1 h2{ font-size: 2.4rem;}
  /*.docbox1 h2{ font-size: 2.2rem; padding: 1.5em 0 0 1em; border-left: 2px solid var(--color-gy1);}*/
  .docbox1 h3{ font-size: 1.8rem; padding-left: 2em;}
  .docbox1 h4{ font-size: 1.8rem; padding: 3px 0;}
  .docbox1 h5{ font-size: 1.6rem; padding: 3px 1em;}
  .docbox1 h6{ font-size: 1.6rem;}
  .docbox1img2 img{ display: block; width: calc(100% / 2); padding: 1px;}
}
@media screen and (max-width: 640px) {
  .docbox1 > table th,.docbox1 > table td{ display: block; border: none;}
  .docbox1 > table th{ padding: 0.5em 1em 0.5em 1em; font-weight: 600; white-space: inherit; text-align: center; border-bottom: 1px solid #888;}
  .docbox1 > table td{ padding: 1em 0 2em 0;}
}
@media screen and (max-width: 480px) {
  .docbox1img2 img{ display: block; width: 100%; padding: 1px;}
}

/*.mt-be-columns{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 0; column-gap: 0!important; }
.mt-be-column{ width: 50%; margin: 0 0;}
.mt-be-column p{ width: 100%; padding: 1px;}
@media screen and (max-width: 480px) {
  .mt-be-column{ width: 100%;}
}*/
.mt-be-columns{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 0; column-gap: 0!important; }
.mt-be-column{ width: 50%; margin: 0 0 1.5em 0; }
.mt-be-column p,.mt-be-column h2,.mt-be-column h3,.mt-be-column h4,.mt-be-column h5,.mt-be-column h6{ width: 90%; margin-right: auto; padding: 1px; margin-top: 0.5em;}
.mt-be-column p:has(img),.mt-be-column :has(img){ width: 100%; margin-right: 0; padding: 1.5em 1px 1px 1px;}
@media screen and (max-width: 480px) {
  .mt-be-column{ width: 100%;}
}

/*

text box

*/

.textbox p{ font-size: var(--fontsize-s); line-height: 1.6; padding: 0.3em;}
.textbox strong,
.textbox b{ font-weight: 700;}
.textbox table{ width: 100%;}
.textbox table th,
.textbox table td{ padding: 1em 2em; font-size: var(--fontsize-s); line-height: 1.6; }
.textbox table th{ background-color: rgba(0,98,48,0.10); border: 1px solid rgba(0,98,48,0.20); white-space: nowrap;}
.textbox table td{ background-color: rgba(255,255,255,0.49); border: 1px solid rgba(0,98,48,0.20);}
.textbox h4{ font-size: var(--fontsize-l); font-weight: 600; border-left: 2px solid var(--color-base); padding: 16px 0 16px 10px; margin: var(--m-ss) 0 var(--m-sss) 0;}
.textbox h5{ font-size: var(--fontsize-m); font-weight: 600; border-bottom: 1px solid var(--color-base); margin: var(--m-ss) 0 var(--m-sss) 0;}
.textbox h6{ font-size: var(--fontsize-s); font-weight: 600; margin: var(--m-ss) 0 var(--m-sss) 0;}
.textbox p,
.textbox ul,
.textbox ol{ margin-bottom: 0.5em;}
.textbox ul > li{ list-style: disc; margin-left: 2em; font-size: var(--fontsize-s); line-height: 1.6;}
.textbox ul > li > ul > li{ list-style: circle; margin-left: 2em; font-size: var(--fontsize-s); line-height: 1.6;}
.textbox ul > li > ul > li >ul > li{ list-style: square; margin-left: 2em; font-size: var(--fontsize-s); line-height: 1.6;}
.textbox ol li{ list-style: decimal; margin-left: 2em; padding-left: 0.3em; font-size: var(--fontsize-s); line-height: 1.6;}
@media screen and (max-width: 799px) {
  .textbox table th,
  .textbox table td{ padding: 0.6em 0.6em;}
}
@media screen and (max-width: 499px) {
  .textbox table th{ white-space: normal;}
}